zidane-ui 9.1.1 → 9.1.3

package/src/onboarding/conversation.tsx

@@ -1,196 +0,0 @@
-/**
- * The conversation preview: a sample conversation that the kit's own
- * transcript renders with a set of transcript settings. The wizard's
- * Conversation step shows it beside its presets. `ConversationPresetPreview`
- * adds tabs to preview your settings and each preset before you apply one,
- * for a Settings page.
- */
-import { useId, useMemo, useState, type CSSProperties } from 'react';
-import {
-  ONBOARDING_PREVIEW_EVENTS,
-  TRANSCRIPT_PRESETS,
-  transcriptPreset,
-  transcriptPresetOf,
-  type TranscriptPresetId,
-} from 'zidane/chat/pure';
-import type { Settings } from 'zidane/chat';
-
-import { Transcript, type TranscriptOptions } from '../chat/Transcript';
-import { buttonClass } from '../components/button';
-import { PreviewWindow } from '../components/PreviewWindow';
-import { Segmented } from '../components/Segmented';
-import { useOnboardingLabels } from './OnboardingProvider';
-import { withPreviewAttachments } from './preview-attachments';
-
-/** The diagram the sample's answer ends on, so the preview shows the Diagrams setting at work. */
-const ANSWER_DIAGRAM = [
-  '```mermaid',
-  'flowchart LR',
-  '  R[Request] --> W{Under 20 a minute?}',
-  '  W -- yes --> H[Chat handler]',
-  '  W -- no --> L[429 with Retry-After]',
-  '```',
-].join('\n');
-
-/** The events with {@link ANSWER_DIAGRAM} after the last reply's text. */
-function withAnswerDiagram(events: typeof ONBOARDING_PREVIEW_EVENTS): typeof ONBOARDING_PREVIEW_EVENTS {
-  const last = events.reduce((at, event, i) => (event.kind === 'markdown' ? i : at), -1);
-  return events.map((event, i) => (i === last ? { ...event, text: `${event.text}\n\n${ANSWER_DIAGRAM}` } : event));
-}
-
-/** The sample conversation, with the chart and the notes its prompt attaches, and a diagram in its answer. */
-const SAMPLE = withAnswerDiagram(withPreviewAttachments(ONBOARDING_PREVIEW_EVENTS));
-
-/** The settings that change how the transcript draws the sample. */
-const OPTION_KEYS = [
-  'showRowIcons',
-  'showThinking',
-  'showToolResults',
-  'showEditDiffs',
-  'showFullShellOutput',
-  'groupToolCalls',
-  'toolCallDisplay',
-  'transcriptDensity',
-  'hideSubagentOutput',
-  'showRunReceipt',
-  'thinkingAutoExpand',
-  'showCacheNotices',
-  'showToolAttachments',
-  'renderDiagrams',
-] as const;
-
-/**
- * The transcript options that a set of settings gives: the keys it sets, the rest left to the transcript's defaults.
- *
- * @param settings - The settings to read.
- */
-export function transcriptPreviewOptions(settings: Partial<Settings>): Partial<TranscriptOptions> {
-  const options: Partial<TranscriptOptions> = {};
-  for (const key of OPTION_KEYS) if (settings[key] !== undefined) Object.assign(options, { [key]: settings[key] });
-  return options;
-}
-
-/** Props of {@link ConversationPreview}. */
-export interface ConversationPreviewProps {
-  /** The settings to draw the sample with. */
-  settings: Partial<Settings>;
-  /** The caption of the window. Defaults to the `preview` label. */
-  title?: string;
-  /** The height of the window's scroller, in pixels. */
-  maxHeight?: number;
-  /** Extra classes on the window. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the sample conversation with a set of transcript settings, in a small window.
- *
- * @param props - Component props.
- */
-export function ConversationPreview({
-  settings,
-  title,
-  maxHeight = 440,
-  className = '',
-  style,
-}: ConversationPreviewProps) {
-  const labels = useOnboardingLabels();
-  const options = useMemo(() => transcriptPreviewOptions(settings), [settings]);
-  // One id per preview: two transcripts with the same session id on a page leave one empty.
-  const sessionId = useId();
-  return (
-    <PreviewWindow title={title ?? labels.preview} label={title ?? labels.preview} className={className} style={style}>
-      <div className="overflow-y-auto p-3" style={{ maxHeight }}>
-        <Transcript events={SAMPLE} streaming={false} sessionId={sessionId} options={options} />
-      </div>
-    </PreviewWindow>
-  );
-}
-
-type Tab = 'yours' | TranscriptPresetId;
-
-/** Props of {@link ConversationPresetPreview}. */
-export interface ConversationPresetPreviewProps {
-  /** The settings in effect. */
-  settings: Partial<Settings>;
-  /** Applies a preset: every setting of `transcriptPreset(id).settings`. */
-  onApply: (preset: TranscriptPresetId) => void;
-  /** The height of the preview's scroller, in pixels. */
-  maxHeight?: number;
-  /** Extra classes on the block. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the sample conversation with tabs for your settings and for each
- * preset. A tab only previews. The Use button applies the previewed preset.
- *
- * @param props - Component props.
- */
-export function ConversationPresetPreview({
-  settings,
-  onApply,
-  maxHeight = 360,
-  className = '',
-  style,
-}: ConversationPresetPreviewProps) {
-  const labels = useOnboardingLabels();
-  const [tab, setTab] = useState<Tab>('yours');
-  const current = transcriptPresetOf(settings);
-  const shown = useMemo(
-    () => (tab === 'yours' ? settings : { ...settings, ...transcriptPreset(tab).settings }),
-    [tab, settings],
-  );
-  const status =
-    tab === 'yours'
-      ? current === 'custom'
-        ? labels.custom
-        : labels.matchesPreset(transcriptPreset(current).label)
-      : tab === current
-        ? labels.presetInUse
-        : null;
-  return (
-    <div className={`flex flex-col gap-3 min-w-0 ${className}`} style={style}>
-      <div className="flex flex-wrap items-center gap-x-3 gap-y-2 min-w-0">
-        <Segmented<Tab>
-          size="sm"
-          ariaLabel={labels.previewPresets}
-          value={tab}
-          onChange={setTab}
-          options={[
-            { value: 'yours', label: labels.presetYours },
-            ...TRANSCRIPT_PRESETS.map((preset) => ({ value: preset.id, label: preset.label })),
-          ]}
-        />
-        <span className="ml-auto flex items-center gap-2 min-w-0">
-          {status !== null ? (
-            <span className="zg-meta truncate">{status}</span>
-          ) : (
-            tab !== 'yours' && (
-              <button
-                type="button"
-                onClick={() => {
-                  onApply(tab);
-                  setTab('yours');
-                }}
-                className={buttonClass({ variant: 'primary', size: 'sm' })}
-              >
-                {labels.usePreset(transcriptPreset(tab).label)}
-              </button>
-            )
-          )}
-        </span>
-      </div>
-      {tab !== 'yours' && (
-        <p className="m-0 px-1 text-zg-label text-[var(--zg-text-muted)] text-pretty">
-          {transcriptPreset(tab).description}
-        </p>
-      )}
-      <ConversationPreview settings={shown} maxHeight={maxHeight} />
-    </div>
-  );
-}

package/src/onboarding/demos/autonomy.tsx

@@ -1,154 +0,0 @@
-/**
- * The mini demos of the Autonomy step: one per approval mode, and the
- * sandbox. Ask stops at an approval bar. Model decision clears a safe call
- * and asks you about a risky one. Full access runs every call without a stop.
- * The sandbox allows the project and blocks your keys.
- */
-import type { ReactNode } from 'react';
-import type { ApprovalMode } from 'zidane/chat';
-
-import { buttonClass } from '../../components/button';
-import { MetaChip } from '../../components/Form';
-import { useOnboardingLabels } from '../OnboardingProvider';
-import { delay, DemoStage, Pointer, type DemoProps } from './parts';
-
-/** Ask: the approval bar, with Deny and Allow once. */
-function AskDemo({ on, className, style }: DemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <span className="zg-raised border rounded-zg-lg relative flex flex-col gap-2 p-2.5 w-full max-w-[280px]">
-        <span className="flex items-center gap-1.5 min-w-0">
-          <span aria-hidden className="i-ph-hand text-zg-label text-[var(--zg-accent)] shrink-0" />
-          <span className="text-zg-meta truncate">{labels.approvalAsk(labels.sampleShortCommand)}</span>
-        </span>
-        <span className="flex items-center justify-end gap-1">
-          <span className={buttonClass({ variant: 'ghost', size: 'xs' })}>{labels.deny}</span>
-          <span className={`zg-loop zg-demo-press ${buttonClass({ variant: 'solid', size: 'xs' })}`}>
-            {labels.allowOnce}
-          </span>
-        </span>
-        <Pointer className="absolute right-4 -bottom-1" from={[-70, -30]} />
-      </span>
-    </DemoStage>
-  );
-}
-
-function CallRow({ call, verdict }: { call: string; verdict: ReactNode }) {
-  return (
-    <span className="flex items-center gap-2 h-6 px-2 min-w-0">
-      <span className="flex-1 min-w-0 truncate font-mono text-zg-badge">{call}</span>
-      {verdict}
-    </span>
-  );
-}
-
-/** Model decision: a safe call approved by the decision model, a risky one sent to you. */
-function DecideDemo({ on, className, style }: DemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <span className="zg-raised border rounded-zg-lg flex flex-col py-1 w-full max-w-[280px]">
-        <CallRow
-          call={labels.sampleCall}
-          verdict={
-            <span className="zg-loop zg-demo-arrive" style={delay(300)}>
-              <MetaChip tone="success">
-                <span aria-hidden className="i-ph-scales" />
-                {labels.demoApproved}
-              </MetaChip>
-            </span>
-          }
-        />
-        <CallRow
-          call={labels.demoRiskyCall}
-          verdict={
-            <span className="zg-loop zg-demo-arrive" style={delay(1200)}>
-              <MetaChip tone="warn">
-                <span aria-hidden className="i-ph-hand" />
-                {labels.demoAsksYou}
-              </MetaChip>
-            </span>
-          }
-        />
-      </span>
-    </DemoStage>
-  );
-}
-
-/** Full access: the calls run one after the other, with no stop. */
-function OffDemo({ on, className, style }: DemoProps) {
-  const labels = useOnboardingLabels();
-  const rows = [...labels.demoFlowCalls, ...labels.demoFlowCalls];
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <span className="zg-raised border rounded-zg-lg w-full max-w-[280px] h-[88px] overflow-hidden">
-        <span className="zg-demo-fade-y block h-full overflow-hidden">
-          <span className="zg-loop zg-demo-flow flex flex-col py-1">
-            {rows.map((call, i) => (
-              <span key={i} className="flex items-center gap-2 h-6 px-2.5 min-w-0">
-                <span aria-hidden className="i-ph-lightning-fill text-zg-label text-zg-warn shrink-0" />
-                <span className="flex-1 min-w-0 truncate font-mono text-zg-badge">{call}</span>
-                <span aria-hidden className="i-ph-check text-zg-label text-zg-success shrink-0" />
-              </span>
-            ))}
-          </span>
-        </span>
-      </span>
-    </DemoStage>
-  );
-}
-
-/** Props of {@link ApprovalDemo}. */
-export interface ApprovalDemoProps extends DemoProps {
-  /** The approval mode. */
-  mode: ApprovalMode;
-}
-
-/**
- * Renders the demo of an approval mode.
- *
- * @param props - Component props.
- */
-export function ApprovalDemo({ mode, on, className, style }: ApprovalDemoProps) {
-  if (mode === 'ask') return <AskDemo on={on} className={className} style={style} />;
-  if (mode === 'decide') return <DecideDemo on={on} className={className} style={style} />;
-  return <OffDemo on={on} className={className} style={style} />;
-}
-
-/** Props of {@link SandboxDemo}. */
-export type SandboxDemoProps = DemoProps;
-
-/**
- * Renders the sandbox demo: the project allowed, `~/.ssh` blocked.
- *
- * @param props - Component props.
- */
-export function SandboxDemo({ on, className, style }: SandboxDemoProps) {
-  const labels = useOnboardingLabels();
-  const row = 'flex items-center gap-2 h-7 px-2.5 min-w-0';
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <span className="flex flex-col gap-1.5 w-full max-w-[300px]">
-        <span className={`zg-raised border rounded-zg-md ${row}`}>
-          <span aria-hidden className="i-ph-folder-open text-zg-label text-[var(--zg-text-muted)] shrink-0" />
-          <span className="flex-1 min-w-0 truncate font-mono text-zg-meta">{labels.demoProjectPath}</span>
-          <MetaChip tone="success">
-            <span aria-hidden className="i-ph-check" />
-            {labels.demoAllowed}
-          </MetaChip>
-        </span>
-        <span className={`zg-loop zg-demo-shake zg-tray rounded-zg-md ${row}`}>
-          <span aria-hidden className="i-ph-key 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-muted)]">
-            {labels.demoSecretPath}
-          </span>
-          <MetaChip tone="danger">
-            <span aria-hidden className="i-ph-prohibit" />
-            {labels.demoBlocked}
-          </MetaChip>
-        </span>
-      </span>
-    </DemoStage>
-  );
-}

package/src/onboarding/demos/extensions.tsx

@@ -1,183 +0,0 @@
-/**
- * The mini demos of the Extensions step, one per native extension: a commit
- * message written by git-flow, the runs of /goal, a Linear issue on a
- * prompt, a suggestion from a local model, and the Bolt sign-in.
- */
-import type { ReactNode } from 'react';
-import { connectorById, LOCAL_SERVER_BRANDS, nativeExtensionByName } from 'zidane/chat/pure';
-
-import { buttonClass } from '../../components/button';
-import { BrandMark } from '../../components/BrandMark';
-import { Keycap } from '../../components/Keycap';
-import { useOnboardingLabels } from '../OnboardingProvider';
-import { delay, DemoStage, MiniWindow, Pointer, type DemoProps } from './parts';
-
-const BOLT = nativeExtensionByName('bolt')?.label ?? '';
-const LINEAR = connectorById('linear')?.label ?? '';
-
-/** Props of {@link GitFlowDemo}. */
-export type GitFlowDemoProps = DemoProps;
-
-/** git-flow: /commit writes the commit message. */
-export function GitFlowDemo({ on, className, style }: GitFlowDemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <MiniWindow className="w-full max-w-[300px]" bodyClassName="px-3 pb-2.5 gap-1.5">
-        <span className="flex items-center gap-1.5 min-w-0">
-          <BrandMark
-            brand={nativeExtensionByName('git-flow')?.brand}
-            label={nativeExtensionByName('git-flow')?.label ?? ''}
-            size="sm"
-          />
-          <span className="font-mono text-zg-meta text-[var(--zg-accent)]">{labels.demoCommitCommand}</span>
-          <span className="ml-auto flex items-center gap-1 zg-meta">
-            <span aria-hidden className="i-ph-git-branch" />
-            {labels.demoBranch}
-          </span>
-        </span>
-        <span className="flex items-center min-w-0 font-mono text-zg-label whitespace-nowrap overflow-hidden">
-          <span className="zg-loop zg-demo-type-early truncate">{labels.demoCommitMessage}</span>
-          <span className="zg-loop zg-demo-pulse w-px h-3.5 shrink-0 bg-[var(--zg-accent)]" />
-        </span>
-      </MiniWindow>
-    </DemoStage>
-  );
-}
-
-/** Props of {@link GoalDemo}. */
-export type GoalDemoProps = DemoProps;
-
-/** goal: three runs in a loop, until the check passes. */
-export function GoalDemo({ on, className, style }: GoalDemoProps) {
-  const labels = useOnboardingLabels();
-  const node = 'zg-raised border grid place-items-center w-6 h-6 rounded-full shrink-0 font-mono text-zg-badge';
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <span className="flex flex-col items-center gap-3 w-full max-w-[280px]">
-        <span className="zg-tray flex items-center gap-1.5 h-6 px-2.5 rounded-full max-w-full min-w-0">
-          <span aria-hidden className="i-ph-target text-zg-label text-[var(--zg-accent)] shrink-0" />
-          <span className="font-mono text-zg-meta truncate">{labels.demoGoal}</span>
-        </span>
-        <span className="flex items-center w-full">
-          {[1, 2, 3].map((run) => (
-            <span key={run} className="contents">
-              <span className={`zg-loop zg-demo-light ${node}`} style={delay(run * 700 - 700)}>
-                {run}
-              </span>
-              <span
-                className="zg-loop zg-demo-light flex-1 h-px bg-[var(--zg-text-muted)]"
-                style={delay(run * 700 - 350)}
-              />
-            </span>
-          ))}
-          <span className={`zg-loop zg-demo-light ${node} !text-zg-success`} style={delay(2100)}>
-            <span aria-hidden className="i-ph-check-bold text-zg-label" />
-          </span>
-        </span>
-      </span>
-    </DemoStage>
-  );
-}
-
-function Composer({ children }: { children: ReactNode }) {
-  return (
-    <span className="zg-raised border rounded-full flex items-center gap-1.5 h-8 pl-3 pr-1.5 w-full max-w-[320px] min-w-0">
-      {children}
-    </span>
-  );
-}
-
-/** Props of {@link LinearDemo}. */
-export type LinearDemoProps = DemoProps;
-
-/** linear: a prompt with the issue it works on, as a badge. */
-export function LinearDemo({ on, className, style }: LinearDemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <Composer>
-        <span className="flex-1 min-w-0 truncate text-zg-label">{labels.demoIssuePrompt}</span>
-        <span className="zg-loop zg-demo-after zg-tray flex items-center gap-1 h-5 pl-0.5 pr-2 rounded-full shrink-0">
-          <BrandMark brand={connectorById('linear')?.brand} label={LINEAR} size="sm" className="!rounded-full" />
-          <span className="zg-meta !text-[var(--zg-text)]">{labels.demoIssue}</span>
-        </span>
-      </Composer>
-    </DemoStage>
-  );
-}
-
-/** Props of {@link AiAutocompleteDemo}. */
-export type AiAutocompleteDemoProps = DemoProps;
-
-/** ai-autocomplete: a local model suggests the end of the prompt. */
-export function AiAutocompleteDemo({ on, className, style }: AiAutocompleteDemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <span className="flex flex-col items-start gap-2 w-full max-w-[320px]">
-        <span className="zg-loop zg-demo-after zg-float flex items-center gap-1.5 h-6 pl-1 pr-1.5 ml-16 max-w-full min-w-0">
-          <BrandMark
-            brand={LOCAL_SERVER_BRANDS.ollama}
-            label={nativeExtensionByName('ai-autocomplete')?.label ?? ''}
-            size="sm"
-          />
-          <span className="text-zg-meta truncate">{labels.demoPromptGhost.trim()}</span>
-          <Keycap className="zg-keycap-sm shrink-0">{labels.demoTab}</Keycap>
-        </span>
-        <Composer>
-          <span className="flex items-center min-w-0 flex-1 text-zg-label whitespace-pre overflow-hidden">
-            <span className="shrink-0">{labels.demoPromptStart}</span>
-            <span className="zg-loop zg-demo-pulse w-px h-3.5 shrink-0 bg-[var(--zg-accent)]" />
-            <span className="zg-loop zg-demo-after truncate text-[var(--zg-text-muted)] opacity-70">
-              {labels.demoPromptGhost}
-            </span>
-          </span>
-        </Composer>
-      </span>
-    </DemoStage>
-  );
-}
-
-/** Props of {@link BoltDemo}. */
-export type BoltDemoProps = DemoProps;
-
-/** bolt: the Bolt sign-in card. */
-export function BoltDemo({ on, className, style }: BoltDemoProps) {
-  const labels = useOnboardingLabels();
-  return (
-    <DemoStage on={on} className={className} style={style}>
-      <span className="zg-raised border rounded-zg-lg relative flex flex-col items-center gap-2 px-4 py-3 w-full max-w-[220px]">
-        <BrandMark label={BOLT} />
-        <span className={`zg-loop zg-demo-press ${buttonClass({ variant: 'solid', size: 'xs' })} w-full`}>
-          {labels.signInWith(BOLT)}
-        </span>
-        <Pointer className="absolute right-8 bottom-1" from={[60, -40]} />
-      </span>
-    </DemoStage>
-  );
-}
-
-const DEMOS: Record<string, (props: DemoProps) => ReactNode> = {
-  'git-flow': GitFlowDemo,
-  goal: GoalDemo,
-  linear: LinearDemo,
-  'ai-autocomplete': AiAutocompleteDemo,
-  bolt: BoltDemo,
-};
-
-/** Props of {@link ExtensionDemo}. */
-export interface ExtensionDemoProps extends DemoProps {
-  /** The extension's name, such as `git-flow`. */
-  name: string;
-}
-
-/**
- * Renders the demo of a native extension, or nothing for an extension without one.
- *
- * @param props - Component props.
- */
-export function ExtensionDemo({ name, on, className, style }: ExtensionDemoProps) {
-  const Demo = DEMOS[name];
-  return Demo ? <Demo on={on} className={className} style={style} /> : null;
-}