zidane-ui 9.0.4 → 9.1.3

package/src/onboarding/headless/labels.ts

@@ -1,280 +0,0 @@
-/**
- * The strings of the setup wizard, on top of those of the design system
- * (`labels.tsx`). It is one flat dictionary. An app overrides it with one
- * `<LabelsProvider>` or with the `labels` prop of `OnboardingProvider`. Step
- * names, titles and ledes come from the step copy of the core
- * (`ONBOARDING_STEPS`), and so do the sentences that the terminal app says
- * too (`ONBOARDING_WORDS`), so the two apps say the same thing.
- */
-import {
-  joinNames,
-  ONBOARDING_STEPS,
-  ONBOARDING_WORDS,
-  type OnboardingProviderPick,
-  type OnboardingStepId,
-} from 'zidane/chat/pure';
-
-import { DEFAULT_LABELS } from '../../labels';
-
-const COMPACT = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });
-
-const STEP_COPY = Object.fromEntries(ONBOARDING_STEPS.map((step) => [step.id, step])) as Record<
-  OnboardingStepId,
-  (typeof ONBOARDING_STEPS)[number]
->;
-
-const EFFORTS: Record<NonNullable<OnboardingProviderPick['effort']>, string> = {
-  off: 'Off',
-  minimal: 'Minimal',
-  low: 'Low',
-  medium: 'Medium',
-  high: 'High',
-  xhigh: 'Extra high',
-  max: 'Max',
-  adaptive: 'Adaptive',
-};
-
-/** The default English strings of the setup wizard, merged over the design system's labels. */
-export const DEFAULT_ONBOARDING_LABELS = {
-  ...DEFAULT_LABELS,
-  ...ONBOARDING_WORDS,
-  // Steps: the core's copy.
-  stepLabel: (step: OnboardingStepId) => STEP_COPY[step].label,
-  stepTitle: (step: OnboardingStepId) => STEP_COPY[step].title,
-  stepLede: (step: OnboardingStepId) => STEP_COPY[step].lede,
-  // Flow
-  setup: 'Setup',
-  skipSetup: 'Skip setup',
-  start: 'Start',
-  done: 'Done',
-  notNow: 'Not now',
-  saveFailed: (message: string) => `The setup was not saved. ${message}`,
-  recommended: 'recommended',
-  usedIn: (step: string) => `Used in ${step}`,
-  // Welcome
-  fullSetupDetail: 'Choose your provider, tools, look and how zidane works.',
-  fullSetupTime: '2 min',
-  quickStartDetail: 'Sign in and bring your setup. Keep the defaults for the rest.',
-  quickStartTime: '30 s',
-  // Connect
-  viaExtension: 'Installs an extension',
-  connected: 'Connected',
-  readyEnv: (envKey: string) => `Uses ${envKey} from your environment`,
-  readyOAuth: 'Signed in',
-  readyKey: 'Key saved',
-  readyConfigured: 'Set up',
-  useSignIn: 'Sign in',
-  useApiKey: 'API key',
-  configure: 'Set up',
-  signInWith: (account: string) => `Sign in with ${account}`,
-  apiKeyFor: (provider: string) => `${provider} API key`,
-  save: 'Save',
-  saving: 'Saving…',
-  installProvider: (provider: string) => `Install ${provider}`,
-  installing: 'Installing…',
-  effortLabel: (level: NonNullable<OnboardingProviderPick['effort']>) => EFFORTS[level],
-  testOk: (model: string, seconds: string) => `${model} answered in ${seconds} s`,
-  testFailed: 'The model did not answer',
-  testAgain: 'Test again',
-  connectFirst: 'Connect a provider to continue',
-  // Bring your setup
-  importFrom: (agent: string) => `From ${agent}`,
-  importNothing: 'Nothing new to copy',
-  readInPlaceTitle: (agents: readonly string[]) => joinNames(agents),
-  readInPlaceLabel: 'Use their setup without copying it',
-  // Connectors
-  added: 'Added',
-  toAdd: (count: number) => `${count} to add`,
-  fromImport: (agent: string) => `From ${agent}`,
-  tokenSignIn: 'Needs a token',
-  tokenOrGhLogin: 'Uses your gh login or a token',
-  tokenOptionalAuth: 'Token is optional',
-  noAccount: 'No account needed',
-  tokenFor: (connector: string) => `${connector} token`,
-  tokenOptional: 'Optional',
-  createToken: 'Create a token',
-  usesGhLogin: (login?: string) => (login ? `Uses your gh login, @${login}` : 'Uses your gh login'),
-  useToken: 'Use a token instead',
-  useGhLogin: 'Use my gh login',
-  noGhLogin: 'No gh login was found. Run gh auth login, or paste a token.',
-  // Tutorial scenes: the words in the pictures. The titles and steps are the core's (`tutorials`).
-  sceneAgent: 'zidane',
-  sceneServer: 'MCP server',
-  sceneService: 'Linear',
-  sceneMcpFile: 'mcps.json',
-  sceneAddServer: '+ linear',
-  sceneSignedIn: 'Signed in',
-  sceneCall: 'list_issues',
-  sceneResult: '3 issues',
-  sceneSkillNames: ['tdd', 'pdf', 'docx'] as const,
-  sceneSkillAbouts: ['Test first', 'Read PDFs'] as const,
-  sceneSkillsFolder: 'skills/',
-  sceneSystemPrompt: 'System prompt',
-  sceneSkillPrompt: 'Add a rate limiter',
-  sceneSkillUsing: 'Using tdd',
-  scenePromptParts: ['zidane rules', 'AGENTS.md', 'MCP servers', 'Skills'] as const,
-  scenePromptTokens: ['2.1k', '640', '320', '410'] as const,
-  sceneSystemFile: 'SYSTEM.md',
-  sceneNewRun: 'New run',
-  sceneExtensionFile: 'hello/index.ts',
-  sceneExtensionCode: [
-    'export default defineExtension({',
-    "  name: 'hello',",
-    '  setup(ctx) {',
-    "    ctx.registerCommand('standup')",
-  ] as const,
-  sceneExtensionName: 'hello',
-  sceneExtensionAdds: ['/standup', 'deploy', 'Panel', 'Provider'] as const,
-  sceneProjectExtension: 'project-tools',
-  sceneNeedsTrust: 'Needs trust',
-  sceneSession: 'Session',
-  sceneLocal: 'Local',
-  sceneCommand: '$ npm test',
-  sceneWorktree: 'Worktree',
-  sceneBranches: ['main', 'fix-login'] as const,
-  sceneSandbox: 'Sandbox',
-  sceneSandboxes: ['Docker', 'E2B', 'Daytona'] as const,
-  scenePath: 'src/auth.ts:42',
-  sceneFilesPanel: 'Files panel',
-  sceneEditor: '$EDITOR',
-  sceneClick: 'Click',
-  sceneCmdClick: '⌘-click',
-  sceneFileName: 'auth.ts',
-  sceneSaved: 'Saved',
-  sceneCode: 'return user.',
-  sceneCodeTypo: 'nmae',
-  sceneDiagnostic: 'Did you mean name?',
-  sceneProvider: 'Claude',
-  sceneOr: 'or',
-  sceneApiKey: 'sk-ant-••••••••',
-  sceneCredentials: 'credentials.json',
-  sceneZidaneFolder: '~/.zidane',
-  sceneOnlyYou: 'Only you',
-  sceneDesktop: 'Desktop',
-  sceneTerminal: 'Terminal',
-  sceneEnvKey: 'ANTHROPIC_API_KEY',
-  sceneHost: 'vps-1',
-  sceneServerStart: '$ zidane server start',
-  sceneListening: 'Listening on 127.0.0.1:4280',
-  sceneTokenCreate: '$ zidane server token create --name laptop',
-  sceneToken: 'zds_3f2a…',
-  sceneWss: 'wss://',
-  // Skills
-  sourceField: 'Repository or package',
-  browse: 'Browse',
-  sourceName: (label: string, repo: string) => `${label}, ${repo}`,
-  sourceChipName: (label: string, picked: number) => (picked > 0 ? `${label}, ${picked} picked` : label),
-  viewOnGithub: 'View on GitHub',
-  viewOnNpm: 'View on npm',
-  allSources: 'All sources',
-  pack: 'Pack',
-  stars: (count: number) => `${COMPACT.format(count)} stars`,
-  skillsPicked: (count: number) => `${count} picked`,
-  selectAll: 'Select all',
-  clearPicks: 'Select none',
-  filterSkills: 'Filter skills',
-  noSkillMatch: 'No skill matches the filter.',
-  // Extensions
-  installed: 'Installed',
-  toInstall: (count: number) => `${count} to install`,
-  needs: (list: readonly string[]) => `Needs ${list.join(', ')}`,
-  addsConnector: (connector: string) => `Picking it also adds the ${connector} connector`,
-  // Look
-  mode: 'Mode',
-  modeSystem: 'System',
-  modeLight: 'Light',
-  modeDark: 'Dark',
-  darkTheme: 'Dark theme',
-  lightTheme: 'Light theme',
-  accent: 'Accent color',
-  accentTheme: 'From the theme',
-  appIcon: 'App icon',
-  isDefault: (name: string) => `${name}, the default`,
-  // Conversation
-  moreOptions: 'More options',
-  previewPresets: 'Preview a preset',
-  presetYours: 'Your settings',
-  usePreset: (preset: string) => `Use ${preset}`,
-  matchesPreset: (preset: string) => `Matches ${preset}`,
-  presetInUse: 'In use',
-  // Autonomy
-  usesTokens: 'Uses tokens',
-  whatYoullSee: 'What you will see',
-  approvalAsk: (command: string) => `Allow zidane to run ${command}?`,
-  sampleCommand: 'bun test src/limits.test.ts',
-  sampleCall: 'read_file src/routes/chat.ts',
-  sampleShortCommand: 'bun test',
-  deny: 'Deny',
-  alwaysAllow: 'Always allow',
-  allowOnce: 'Allow once',
-  approvedByModel: 'The decision model approved this call, because it only reads a file.',
-  askedWhenUnsure: 'When the decision model is not sure, it asks you, like Ask.',
-  runsWithoutAsking: 'Runs without asking.',
-  // Features
-  experimental: 'Experimental',
-  // Mini demos: the decorative scenes on the cards. Assistive tech skips them.
-  demoScript: ["const files = await glob('src/**/*.ts')", 'for (const file of files) await read(file)'] as const,
-  demoCalls: '12 calls',
-  demoStep: '1 step',
-  demoSearchQuery: 'vite 6 breaking changes',
-  demoSearchResults: [
-    'vite.dev/guide/migration',
-    'github.com/vitejs/vite/releases',
-    'vite.dev/blog/announcing-vite6',
-  ] as const,
-  demoTyped: 'Open src/comp',
-  demoGhost: 'onents/Button.tsx',
-  demoTab: 'Tab',
-  demoGenericTitle: 'New session',
-  demoTitle: 'Fix the login redirect',
-  demoSpacePersonal: 'Personal',
-  demoSpaceWork: 'Work',
-  demoPersonalSessions: ['Plan the trip to Lisbon', 'Sort the tax receipts'] as const,
-  demoWorkSessions: ['Fix the login redirect', 'Review the rate limit'] as const,
-  demoVersion: 'v8.1.0',
-  demoUpdateReady: 'Update ready',
-  demoUsageLabel: 'This week',
-  demoUsagePercent: '43%',
-  demoAddress: 'localhost:5173',
-  demoPageButton: 'Sign in',
-  demoTerminalLines: ['$ bun dev', 'ready on localhost:5173', 'GET /chat 200 in 12 ms'] as const,
-  demoTerminalError: "error: cannot find module './limits'",
-  demoNotifyApp: 'zidane',
-  demoNotifyBody: 'The run finished. 3 files changed.',
-  demoFolders: ['my-app', '.zidane', 'extensions', 'deploy.ts'] as const,
-  demoCommitCommand: '/commit',
-  demoCommitMessage: 'feat: rate limit /chat',
-  demoBranch: 'main',
-  demoGoal: '/goal all tests pass',
-  demoIssuePrompt: 'Fix the flaky login test',
-  demoIssue: 'ENG-142',
-  demoPromptStart: 'Write tests for',
-  demoPromptGhost: ' the rate limiter',
-  demoRiskyCall: 'rm -rf dist',
-  demoApproved: 'Approved',
-  demoAsksYou: 'Asks you',
-  demoFlowCalls: ['read_file src/app.ts', 'edit src/limits.ts', 'bun test', 'git commit'] as const,
-  demoProjectPath: '~/code/my-app',
-  demoSecretPath: '~/.ssh',
-  demoAllowed: 'Allowed',
-  demoBlocked: 'Blocked',
-  // Ready and background work
-  change: 'Change',
-  changeStep: (step: string) => `Change ${step}`,
-  taskQueued: 'Waiting',
-  taskRunning: 'Working',
-  taskDone: 'Done',
-  taskFailed: 'Failed',
-  taskNeedsSignIn: 'Needs sign-in',
-  signIn: 'Sign in',
-  recapLookSystem: (dark: string, light: string) => `${dark} and ${light}, as the system picks`,
-  recapAccent: (accent: string) => `${accent} accent`,
-  recapIcon: (icon: string) => `${icon} icon`,
-  // The card that opens Connect from outside the wizard (`ConnectProviderCard`)
-  connectProviderTitle: 'Connect a provider',
-  connectProviderBody: 'zidane needs an AI provider to answer.',
-  connectProviderAction: 'Connect',
-};
-
-/** The setup wizard's strings: {@link DEFAULT_ONBOARDING_LABELS}' keys. */
-export type OnboardingLabels = typeof DEFAULT_ONBOARDING_LABELS;

package/src/onboarding/index.ts

@@ -1,20 +0,0 @@
-/**
- * `zidane-ui/onboarding`: the setup wizard over an `OnboardingHost`:
- * `OnboardingProvider` (and `OnboardingHostProvider`, the host in context),
- * `OnboardingFlow`, the eleven steps, the marks of the services it names, the
- * skill source browser, the tutorials, `ConnectProviderCard` (the way into
- * Connect from outside the wizard), and the hooks and frame to build your own. The host contract, the fixture host and the
- * strings are `zidane-ui/onboarding/headless`.
- */
-export * from './ConnectProviderCard';
-export * from './conversation';
-export * from './demos/index';
-export * from './marks';
-export * from './OnboardingFlow';
-export * from './OnboardingProvider';
-export * from './OnboardingStepFrame';
-export * from './skills/SkillSourceBrowser';
-export * from './tutorials';
-export * from './useSignIn';
-// `./steps/index`, not `./steps`: explicit, like the chat layer's subfolders.
-export * from './steps/index';

package/src/onboarding/marks.tsx

@@ -1,69 +0,0 @@
-/**
- * The marks of the services the wizard names: a model provider and a native
- * extension, each a `BrandMark` with its logo, or the icon or the letter
- * that stands in for it. Connect, Extensions and Ready draw them, and so can
- * an app's Settings and docs, so a service looks the same everywhere. A
- * connector has a logo or a letter, so a plain `BrandMark` draws it.
- */
-import { nativeExtensionByName, type NativeExtensionEntry, type OnboardingProvider } from 'zidane/chat/pure';
-
-import { BrandMark, type BrandMarkSize } from '../components/BrandMark';
-
-/** The icons of the native extensions without a logo. The others without one show their letter. */
-export const NATIVE_EXTENSION_ICONS: Readonly<Record<string, string>> = { goal: 'i-ph-target' };
-
-/** Props of {@link ProviderMark}. */
-export interface ProviderMarkProps {
-  /** The provider. */
-  provider: Pick<OnboardingProvider, 'key' | 'label' | 'brand' | 'viaExtension'>;
-  /** 18, 28 or 40 pixels. */
-  size?: BrandMarkSize;
-  /** Extra classes on the root element. */
-  className?: string;
-}
-
-/**
- * Renders a provider's logo: its own, the one of the extension that adds it, a chip for a local server, or its letter.
- *
- * @param props - Component props.
- */
-export function ProviderMark({ provider, size = 'md', className }: ProviderMarkProps) {
-  const brand =
-    provider.brand ?? (provider.viaExtension ? nativeExtensionByName(provider.viaExtension)?.brand : undefined);
-  return (
-    <BrandMark
-      brand={brand}
-      label={provider.label}
-      icon={provider.key === 'local' ? 'i-ph-cpu' : undefined}
-      size={size}
-      className={className}
-    />
-  );
-}
-
-/** Props of {@link ExtensionMark}. */
-export interface ExtensionMarkProps {
-  /** The extension: its name, label and logo. */
-  entry: Pick<NativeExtensionEntry, 'name' | 'label' | 'brand'>;
-  /** 18, 28 or 40 pixels. */
-  size?: BrandMarkSize;
-  /** Extra classes on the root element. */
-  className?: string;
-}
-
-/**
- * Renders a native extension's logo, its icon, or its letter.
- *
- * @param props - Component props.
- */
-export function ExtensionMark({ entry, size = 'md', className }: ExtensionMarkProps) {
-  return (
-    <BrandMark
-      brand={entry.brand}
-      label={entry.label}
-      icon={NATIVE_EXTENSION_ICONS[entry.name]}
-      size={size}
-      className={className}
-    />
-  );
-}

package/src/onboarding/preview-attachments.ts

@@ -1,39 +0,0 @@
-/**
- * The files attached to the preview conversation's prompt
- * (`ONBOARDING_PREVIEW_ATTACHMENTS` in core): a chart of the traffic and the
- * team's rate-limit notes. Core lists them by name. This module supplies their
- * bytes, so the transcript shows the chart as a thumbnail and opens both in
- * its lightbox.
- */
-import type { ChatEvent } from '../chat/headless/host';
-
-const TRAFFIC_SVG =
-  '<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" font-family="-apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif"><defs><linearGradient id="fill" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#6ea8ff" stop-opacity="0.35"/><stop offset="1" stop-color="#6ea8ff" stop-opacity="0"/></linearGradient></defs><rect width="640" height="360" rx="18" fill="#0f1117"/><text x="32" y="46" fill="#e8eaf0" font-size="17" font-weight="600">Requests a minute on /chat</text><text x="32" y="70" fill="#8a90a0" font-size="13">Last night, by client IP</text><g stroke="#20242f" stroke-width="1"><line x1="32" y1="120" x2="608" y2="120"/><line x1="32" y1="180" x2="608" y2="180"/><line x1="32" y1="240" x2="608" y2="240"/><line x1="32" y1="300" x2="608" y2="300"/></g><g fill="#5c6272" font-size="11" text-anchor="end"><text x="608" y="114">300</text><text x="608" y="174">200</text><text x="608" y="234">100</text></g><path d="M32 294 L80 292 L128 295 L176 291 L224 293 L272 290 L320 292 L368 289 L396 262 L418 178 L436 96 L452 150 L470 236 L494 284 L536 290 L576 292 L608 291 L608 300 L32 300 Z" fill="url(#fill)"/><path d="M32 294 L80 292 L128 295 L176 291 L224 293 L272 290 L320 292 L368 289 L396 262 L418 178 L436 96 L452 150 L470 236 L494 284 L536 290 L576 292 L608 291" fill="none" stroke="#6ea8ff" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/><line x1="32" y1="288" x2="608" y2="288" stroke="#ff6b6b" stroke-width="1.5" stroke-dasharray="6 6"/><text x="36" y="280" fill="#ff8a8a" font-size="12" font-weight="500">Limit: 20 a minute</text><circle cx="436" cy="96" r="5.5" fill="#6ea8ff" stroke="#0f1117" stroke-width="3"/><rect x="452" y="80" width="148" height="30" rx="9" fill="#1b2030"/><text x="465" y="100" fill="#e8eaf0" font-size="12.5" font-weight="600">340 a minute, one IP</text><g fill="#5c6272" font-size="11"><text x="32" y="326">22:00</text><text x="224" y="326">00:00</text><text x="416" y="326">02:00</text><text x="572" y="326">04:00</text></g></svg>';
-
-const LIMITS_MD =
-  '# Rate limits\n\n- /chat: 20 requests a minute for each IP\n- Answer 429 over the limit, with a Retry-After header in seconds\n- Never limit /health\n';
-
-/** The bytes of each preview attachment, by name, as data URLs. */
-const PREVIEW_ATTACHMENT_URLS: Readonly<Record<string, string>> = {
-  'traffic.svg': `data:image/svg+xml;charset=utf-8,${encodeURIComponent(TRAFFIC_SVG)}`,
-  'limits.md': `data:text/markdown;charset=utf-8,${encodeURIComponent(LIMITS_MD)}`,
-};
-
-/**
- * The preview events with the bytes of their attachments, for a transcript
- * that shows them.
- *
- * @param events - The preview events, such as `ONBOARDING_PREVIEW_EVENTS`.
- */
-export function withPreviewAttachments(events: readonly ChatEvent[]): ChatEvent[] {
-  return events.map((event) =>
-    event.kind === 'user-prompt' && event.attachments
-      ? {
-          ...event,
-          attachments: event.attachments.map((att) =>
-            PREVIEW_ATTACHMENT_URLS[att.name] ? { ...att, dataUrl: PREVIEW_ATTACHMENT_URLS[att.name] } : att,
-          ),
-        }
-      : event,
-  );
-}