zidane-ui 9.0.4 → 9.1.3

package/src/session/SessionDetailsDialog.tsx

@@ -1,621 +0,0 @@
-/**
- * Session details: rename, generate a title, the facts (status, activity,
- * model, agent, space, dates, id, folder, cache), compact, export, delete.
- *
- * One definition grid for everything that is a fact about the session,
- * then a short list of actions with a one-line purpose each, then the
- * destructive action alone in the footer. Each part of a value is its own
- * chip, never a run of text joined by separators.
- *
- * The facts come resolved from the app (`session`: names, labels, colors);
- * the actions are the host's (`details.generateTitle`, `export`, `compact`,
- * `setFolder`, `titleStatus`) and the session list's (`onRename`,
- * `onDelete`, `onMoveToSpace`). What a host or the app leaves out is not
- * offered.
- */
-import { useEffect, useState, type CSSProperties, type ReactNode } from 'react';
-import { ageString } from 'zidane/chat/pure';
-
-import { providerColor } from '../chat/provider-color';
-import { BTN_LG_DANGER, BTN_LG_SECONDARY, BTN_LG_SOLID, BTN_SECONDARY } from '../components/button';
-import { INPUT_CLASS, MetaChip } from '../components/Form';
-import { IconButton } from '../components/IconButton';
-import { Tray } from '../components/Surface';
-import { useHydrated } from '../hooks/useHydrated';
-import type { SessionExportFormat } from './headless/host';
-import { ShellFrame, type RenderSessionShell } from './SessionShell';
-import { useSessionHost } from './SessionProvider';
-import { useSessionLabels } from './useSessionLabels';
-
-/** A session's run state. */
-export type SessionDetailsStatus = 'idle' | 'running' | 'completed' | 'error';
-
-/** Where a session's folder is, when this computer's picker can't choose it. */
-export type SessionFolderLocation = { kind: 'server-gone' } | { kind: 'machine'; name: string } | { kind: 'sandbox' };
-
-/** The facts the dialog shows, resolved by the app. */
-export interface SessionDetailsFacts {
-  /** The session id, shown and copied. */
-  id: string;
-  /** The title. */
-  title: string;
-  /** The run state. */
-  status: SessionDetailsStatus;
-  /** Stored turns. */
-  turnCount: number;
-  /** User messages. */
-  userMessageCount: number;
-  /** Runs. */
-  runCount: number;
-  /** The provider: its key (for its color) and display name. */
-  provider?: { key: string; label: string };
-  /** The model: its id (on hover) and display name. Absent: the default model. */
-  model?: { id: string; name: string };
-  /** The reasoning effort. */
-  effort?: string;
-  /** The pinned account. `signedOut`: its provider no longer lists it. */
-  account?: { label: string; signedOut?: boolean };
-  /** The agent profile. */
-  agent?: { id: string; label?: string; description?: string; color?: string };
-  /** Created (ms). */
-  createdAt?: number;
-  /** Last updated (ms). */
-  updatedAt?: number;
-  /** The folder; `''` for a chat without one. */
-  cwd: string;
-  /** The folder as shown (a long path giving way in the middle). Default: `cwd`. */
-  folderDisplay?: string;
-  /** The project root, the description when there is no folder. */
-  projectRoot?: string;
-  /** The orchestration main: titled Main, folderless, everywhere. */
-  isMain?: boolean;
-  /** Where the folder is when this computer's picker can't choose it. */
-  folderLocation?: SessionFolderLocation | null;
-}
-
-/** A space the session can move to. */
-export interface SessionDetailsSpace {
-  /** The space id. */
-  id: string;
-  /** What the option shows (its emoji and name). */
-  label: string;
-}
-
-/** Props for {@link SessionDetailsDialog}. */
-export interface SessionDetailsDialogProps {
-  /** The session's facts. */
-  session: SessionDetailsFacts;
-  /** Renames the session. Absent: the title is read-only. */
-  onRename?: (title: string) => Promise<void>;
-  /** Asks the user to confirm the deletion. Absent: no confirmation. */
-  confirmDelete?: () => Promise<boolean>;
-  /** Deletes the session (the dialog closes after). Absent: no Delete. */
-  onDelete?: () => Promise<void>;
-  /** The spaces, when spaces are on. */
-  spaces?: readonly SessionDetailsSpace[] | null;
-  /** The session's space. */
-  spaceId?: string;
-  /** Moves the session to a space. */
-  onMoveToSpace?: (spaceId: string) => Promise<void>;
-  /** Shows the folder in the file manager. Resolves `false` when it is gone. Absent: no Open button. */
-  onRevealFolder?: () => Promise<boolean>;
-  /** Picks a folder on this computer. Resolves `null` when cancelled. Absent: no picker. */
-  onPickFolder?: () => Promise<string | null>;
-  /** Replaces the folder picker button (a remote folder picker for a server session); `attach` sets the folder. */
-  folderPicker?: (attach: (folder: string) => void) => ReactNode;
-  /** Something about the session changed (title, folder, compaction): re-read what shows it. */
-  onChanged?: () => Promise<void>;
-  /** The cache report, as the Cache fact. */
-  cache?: ReactNode;
-  /** Words an error from an action. Default: its message. */
-  formatError?: (error: unknown) => string;
-  /** Closes the dialog. */
-  onClose: () => void;
-  /** The app's modal shell. Default: {@link SessionShell}. */
-  renderShell?: RenderSessionShell;
-  /** Extra classes on the default shell. */
-  className?: string;
-  /** Inline styles on the default shell. */
-  style?: CSSProperties;
-}
-
-type Busy =
-  'generating' | 'exporting-markdown' | 'exporting-json' | 'compacting' | 'folder' | 'space' | 'deleting' | null;
-
-const STATUS_DOT: Record<SessionDetailsStatus, string> = {
-  idle: 'bg-[var(--zg-text-muted)]',
-  running: 'bg-[var(--zg-accent)]',
-  completed: 'bg-[var(--zg-accent-alt)]',
-  error: 'bg-[var(--zg-danger)]',
-};
-
-const messageOf = (err: unknown) => (err instanceof Error ? err.message : String(err));
-
-/**
- * Renders a session's facts and actions.
- *
- * @param props - The `session` facts, the session-list handlers, folder handlers, slots, `onClose`, `renderShell`.
- */
-export function SessionDetailsDialog({
-  session,
-  onRename,
-  confirmDelete,
-  onDelete,
-  spaces = null,
-  spaceId: spaceProp,
-  onMoveToSpace,
-  onRevealFolder,
-  onPickFolder,
-  folderPicker,
-  onChanged,
-  cache,
-  formatError = messageOf,
-  onClose,
-  renderShell,
-  className,
-  style,
-}: SessionDetailsDialogProps) {
-  const labels = useSessionLabels();
-  const details = useSessionHost().details;
-  const [title, setTitle] = useState(session.title);
-  const [busy, setBusy] = useState<Busy>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [exportedPath, setExportedPath] = useState<string | null>(null);
-  // Held once changed: a session moved out of the space on screen may leave the app's (filtered) list.
-  const [movedTo, setMovedTo] = useState<string | null>(null);
-  const spaceId = movedTo ?? spaceProp;
-
-  // Re-read whenever the row changes: auto-titling and Generate both rewrite it.
-  const titleStatusOf = details?.titleStatus;
-  const [titleStatus, setTitleStatus] = useState<readonly string[] | null>(null);
-  useEffect(() => {
-    if (!titleStatusOf) return undefined;
-    let cancelled = false;
-    titleStatusOf(session.id)
-      .then((line) => {
-        if (!cancelled) setTitleStatus(line);
-      })
-      .catch(() => {
-        if (!cancelled) setTitleStatus(null);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [titleStatusOf, session.id, session.title, session.updatedAt]);
-
-  const run = async (kind: NonNullable<Busy>, action: () => Promise<void>) => {
-    try {
-      setError(null);
-      setBusy(kind);
-      await action();
-    } catch (err) {
-      setError(formatError(err));
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  const isMain = session.isMain === true;
-  // The host refuses a folder change mid-run (the agent runs in the old folder).
-  const running = session.status === 'running';
-  const dirty = Boolean(onRename && title.trim() && title !== session.title);
-
-  const saveTitle = async () => {
-    if (!dirty) return;
-    await onRename?.(title.trim());
-  };
-
-  const generate = details?.generateTitle;
-  const generateTitle = () =>
-    run('generating', async () => {
-      setTitle(await generate!(session.id));
-      await onChanged?.();
-    });
-
-  const exportTo = details?.export;
-  const exportAs = (format: SessionExportFormat) =>
-    run(format === 'markdown' ? 'exporting-markdown' : 'exporting-json', async () => {
-      setExportedPath(await exportTo!(session.id, format));
-    });
-
-  const compact = details?.compact;
-  const compactNow = () =>
-    run('compacting', async () => {
-      await compact!(session.id);
-      await onChanged?.();
-    });
-
-  const setFolder = details?.setFolder;
-  const attachFolder = (picked: string) =>
-    run('folder', async () => {
-      await setFolder!(session.id, picked);
-      await onChanged?.();
-    });
-  const changeFolder = async () => {
-    const picked = await onPickFolder?.();
-    if (picked) await attachFolder(picked);
-  };
-  const detachFolder = () =>
-    run('folder', async () => {
-      await setFolder!(session.id, null);
-      await onChanged?.();
-    });
-
-  const revealFolder = async () => {
-    setError(null);
-    const shown = await onRevealFolder?.().catch(() => false);
-    if (!shown) setError(labels.detailsFolderGone(session.cwd));
-  };
-
-  const moveToSpace = (next: string) =>
-    run('space', async () => {
-      await onMoveToSpace?.(next);
-      setMovedTo(next);
-    });
-
-  const remove = async () => {
-    if (!onDelete) return;
-    if (confirmDelete && !(await confirmDelete())) return;
-    try {
-      setError(null);
-      setBusy('deleting');
-      await onDelete();
-      onClose();
-    } catch (err) {
-      setError(messageOf(err));
-      setBusy(null);
-    }
-  };
-
-  const exporting = busy === 'exporting-markdown' || busy === 'exporting-json';
-  const elsewhere = session.folderLocation ? labels.detailsFolderLocation(session.folderLocation) : null;
-
-  return (
-    <ShellFrame
-      render={renderShell}
-      title={labels.detailsTitle}
-      description={isMain ? labels.detailsMainDescription : session.cwd || session.projectRoot || labels.headerChat}
-      onClose={onClose}
-      {...(className ? { className } : {})}
-      {...(style ? { style } : {})}
-      footer={
-        <div className="flex items-center gap-3">
-          {onDelete && (
-            <button type="button" onClick={remove} disabled={busy === 'deleting'} className={BTN_LG_DANGER}>
-              <span aria-hidden className="i-ph-trash text-sm" />
-              {busy === 'deleting' ? labels.detailsDeleting : labels.detailsDelete}
-            </button>
-          )}
-          {error && (
-            <span role="alert" className="min-w-0 line-clamp-2 text-xs text-zg-danger" title={error}>
-              {error}
-            </span>
-          )}
-        </div>
-      }
-    >
-      <div className="flex items-center gap-2 mt-1">
-        <input
-          type="text"
-          value={isMain ? labels.detailsMainTitle : title}
-          disabled={isMain || !onRename}
-          title={isMain ? labels.detailsMainKeepsName : undefined}
-          aria-label={labels.detailsTitleLabel}
-          onChange={(e) => setTitle(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') void saveTitle();
-          }}
-          className={`${INPUT_CLASS} flex-1 min-w-0 !w-auto !text-sm disabled:cursor-not-allowed`}
-        />
-        {/* Save only exists while there is something to save; Generate is always there. */}
-        {dirty && !isMain && (
-          <button type="button" onClick={saveTitle} className={BTN_LG_SOLID}>
-            {labels.detailsSave}
-          </button>
-        )}
-        {generate && (
-          <button
-            type="button"
-            disabled={busy === 'generating' || isMain}
-            onClick={generateTitle}
-            title={isMain ? labels.detailsMainKeepsName : labels.detailsGenerateHint}
-            className={BTN_LG_SECONDARY}
-          >
-            <span aria-hidden className="i-ph-text-t text-sm" />
-            {busy === 'generating' ? labels.detailsGenerating : labels.detailsGenerate}
-          </button>
-        )}
-      </div>
-
-      <FactGroup>
-        <Fact label={labels.detailsStatus}>
-          <MetaChip tone="text">
-            <Dot className={STATUS_DOT[session.status]} />
-            {labels.detailsStatusLabel[session.status]}
-          </MetaChip>
-        </Fact>
-        <Fact label={labels.detailsActivity}>
-          <Chips>
-            <MetaChip tone="text">{labels.detailsTurns(session.turnCount)}</MetaChip>
-            <MetaChip tone="text">{labels.detailsMessages(session.userMessageCount)}</MetaChip>
-            <MetaChip tone="text">{labels.detailsRuns(session.runCount)}</MetaChip>
-          </Chips>
-        </Fact>
-        <Fact label={labels.detailsModel}>
-          <Chips>
-            {session.provider && (
-              <MetaChip tone="text" title={labels.detailsProviderHint}>
-                <Dot color={providerColor(session.provider.key)} />
-                {session.provider.label}
-              </MetaChip>
-            )}
-            <MetaChip tone={session.model ? 'text' : 'muted'} {...(session.model ? { title: session.model.id } : {})}>
-              {session.model ? session.model.name : labels.detailsDefaultModel}
-            </MetaChip>
-            {session.effort && (
-              <MetaChip title={labels.detailsEffortHint}>
-                <span aria-hidden className="i-ph-brain" />
-                {session.effort}
-              </MetaChip>
-            )}
-            {session.account && (
-              <span data-testid="session-account" className="inline-flex">
-                <MetaChip tone={session.account.signedOut ? 'warn' : 'muted'} title={labels.detailsAccountHint}>
-                  <span aria-hidden className="i-ph-user" />
-                  {session.account.signedOut ? labels.detailsAccountSignedOut : session.account.label}
-                </MetaChip>
-              </span>
-            )}
-          </Chips>
-        </Fact>
-        {session.agent && (
-          <Fact label={labels.detailsAgent}>
-            <MetaChip tone="text" {...(session.agent.description ? { title: session.agent.description } : {})}>
-              {session.agent.color && <Dot color={session.agent.color} />}
-              {session.agent.label ?? session.agent.id}
-            </MetaChip>
-          </Fact>
-        )}
-        {titleStatus && !isMain && (
-          <Fact label={labels.detailsTitleFact}>
-            <span className="flex flex-wrap gap-1">
-              {titleStatus.map((part) => (
-                <MetaChip key={part}>{part}</MetaChip>
-              ))}
-            </span>
-          </Fact>
-        )}
-        {spaces && (
-          <Fact label={labels.detailsSpace}>
-            <select
-              value={spaceId}
-              disabled={busy === 'space' || isMain || !onMoveToSpace}
-              title={isMain ? labels.detailsMainEverySpace : labels.detailsSpaceHint}
-              aria-label={labels.detailsSpaceLabel}
-              onChange={(e) => void moveToSpace(e.target.value)}
-              className="zg-well h-7 max-w-[14rem] text-xs px-2 cursor-pointer disabled:cursor-not-allowed"
-            >
-              {spaces.map((s) => (
-                <option key={s.id} value={s.id}>
-                  {s.label}
-                </option>
-              ))}
-            </select>
-          </Fact>
-        )}
-      </FactGroup>
-
-      <FactGroup>
-        <Fact label={labels.detailsCreated}>
-          <When ts={session.createdAt} />
-        </Fact>
-        <Fact label={labels.detailsUpdated}>
-          <When ts={session.updatedAt} />
-        </Fact>
-        <Fact label={labels.detailsId}>
-          <CopyableId id={session.id} />
-        </Fact>
-        <Fact label={labels.detailsFolder}>
-          <div className="flex flex-col gap-1.5 min-w-0">
-            <span
-              className={`min-w-0 truncate leading-7 ${session.cwd ? 'zg-meta !text-zg-meta !text-[var(--zg-text)]' : 'italic text-[var(--zg-text-muted)]'}`}
-              title={session.cwd || undefined}
-            >
-              {(session.cwd && (session.folderDisplay ?? session.cwd)) ||
-                (isMain ? labels.detailsMainNoFolder : labels.detailsNoFolder)}
-            </span>
-            <div className="flex flex-wrap items-center gap-2">
-              {session.cwd && onRevealFolder && (
-                <button
-                  type="button"
-                  onClick={() => void revealFolder()}
-                  title={labels.detailsRevealHint(session.cwd)}
-                  className={BTN_SECONDARY}
-                >
-                  <span aria-hidden className="i-ph-folder-open text-sm" />
-                  {labels.detailsReveal}
-                </button>
-              )}
-              {folderPicker && setFolder && !isMain && !running
-                ? folderPicker((picked) => void attachFolder(picked))
-                : setFolder &&
-                  onPickFolder && (
-                    <button
-                      type="button"
-                      disabled={busy === 'folder' || isMain || running || elsewhere !== null}
-                      onClick={changeFolder}
-                      title={
-                        isMain
-                          ? labels.detailsMainHasNoFolder
-                          : running
-                            ? labels.detailsStopToChange
-                            : elsewhere
-                              ? labels.detailsFolderElsewhere(elsewhere)
-                              : session.cwd
-                                ? labels.detailsPickOther
-                                : labels.detailsAttachHint
-                      }
-                      className={BTN_SECONDARY}
-                    >
-                      {session.cwd ? labels.detailsChange : labels.detailsSetFolder}
-                    </button>
-                  )}
-              {session.cwd && !isMain && setFolder && (
-                <button
-                  type="button"
-                  disabled={busy === 'folder' || running}
-                  onClick={detachFolder}
-                  title={running ? labels.detailsStopToDetach : labels.detailsDetachHint}
-                  className={BTN_SECONDARY}
-                >
-                  {labels.detailsDetach}
-                </button>
-              )}
-            </div>
-          </div>
-        </Fact>
-      </FactGroup>
-
-      {cache && (
-        <FactGroup>
-          <Fact label={labels.detailsCache}>{cache}</Fact>
-        </FactGroup>
-      )}
-
-      {(compact || exportTo) && (
-        <Tray radius="lg" className="mt-7 p-1.5 flex flex-col gap-0.5">
-          {compact && (
-            <SessionActionRow icon="i-ph-arrows-in" label={labels.detailsCompact} hint={labels.detailsCompactHint}>
-              <button type="button" disabled={busy === 'compacting'} onClick={compactNow} className={BTN_SECONDARY}>
-                {busy === 'compacting' ? labels.detailsCompacting : labels.detailsCompactNow}
-              </button>
-            </SessionActionRow>
-          )}
-          {exportTo && (
-            <SessionActionRow
-              icon="i-ph-download-simple"
-              label={labels.detailsExport}
-              hint={
-                exportedPath ? (
-                  <span className="zg-meta break-all">
-                    {labels.detailsSavedTo} <span className="text-[var(--zg-text)]">{exportedPath}</span>
-                  </span>
-                ) : (
-                  labels.detailsExportHint
-                )
-              }
-            >
-              <button type="button" disabled={exporting} onClick={() => exportAs('markdown')} className={BTN_SECONDARY}>
-                {busy === 'exporting-markdown' ? labels.detailsExporting : labels.detailsMarkdown}
-              </button>
-              <button type="button" disabled={exporting} onClick={() => exportAs('json')} className={BTN_SECONDARY}>
-                {busy === 'exporting-json' ? labels.detailsExporting : labels.detailsJson}
-              </button>
-            </SessionActionRow>
-          )}
-        </Tray>
-      )}
-    </ShellFrame>
-  );
-}
-
-/**
- * A block of related facts; blocks are set apart by space, not lines. Every row
- * sits on the same 28px line (the height of the tallest one-line value: the
- * Space select, a row button), so rows are evenly spaced whatever they hold:
- * plain text, chips, a control.
- */
-function FactGroup({ children }: { children: ReactNode }) {
-  return <dl className="mt-7 grid grid-cols-[104px_1fr] items-start gap-x-5 gap-y-2 text-xs m-0">{children}</dl>;
-}
-
-/** One row of the facts grid: muted label in the left column, value in the right. */
-function Fact({ label, children }: { label: string; children: ReactNode }) {
-  return (
-    <>
-      <dt className="flex items-center min-h-7 text-[var(--zg-text-muted)] m-0">{label}</dt>
-      {/* A value taller than the line (the folder and its buttons) starts on it: its first line holds the line's height. */}
-      <dd className="flex items-center min-h-7 min-w-0 text-[var(--zg-text)] m-0">{children}</dd>
-    </>
-  );
-}
-
-/** A value's parts, one chip each. */
-function Chips({ children }: { children: ReactNode }) {
-  return <span className="inline-flex flex-wrap items-center gap-1.5">{children}</span>;
-}
-
-/** A chip's leading colour: a status, a provider, an agent. */
-function Dot({ color, className = '' }: { color?: string; className?: string }) {
-  return (
-    <span
-      aria-hidden
-      className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${className}`}
-      style={color ? { background: color } : undefined}
-    />
-  );
-}
-
-/** Relative first (what you actually want to know), the exact date muted after it. */
-function When({ ts }: { ts: number | undefined }) {
-  const labels = useSessionLabels();
-  // The exact date is in the reader's locale, which a server render doesn't know.
-  const hydrated = useHydrated();
-  if (!ts) return <span className="text-[var(--zg-text-muted)]">{labels.detailsUnknown}</span>;
-  return (
-    <span title={new Date(ts).toISOString()}>
-      {ageString(ts)}
-      {hydrated && <span className="zg-meta !text-zg-meta ml-2">{new Date(ts).toLocaleString()}</span>}
-    </span>
-  );
-}
-
-function CopyableId({ id }: { id: string }) {
-  const labels = useSessionLabels();
-  const [copied, setCopied] = useState(false);
-  useEffect(() => {
-    if (!copied) return undefined;
-    const t = setTimeout(() => setCopied(false), 1400);
-    return () => clearTimeout(t);
-  }, [copied]);
-  return (
-    <span className="inline-flex items-center gap-1 min-w-0 max-w-full">
-      <span className="zg-track-chip zg-meta px-2 py-0.5 truncate" title={id}>
-        {id}
-      </span>
-      <IconButton
-        icon={copied ? 'i-ph-check' : 'i-ph-clipboard'}
-        label={labels.detailsCopyId}
-        title={copied ? labels.detailsCopied : labels.detailsCopyIdHint}
-        size="sm"
-        onClick={() => {
-          void navigator.clipboard.writeText(id).then(() => setCopied(true));
-        }}
-      />
-    </span>
-  );
-}
-
-/** Icon + label + one-line purpose on the left, the button(s) on the right. */
-function SessionActionRow({
-  icon,
-  label,
-  hint,
-  children,
-}: {
-  icon: string;
-  label: string;
-  hint: ReactNode;
-  children: ReactNode;
-}) {
-  return (
-    <div className="flex items-center gap-3.5 px-3.5 py-3 rounded-zg-md">
-      <span aria-hidden className={`${icon} text-base text-[var(--zg-text-muted)] shrink-0`} />
-      <div className="flex-1 min-w-0">
-        <div className="text-zg-ui text-[var(--zg-text)]">{label}</div>
-        <div className="text-xs text-[var(--zg-text-muted)] mt-0.5">{hint}</div>
-      </div>
-      <div className="flex items-center gap-2 shrink-0">{children}</div>
-    </div>
-  );
-}