zidane-ui 9.0.4 → 9.1.3

package/src/onboarding/demos/how-it-works.tsx

@@ -1,698 +0,0 @@
-/**
- * The scenes of the tutorials, one per part of zidane that a tutorial
- * explains. Each one plays the three steps of its tutorial in turn, from the
- * pieces in tour.tsx. Connectors and MCP servers share one: a server added,
- * a sign-in, then a call and its answer. The words in them are labels
- * (`scene*`), and the steps beside them carry the meaning.
- */
-import type { ComponentType, CSSProperties, ReactNode } from 'react';
-import type { TutorialTopic } from 'zidane/chat/pure';
-
-import { BrandMark } from '../../components/BrandMark';
-import { buttonClass } from '../../components/button';
-import { MetaChip } from '../../components/Form';
-import { useOnboardingLabels } from '../OnboardingProvider';
-import { Line, MiniWindow } from './parts';
-import { after, Link, Node, Part, TourPointer, TourStage, useLit, type SceneProps } from './tour';
-
-/** A glyph on a tile or a row. */
-function Glyph({ icon, className = 'text-[var(--zg-text)]' }: { icon: string; className?: string }) {
-  return <span aria-hidden className={`${icon} text-zg-body ${className}`} />;
-}
-
-/** A check that pops in, after `at` ms in its step. */
-function Check({ at }: { at: number }) {
-  return (
-    <span aria-hidden className="zg-loop zg-tour-pop i-ph-check-bold text-zg-success shrink-0" style={after(at)} />
-  );
-}
-
-/** Something that pops in, after `at` ms in its step. */
-function Pop({ at, className = '', children }: { at: number; className?: string; children: ReactNode }) {
-  return (
-    <span className={`zg-loop zg-tour-pop ${className}`} style={after(at)}>
-      {children}
-    </span>
-  );
-}
-
-/** Props of {@link ConnectorsScene}. */
-export type ConnectorsSceneProps = SceneProps;
-
-/** Connectors and MCP servers: add a server, sign in once, then the agent calls a tool and the answer comes back. */
-export function ConnectorsScene({ step, className, style }: ConnectorsSceneProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <TourStage step={step} className={className} style={style}>
-      <span className="flex flex-col items-center gap-3 w-full max-w-[264px]">
-        <span className="zg-demo-stack justify-items-center items-center h-7">
-          <Part at={[0]} className="flex items-center gap-1.5">
-            <MetaChip tone="text">
-              <span aria-hidden className="i-ph-file-text" />
-              {labels.sceneMcpFile}
-            </MetaChip>
-            <Pop at={500}>
-              <MetaChip tone="success">{labels.sceneAddServer}</MetaChip>
-            </Pop>
-          </Part>
-          <Part at={[1]} className="relative zg-demo-stack justify-items-center items-center">
-            <span className="zg-loop zg-tour-first">
-              <span
-                className={`zg-loop zg-tour-press ${buttonClass({ variant: 'solid', size: 'xs' })}`}
-                style={after(250)}
-              >
-                {labels.signInWith(labels.sceneService)}
-              </span>
-            </span>
-            <span className="zg-loop zg-tour-then">
-              <MetaChip tone="success">
-                <span aria-hidden className="i-ph-check-bold" />
-                {labels.sceneSignedIn}
-              </MetaChip>
-            </span>
-            <TourPointer className="absolute right-3 -bottom-3" from={[36, 22]} />
-          </Part>
-          <Part at={[2]} className="zg-demo-stack justify-items-center items-center">
-            <span className="zg-loop zg-tour-first" style={after(1500)}>
-              <MetaChip tone="text" className="font-mono">
-                {labels.sceneCall}
-              </MetaChip>
-            </span>
-            <span className="zg-loop zg-tour-then" style={after(1500)}>
-              <MetaChip tone="success">
-                <span aria-hidden className="i-ph-check-bold" />
-                {labels.sceneResult}
-              </MetaChip>
-            </span>
-          </Part>
-        </span>
-        <span className="flex items-start w-full">
-          <Node label={labels.sceneAgent} lit={[2]}>
-            <Glyph icon="i-ph-chat-circle-dots-fill" className="text-[var(--zg-accent)]" />
-          </Node>
-          <Link lit={[2]} dots={[2]} />
-          <Node
-            label={labels.sceneServer}
-            lit={[0]}
-            badge={
-              <Part from={1} delay={1900} className="zg-raised border rounded-full grid place-items-center w-4 h-4">
-                <span aria-hidden className="i-ph-key text-zg-badge text-[var(--zg-accent)]" />
-              </Part>
-            }
-          >
-            <Glyph icon="i-ph-plugs" />
-          </Node>
-          <Link lit={[1, 2]} dots={[2]} start={400} />
-          <Node label={labels.sceneService} lit={[0, 1]}>
-            <BrandMark brand="linear" label={labels.sceneService} size="sm" />
-          </Node>
-        </span>
-      </span>
-    </TourStage>
-  );
-}
-
-/** A skill of the source list: its box, checked in the first step when it is picked. */
-function SkillPick({ name, picked, at, lit }: { name: string; picked: boolean; at: number; lit?: readonly number[] }) {
-  return (
-    <span {...useLit(lit)} className="zg-tour-lit flex items-center gap-1.5 h-[22px] px-1 rounded-zg-sm min-w-0">
-      <span className="relative w-3 h-3 shrink-0 rounded-zg-xs border border-[var(--zg-border-strong)]">
-        {picked && (
-          <Part
-            delay={at}
-            className="absolute -inset-px grid place-items-center rounded-zg-xs bg-[var(--zg-accent-fill)] text-[var(--zg-accent-fill-fg)]"
-          >
-            <span aria-hidden className="i-ph-check-bold text-zg-badge" />
-          </Part>
-        )}
-      </span>
-      <span className="truncate font-mono text-zg-badge text-[var(--zg-text)]">{name}</span>
-    </span>
-  );
-}
-
-/** Props of {@link SkillsScene}. */
-export type SkillsSceneProps = SceneProps;
-
-/** Skills: pick skills, the agent sees their names and descriptions, and it reads the one that fits the task. */
-export function SkillsScene({ step, className, style }: SkillsSceneProps) {
-  const labels = useOnboardingLabels();
-  const picked = labels.sceneSkillNames.slice(0, 2);
-  return (
-    <TourStage step={step} className={className} style={style}>
-      <span className="flex items-center gap-2 w-full max-w-[272px]">
-        <MiniWindow className="w-[40%] shrink-0" bodyClassName="px-1.5 pb-1.5 gap-0.5">
-          {labels.sceneSkillNames.map((name, i) => (
-            <SkillPick key={name} name={name} picked={i < 2} at={300 + i * 500} lit={i === 0 ? [2] : undefined} />
-          ))}
-        </MiniWindow>
-        <span aria-hidden className="i-ph-arrow-right text-zg-label text-[var(--zg-text-muted)] shrink-0" />
-        <MiniWindow className="flex-1" bodyClassName="px-2 pb-2 min-h-[72px]">
-          <span className="zg-demo-stack">
-            <Part at={[0]} className="flex flex-col gap-1 min-w-0">
-              <span className="flex items-center gap-1 zg-meta">
-                <span aria-hidden className="i-ph-folder-simple" />
-                {labels.sceneSkillsFolder}
-              </span>
-              {picked.map((name, i) => (
-                <Pop
-                  key={name}
-                  at={600 + i * 500}
-                  className="flex items-center gap-1 pl-2.5 font-mono text-zg-badge text-[var(--zg-text)]"
-                >
-                  <span aria-hidden className="i-ph-file-text text-[var(--zg-text-muted)]" />
-                  {name}
-                </Pop>
-              ))}
-            </Part>
-            <Part at={[1]} className="flex flex-col gap-1 min-w-0">
-              <span className="zg-meta truncate">{labels.sceneSystemPrompt}</span>
-              {picked.map((name, i) => (
-                <Pop key={name} at={300 + i * 350} className="flex items-baseline gap-1.5 min-w-0 text-zg-badge">
-                  <span className="font-mono text-[var(--zg-accent)] shrink-0">{name}</span>
-                  <span className="truncate text-[var(--zg-text-muted)]">{labels.sceneSkillAbouts[i]}</span>
-                </Pop>
-              ))}
-            </Part>
-            <Part at={[2]} className="flex flex-col gap-1.5 min-w-0">
-              <span className="truncate text-zg-badge text-[var(--zg-text)]">{labels.sceneSkillPrompt}</span>
-              <Pop at={600} className="self-start">
-                <MetaChip tone="accent">
-                  <span aria-hidden className="i-ph-book-open-text" />
-                  {labels.sceneSkillUsing}
-                </MetaChip>
-              </Pop>
-              <Line width="80%" />
-              <Line width="60%" />
-            </Part>
-          </span>
-        </MiniWindow>
-      </span>
-    </TourStage>
-  );
-}
-
-/** The tones of the parts of a system prompt, as on the Instructions page: rules, AGENTS.md, MCP servers, skills. */
-const PART_TONES = [
-  'var(--zg-accent-dot)',
-  'var(--zg-accent-alt-dot)',
-  'var(--zg-warn-dot)',
-  'color-mix(in oklab, var(--zg-accent-dot) 45%, var(--zg-danger-dot))',
-];
-/** How much of the prompt each part takes, as a share of the row. */
-const PART_SHARES = ['86%', '48%', '30%', '38%'];
-
-/** A part of the system prompt: its name, its share and, in the last step, its size in tokens. */
-function PromptPart({ index, name, tokens, file }: { index: number; name: string; tokens: string; file?: string }) {
-  const tone = PART_TONES[index];
-  return (
-    <Part delay={index * 200} className="block">
-      <span
-        {...useLit(file ? [1] : [])}
-        className="zg-tour-lit flex items-center gap-2 h-[18px] -mx-1 px-1 rounded-zg-xs min-w-0"
-      >
-        <span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ background: tone }} />
-        <span className="zg-demo-stack w-[74px] shrink-0 font-mono text-zg-badge text-[var(--zg-text)]">
-          {file ? (
-            <>
-              <Part at={[0]} className="truncate">
-                {name}
-              </Part>
-              <Part from={1} delay={300} className="truncate text-[var(--zg-accent)]">
-                {file}
-              </Part>
-            </>
-          ) : (
-            <span className="truncate">{name}</span>
-          )}
-        </span>
-        <span className="flex-1 min-w-0">
-          <span
-            className="block h-1 rounded-full"
-            style={{ width: PART_SHARES[index], background: `color-mix(in oklab, ${tone} 60%, transparent)` }}
-          />
-        </span>
-        <Part from={2} delay={200 + index * 150} className="zg-meta w-7 text-right">
-          {tokens}
-        </Part>
-      </span>
-    </Part>
-  );
-}
-
-/** Props of {@link InstructionsScene}. */
-export type InstructionsSceneProps = SceneProps;
-
-/** Instructions: the parts of the system prompt, a SYSTEM.md in place of the built-in rules, then the size of each part. */
-export function InstructionsScene({ step, className, style }: InstructionsSceneProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <TourStage step={step} className={className} style={style}>
-      <span className="flex flex-col items-center gap-2.5 w-full max-w-[264px]">
-        <MiniWindow
-          className="w-full"
-          bar={<span className="zg-meta truncate">{labels.sceneSystemPrompt}</span>}
-          bodyClassName="px-2.5 pb-2.5 gap-1"
-        >
-          {labels.scenePromptParts.map((name, i) => (
-            <PromptPart
-              key={name}
-              index={i}
-              name={name}
-              tokens={labels.scenePromptTokens[i] ?? ''}
-              {...(i === 0 ? { file: labels.sceneSystemFile } : {})}
-            />
-          ))}
-        </MiniWindow>
-        <Part at={[2]} delay={900} className="flex h-[18px]">
-          <MetaChip tone="success">
-            <span aria-hidden className="i-ph-play-fill" />
-            {labels.sceneNewRun}
-          </MetaChip>
-        </Part>
-      </span>
-    </TourStage>
-  );
-}
-
-/** The icons of what an extension adds: a command, a tool, a panel, a provider. */
-const ADD_ICONS = ['i-ph-terminal-window', 'i-ph-wrench', 'i-ph-sidebar-simple', 'i-ph-cube'];
-
-/** An extension in the list, with its switch. */
-function ExtensionRow({ name, trust }: { name: string; trust?: string }) {
-  return (
-    <span className="zg-raised border rounded-zg-md flex items-center gap-2 h-8 px-2.5 min-w-0">
-      <span aria-hidden className="i-ph-puzzle-piece text-zg-label text-[var(--zg-text-muted)] shrink-0" />
-      <span className="flex-1 min-w-0 truncate font-mono text-zg-meta text-[var(--zg-text)]">{name}</span>
-      {trust && (
-        <MetaChip tone="warn">
-          <span aria-hidden className="i-ph-shield-warning" />
-          {trust}
-        </MetaChip>
-      )}
-      <span className="zg-loop zg-tour-switch" data-off={trust ? '' : undefined} style={after(900)}>
-        <span className="zg-loop zg-tour-knob" />
-      </span>
-    </span>
-  );
-}
-
-/** Props of {@link ExtensionsScene}. */
-export type ExtensionsSceneProps = SceneProps;
-
-/** Extensions: a module in its folder, what it adds to the app, and the switch that turns it on. */
-export function ExtensionsScene({ step, className, style }: ExtensionsSceneProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <TourStage step={step} className={className} style={style}>
-      <span className="zg-demo-stack items-center w-full max-w-[268px]">
-        <Part at={[0]} className="flex items-center">
-          <MiniWindow
-            className="w-full"
-            bar={
-              <span className="flex items-center gap-1 zg-meta truncate">
-                <span aria-hidden className="i-ph-file-ts" />
-                {labels.sceneExtensionFile}
-              </span>
-            }
-            bodyClassName="px-2.5 pb-2.5 gap-0.5 font-mono text-zg-badge whitespace-pre"
-          >
-            {labels.sceneExtensionCode.map((line, i) => (
-              <span
-                key={line}
-                className={`zg-loop zg-tour-type block overflow-hidden text-ellipsis ${i === 3 ? 'text-[var(--zg-accent)]' : 'text-[var(--zg-text)]'}`}
-                style={after(i * 450)}
-              >
-                {line}
-              </span>
-            ))}
-          </MiniWindow>
-        </Part>
-        <Part at={[1]} className="flex items-center justify-center gap-4">
-          <Node label={labels.sceneExtensionName} lit={[1]}>
-            <Glyph icon="i-ph-puzzle-piece" className="text-[var(--zg-accent)]" />
-          </Node>
-          <span className="flex flex-col items-start gap-1 min-w-0">
-            {labels.sceneExtensionAdds.map((item, i) => (
-              <Pop key={item} at={200 + i * 300}>
-                <MetaChip tone="text">
-                  <span aria-hidden className={ADD_ICONS[i]} />
-                  {item}
-                </MetaChip>
-              </Pop>
-            ))}
-          </span>
-        </Part>
-        <Part at={[2]} className="relative flex flex-col gap-1.5">
-          <ExtensionRow name={labels.sceneExtensionName} />
-          <ExtensionRow name={labels.sceneProjectExtension} trust={labels.sceneNeedsTrust} />
-          <TourPointer className="absolute right-0 top-3.5" from={[30, 28]} />
-        </Part>
-      </span>
-    </TourStage>
-  );
-}
-
-/** Where a session runs its commands: a card with an icon, a name and what happens there. */
-function Place({ icon, title, children }: { icon: string; title: string; children: ReactNode }) {
-  return (
-    <span className="zg-raised border rounded-zg-md flex flex-col gap-1 w-full px-2.5 py-2 min-w-0">
-      <span className="flex items-center gap-1.5 text-zg-meta text-[var(--zg-text)]">
-        <span aria-hidden className={`${icon} text-[var(--zg-accent)]`} />
-        {title}
-      </span>
-      {children}
-    </span>
-  );
-}
-
-/** A branch of the worktree card, with the session on it. */
-function Branch({ name, fresh = false }: { name: string; fresh?: boolean }) {
-  const row = 'flex items-center gap-1.5 min-w-0 font-mono text-zg-badge';
-  const content = (
-    <>
-      <span aria-hidden className="i-ph-git-branch shrink-0" />
-      <span className="flex-1 truncate">{name}</span>
-      <span aria-hidden className="i-ph-chat-circle-dots-fill shrink-0" />
-    </>
-  );
-  return fresh ? (
-    <Pop at={500} className={`${row} text-[var(--zg-accent)]`}>
-      {content}
-    </Pop>
-  ) : (
-    <span className={`${row} text-[var(--zg-text-muted)]`}>{content}</span>
-  );
-}
-
-/** Props of {@link EnvironmentsScene}. */
-export type EnvironmentsSceneProps = SceneProps;
-
-/** Environments: commands run on this computer, a worktree gives a session its branch, a sandbox blocks what is out of bounds. */
-export function EnvironmentsScene({ step, className, style }: EnvironmentsSceneProps) {
-  const labels = useOnboardingLabels();
-  const [main, branch] = labels.sceneBranches;
-  const row = 'flex items-center gap-1.5 min-w-0 font-mono text-zg-badge';
-  return (
-    <TourStage step={step} className={className} style={style}>
-      <span className="flex items-center w-full max-w-[276px]">
-        <Node label={labels.sceneSession}>
-          <Glyph icon="i-ph-chat-circle-dots-fill" className="text-[var(--zg-accent)]" />
-        </Node>
-        <Link lit={[0, 1, 2]} dots={[0, 1, 2]} />
-        <span className="zg-demo-stack w-[164px] shrink-0">
-          <Part at={[0]} className="flex items-center">
-            <Place icon="i-ph-laptop" title={labels.sceneLocal}>
-              <span className="truncate font-mono text-zg-badge text-[var(--zg-text-muted)]">
-                {labels.demoProjectPath}
-              </span>
-              <span className={row}>
-                <span className="zg-loop zg-tour-type truncate text-[var(--zg-text)]" style={after(300)}>
-                  {labels.sceneCommand}
-                </span>
-                <Check at={1300} />
-              </span>
-            </Place>
-          </Part>
-          <Part at={[1]} className="flex items-center">
-            <Place icon="i-ph-git-branch" title={labels.sceneWorktree}>
-              <Branch name={main ?? ''} />
-              <Branch name={branch ?? ''} fresh />
-            </Place>
-          </Part>
-          <Part at={[2]} className="flex items-center">
-            <Place icon="i-ph-shield-check" title={labels.sceneSandbox}>
-              <span className={row}>
-                <span className="flex-1 truncate text-[var(--zg-text)]">{labels.demoProjectPath}</span>
-                <Check at={300} />
-              </span>
-              <span className={`zg-loop zg-tour-shake ${row}`} style={after(900)}>
-                <span className="flex-1 truncate text-[var(--zg-text-muted)]">{labels.demoSecretPath}</span>
-                <span aria-hidden className="i-ph-prohibit-bold text-zg-danger shrink-0" />
-              </span>
-              <span className="flex flex-wrap gap-1 pt-0.5">
-                {labels.sceneSandboxes.map((name) => (
-                  <MetaChip key={name}>{name}</MetaChip>
-                ))}
-              </span>
-            </Place>
-          </Part>
-        </span>
-      </span>
-    </TourStage>
-  );
-}
-
-/** Where a click on a path opens: a card, lit when it is where a plain click goes. */
-function Target({ icon, name, hint, lit }: { icon: string; name: string; hint: string; lit?: readonly number[] }) {
-  return (
-    <span
-      {...useLit(lit)}
-      className="zg-tour-lit zg-raised border rounded-zg-md flex-1 flex flex-col items-center gap-1 px-2 py-2 min-w-0"
-    >
-      <Glyph icon={icon} />
-      <span className="truncate max-w-full text-zg-badge text-[var(--zg-text)]">{name}</span>
-      <MetaChip>{hint}</MetaChip>
-    </span>
-  );
-}
-
-const SQUIGGLE = {
-  textDecorationLine: 'underline',
-  textDecorationStyle: 'wavy',
-  textDecorationColor: 'var(--zg-danger)',
-} as CSSProperties;
-
-/** Props of {@link FilesScene}. */
-export type FilesSceneProps = SceneProps;
-
-/** Files: a click on a path in the chat, where it opens, then the Files panel saving and checking the file. */
-export function FilesScene({ step, className, style }: FilesSceneProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <TourStage step={step} className={className} style={style}>
-      <span className="zg-demo-stack items-center w-full max-w-[264px]">
-        <Part at={[0]} className="relative flex items-center">
-          <MiniWindow className="w-full" chrome={false} bodyClassName="px-3 py-3 gap-2">
-            <Line width="72%" />
-            <span className="flex items-center gap-1.5 min-w-0">
-              <Line width="18%" />
-              <span
-                className="zg-loop zg-tour-press font-mono text-zg-badge text-[var(--zg-accent)] underline underline-offset-2 truncate"
-                style={after(250)}
-              >
-                {labels.scenePath}
-              </span>
-            </span>
-            <Line width="56%" />
-          </MiniWindow>
-          <TourPointer className="absolute left-[50%] top-[38px]" from={[44, 30]} />
-        </Part>
-        <Part at={[1]} className="flex flex-col items-center gap-2">
-          <MetaChip tone="accent" className="font-mono">
-            {labels.scenePath}
-          </MetaChip>
-          <span className="flex gap-2 w-full">
-            <Target icon="i-ph-sidebar-simple" name={labels.sceneFilesPanel} hint={labels.sceneClick} lit={[1]} />
-            <Target icon="i-ph-code" name={labels.sceneEditor} hint={labels.sceneCmdClick} />
-          </span>
-        </Part>
-        <Part at={[2]} className="flex items-center">
-          <MiniWindow
-            className="w-full"
-            bar={
-              <span className="flex items-center gap-1.5 zg-meta">
-                {labels.sceneFileName}
-                <Pop at={1500}>
-                  <MetaChip tone="success">
-                    <span aria-hidden className="i-ph-check-bold" />
-                    {labels.sceneSaved}
-                  </MetaChip>
-                </Pop>
-              </span>
-            }
-            bodyClassName="px-3 pb-3 gap-1.5 font-mono text-zg-badge"
-          >
-            <Line width="62%" />
-            <span className="flex items-center min-w-0 whitespace-pre text-[var(--zg-text)]">
-              {labels.sceneCode}
-              <span style={SQUIGGLE}>{labels.sceneCodeTypo}</span>
-            </span>
-            <Pop at={600} className="zg-float self-start flex items-center gap-1 h-5 px-1.5 font-sans">
-              <span aria-hidden className="i-ph-warning-circle text-zg-warn" />
-              {labels.sceneDiagnostic}
-            </Pop>
-            <Line width="46%" />
-          </MiniWindow>
-        </Part>
-      </span>
-    </TourStage>
-  );
-}
-
-/** Props of {@link AccountsScene}. */
-export type AccountsSceneProps = SceneProps;
-
-/** Accounts: a sign-in or a key, the file that keeps it, then both apps reading that file. */
-export function AccountsScene({ step, className, style }: AccountsSceneProps) {
-  const labels = useOnboardingLabels();
-  const rule = 'flex-1 border-t border-[var(--zg-hairline)]';
-  return (
-    <TourStage step={step} className={className} style={style}>
-      <span className="zg-demo-stack items-center justify-items-center w-full max-w-[268px]">
-        <Part at={[0]} className="relative zg-raised border rounded-zg-lg flex flex-col gap-2 px-3.5 py-3 w-[212px]">
-          <span
-            className={`zg-loop zg-tour-press ${buttonClass({ variant: 'secondary', size: 'xs' })} w-full`}
-            style={after(250)}
-          >
-            <BrandMark brand="claude" label={labels.sceneProvider} size="sm" />
-            {labels.signInWith(labels.sceneProvider)}
-          </span>
-          <span className="flex items-center gap-2 zg-meta">
-            <span className={rule} />
-            {labels.sceneOr}
-            <span className={rule} />
-          </span>
-          <span className="zg-well flex items-center gap-1.5 h-6 px-2 rounded-zg-md min-w-0">
-            <span aria-hidden className="i-ph-key text-zg-label text-[var(--zg-text-muted)] shrink-0" />
-            <span
-              className="zg-loop zg-tour-type truncate font-mono text-zg-badge text-[var(--zg-text)]"
-              style={after(1400)}
-            >
-              {labels.sceneApiKey}
-            </span>
-          </span>
-          <TourPointer className="absolute right-8 top-7" from={[40, 30]} />
-        </Part>
-        <Part at={[1]} className="flex items-center w-full">
-          <span className="zg-raised border rounded-full grid place-items-center w-9 h-9 shrink-0">
-            <span aria-hidden className="i-ph-key text-zg-body text-[var(--zg-accent)]" />
-          </span>
-          <Link lit={[1]} dots={[1]} />
-          <span className="zg-raised border rounded-zg-md flex flex-col gap-1 px-2.5 py-2 w-[156px] shrink-0 min-w-0">
-            <span className="flex items-center gap-1.5 min-w-0">
-              <span aria-hidden className="i-ph-file-text text-zg-label text-[var(--zg-text-muted)] shrink-0" />
-              <span className="truncate font-mono text-zg-badge text-[var(--zg-text)]">{labels.sceneCredentials}</span>
-            </span>
-            <span className="truncate font-mono text-zg-badge text-[var(--zg-text-muted)]">
-              {labels.sceneZidaneFolder}
-            </span>
-            <Pop at={900} className="self-start">
-              <MetaChip tone="success">
-                <span aria-hidden className="i-ph-lock-simple" />
-                {labels.sceneOnlyYou}
-              </MetaChip>
-            </Pop>
-          </span>
-        </Part>
-        <Part at={[2]} className="flex flex-col items-center gap-2.5 w-full">
-          <span className="flex items-start w-full">
-            <Node label={labels.sceneDesktop}>
-              <Glyph icon="i-ph-app-window" />
-            </Node>
-            <Link lit={[2]} dots={[2]} />
-            <Node label={labels.sceneCredentials} wide lit={[2]}>
-              <Glyph icon="i-ph-lock-simple" className="text-[var(--zg-accent)]" />
-            </Node>
-            <Link lit={[2]} dots={[2]} start={400} />
-            <Node label={labels.sceneTerminal}>
-              <Glyph icon="i-ph-terminal-window" />
-            </Node>
-          </span>
-          <Pop at={800}>
-            <MetaChip>
-              <span aria-hidden className="i-ph-terminal" />
-              {labels.sceneEnvKey}
-            </MetaChip>
-          </Pop>
-        </Part>
-      </span>
-    </TourStage>
-  );
-}
-
-/** Props of {@link HostsScene}. */
-export type HostsSceneProps = SceneProps;
-
-/** Hosts: zidane-server starts on a machine, prints a device token, then this app runs its sessions there. */
-export function HostsScene({ step, className, style }: HostsSceneProps) {
-  const labels = useOnboardingLabels();
-  const line = 'flex items-center gap-1.5 min-w-0';
-  return (
-    <TourStage step={step} className={className} style={style}>
-      <span className="zg-demo-stack items-center w-full max-w-[272px]">
-        <Part at={[0, 1]} className="flex items-center">
-          <MiniWindow
-            className="w-full"
-            bar={
-              <span className="flex items-center gap-1 zg-meta">
-                <span aria-hidden className="i-ph-hard-drives" />
-                {labels.sceneHost}
-              </span>
-            }
-            bodyClassName="px-2.5 pb-2.5 font-mono text-zg-badge"
-          >
-            <span className="zg-demo-stack">
-              <Part at={[0]} className="flex flex-col gap-1 min-w-0">
-                <span className="zg-loop zg-tour-type truncate text-[var(--zg-text)]" style={after(200)}>
-                  {labels.sceneServerStart}
-                </span>
-                <span className={`zg-loop zg-tour-then ${line} text-[var(--zg-text-muted)]`} style={after(1300)}>
-                  <span className="w-1.5 h-1.5 rounded-full shrink-0 bg-[var(--zg-success-dot)]" />
-                  <span className="truncate">{labels.sceneListening}</span>
-                </span>
-              </Part>
-              <Part at={[1]} className="flex flex-col gap-1 min-w-0">
-                <span className="zg-loop zg-tour-type truncate text-[var(--zg-text)]" style={after(200)}>
-                  {labels.sceneTokenCreate}
-                </span>
-                <span className={`zg-loop zg-tour-then ${line} text-[var(--zg-accent)]`} style={after(1300)}>
-                  <span aria-hidden className="i-ph-key shrink-0" />
-                  <span className="truncate">{labels.sceneToken}</span>
-                </span>
-              </Part>
-            </span>
-          </MiniWindow>
-        </Part>
-        <Part at={[2]} className="flex items-center w-full">
-          <MiniWindow className="w-[124px] shrink-0" bodyClassName="px-2 pb-2 gap-1.5">
-            <Pop at={200} className="self-start">
-              <MetaChip tone="text">
-                <span aria-hidden className="i-ph-hard-drives" />
-                {labels.sceneHost}
-              </MetaChip>
-            </Pop>
-            <span className={`${line} text-zg-badge`}>
-              <span className="zg-loop zg-demo-pulse w-1.5 h-1.5 rounded-full shrink-0 bg-[var(--zg-accent-dot)]" />
-              <span className="truncate text-[var(--zg-text)]">{labels.demoTitle}</span>
-            </span>
-            <Line width="70%" />
-          </MiniWindow>
-          <Link lit={[2]} dots={[2]}>
-            <span className="relative -top-3 zg-meta">{labels.sceneWss}</span>
-          </Link>
-          <Node
-            label={labels.sceneHost}
-            lit={[2]}
-            badge={<span className="zg-loop zg-demo-pulse w-2 h-2 rounded-full bg-[var(--zg-success-dot)]" />}
-          >
-            <Glyph icon="i-ph-hard-drives" />
-          </Node>
-        </Part>
-      </span>
-    </TourStage>
-  );
-}
-
-/** The scene of each tutorial. */
-export const TUTORIAL_SCENES: Readonly<Record<TutorialTopic, ComponentType<SceneProps>>> = {
-  connectors: ConnectorsScene,
-  skills: SkillsScene,
-  mcp: ConnectorsScene,
-  instructions: InstructionsScene,
-  extensions: ExtensionsScene,
-  environments: EnvironmentsScene,
-  files: FilesScene,
-  accounts: AccountsScene,
-  hosts: HostsScene,
-};