@xdelivered/emberflow 0.2.0 → 0.5.0

package/src/components/WelcomeDialog.test.tsx

@@ -1,12 +1,14 @@
 import { describe, expect, it } from 'vitest';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { WelcomeChecklist } from './WelcomeDialog';
+import { DoneSummary, GuidedSetupIntro, GuidedSetupPanes, WelcomeChecklist } from './WelcomeDialog';
+import type { WelcomeChecklistActions } from './WelcomeDialog';
 import type { SetupStatus } from '../store/setupClient';
 
 /** A pristine, just-initialized project: no agent, no environments, no skills,
  *  only the hello example op. */
 const FRESH: SetupStatus = {
   agents: [],
+  git: { repo: false },
   environments: { configured: false, count: 0, protectedCount: 0, anyAuthConfigured: false },
   skills: { claude: false, codex: false },
   language: 'typescript',
@@ -22,6 +24,7 @@ const CONFIGURED: SetupStatus = {
     { kind: 'claude', version: '2.1.0' },
     { kind: 'codex', version: '0.5.3' },
   ],
+  git: { repo: true },
   environments: { configured: true, count: 2, protectedCount: 1, anyAuthConfigured: true },
   skills: { claude: true, codex: false },
   language: 'typescript',
@@ -37,15 +40,30 @@ describe('WelcomeChecklist', () => {
   it('renders every checklist row', () => {
     const out = html(FRESH);
     for (const title of [
-      'Coding agent detected',
-      'Environments configured',
-      'Secrets & auth',
-      'Agent skills installed',
-      'Infrastructure scouted',
+      'Git repository',
+      'Coding agent',
+      'Environments',
+      'Agent skills',
+      'Project scanned',
       'First operation',
     ]) {
       expect(out).toContain(title);
     }
+    // Secrets & auth deliberately has no row — it lives in Manage Environment.
+    expect(out).not.toContain('Secrets');
+  });
+
+  it('fresh project: shows the git init command and disables agent-driven actions', () => {
+    const out = html(FRESH);
+    expect(out).toContain('git init && git add -A && git commit -m "initial"');
+    // With no git repo, the agent-dependent rows say to initialize git first.
+    expect(out).toContain('Initialize git first');
+  });
+
+  it('git row completes once the repo exists', () => {
+    const out = html(CONFIGURED);
+    expect(out).toContain('Repository ready');
+    expect(out).not.toContain('Initialize git first');
   });
 
   it('fresh project: shows the install hint and no completed rows', () => {
@@ -57,9 +75,10 @@ describe('WelcomeChecklist', () => {
     expect(out).not.toContain('aria-label="done"');
   });
 
-  it('fresh project: the scout button is disabled without an agent', () => {
-    const out = html(FRESH);
-    // The Scout button carries the "detect an agent first" tooltip and is disabled.
+  it('git present but no agent: the scout button is disabled with the agent reason', () => {
+    // Git is the earlier prerequisite; with it satisfied the scout row falls
+    // through to the "detect an agent" reason.
+    const out = html({ ...FRESH, git: { repo: true } });
     expect(out).toContain('Detect a coding agent first');
     expect(out).toMatch(/Scout/);
     expect(out).toContain('disabled');
@@ -85,7 +104,6 @@ describe('WelcomeChecklist', () => {
       <WelcomeChecklist status={CONFIGURED} chosenAgent="codex" onChooseAgent={() => {}} />,
     );
     expect(out).toContain('Choose coding agent');
-    expect(out).toContain('Both detected');
     // Codex is the active choice; Claude is not.
     expect(out).toMatch(/aria-pressed="true"[^>]*>Codex/);
     expect(out).toMatch(/aria-pressed="false"[^>]*>Claude/);
@@ -100,8 +118,361 @@ describe('WelcomeChecklist', () => {
     expect(out).toContain('claude 2.1.0');
   });
 
-  it('shows checklist progress', () => {
-    expect(html(FRESH)).toContain('0/6 done');
-    expect(html(CONFIGURED)).toContain('6/6 done');
+  it('progress + next-step emphasis: fresh shows 0/6 with the first row emphasized; fully-done has no next step', () => {
+    const fresh = html(FRESH);
+    expect(fresh).toContain('0 of 6 steps done');
+    expect(fresh).toContain('bg-highlight/[0.06]'); // exactly one emphasized row
+    expect(fresh.split('bg-highlight/[0.06]').length - 1).toBe(1);
+
+    const done = html(CONFIGURED);
+    expect(done).toContain('6 of 6 steps done');
+    expect(done).not.toContain('bg-highlight/[0.06]'); // nothing left to emphasize
+  });
+});
+
+/** Git + a coding agent (the two manual prerequisites) satisfied, but the rest
+ *  of setup still to do — the state in which Start setup is enabled. */
+const READY: SetupStatus = {
+  ...FRESH,
+  git: { repo: true },
+  agents: [{ kind: 'claude', version: '2.1.0' }],
+};
+
+const NOOP: WelcomeChecklistActions = {
+  onOpenSettings: () => {},
+  onSetupEnvironments: () => {},
+  onOpenEnvironments: () => {},
+  onOpenHelloOp: () => {},
+  onScoutInfrastructure: () => {},
+};
+
+describe('GuidedSetupIntro (idle phase)', () => {
+  it('fresh project (no git): Start setup is disabled with the git reason', () => {
+    const out = renderToStaticMarkup(<GuidedSetupIntro status={FRESH} onStart={() => {}} />);
+    expect(out).toContain('Let the agent set this up');
+    expect(out).toContain('Start setup');
+    expect(out).toContain('disabled=""');
+    expect(out).toContain('Initialize git first');
+  });
+
+  it('git present but no agent: disabled with the agent reason', () => {
+    const out = renderToStaticMarkup(
+      <GuidedSetupIntro status={{ ...FRESH, git: { repo: true } }} onStart={() => {}} />,
+    );
+    expect(out).toContain('disabled=""');
+    expect(out).toContain('Detect a coding agent first');
+  });
+
+  it('ready project: Start enabled, the step-list names what still remains', () => {
+    const out = renderToStaticMarkup(<GuidedSetupIntro status={READY} onStart={() => {}} />);
+    expect(out).not.toContain('disabled=""');
+    // Remaining steps derived from checklist state.
+    expect(out).toContain('Scan your code for existing infrastructure');
+    expect(out).toContain('Set up environments');
+    expect(out).toContain('Install the agent skills');
+    expect(out).toContain('Verify the skills and its own connection');
+  });
+
+  it('configured project: step-list drops done steps but always verifies connection', () => {
+    const out = renderToStaticMarkup(<GuidedSetupIntro status={CONFIGURED} onStart={() => {}} />);
+    expect(out).not.toContain('Scan your code');
+    expect(out).not.toContain('Set up environments');
+    expect(out).not.toContain('Install the agent skills');
+    expect(out).toContain('Verify the skills and its own connection');
+  });
+
+  it('two agents: the guided card hosts the backend picker with the chosen agent pressed', () => {
+    const twoAgents: SetupStatus = { ...READY, agents: CONFIGURED.agents };
+    const out = renderToStaticMarkup(
+      <GuidedSetupIntro status={twoAgents} chosenAgent="claude" onChooseAgent={() => {}} onStart={() => {}} />,
+    );
+    expect(out).toContain('Runs with');
+    expect(out).toMatch(/aria-pressed="true"[^>]*>Claude/);
+  });
+
+  it('single agent: no picker in the guided card', () => {
+    const out = renderToStaticMarkup(
+      <GuidedSetupIntro status={READY} chosenAgent="claude" onChooseAgent={() => {}} onStart={() => {}} />,
+    );
+    expect(out).not.toContain('Choose coding agent');
+  });
+});
+
+describe('DoneSummary', () => {
+  it('joins completed step titles into one line, with agent versions', () => {
+    const out = renderToStaticMarkup(<DoneSummary status={READY} />);
+    expect(out).toContain('Git repository');
+    expect(out).toContain('claude 2.1.0');
+    expect(out).not.toContain('Environments');
+  });
+
+  it('renders nothing when no steps are complete', () => {
+    const none: SetupStatus = { ...FRESH };
+    expect(renderToStaticMarkup(<DoneSummary status={none} />)).toBe('');
+  });
+});
+
+describe('GuidedSetupPanes (running/done phase)', () => {
+  const stream = [
+    { type: 'message' as const, text: 'Reading the ground truth first.' },
+    { type: 'message' as const, text: 'Which environments do you want?' },
+  ];
+
+  it('running: two panes — the live checklist AND the embedded stream + working input', () => {
+    const out = renderToStaticMarkup(
+      <GuidedSetupPanes
+        status={READY}
+        actions={NOOP}
+        events={stream}
+        running={true}
+        onFollowUp={() => {}}
+        onFinishComplete={() => {}}
+        onContinue={() => {}}
+        followUpRef={{ current: null }}
+      />,
+    );
+    // Left: a checklist row title. Right: the stream prose + the running header.
+    expect(out).toContain('Git repository');
+    expect(out).toContain('Reading the ground truth first.');
+    expect(out).toContain('Setting things up…');
+    // While the agent works, the left pane is a READ-ONLY progress map — the
+    // interactive actions are exactly what the agent is doing, so no buttons.
+    expect(out).not.toContain('Set up with AI');
+    expect(out).not.toContain('Scout');
+    expect(out).not.toContain('Open hello op');
+    // The step being worked on (next incomplete) spins while the run is live.
+    expect(out).toContain('aria-label="in progress"');
+    expect(out).toContain('animate-spin');
+    // Follow-up input is disabled while working.
+    expect(out).toContain('Agent is working…');
+    // No done-phase footer CTA while running.
+    expect(out).not.toContain('Continue setup');
+    expect(out).not.toContain("You're set");
+  });
+
+  it('done + incomplete: shows the Continue setup CTA', () => {
+    const out = renderToStaticMarkup(
+      <GuidedSetupPanes
+        status={READY}
+        actions={NOOP}
+        events={stream}
+        running={false}
+        onFollowUp={() => {}}
+        onFinishComplete={() => {}}
+        onContinue={() => {}}
+        followUpRef={{ current: null }}
+      />,
+    );
+    expect(out).toContain('Waiting on you');
+    // Not running → no spinner on the map.
+    expect(out).not.toContain('aria-label="in progress"');
+    expect(out).toContain('Continue setup');
+    expect(out).not.toContain("You're set");
+  });
+
+  it('done + failed: red header and a Try again CTA instead of Continue', () => {
+    const out = renderToStaticMarkup(
+      <GuidedSetupPanes
+        status={READY}
+        actions={NOOP}
+        events={[{ type: 'error', text: 'codex exited with code 1' }]}
+        running={false}
+        failed={true}
+        onFollowUp={() => {}}
+        onFinishComplete={() => {}}
+        onContinue={() => {}}
+        onRetry={() => {}}
+        followUpRef={{ current: null }}
+      />,
+    );
+    expect(out).toContain('Setup hit a problem');
+    expect(out).toContain('bg-destructive');
+    expect(out).toContain('Try again');
+    expect(out).not.toContain('Continue setup');
+    expect(out).not.toContain('Setup complete');
+  });
+
+  it('failed with a backend at fault + another agent detected: CTA switches backend', () => {
+    const out = renderToStaticMarkup(
+      <GuidedSetupPanes
+        status={READY}
+        actions={NOOP}
+        events={[{ type: 'error', text: 'model rejected (hint: your codex CLI may be too old…)' }]}
+        running={false}
+        failed={true}
+        onFollowUp={() => {}}
+        onFinishComplete={() => {}}
+        onContinue={() => {}}
+        onRetry={() => {}}
+        retryAgent="claude"
+        onRetryWith={() => {}}
+        followUpRef={{ current: null }}
+      />,
+    );
+    expect(out).toContain('Try again with Claude');
+  });
+
+  it('renders the auto-failover notice above the stream', () => {
+    const out = renderToStaticMarkup(
+      <GuidedSetupPanes
+        status={READY}
+        actions={NOOP}
+        events={stream}
+        running={true}
+        notice="Codex failed to start — switched to Claude and retried automatically."
+        onFollowUp={() => {}}
+        onFinishComplete={() => {}}
+        onContinue={() => {}}
+        followUpRef={{ current: null }}
+      />,
+    );
+    expect(out).toContain('switched to Claude and retried automatically');
+  });
+
+  /** Agent final message ending with the emberflow-questions contract block. */
+  const QUESTION_TEXT =
+    'Steps 1–4 done. Two things to decide.\n\n' +
+    '```emberflow-questions\n' +
+    '{"questions":[' +
+    '{"id":"envs","text":"Which environments?","options":["dev + prod","dev + staging + prod"],"custom":true},' +
+    '{"id":"first-build","text":"What do you want to build first?","options":[{"label":"Just look around","action":"finish"}],"custom":true}' +
+    ']}\n' +
+    '```\n';
+  const questionStream = [
+    { type: 'message' as const, text: 'Reading the ground truth first.' },
+    { type: 'message' as const, text: QUESTION_TEXT },
+  ];
+
+  it('questions block: renders clickable pills instead of the textarea, raw block stripped', () => {
+    const out = renderToStaticMarkup(
+      <GuidedSetupPanes
+        status={READY}
+        actions={NOOP}
+        events={questionStream}
+        running={false}
+        onFollowUp={() => {}}
+        onFinishComplete={() => {}}
+        onContinue={() => {}}
+        followUpRef={{ current: null }}
+      />,
+    );
+    // The raw fenced block never renders — not as a code block, not as text.
+    expect(out).not.toContain('emberflow-questions');
+    // Prose before the block still shows.
+    expect(out).toContain('Two things to decide.');
+    // Wizard: ONE question at a time — the FIRST question's pills show, with
+    // a position counter; the second question is not rendered yet.
+    expect(out).toContain('Which environments?');
+    expect(out).toMatch(/aria-pressed="false"[^>]*>dev \+ prod</);
+    expect(out).toContain('dev + staging + prod');
+    expect(out).not.toContain('Just look around');
+    expect(out).toContain('1/2');
+    // One custom free-text field (current question only).
+    expect(out.split('Or type your own…').length - 1).toBe(1);
+    // Nothing answered yet → no Send button (it appears on the last step),
+    // but the escape hatch is always there.
+    expect(out).not.toContain('Send answers');
+    expect(out).toContain('Type a reply instead');
+    // The form replaces the textarea AND the redundant Continue-setup nudge.
+    expect(out).not.toContain('Answer the agent’s questions…');
+    expect(out).not.toContain('Continue setup');
+  });
+
+  it('questions block: a why renders as quiet rationale under the question text', () => {
+    const whyStream = [
+      {
+        type: 'message' as const,
+        text:
+          'One thing to decide.\n\n```emberflow-questions\n' +
+          '{"questions":[{"id":"envs","text":"Which environments?","options":["dev + prod"],' +
+          '"why":"Runs stay in Mock until you point them somewhere real."}]}\n```\n',
+      },
+    ];
+    const out = renderToStaticMarkup(
+      <GuidedSetupPanes
+        status={READY}
+        actions={NOOP}
+        events={whyStream}
+        running={false}
+        onFollowUp={() => {}}
+        onFinishComplete={() => {}}
+        onContinue={() => {}}
+        followUpRef={{ current: null }}
+      />,
+    );
+    expect(out).toContain('Which environments?');
+    expect(out).toContain('Runs stay in Mock until you point them somewhere real.');
+  });
+
+  it('questions block while running: form suppressed, textarea stays (disabled), block still stripped', () => {
+    const out = renderToStaticMarkup(
+      <GuidedSetupPanes
+        status={READY}
+        actions={NOOP}
+        events={questionStream}
+        running={true}
+        onFollowUp={() => {}}
+        onFinishComplete={() => {}}
+        onContinue={() => {}}
+        followUpRef={{ current: null }}
+      />,
+    );
+    expect(out).not.toContain('Send answers');
+    expect(out).toContain('Agent is working…');
+    expect(out).not.toContain('emberflow-questions');
+  });
+
+  it('questions block + failed run: retry CTA wins, no form', () => {
+    const out = renderToStaticMarkup(
+      <GuidedSetupPanes
+        status={READY}
+        actions={NOOP}
+        events={[...questionStream, { type: 'error' as const, text: 'codex exited with code 1' }]}
+        running={false}
+        failed={true}
+        onFollowUp={() => {}}
+        onFinishComplete={() => {}}
+        onContinue={() => {}}
+        onRetry={() => {}}
+        followUpRef={{ current: null }}
+      />,
+    );
+    expect(out).not.toContain('Send answers');
+    expect(out).toContain('Try again');
+  });
+
+  it('no questions block: the follow-up textarea renders unchanged', () => {
+    const out = renderToStaticMarkup(
+      <GuidedSetupPanes
+        status={READY}
+        actions={NOOP}
+        events={stream}
+        running={false}
+        onFollowUp={() => {}}
+        onFinishComplete={() => {}}
+        onContinue={() => {}}
+        followUpRef={{ current: null }}
+      />,
+    );
+    expect(out).toContain('Answer the agent’s questions…');
+    expect(out).not.toContain('Send answers');
+    expect(out).toContain('Continue setup');
+  });
+
+  it('done + complete: shows the "You\'re set" CTA', () => {
+    const out = renderToStaticMarkup(
+      <GuidedSetupPanes
+        status={CONFIGURED}
+        actions={NOOP}
+        events={stream}
+        running={false}
+        onFollowUp={() => {}}
+        onFinishComplete={() => {}}
+        onContinue={() => {}}
+        followUpRef={{ current: null }}
+      />,
+    );
+    expect(out).toContain('build your first API');
+    expect(out).not.toContain('Continue setup');
   });
 });