zidane-ui 9.1.1 → 9.1.4

package/src/palette/usePaletteController.ts

@@ -1,229 +0,0 @@
-/**
- * The command palette's state as a hook: the root items gathered from every
- * source (on open and whenever one signals a change), the nested levels a
- * picker pushes, the query, the cursor, the ranking and what running a row
- * does. `CommandPalette` renders it; an app that adds its own groups (the
- * desktop app's matches inside conversations) reads `ranked` and `query`
- * from it and hands the extra groups to `CommandPalette`.
- *
- * A result that speaks to the agent (`insert`, `prompt`) closes the palette
- * and goes to `onInsert` / `onPrompt`: the app's composer, so the send path
- * stays the one the user knows.
- */
-import type { PaletteContext, PaletteGroup, PaletteItem, PaletteRunResult, RankedPaletteItem } from 'zidane/chat/pure';
-import { groupPaletteRows } from 'zidane/chat/pure';
-import {
-  startTransition,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type RefObject,
-} from 'react';
-
-import type { PaletteRowData } from '../components/palette/PaletteList';
-import type { PaletteNotice } from '../components/palette/PalettePanel';
-import { gatherPaletteItems } from './headless/gather';
-import { usePalette, usePaletteLabels } from './PaletteProvider';
-import { useRankedItems } from './useRankedItems';
-
-const NO_RECENTS: readonly string[] = [];
-
-/** The root items, by the source that gave them. */
-type ItemsBySource = ReadonlyMap<string, readonly PaletteItem[]>;
-
-interface Level {
-  title?: string;
-  placeholder?: string;
-  items: readonly PaletteItem[];
-  /** Nested levels keep the source that produced them so `run` goes back to it. */
-  source?: string;
-}
-
-/** Options of {@link usePaletteController}. */
-export interface PaletteControllerOptions {
-  /** The snapshot handed to every source. Keep it stable while nothing in it changed. */
-  context: PaletteContext;
-  /** Receives an `insert` result's text (the palette closes first). */
-  onInsert?: (text: string) => void;
-  /** Receives a `prompt` result's text (the palette closes first). */
-  onPrompt?: (text: string) => void;
-  /** The id Recent remembers for a run root item. Default: the item's own id. */
-  recentIdOf?: (item: PaletteItem) => string;
-}
-
-/** The palette's state and handlers, for {@link CommandPalette}. */
-export interface PaletteController {
-  /** The query typed. */
-  query: string;
-  /** Sets the query. */
-  setQuery: (query: string) => void;
-  /** The highlighted row's index. */
-  cursor: number;
-  /** Moves the highlight. */
-  setCursor: (index: number) => void;
-  /** Whether a picker's level is shown. */
-  nested: boolean;
-  /** The nested level's title. */
-  title: string | undefined;
-  /** The query field's placeholder. */
-  placeholder: string | undefined;
-  /** The ranked rows of the current level. */
-  ranked: readonly RankedPaletteItem[];
-  /** `ranked` grouped into sections. */
-  sections: readonly PaletteGroup[];
-  /** The rows are for the query typed. */
-  settled: boolean;
-  /** The root items have not landed yet. */
-  loading: boolean;
-  /** A row is running. */
-  running: boolean;
-  /** The notice line (a `notify` result or a failed run). */
-  notice: PaletteNotice | null;
-  /** Runs a row. Stable. */
-  run: (row: PaletteRowData<PaletteItem>) => void;
-  /** Leaves the nested level. Stable. */
-  back: () => void;
-  /** Closes the palette. */
-  close: () => void;
-  /** The query field (focused again when a level opens). */
-  inputRef: RefObject<HTMLInputElement | null>;
-}
-
-/**
- * The command palette's state: gather, rank, levels and running. Call it inside a `PaletteProvider`.
- *
- * @param options - The context and where agent-bound results go.
- */
-export function usePaletteController(options: PaletteControllerOptions): PaletteController {
-  const { context, onInsert, onPrompt, recentIdOf } = options;
-  const palette = usePalette();
-  const labels = usePaletteLabels();
-  const { sources, version, recents, markRecent, close } = palette;
-
-  const [bySource, setBySource] = useState<ItemsBySource | null>(null);
-  const [stack, setStack] = useState<Level[]>([]);
-  const [query, setQuery] = useState('');
-  const [cursor, setCursor] = useState(0);
-  const [notice, setNotice] = useState<PaletteNotice | null>(null);
-  const [running, setRunning] = useState(false);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  /*
-   * Root items: gathered on open and whenever a source signals a change. The
-   * open paints the panel and its focused input first: `asked` turns true in
-   * a transition after that frame (`useDeferredValue`'s initial `false`), so
-   * the sources are asked only then. Their items land in transitions too, so
-   * ranking and drawing the rows never holds up the open or a keystroke. A
-   * source still answering keeps its previous items until it does.
-   */
-  const asked = useDeferredValue(true, false);
-  useEffect(() => {
-    if (!asked) return undefined;
-    const land = (update: (current: ItemsBySource | null) => ItemsBySource) =>
-      startTransition(() => setBySource(update));
-    const { ready, cancel } = gatherPaletteItems(sources, context, (id, items) =>
-      land((current) => new Map(current).set(id, items)),
-    );
-    land((current) => {
-      const next = new Map(current);
-      for (const [id, items] of ready) next.set(id, items);
-      return next;
-    });
-    return cancel;
-  }, [asked, sources, version, context]);
-  const root = useMemo(() => (bySource ? sources.flatMap((s) => bySource.get(s.id) ?? []) : null), [bySource, sources]);
-
-  const level = stack.at(-1);
-  const items = level?.items ?? root ?? [];
-  const nested = stack.length > 0;
-  const levelRecents = nested ? NO_RECENTS : recents;
-  const { rows: ranked, settled } = useRankedItems(items, query, levelRecents);
-  const sections = useMemo(() => groupPaletteRows(ranked, query, levelRecents), [ranked, query, levelRecents]);
-  const loading = root === null && !nested;
-
-  const runRow = useCallback(
-    async (row: PaletteRowData<PaletteItem>) => {
-      const item = row.item;
-      if (item.disabled || running) return;
-      const sourceId = level?.source ?? item.source;
-      const source = sources.find((s) => s.id === sourceId);
-      if (!source) return;
-      setRunning(true);
-      let result: PaletteRunResult;
-      try {
-        result = await source.run(item.id, context);
-      } catch (err) {
-        setRunning(false);
-        setNotice({ text: err instanceof Error ? err.message : String(err), tone: 'error' });
-        return;
-      }
-      setRunning(false);
-      if (!nested) markRecent(recentIdOf ? recentIdOf(item) : item.id);
-      if (!result) {
-        close();
-        return;
-      }
-      switch (result.kind) {
-        case 'items':
-          setStack((s) => [
-            ...s,
-            { title: result.title, placeholder: result.placeholder, items: result.items, source: sourceId },
-          ]);
-          setQuery('');
-          setCursor(0);
-          inputRef.current?.focus();
-          return;
-        case 'insert':
-          close();
-          onInsert?.(result.text);
-          return;
-        case 'prompt':
-          close();
-          onPrompt?.(result.text);
-          return;
-        case 'notify':
-          setNotice({ text: result.text, tone: result.tone ?? 'info' });
-          return;
-      }
-    },
-    [level, sources, context, running, nested, markRecent, close, recentIdOf, onInsert, onPrompt],
-  );
-
-  // Stable for the memoized rows: they never re-render because a callback changed.
-  const runRowRef = useRef(runRow);
-  useLayoutEffect(() => {
-    runRowRef.current = runRow;
-  });
-  const run = useCallback((row: PaletteRowData<PaletteItem>) => void runRowRef.current(row), []);
-
-  const back = useCallback(() => {
-    setStack((s) => s.slice(0, -1));
-    setQuery('');
-    setCursor(0);
-  }, []);
-
-  return {
-    query,
-    setQuery,
-    cursor,
-    setCursor,
-    nested,
-    title: level?.title,
-    placeholder: level?.placeholder ?? (nested ? undefined : labels.paletteSearchPlaceholder),
-    ranked,
-    sections,
-    // Enter before the root items landed waits for them (`PalettePanel`), rather than finding no row to run.
-    settled: settled && !loading,
-    loading,
-    running,
-    notice,
-    run,
-    back,
-    close,
-    inputRef,
-  };
-}

package/src/palette/useRankedItems.ts

@@ -1,122 +0,0 @@
-/**
- * The palette's ranked rows for a query. A big catalog (the project's files
- * are in the root list) is ranked in a worker (`rank.worker.ts`, started by
- * the provider's `createRankWorker`): the main thread only posts the
- * catalog when it changes and the query on each key, so typing never waits
- * on a search however large the project. The list keeps the rows it shows
- * until the answer lands, usually the same frame. An empty query (recents,
- * then the catalog in order) and a small list (a nested picker) are ranked
- * in place: cheaper than the round trip.
- */
-import type { PaletteItem, RankedPaletteItem } from 'zidane/chat/pure';
-import { rankPaletteItems } from 'zidane/chat/pure';
-import { useEffect, useMemo, useRef, useState } from 'react';
-
-import type { PaletteRankRequest, PaletteRankResponse } from './headless/rank-protocol';
-import { usePaletteSetup } from './setup';
-
-/** Below this, ranking in place costs less than a round trip to the worker. */
-const IN_PLACE_MAX = 500;
-
-interface RankChannel {
-  post(req: PaletteRankRequest): void;
-  listeners: Set<(res: PaletteRankResponse) => void>;
-}
-
-/** One worker per factory, started on first use and kept for the page. */
-const channels = new WeakMap<() => Worker, RankChannel>();
-let nextCatalog = 0;
-let nextRequest = 0;
-
-function channelOf(createWorker: () => Worker): RankChannel {
-  let channel = channels.get(createWorker);
-  if (channel) return channel;
-  let worker: Worker | null = null;
-  const listeners = new Set<(res: PaletteRankResponse) => void>();
-  channel = {
-    listeners,
-    post(req) {
-      if (!worker) {
-        worker = createWorker();
-        worker.onmessage = (event: MessageEvent<PaletteRankResponse>) => {
-          for (const listener of listeners) listener(event.data);
-        };
-      }
-      worker.postMessage(req);
-    },
-  };
-  channels.set(createWorker, channel);
-  return channel;
-}
-
-/** What {@link useRankedItems} returns. */
-export interface RankedItems {
-  /** The rows to show. */
-  rows: readonly RankedPaletteItem[];
-  /** The rows are for this query (Enter waits for that). */
-  settled: boolean;
-}
-
-/**
- * Ranks `items` for `query`, off the main thread for a big catalog when the provider has a rank worker.
- *
- * @param items - The catalog.
- * @param query - The query.
- * @param recents - Recently run ids, for the empty-query order.
- */
-export function useRankedItems(items: readonly PaletteItem[], query: string, recents: readonly string[]): RankedItems {
-  const createWorker = usePaletteSetup().createRankWorker;
-  const searching = query.trim() !== '';
-  const channel = createWorker && typeof Worker !== 'undefined' ? channelOf(createWorker) : null;
-  const offload = channel !== null && items.length > IN_PLACE_MAX;
-  const inPlace = useMemo(
-    () => (searching && offload ? null : rankPaletteItems(items, query, recents)),
-    [items, query, recents, searching, offload],
-  );
-
-  // The worker's copy of `items`, posted once per catalog.
-  const catalog = useRef<{ id: number; items: readonly PaletteItem[] } | null>(null);
-  useEffect(() => {
-    if (!offload || !channel) return;
-    const id = nextCatalog++;
-    catalog.current = { id, items };
-    channel.post({ kind: 'catalog', catalog: id, items });
-  }, [items, offload, channel]);
-
-  const [answer, setAnswer] = useState<{ catalog: number; query: string; rows: readonly RankedPaletteItem[] } | null>(
-    null,
-  );
-  const latest = useRef(-1);
-  useEffect(() => {
-    if (!channel) return;
-    const onAnswer = (res: PaletteRankResponse) => {
-      const current = catalog.current;
-      if (res.id !== latest.current || !current || res.catalog !== current.id || !res.rows) return;
-      setAnswer({
-        catalog: res.catalog,
-        query: res.query,
-        rows: res.rows.map((r) => ({ item: current.items[r.at]!, score: r.score, titleMatches: r.titleMatches })),
-      });
-    };
-    channel.listeners.add(onAnswer);
-    return () => {
-      channel.listeners.delete(onAnswer);
-    };
-  }, [channel]);
-  useEffect(() => {
-    if (!searching || !offload || !channel || !catalog.current) return;
-    const id = nextRequest++;
-    latest.current = id;
-    channel.post({ kind: 'rank', id, catalog: catalog.current.id, query });
-  }, [items, query, searching, offload, channel]);
-
-  // What the list shows: in place, the worker's answer, or (while it is on its way) what it showed last.
-  // Refs on purpose: holding the last rows as state would cost a second render per key.
-  /* eslint-disable react-hooks/refs */
-  const shown = useRef<readonly RankedPaletteItem[]>([]);
-  const current = answer !== null && answer.catalog === catalog.current?.id;
-  if (inPlace) shown.current = inPlace;
-  else if (current) shown.current = answer.rows;
-  return { rows: shown.current, settled: inPlace !== null || (current && answer.query === query) };
-  /* eslint-enable react-hooks/refs */
-}

package/src/path.ts

@@ -1,199 +0,0 @@
-/**
- * Path helpers for display, browser-safe (no `node:path`), POSIX paths:
- * the last segment, a split into folder and name, a long path shortened
- * from the middle, a project path shown relative to a cwd, and a home
- * folder shown as `~` (`tildePath`, `tildeText`; the home folder comes from
- * the host, see `hooks/useDisplayPath.tsx`).
- */
-
-/**
- * The last segment of a path (`/` or `\` separated); trailing separators are ignored.
- *
- * @param path - A file or folder path.
- */
-export function basename(path: string): string {
-  if (!path) {
-    return '';
-  }
-  const trimmed = path.replace(/[/\\]+$/, '');
-  const idx = Math.max(trimmed.lastIndexOf('/'), trimmed.lastIndexOf('\\'));
-  return idx === -1 ? trimmed : trimmed.slice(idx + 1);
-}
-
-/**
- * `a/b/c.ts` → `{ dir: 'a/b', base: 'c.ts' }`; `dir` is '' at the top level. For `/`-separated workspace paths.
- *
- * @param path - A `/`-separated path.
- */
-export function splitPath(path: string): { dir: string; base: string } {
-  const slash = path.lastIndexOf('/');
-  return slash === -1 ? { dir: '', base: path } : { dir: path.slice(0, slash), base: path.slice(slash + 1) };
-}
-
-/**
- * Truncate a filesystem path for display so the most useful segments
- * (the last few) stay readable while the start collapses to an ellipsis.
- *
- *   /Users/yaelguilloux/Code/agent/zidane → /…/agent/zidane
- *
- * Deliberately NOT core's `compactPath` (`zidane/chat/pure`): core's rule is
- * `~`-substitution against `$HOME`, which a browser cannot read. Middle-segment
- * collapse keeps the meaningful tail intact in a narrow sidebar. Falls back
- * to a hard right-tail truncation when even the last segment overflows.
- *
- * @param path - The path to shorten.
- * @param maxChars - The longest result (default 38).
- */
-export function compactPath(path: string, maxChars = 38): string {
-  if (!path) {
-    return '';
-  }
-  if (path.length <= maxChars) {
-    return path;
-  }
-  const isAbsolute = path.startsWith('/');
-  const segments = path.split('/').filter(Boolean);
-  if (segments.length <= 2) {
-    return path;
-  }
-  const prefix = isAbsolute ? '/' : '';
-  const tail = segments.slice(-2).join('/');
-  const compact = `${prefix}…/${tail}`;
-  if (compact.length <= maxChars) {
-    return compact;
-  }
-  const lastOnly = `${prefix}…/${segments[segments.length - 1]}`;
-  if (lastOnly.length <= maxChars) {
-    return lastOnly;
-  }
-  return `…${path.slice(-(maxChars - 1))}`;
-}
-
-/**
- * A project path as seen from `cwd`. A behavioral fork of core's
- * `zidane/chat/path-display.ts`: a file above the cwd shows as an absolute
- * path anchored at the project root, never a `../`-prefixed relative, and
- * nothing here imports `node:path`.
- *
- *   - An absolute `projectRelativePath` passes through unchanged.
- *   - A file at or below `cwd` → a POSIX relative path (no `./` prefix); `cwd` itself → `.`.
- *   - A file above `cwd` or in a sibling tree → the absolute path.
- *
- * @param projectRelativePath - The path, relative to `projectRoot` (or absolute).
- * @param projectRoot - The project's root folder.
- * @param cwd - The folder the path is shown from.
- */
-export function formatPathForCwd(projectRelativePath: string, projectRoot: string, cwd: string): string {
-  if (projectRelativePath.length === 0) {
-    return projectRelativePath;
-  }
-
-  if (projectRelativePath.startsWith('/')) {
-    return projectRelativePath;
-  }
-
-  const target = posixJoin(projectRoot, projectRelativePath);
-  const here = posixNormalize(cwd);
-
-  if (target === here) {
-    return '.';
-  }
-
-  const rel = posixRelative(here, target);
-
-  if (rel.length === 0) {
-    return '.';
-  }
-
-  if (rel === '..' || rel.startsWith('../')) {
-    return target;
-  }
-
-  return rel;
-}
-
-function posixNormalize(path: string): string {
-  const isAbs = path.startsWith('/');
-  const segs: string[] = [];
-
-  for (const part of path.split('/')) {
-    if (part === '' || part === '.') {
-      continue;
-    }
-
-    if (part === '..') {
-      if (segs.length > 0 && segs[segs.length - 1] !== '..') {
-        segs.pop();
-      } else if (!isAbs) {
-        segs.push('..');
-      }
-
-      continue;
-    }
-
-    segs.push(part);
-  }
-
-  const joined = segs.join('/');
-
-  return isAbs ? `/${joined}` : joined;
-}
-
-function posixJoin(a: string, b: string): string {
-  if (b.startsWith('/')) {
-    return posixNormalize(b);
-  }
-
-  return posixNormalize(`${a}/${b}`);
-}
-
-function posixRelative(from: string, to: string): string {
-  const fromParts = posixNormalize(from).split('/').filter(Boolean);
-  const toParts = posixNormalize(to).split('/').filter(Boolean);
-
-  let i = 0;
-
-  while (i < fromParts.length && i < toParts.length && fromParts[i] === toParts[i]) {
-    i++;
-  }
-
-  const ups: string[] = [];
-
-  for (let j = i; j < fromParts.length; j++) {
-    ups.push('..');
-  }
-
-  return [...ups, ...toParts.slice(i)].join('/');
-}
-
-/**
- * `path` with a leading `home` folder shown as `~`: `/Users/ada/code/app` →
- * `~/code/app`, `/Users/ada` → `~`. Anything else (another user's folder,
- * `/Users/adam`, a relative path) comes back unchanged. For display only:
- * never pass the result to anything that reads the disk.
- *
- * @param path - The path.
- * @param home - The home folder of the machine the path is on. Absent or empty: `path` unchanged.
- */
-export function tildePath(path: string, home: string | null | undefined): string {
-  const root = home ? home.replace(/\/+$/, '') : '';
-  if (!root || root === '/') return path;
-  if (path === root || path === `${root}/`) return '~';
-  return path.startsWith(`${root}/`) ? `~${path.slice(root.length)}` : path;
-}
-
-/**
- * `text` with each path in it under `home` shown as `~` (`in /Users/ada/x` →
- * `in ~/x`): only where the home folder starts a path (the line's start,
- * after a space, a quote or a bracket) and ends at a path boundary. For
- * display only.
- *
- * @param text - A line that may hold paths.
- * @param home - The home folder of the machine the paths are on. Absent or empty: `text` unchanged.
- */
-export function tildeText(text: string, home: string | null | undefined): string {
-  const root = home ? home.replace(/\/+$/, '') : '';
-  if (!root || root === '/' || !text.includes(root)) return text;
-  const escaped = root.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  return text.replace(new RegExp(`(^|[\\s"'\`(\\[=])${escaped}(?=$|[/\\s"'\`)\\]:,;])`, 'g'), '$1~');
-}

package/src/server/demo-tools.ts

@@ -1,34 +0,0 @@
-/**
- * The one tool the scripted provider calls: `lookup` answers from a fixed
- * table, touching neither the disk nor the network, so a demo shows a real
- * tool row without granting the agent anything.
- */
-import type { ToolDef } from 'zidane/tools';
-
-const FACTS: Record<string, string> = {
-  zidane: 'zidane is an agent harness: one loop, many hosts (TUI, desktop app, server, your web app).',
-  sse: 'Server-sent events: one long HTTP response the server writes `id:` / `event:` / `data:` records to.',
-};
-
-/** The `lookup` tool: answers a topic from a small fixed table (`zidane`, `sse`). It touches neither the disk nor the network. */
-export const lookupTool: ToolDef = {
-  spec: {
-    name: 'lookup',
-    description: 'Look a topic up in a small fixed table. Returns one sentence.',
-    inputSchema: {
-      type: 'object',
-      properties: { query: { type: 'string', description: 'What to look up.' } },
-      required: ['query'],
-    },
-  },
-  async execute(input) {
-    const query = String(input.query ?? '').toLowerCase();
-    const hit = Object.entries(FACTS).find(([key]) => query.includes(key));
-    return hit
-      ? hit[1]
-      : `No entry for “${String(input.query ?? '')}”; the table knows: ${Object.keys(FACTS).join(', ')}.`;
-  },
-};
-
-/** The tool set for demos: just {@link lookupTool}, keyed by name. */
-export const demoTools: Record<string, ToolDef> = { lookup: lookupTool };