zidane-ui 9.1.1 → 9.1.3

package/src/session/SessionHeader.tsx

@@ -1,242 +0,0 @@
-/**
- * The session header: the folder chip (plus the server chip for a server
- * session), the title (a click opens the details; renamable in place) and
- * the app's toolbar on the right. Right-click on the folder or the title
- * opens the app's actions menu (`menuItems`); its Rename sets `renaming`.
- *
- * The title only ellipsizes when it would collide with the toolbar: a
- * ResizeObserver (rAF-debounced) compares its content width with its box.
- */
-import { useEffect, useRef, useState, type CSSProperties, type MouseEvent, type ReactNode } from 'react';
-
-import { EditableTitle } from '../components/EditableTitle';
-import { RowActionsMenu, type RowActionItem } from '../components/RowActionsMenu';
-import { ExtensionSlot } from '../extensions/ExtensionSlot';
-import { TitleText } from '../motion/title-text';
-import { useSessionLabels } from './useSessionLabels';
-
-/** The server a server session runs on. */
-export interface SessionHeaderServer {
-  /** Its name; absent when it is no longer saved. */
-  name?: string;
-  /** Its address, on hover. */
-  url?: string;
-  /** Its connection status (a dot). */
-  status?: ReactNode;
-}
-
-/** Props for {@link SessionHeader}. */
-export interface SessionHeaderProps {
-  /** The session title. */
-  title: string;
-  /** What draws the title (reference badges); plain text by default, so a new title writes in word by word. */
-  titleDisplay?: ReactNode;
-  /** Keys the title's write-in animation (the session id). */
-  titleScope?: string;
-  /** The session's folder; `''` for a chat without one. */
-  cwd: string;
-  /** The orchestration main: no folder, a fixed name. */
-  isMain?: boolean;
-  /** A run is in progress (a folderless chat can't attach a folder mid-run). */
-  running?: boolean;
-  /** The server a server session runs on (its folders are the server's: no local picker). */
-  server?: SessionHeaderServer;
-  /** Picks a folder (attaches one to a chat, or changes the default folder). Absent: the chip is inert. */
-  onPickFolder?: () => void;
-  /** Opens the session details. */
-  onOpenDetails?: () => void;
-  /** Renames the session. Absent: no in-place rename. */
-  onRename?: (title: string) => Promise<void>;
-  /** The title is being renamed in place (controlled by the menu's Rename). */
-  renaming?: boolean;
-  /** The rename started or ended. */
-  onRenamingChange?: (renaming: boolean) => void;
-  /** The right-click menu's items. Absent: no menu. */
-  menuItems?: RowActionItem[];
-  /** The menu opened or closed (to load items only while it shows). */
-  onMenuOpenChange?: (open: boolean) => void;
-  /** The app's controls on the right. */
-  toolbar?: ReactNode;
-  /** The session shown: its extensions' `session.header` items show before the toolbar. Default: `titleScope`. */
-  sessionId?: string;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root (the app's chrome insets). */
-  style?: CSSProperties;
-}
-
-function folderBasename(path: string): string {
-  const trimmed = path.replace(/[/\\]+$/, '');
-  const idx = Math.max(trimmed.lastIndexOf('/'), trimmed.lastIndexOf('\\'));
-  return idx === -1 ? trimmed : trimmed.slice(idx + 1);
-}
-
-/**
- * Renders the folder chip, the title and the toolbar of the open session.
- *
- * @param props - The session facts, the folder, details and rename handlers, the menu, the `toolbar`, `className` and
- *   `style`.
- */
-export function SessionHeader({
-  title,
-  titleDisplay,
-  titleScope,
-  cwd,
-  isMain = false,
-  running = false,
-  server,
-  onPickFolder,
-  onOpenDetails,
-  onRename,
-  renaming = false,
-  onRenamingChange,
-  menuItems,
-  onMenuOpenChange,
-  toolbar,
-  sessionId = titleScope,
-  className = '',
-  style,
-}: SessionHeaderProps) {
-  const labels = useSessionLabels();
-  const [menuAt, setMenuAt] = useState<{ x: number; y: number } | null>(null);
-  const setMenu = (at: { x: number; y: number } | null) => {
-    setMenuAt(at);
-    onMenuOpenChange?.(at !== null);
-  };
-  const openMenu = menuItems
-    ? (event: MouseEvent) => {
-        event.preventDefault();
-        setMenu({ x: event.clientX, y: event.clientY });
-      }
-    : undefined;
-
-  const [renameValue, setRenameValue] = useState(title);
-  // Seeded when a rename starts (during render, so the editor mounts with it), not on every title change during it.
-  const [wasRenaming, setWasRenaming] = useState(renaming);
-  if (renaming !== wasRenaming) {
-    setWasRenaming(renaming);
-    if (renaming) setRenameValue(title);
-  }
-  // Closed once the new title is in: the title then mounts with it rather than writing it in.
-  const commitRename = async () => {
-    const next = renameValue.trim();
-    if (next && next !== title) await onRename?.(next).catch(() => undefined);
-    onRenamingChange?.(false);
-  };
-
-  const onServer = server !== undefined;
-  const folderless = !cwd;
-  const folderName = folderless ? labels.headerChat : folderBasename(cwd);
-
-  const titleRef = useRef<HTMLButtonElement>(null);
-  /*
-   * Whether this title overflows, measured by the observer after layout. Until then (a new title)
-   * it truncates, so a long title never flashes a hard cut; the ellipsis shows only on overflow
-   * anyway. Not read in the effect: in a conversation switch that forced its whole layout.
-   */
-  const [overflow, setOverflow] = useState<{ title: string; value: boolean } | null>(null);
-  const needsTruncate = overflow?.title === title ? overflow.value : true;
-  useEffect(() => {
-    const el = titleRef.current;
-    if (!el) return undefined;
-    let rafId: number | null = null;
-    const measure = () => {
-      rafId = null;
-      const node = titleRef.current;
-      if (!node) return;
-      // `scrollWidth` is the unclipped content width; 1px tolerance so subpixel rounding doesn't flap.
-      const value = node.scrollWidth - node.clientWidth > 1;
-      setOverflow((prev) => (prev?.title === title && prev.value === value ? prev : { title, value }));
-    };
-    const ro = new ResizeObserver(() => {
-      if (rafId !== null) return;
-      rafId = requestAnimationFrame(measure);
-    });
-    ro.observe(el);
-    // The parent slot's width is what gates the title's room (the toolbar grows, the slot shrinks).
-    if (el.parentElement) ro.observe(el.parentElement);
-    return () => {
-      ro.disconnect();
-      if (rafId !== null) cancelAnimationFrame(rafId);
-    };
-    // `renaming`: the title button is back (a new element) once a rename ends.
-  }, [title, renaming]);
-
-  return (
-    <div
-      className={`zg-drag flex items-center gap-1.5 pr-4 shrink-0 bg-[var(--zg-bg)] ${className}`}
-      style={{ height: 44, paddingLeft: 16, ...style }}
-    >
-      <button
-        type="button"
-        onClick={onPickFolder}
-        onContextMenu={openMenu}
-        // A folderless session's click attaches a folder, which the host refuses mid-run.
-        disabled={!onPickFolder || isMain || onServer || (folderless && running)}
-        title={
-          isMain
-            ? labels.headerMainFolder
-            : folderless && running
-              ? labels.headerChatRunning
-              : onServer
-                ? labels.headerFolderOnServer(cwd, server.name ?? null)
-                : folderless
-                  ? labels.headerChatAttach
-                  : labels.headerChangeFolder(cwd)
-        }
-        className={`zg-press-soft min-w-0 max-w-[200px] truncate text-left bg-transparent border-0 text-sm font-medium px-1.5 py-1 -mx-1.5 rounded-zg-sm transition-colors disabled:cursor-default enabled:cursor-pointer enabled:hover:before:bg-[var(--zg-row-hover)] ${
-          folderless ? 'italic text-[var(--zg-text-muted)]' : 'text-[var(--zg-text)]'
-        }`}
-      >
-        {folderName}
-      </button>
-      {onServer && (
-        <span
-          className="inline-flex items-center gap-1 shrink-0 text-xs text-[var(--zg-text-muted)] select-none"
-          title={server.url ?? labels.headerServerGone}
-          data-testid="session-host"
-        >
-          <span aria-hidden className="i-ph-hard-drives text-zg-meta" />
-          <span className="max-w-[140px] truncate">{labels.headerOnServer(server.name ?? null)}</span>
-          {server.status}
-        </span>
-      )}
-      <span className="text-sm opacity-60 select-none" aria-hidden>
-        /
-      </span>
-      {renaming && onRename ? (
-        <EditableTitle
-          text={renameValue}
-          editing
-          onStartEdit={() => undefined}
-          onChange={setRenameValue}
-          onCommit={commitRename}
-          onCancel={() => onRenamingChange?.(false)}
-          label={labels.headerRename}
-          // `zg-no-drag`: the header is the window's drag area, and a press must reach the editor.
-          className="zg-no-drag min-w-[8rem] max-w-full text-sm font-medium text-[var(--zg-text)] whitespace-nowrap overflow-hidden px-1.5 py-1 -mx-1.5 rounded-zg-sm bg-[var(--zg-row-hover)]"
-        />
-      ) : (
-        <button
-          ref={titleRef}
-          type="button"
-          onClick={onOpenDetails}
-          onContextMenu={openMenu}
-          title={labels.headerDetails}
-          // `overflow-hidden` + `whitespace-nowrap` always; the ellipsis only when the title would collide.
-          className={`zg-press-subtle min-w-0 max-w-full text-left bg-transparent border-0 cursor-pointer text-sm font-medium text-[var(--zg-text-muted)] whitespace-nowrap overflow-hidden px-1.5 py-1 -mx-1.5 rounded-zg-sm hover:before:bg-[var(--zg-row-hover)] hover:text-[var(--zg-text)] transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--zg-ring)] ${
-            needsTruncate ? 'text-ellipsis' : ''
-          }`}
-        >
-          <TitleText text={title} display={titleDisplay} {...(titleScope ? { scope: titleScope } : {})} />
-        </button>
-      )}
-      <span className="flex-1" />
-      <ExtensionSlot at="session.header" {...(sessionId ? { sessionId } : {})} className="zg-no-drag shrink" />
-      {toolbar}
-      {menuItems && (
-        <RowActionsMenu open={menuAt !== null} position={menuAt} onClose={() => setMenu(null)} items={menuItems} />
-      )}
-    </div>
-  );
-}

package/src/session/SessionProvider.tsx

@@ -1,98 +0,0 @@
-/**
- * Puts a `SessionHost` (and optional label overrides) in context for the
- * session panels, and the hooks that read it per session.
- *
- *   <SessionProvider host={host}>
- *     <TodosPanel sessionId={id} />
- *   </SessionProvider>
- */
-import { createContext, useContext, useEffect, type ReactNode } from 'react';
-
-import { LabelsProvider } from '../labels';
-import { constant, useReadable } from '../chat/headless/store';
-import type { QueuedMessage, RunningWorkItem, SessionArtifactGroup, SessionHost, TodosSnapshot } from './headless/host';
-import type { SessionLabels } from './headless/labels';
-
-const HostContext = createContext<SessionHost | null>(null);
-
-/** Props for {@link SessionProvider}. */
-export interface SessionProviderProps {
-  /** The host the session panels below read todos, queues and artifacts from. */
-  host: SessionHost;
-  /** Overrides for the built-in strings. Keys you leave out keep the default English label. */
-  labels?: Partial<SessionLabels>;
-  /** The components that read from `host`. */
-  children: ReactNode;
-}
-
-/**
- * Provides a {@link SessionHost} and optional label overrides to the session panels below it.
- *
- * @param props - Provider props: the `host`, optional `labels`, and the `children` to render.
- */
-export function SessionProvider({ host, labels, children }: SessionProviderProps) {
-  return (
-    <HostContext.Provider value={host}>
-      <LabelsProvider<SessionLabels> labels={labels}>{children}</LabelsProvider>
-    </HostContext.Provider>
-  );
-}
-
-/** Returns the {@link SessionHost} from the nearest {@link SessionProvider}. Throws when called outside one. */
-export function useSessionHost(): SessionHost {
-  const host = useContext(HostContext);
-  if (!host) throw new Error('zidane-ui/session: wrap the session panels in <SessionProvider host={…}>');
-  return host;
-}
-
-const NO_TODOS = constant<TodosSnapshot | null>(null);
-const NO_QUEUE = constant<readonly QueuedMessage[]>([]);
-const NO_ARTIFACTS = constant<readonly SessionArtifactGroup[] | null>(null);
-const NO_WORK = constant<readonly RunningWorkItem[]>([]);
-
-/**
- * A session's todo snapshot (`null` until read, or without a session or a `todos` host). Re-renders only when that
- * session's snapshot changes.
- *
- * @param sessionId - The session, or nothing.
- */
-export function useSessionTodos(sessionId: string | null | undefined): TodosSnapshot | null {
-  const todos = useSessionHost().todos;
-  return useReadable(sessionId && todos ? todos.snapshot(sessionId) : NO_TODOS);
-}
-
-/**
- * A session's queued messages, in delivery order (empty without a session or a `queue` host). Re-renders only when
- * that session's queue changes.
- *
- * @param sessionId - The session, or nothing.
- */
-export function useSessionQueue(sessionId: string | null | undefined): readonly QueuedMessage[] {
-  const queue = useSessionHost().queue;
-  return useReadable(sessionId && queue ? queue.items(sessionId) : NO_QUEUE);
-}
-
-/**
- * A session's artifacts by kind (`null` until read, or without a session or an `artifacts` host). Re-renders only
- * when that session's artifacts change.
- *
- * @param sessionId - The session, or nothing.
- */
-export function useSessionArtifacts(sessionId: string | null | undefined): readonly SessionArtifactGroup[] | null {
-  const artifacts = useSessionHost().artifacts;
-  return useReadable(sessionId && artifacts ? artifacts.groups(sessionId) : NO_ARTIFACTS);
-}
-
-/**
- * A session's running work, live (empty without a session or a `runningWork` host). The first read of a session
- * seeds it from the host. Re-renders only when that session's work changes.
- *
- * @param sessionId - The session, or nothing.
- */
-export function useSessionRunningWork(sessionId: string | null | undefined): readonly RunningWorkItem[] {
-  const work = useSessionHost().runningWork;
-  useEffect(() => {
-    if (sessionId) work?.ensure(sessionId);
-  }, [work, sessionId]);
-  return useReadable(sessionId && work ? work.items(sessionId) : NO_WORK);
-}

package/src/session/SessionShell.tsx

@@ -1,77 +0,0 @@
-/**
- * The panel the session dialogs (details, turn details, running work, usage)
- * draw in when the app gives them no shell of its own: a header (title,
- * description, close), a body and an optional footer, on the floating
- * surface. Placing it on a modal layer (`Overlay`) is the app's: an app with
- * its own modal shell passes it as `renderShell` instead.
- */
-import { useId, type CSSProperties, type ReactNode } from 'react';
-
-import { IconButton } from '../components/IconButton';
-import { useSessionLabels } from './useSessionLabels';
-
-/** What a shell receives: the dialog's title, description, content and footer, and how to close it. */
-export interface SessionShellProps {
-  /** The dialog's heading. */
-  title: string;
-  /** A line (or chips) under the heading. */
-  description?: ReactNode;
-  /** Called by the close button. Absent: no close button. */
-  onClose?: () => void;
-  /** The actions row under the body. */
-  footer?: ReactNode;
-  /** The body. */
-  children: ReactNode;
-  /** Extra classes on the panel. */
-  className?: string;
-  /** Inline styles on the panel. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a titled panel with a body and an optional footer, as a `dialog` named by its title.
- *
- * @param props - The `title`, `description`, `onClose`, `footer`, `children`, `className` and `style`.
- */
-export function SessionShell({
-  title,
-  description,
-  onClose,
-  footer,
-  children,
-  className = '',
-  style,
-}: SessionShellProps) {
-  const labels = useSessionLabels();
-  const titleId = useId();
-  return (
-    <div
-      role="dialog"
-      aria-labelledby={titleId}
-      className={`zg-float max-w-full flex flex-col overflow-hidden ${className}`}
-      style={style}
-    >
-      <header className="flex items-start gap-2 px-5 py-3.5 border-b border-[var(--zg-hairline)]">
-        <div className="flex-1 min-w-0 self-center">
-          <h2 id={titleId} className="text-sm font-semibold text-[var(--zg-text)] m-0 zg-balance">
-            {title}
-          </h2>
-          {description && <p className="text-xs text-[var(--zg-text-muted)] mt-0.5 m-0 zg-pretty">{description}</p>}
-        </div>
-        {onClose && (
-          <IconButton icon="i-ph-x" label={labels.shellClose} size="lg" onClick={onClose} className="-mr-2" />
-        )}
-      </header>
-      <div className="flex-1 min-h-0 px-5 py-4 overflow-y-auto">{children}</div>
-      {footer && <footer className="shrink-0 px-5 py-3 bg-[var(--zg-tray)]">{footer}</footer>}
-    </div>
-  );
-}
-
-/** A dialog's `renderShell`: the app's modal shell, given the dialog's title, body and footer. */
-export type RenderSessionShell = (props: SessionShellProps) => ReactNode;
-
-/** Calls an app's `renderShell` as a component, or draws the default {@link SessionShell}. */
-export function ShellFrame({ render, ...shell }: SessionShellProps & { render?: RenderSessionShell | undefined }) {
-  return render ? <>{render(shell)}</> : <SessionShell {...shell} />;
-}