Feat/onboarding wizard (#2086)

* feat(web): add onboarding wizard for guided bot creation

Implement a full-screen 4-step wizard at /wizard that guides users
through selecting a platform, configuring a bot, choosing an AI engine,
and completing setup. The wizard uses DynamicFormComponent for adapter
and pipeline configuration, embeds BotLogListComponent for real-time
debugging, persists state to localStorage, and integrates with Space
OAuth flow. Also fixes a prompt-editor crash in DynamicFormComponent
when value is undefined.

* feat(wizard): redesign step 0/1 flow, add skip dialog, auto-expand log images

- Step 0: Remove bot name/description fields; auto-derive name from adapter
  label; create disabled bot on confirm; advance to Step 1 automatically
- Step 1: Replace 'Create Bot' with 'Save & Enable Bot'; update adapter
  config and enable bot; disable form fields after saving
- Add skip confirmation AlertDialog with i18n message
- Add LanguageSelector to wizard header
- Move wizard sidebar entry to last position to prevent fallback redirect loop
- Add defaultExpanded prop to BotLogCard; auto-expand entries with images
  in wizard via autoExpandImages prop on BotLogListComponent
- Remove automatic default pipeline creation (write_default_pipeline) from
  backend persistence manager since the wizard now handles pipeline creation
- Update all 4 locale files (en-US, zh-Hans, zh-Hant, ja-JP)

* fix(wizard): hide detailed logs link in wizard, allow re-editing bot config after save

- Add hideDetailedLogsLink prop to BotLogListComponent; pass it in wizard
- Remove isEditing on DynamicFormComponent so form stays editable after save
- Always show save button; label changes to 'Re-save' after first save
- Add resaveBot i18n key to all 4 locale files

* style(wizard): move save button into config card header

* fix(wizard): initialize userInfo/systemInfo so model selector works

The wizard runs outside /home layout, so userInfo was null. This caused
the model-fallback-selector to filter out all Space models, showing an
empty dropdown. Fix by calling initializeUserInfo() and
initializeSystemInfo() before fetching wizard data.

Also:
- Hide log toolbar in wizard via hideToolbar prop on BotLogListComponent
- Add empty state message for bot logs (noLogs i18n key, all 4 locales)

* feat(wizard): redesign AI Engine step with left-right split layout

Before selecting a runner: centered grid of runner cards.
After selecting: left panel shows compact runner list for switching,
right panel shows runner config form with slide-in animations.

Also fix prompt field default: add default value to prompt-editor field
in ai.yaml metadata so the prompt is pre-populated with
'You are a helpful assistant.' instead of being empty.

* feat(pipeline): add default values to ai.yaml runner configs and show_if for n8n auth fields

- Sync default values from default-pipeline-config.json to all runner
  config fields in ai.yaml so wizard forms are pre-populated
- Add show_if conditions to n8n-service-api auth fields so only the
  relevant credentials appear based on selected auth-type
- Fix prompt-editor crash in DynamicFormItemComponent when field.value
  is undefined (Array.isArray guard + fallback)
- Improve wizard Step 2 split layout with fixed column widths,
  independent scroll, ring clipping fix, and mobile responsiveness
- Use key={selected} on DynamicFormComponent to force remount on
  runner switch
- Improve pipeline creation flow: create → fetch defaults → merge AI
  section → update (preserves trigger/safety/output defaults)

* feat(dynamic-form): add systemContext prop with __system.* namespace for show_if conditions

- Add systemContext prop to DynamicFormComponent for injecting external
  variables accessible via __system.* prefix in show_if conditions
- Extract resolveShowIfValue() helper for cleaner field resolution
- Pass { is_wizard: true } from wizard to hide knowledge-bases field
- Remove bot config save toast in wizard (keep inline indicator)

* feat(sidebar): render wizard as standalone item before Home group with fallback redirect fix

* fix(wizard): remove unused setBotDescription to fix lint error

web/src/app/auth/space/callback/page.tsx

@@ -46,8 +46,12 @@ function SpaceOAuthCallbackContent() {
         }
         setStatus('success');
         toast.success(t('common.spaceLoginSuccess'));
+
+        // If wizard state exists, redirect back to wizard instead of home
+        const wizardState = localStorage.getItem('langbot_wizard_state');
+        const redirectTo = wizardState ? '/wizard' : '/home';
         setTimeout(() => {
-          router.push('/home');
+          router.push(redirectTo);
         }, 1000);
       } catch (err) {
         setStatus('error');

web/src/app/home/bots/components/bot-log/view/BotLogCard.tsx

@@ -19,11 +19,17 @@ const LEVEL_STYLES: Record<string, string> = {
 
 const SHORT_TEXT_LIMIT = 120;
 
-export function BotLogCard({ botLog }: { botLog: BotLog }) {
+export function BotLogCard({
+  botLog,
+  defaultExpanded = false,
+}: {
+  botLog: BotLog;
+  defaultExpanded?: boolean;
+}) {
   const { t } = useTranslation();
   const baseURL = httpClient.getBaseUrl();
   const [copied, setCopied] = useState(false);
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState(defaultExpanded);
 
   function copySessionId() {
     const text = botLog.message_session_id;

web/src/app/home/bots/components/bot-log/view/BotLogListComponent.tsx

@@ -17,7 +17,20 @@ import { debounce } from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useRouter } from 'next/navigation';
 
-export function BotLogListComponent({ botId }: { botId: string }) {
+export function BotLogListComponent({
+  botId,
+  autoExpandImages = false,
+  hideDetailedLogsLink = false,
+  hideToolbar = false,
+}: {
+  botId: string;
+  /** When true, log entries with images are rendered expanded by default */
+  autoExpandImages?: boolean;
+  /** When true, hides the "View Detailed Logs" navigation button */
+  hideDetailedLogsLink?: boolean;
+  /** When true, hides the entire toolbar (auto-refresh, level filter, detailed logs link) */
+  hideToolbar?: boolean;
+}) {
   const { t } = useTranslation();
   const router = useRouter();
   const manager = useRef(new BotLogManager(botId)).current;
@@ -158,77 +171,91 @@ export function BotLogListComponent({ botId }: { botId: string }) {
       ref={listContainerRef}
     >
       {/* Toolbar */}
-      <div className="flex items-center gap-3 pb-3 shrink-0 flex-wrap">
-        {/* Auto-refresh toggle */}
-        <div className="flex items-center gap-1.5">
-          <span className="text-sm text-muted-foreground">
-            {t('bots.enableAutoRefresh')}
-          </span>
-          <Switch
-            checked={autoFlush}
-            onCheckedChange={(v) => setAutoFlush(v)}
-          />
-        </div>
+      {!hideToolbar && (
+        <div className="flex items-center gap-3 pb-3 shrink-0 flex-wrap">
+          {/* Auto-refresh toggle */}
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm text-muted-foreground">
+              {t('bots.enableAutoRefresh')}
+            </span>
+            <Switch
+              checked={autoFlush}
+              onCheckedChange={(v) => setAutoFlush(v)}
+            />
+          </div>
 
-        {/* Level filter */}
-        <div className="flex items-center gap-1.5">
-          <span className="text-sm text-muted-foreground">
-            {t('bots.logLevel')}
-          </span>
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button
-                variant="outline"
-                size="sm"
-                className="w-[160px] justify-between"
-              >
-                <span className="text-sm truncate">{getDisplayText()}</span>
-                <ChevronDownIcon className="size-3.5 shrink-0 opacity-50" />
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-[160px] p-2">
-              <div className="flex flex-col gap-2">
-                {logLevels.map((level) => (
-                  <div
-                    key={level.value}
-                    className="flex items-center space-x-2"
-                  >
-                    <Checkbox
-                      id={level.value}
-                      checked={selectedLevels.includes(level.value)}
-                      onCheckedChange={() => handleLevelToggle(level.value)}
-                    />
-                    <label
-                      htmlFor={level.value}
-                      className="text-sm font-medium leading-none cursor-pointer"
+          {/* Level filter */}
+          <div className="flex items-center gap-1.5">
+            <span className="text-sm text-muted-foreground">
+              {t('bots.logLevel')}
+            </span>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-[160px] justify-between"
+                >
+                  <span className="text-sm truncate">{getDisplayText()}</span>
+                  <ChevronDownIcon className="size-3.5 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-[160px] p-2">
+                <div className="flex flex-col gap-2">
+                  {logLevels.map((level) => (
+                    <div
+                      key={level.value}
+                      className="flex items-center space-x-2"
                     >
-                      {level.label}
-                    </label>
-                  </div>
-                ))}
-              </div>
-            </PopoverContent>
-          </Popover>
-        </div>
+                      <Checkbox
+                        id={level.value}
+                        checked={selectedLevels.includes(level.value)}
+                        onCheckedChange={() => handleLevelToggle(level.value)}
+                      />
+                      <label
+                        htmlFor={level.value}
+                        className="text-sm font-medium leading-none cursor-pointer"
+                      >
+                        {level.label}
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
 
-        {/* Link to detailed logs */}
-        <Button
-          variant="outline"
-          size="sm"
-          className="gap-1"
-          onClick={() => router.push(`/home/monitoring?botId=${botId}`)}
-        >
-          <ExternalLink className="size-3.5" />
-          <span className="text-sm">{t('bots.viewDetailedLogs')}</span>
-        </Button>
-      </div>
+          {/* Link to detailed logs */}
+          {!hideDetailedLogsLink && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="gap-1"
+              onClick={() => router.push(`/home/monitoring?botId=${botId}`)}
+            >
+              <ExternalLink className="size-3.5" />
+              <span className="text-sm">{t('bots.viewDetailedLogs')}</span>
+            </Button>
+          )}
+        </div>
+      )}
 
       {/* Log cards */}
-      <div className="flex flex-col gap-2">
-        {filteredLogs.map((botLog) => (
-          <BotLogCard botLog={botLog} key={botLog.seq_id} />
-        ))}
-      </div>
+      {filteredLogs.length === 0 ? (
+        <div className="flex-1 flex items-center justify-center py-12">
+          <p className="text-sm text-muted-foreground">{t('bots.noLogs')}</p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2">
+          {filteredLogs.map((botLog) => (
+            <BotLogCard
+              botLog={botLog}
+              key={botLog.seq_id}
+              defaultExpanded={autoExpandImages && botLog.images.length > 0}
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 }

web/src/app/home/components/dynamic-form/DynamicFormComponent.tsx

@@ -16,6 +16,30 @@ import { extractI18nObject } from '@/i18n/I18nProvider';
 import { useTranslation } from 'react-i18next';
 import { cn } from '@/lib/utils';
 
+/**
+ * Resolve the value referenced by a `show_if.field` string.
+ *
+ * Fields prefixed with `__system.` are looked up in the caller-supplied
+ * `systemContext` dictionary (e.g. `__system.is_wizard` → `systemContext.is_wizard`).
+ * All other field names are resolved from the live form values first, then
+ * fall back to `externalDependentValues`.
+ */
+function resolveShowIfValue(
+  field: string,
+  watchedValues: Record<string, unknown>,
+  externalDependentValues?: Record<string, unknown>,
+  systemContext?: Record<string, unknown>,
+): unknown {
+  if (field.startsWith('__system.')) {
+    const key = field.slice('__system.'.length);
+    return systemContext?.[key];
+  }
+  if (watchedValues[field] !== undefined) {
+    return watchedValues[field];
+  }
+  return externalDependentValues?.[field];
+}
+
 export default function DynamicFormComponent({
   itemConfigList,
   onSubmit,
@@ -23,6 +47,7 @@ export default function DynamicFormComponent({
   onFileUploaded,
   isEditing,
   externalDependentValues,
+  systemContext,
 }: {
   itemConfigList: IDynamicFormItemSchema[];
   onSubmit?: (val: object) => unknown;
@@ -30,6 +55,9 @@ export default function DynamicFormComponent({
   onFileUploaded?: (fileKey: string) => void;
   isEditing?: boolean;
   externalDependentValues?: Record<string, unknown>;
+  /** Extra variables accessible via the `__system.*` namespace in show_if conditions.
+   *  e.g. `{ is_wizard: true }` makes `show_if: { field: "__system.is_wizard", ... }` work. */
+  systemContext?: Record<string, unknown>;
 }) {
   const isInitialMount = useRef(true);
   const previousInitialValues = useRef(initialValues);
@@ -61,6 +89,13 @@ export default function DynamicFormComponent({
         fallbacks: [],
       };
     }
+    if (item.type === 'prompt-editor') {
+      if (Array.isArray(value)) {
+        return value;
+      }
+      // Default to a single empty system prompt entry
+      return [{ role: 'system', content: '' }];
+    }
     return value;
   };
 
@@ -241,14 +276,12 @@ export default function DynamicFormComponent({
       <div className="space-y-4">
         {itemConfigList.map((config) => {
           if (config.show_if) {
-            const dependValue =
-              watchedValues[
-                config.show_if.field as keyof typeof watchedValues
-              ] !== undefined
-                ? watchedValues[
-                    config.show_if.field as keyof typeof watchedValues
-                  ]
-                : externalDependentValues?.[config.show_if.field];
+            const dependValue = resolveShowIfValue(
+              config.show_if.field,
+              watchedValues as Record<string, unknown>,
+              externalDependentValues,
+              systemContext,
+            );
 
             if (
               config.show_if.operator === 'eq' &&

web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx

@@ -775,10 +775,18 @@ export default function DynamicFormItemComponent({
         </Select>
       );
 
-    case DynamicFormItemType.PROMPT_EDITOR:
+    case DynamicFormItemType.PROMPT_EDITOR: {
+      // Guard: field.value may be undefined when the form resets or
+      // initialValues haven't propagated yet. Fall back to a default
+      // single system-prompt entry to prevent the .map() crash.
+      const promptItems: { role: string; content: string }[] = Array.isArray(
+        field.value,
+      )
+        ? field.value
+        : [{ role: 'system', content: '' }];
       return (
         <div className="space-y-2">
-          {field.value.map(
+          {promptItems.map(
             (item: { role: string; content: string }, index: number) => (
               <div key={index} className="flex gap-2 items-center">
                 {/* 角色选择 */}
@@ -790,7 +798,7 @@ export default function DynamicFormItemComponent({
                   <Select
                     value={item.role}
                     onValueChange={(value) => {
-                      const newValue = [...field.value];
+                      const newValue = [...(field.value ?? promptItems)];
                       newValue[index] = { ...newValue[index], role: value };
                       field.onChange(newValue);
                     }}
@@ -811,7 +819,7 @@ export default function DynamicFormItemComponent({
                   className="w-[300px]"
                   value={item.content}
                   onChange={(e) => {
-                    const newValue = [...field.value];
+                    const newValue = [...(field.value ?? promptItems)];
                     newValue[index] = {
                       ...newValue[index],
                       content: e.target.value,
@@ -825,7 +833,7 @@ export default function DynamicFormItemComponent({
                     type="button"
                     className="p-2 hover:bg-gray-100 rounded"
                     onClick={() => {
-                      const newValue = field.value.filter(
+                      const newValue = (field.value ?? promptItems).filter(
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         (_: any, i: number) => i !== index,
                       );
@@ -849,13 +857,17 @@ export default function DynamicFormItemComponent({
             type="button"
             variant="outline"
             onClick={() => {
-              field.onChange([...field.value, { role: 'user', content: '' }]);
+              field.onChange([
+                ...(field.value ?? promptItems),
+                { role: 'user', content: '' },
+              ]);
             }}
           >
             {t('common.addRound')}
           </Button>
         </div>
       );
+    }
 
     case DynamicFormItemType.FILE:
       return (

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

@@ -1181,8 +1181,11 @@ export default function HomeSidebar({
       // Route already matches — just select without navigating (preserves ?id= query params)
       selectChild(matchedChild);
     } else {
-      // No match — redirect to default route
-      handleChildClick(sidebarConfigList[0]);
+      // No match — redirect to the first route under /home
+      const defaultChild =
+        sidebarConfigList.find((c) => c.route.startsWith('/home')) ??
+        sidebarConfigList[0];
+      handleChildClick(defaultChild);
     }
   }
 
@@ -1249,6 +1252,28 @@ export default function HomeSidebar({
 
         {/* Navigation items grouped by section */}
         <SidebarContent>
+          {/* Standalone items (e.g. Quick Start) — rendered before section groups */}
+          {sidebarConfigList
+            .filter((c) => c.section === 'standalone')
+            .map((config) => (
+              <SidebarGroup key={config.id}>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    <SidebarMenuItem>
+                      <SidebarMenuButton
+                        isActive={selectedChild?.id === config.id}
+                        onClick={() => handleChildClick(config)}
+                        tooltip={config.name}
+                      >
+                        {config.icon}
+                        <span>{config.name}</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            ))}
+
           <SidebarGroup>
             <SidebarGroupLabel>{t('sidebar.home')}</SidebarGroupLabel>
             <SidebarGroupContent>

web/src/app/home/components/home-sidebar/HomeSidebarChild.tsx

@@ -1,6 +1,6 @@
 import { I18nObject } from '@/app/infra/entities/common';
 
-export type SidebarSection = 'home' | 'extensions';
+export type SidebarSection = 'home' | 'extensions' | 'standalone';
 
 export interface ISidebarChildVO {
   id: string;

web/src/app/home/components/home-sidebar/sidbarConfigList.tsx

@@ -6,6 +6,28 @@ const t = (key: string) => {
 };
 
 export const sidebarConfigList = [
+  // ── Quick Start ──
+  new SidebarChildVO({
+    id: 'wizard',
+    name: t('sidebar.quickStart'),
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+      >
+        <path d="M13 9H21L11 24V15H4L13 0V9ZM11 11V7.22063L7.53238 13H13V17.3944L17.263 11H11Z"></path>
+      </svg>
+    ),
+    route: '/wizard',
+    description: t('wizard.sidebarDescription'),
+    helpLink: {
+      en_US: '',
+      zh_Hans: '',
+    },
+    section: 'standalone',
+  }),
+
   // ── Home section ──
   new SidebarChildVO({
     id: 'monitoring',