zidane-ui 9.0.4 → 9.1.3

package/src/session/DiffFileTree.tsx

@@ -1,173 +0,0 @@
-/**
- * The Diffs file list drawn as a tree at full width (the desktop app's Diffs
- * side panel): folders (collapsible, with their files' totals) and files
- * (icon, name, tool findings, +/-). Files whose diff is on screen are
- * highlighted, and a run of them reads as one block (`zg-run-list`); a
- * collapsed folder lights up when any file under it is on screen. Indent and
- * alignment follow the Files tab: a file's icon sits where a sibling
- * folder's chevron does. The icons come from the app (`fileIcon`,
- * `chevron`).
- */
-import { memo, type CSSProperties, type ReactNode, type Ref } from 'react';
-
-import { DiffCounts } from '../components/PanelRows';
-import type { DiffTreeNode } from './headless/diff-tree';
-import { useSessionLabels } from './useSessionLabels';
-
-/** Errors and warnings project tools reported on a file. */
-export interface FindingCounts {
-  /** Errors on the file. */
-  errors: number;
-  /** Warnings on the file. */
-  warnings: number;
-}
-
-/** Props for {@link DiffFileTree}. */
-export interface DiffFileTreeProps {
-  /** The rows on screen (`visibleRows`). */
-  rows: readonly DiffTreeNode[];
-  /** Keys of the files whose diff is on screen. */
-  visible: ReadonlySet<string>;
-  /** Paths of the collapsed folders. */
-  collapsed: ReadonlySet<string>;
-  /** Project tools' findings by file key; none: no findings column. */
-  findings: ReadonlyMap<string, FindingCounts> | null | undefined;
-  /** A folder row was clicked. */
-  onToggle: (dirPath: string) => void;
-  /** A file row was clicked. */
-  onOpen: (key: string) => void;
-  /** A file's icon (14px). */
-  fileIcon: (path: string) => ReactNode;
-  /** A folder's chevron, open or closed. */
-  chevron: (open: boolean) => ReactNode;
-  /** The list element. */
-  listRef?: Ref<HTMLUListElement>;
-  /** The pointer moving over the list (`true`), or leaving it. */
-  onBrowse?: (browsing: boolean) => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-const INDENT = 12;
-
-/** The changed files as a tree of folder and file rows, each with its +/- counts. */
-export const DiffFileTree = memo(function DiffFileTree({
-  rows,
-  visible,
-  collapsed,
-  findings,
-  onToggle,
-  onOpen,
-  fileIcon,
-  chevron,
-  listRef,
-  onBrowse,
-  className,
-  style,
-}: DiffFileTreeProps) {
-  const labels = useSessionLabels();
-  return (
-    <ul
-      ref={listRef}
-      aria-label={labels.diffChangedFiles}
-      onPointerMove={() => onBrowse?.(true)}
-      onPointerLeave={() => onBrowse?.(false)}
-      className={['zg-run-list m-0 p-0 list-none flex flex-col min-h-0 overflow-y-auto px-2 pb-2', className]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      {rows.map((n) => {
-        const pad = { paddingLeft: 8 + n.depth * INDENT };
-        if (n.kind === 'dir') {
-          const closed = collapsed.has(n.path);
-          const active = closed && n.fileKeys.some((k) => visible.has(k));
-          return (
-            <li key={`d:${n.path}`}>
-              <button
-                type="button"
-                onClick={() => onToggle(n.path)}
-                aria-expanded={!closed}
-                aria-label={n.path}
-                data-size="sm"
-                data-active={active ? '' : undefined}
-                className="zg-menu-row zg-press-subtle"
-                style={pad}
-              >
-                {chevron(!closed)}
-                <span className="min-w-0 flex-1 truncate text-[var(--zg-text)]" title={n.path}>
-                  {n.name}
-                </span>
-                <Findings counts={sum(findings, n.fileKeys)} />
-                <DiffCounts added={n.added} removed={n.removed} />
-              </button>
-            </li>
-          );
-        }
-        const label = n.prevPath ? `${n.prevPath} → ${n.path}` : n.path;
-        return (
-          <li key={`f:${n.key}`}>
-            <button
-              type="button"
-              onClick={() => onOpen(n.key)}
-              aria-label={label}
-              aria-current={visible.has(n.key) ? 'true' : undefined}
-              data-size="sm"
-              data-active={visible.has(n.key) ? '' : undefined}
-              className="zg-menu-row zg-press-subtle"
-              style={pad}
-            >
-              {fileIcon(n.path)}
-              <span className="min-w-0 flex-1 truncate text-[var(--zg-text)]" title={label}>
-                {n.name}
-                {n.prevPath && <span className="ml-2 text-[var(--zg-text-muted)]">← {n.prevPath}</span>}
-              </span>
-              <Findings counts={findings?.get(n.key)} />
-              <DiffCounts added={n.added} removed={n.removed} />
-            </button>
-          </li>
-        );
-      })}
-    </ul>
-  );
-});
-
-function sum(findings: ReadonlyMap<string, FindingCounts> | null | undefined, keys: readonly string[]) {
-  if (!findings) return undefined;
-  let errors = 0;
-  let warnings = 0;
-  for (const k of keys) {
-    const c = findings.get(k);
-    if (c) {
-      errors += c.errors;
-      warnings += c.warnings;
-    }
-  }
-  return { errors, warnings };
-}
-
-function Findings({ counts }: { counts: FindingCounts | undefined }) {
-  const labels = useSessionLabels();
-  if (!counts || counts.errors + counts.warnings === 0) return null;
-  return (
-    <span
-      className="zg-meta shrink-0 inline-flex items-center gap-1"
-      title={labels.diffFindings(counts.errors, counts.warnings)}
-    >
-      {counts.errors > 0 && (
-        <span className="inline-flex items-center gap-0.5 text-zg-danger">
-          <span className="i-ph-x-circle-fill text-zg-meta" aria-hidden />
-          {counts.errors}
-        </span>
-      )}
-      {counts.warnings > 0 && (
-        <span className="inline-flex items-center gap-0.5 text-zg-warn">
-          <span className="i-ph-warning text-zg-meta" aria-hidden />
-          {counts.warnings}
-        </span>
-      )}
-    </span>
-  );
-}

package/src/session/PanelAttention.tsx

@@ -1,131 +0,0 @@
-/**
- * The side panel's attention drivers: they turn what waits in a session into
- * tab badges (`WorkspaceActions.setAttention`) and, for a request the agent
- * blocks on, a proactive open (`requestAttention`). They render nothing:
- * mount them once, where the active session is known.
- *
- *   - `InboxAttention`: every session with pending requests gets a
- *     warn-toned count on its Inbox tab (switching to it shows the badge at
- *     once); a live request in the active session pins the Inbox tab and
- *     shows it, once per request (a blocked run outranks a tab). Rehydrated
- *     requests only badge.
- *   - `TodosAttention`: open items of the active session's list, info tone.
- *   - `QueueAttention`: messages of the active session waiting for its run
- *     to end, info tone.
- *
- *   <InboxAttention sessionId={active} />
- *   <TodosAttention sessionId={active} />
- *   <QueueAttention sessionId={active} />
- */
-import { useEffect, useLayoutEffect, useRef } from 'react';
-import { INBOX_PANEL_ID, QUEUE_PANEL_ID, TODOS_PANEL_ID } from 'zidane/chat/pure';
-
-import { useAllInteractions, usePendingInteractions } from '../chat/interactions/hooks';
-import { useOptionalChatHost } from '../chat/ChatProvider';
-import type { TabAttention } from '../workspace/headless/view';
-import { useOptionalWorkspaceActions, type WorkspaceActions } from '../workspace/WorkspaceProvider';
-import { useSessionQueue, useSessionTodos } from './SessionProvider';
-
-/** The panel actions a driver calls. */
-export type AttentionActions = Pick<WorkspaceActions, 'setAttention' | 'requestAttention'>;
-
-/** Props shared by the attention drivers. */
-export interface PanelAttentionProps {
-  /** The active session, or `null`. */
-  sessionId: string | null;
-  /** Where badges go. Default: the `WorkspaceProvider` above (none: nothing happens). Keep it stable. */
-  actions?: AttentionActions;
-}
-
-/** Props for {@link InboxAttention}. */
-export interface InboxAttentionProps extends PanelAttentionProps {
-  /**
-   * A live request may open the panel and focus the Inbox. False (an overlay panel that is not showing): only the
-   * tab switches and the badge carries it.
-   * @default true
-   */
-  reveal?: boolean;
-}
-
-const ATTENTION_TONE: TabAttention['tone'] = 'attention';
-
-function useAttentionActions(actions: AttentionActions | undefined): AttentionActions | null {
-  const fromProvider = useOptionalWorkspaceActions();
-  return actions ?? fromProvider;
-}
-
-/**
- * Badges every session's Inbox tab with its pending requests and opens it for a live request in the active session.
- *
- * @param props - The {@link InboxAttentionProps}.
- */
-export function InboxAttention({ sessionId, actions, reveal = true }: InboxAttentionProps) {
-  const panel = useAttentionActions(actions);
-  const all = Boolean(useOptionalChatHost()?.interactions?.all);
-  const every = useAllInteractions();
-  // A host that lists requests per session only: the active session's.
-  const own = usePendingInteractions(all ? null : sessionId);
-  const pending = all ? every : own;
-
-  // Counts per session; clear sessions that emptied.
-  const badged = useRef(new Set<string>());
-  useEffect(() => {
-    if (!panel) return;
-    const counts = new Map<string, number>();
-    for (const p of pending) counts.set(p.sessionId, (counts.get(p.sessionId) ?? 0) + 1);
-    for (const [id, count] of counts) {
-      panel.setAttention(id, INBOX_PANEL_ID, { count, tone: ATTENTION_TONE });
-      badged.current.add(id);
-    }
-    for (const id of [...badged.current]) {
-      if (!counts.has(id)) {
-        panel.setAttention(id, INBOX_PANEL_ID, null);
-        badged.current.delete(id);
-      }
-    }
-  }, [pending, panel]);
-
-  // Proactive open, once per live request on the active session.
-  const opened = useRef<string | null>(null);
-  const head = sessionId ? (pending.find((p) => p.sessionId === sessionId) ?? null) : null;
-  useEffect(() => {
-    if (!panel || !head || head.live === false || opened.current === head.requestId) return;
-    opened.current = head.requestId;
-    panel.requestAttention(INBOX_PANEL_ID, { open: reveal, focus: reveal });
-  }, [head, reveal, panel]);
-
-  return null;
-}
-
-/**
- * Badges the Todos tab with the active session's open items (pending and in progress); hidden at zero.
- *
- * @param props - The {@link PanelAttentionProps}.
- */
-export function TodosAttention({ sessionId, actions }: PanelAttentionProps) {
-  const panel = useAttentionActions(actions);
-  const snap = useSessionTodos(sessionId);
-  const open = snap && snap.todos.length > 0 ? snap.tally.pending + snap.tally.in_progress : 0;
-  // Before paint: switching to a session whose list moved in the background never shows its previous count.
-  useLayoutEffect(() => {
-    if (!sessionId || !panel) return;
-    panel.setAttention(sessionId, TODOS_PANEL_ID, open > 0 ? { count: open, tone: 'info' } : null);
-  }, [sessionId, open, panel]);
-  return null;
-}
-
-/**
- * Badges the Queue tab with the active session's queued messages; hidden at zero.
- *
- * @param props - The {@link PanelAttentionProps}.
- */
-export function QueueAttention({ sessionId, actions }: PanelAttentionProps) {
-  const panel = useAttentionActions(actions);
-  const queued = useSessionQueue(sessionId).length;
-  // Before paint: switching to a session whose queue moved in the background never shows its previous count.
-  useLayoutEffect(() => {
-    if (!sessionId || !panel) return;
-    panel.setAttention(sessionId, QUEUE_PANEL_ID, queued > 0 ? { count: queued, tone: 'info' } : null);
-  }, [sessionId, queued, panel]);
-  return null;
-}

package/src/session/ProviderUsageProvider.tsx

@@ -1,106 +0,0 @@
-/**
- * Subscription usage for the components that show it (a footer gauge, the
- * usage panel): ONE cache and ONE refresh cadence per host, shared through
- * context. `autoLoad` probes every minute while the window is visible and
- * focused, and catches up when it comes back to it; off, nothing is fetched
- * in the background (GitHub's observed limits still show, no network) and a
- * manual refresh still works.
- *
- *   <ProviderUsageProvider autoLoad={settings.subscriptionUsage !== false}>
- *     <UsagePanel … />
- *   </ProviderUsageProvider>
- */
-import { useCallback, useEffect, useMemo, type ReactNode } from 'react';
-
-import { constant, useReadable } from '../chat/headless/store';
-import { createProviderUsageState, type ProviderUsageState, type ProviderUsageView } from './headless/usage';
-import type { SessionUsage } from './headless/host';
-import { useSessionHost } from './SessionProvider';
-
-/** Re-probe interval while auto-loading. Windows move in minutes, not seconds. */
-const REFRESH_MS = 60_000;
-
-/** Someone may be looking: a desktop window behind another is not `hidden`, only unfocused. */
-const attended = () => document.visibilityState === 'visible' && document.hasFocus();
-
-const states = new WeakMap<SessionUsage, ProviderUsageState>();
-
-/** The one state per host's `usage`, so every reader and every mount shares the cache. */
-function stateOf(usage: SessionUsage | undefined): ProviderUsageState | null {
-  const providers = usage?.providers;
-  if (!usage || !providers) return null;
-  let state = states.get(usage);
-  if (!state) {
-    const github = usage.github;
-    state = createProviderUsageState({
-      providers: (options) => providers(options),
-      ...(github ? { github: (options) => github(options) } : {}),
-    });
-    states.set(usage, state);
-  }
-  return state;
-}
-
-const EMPTY = constant<ProviderUsageView>({ snapshots: [], github: [], loading: false, loaded: false });
-
-/** Props for {@link ProviderUsageProvider}. */
-export interface ProviderUsageProviderProps {
-  /** Probe in the background (every minute while visible and focused). Off: only a manual refresh fetches. Default `true`. */
-  autoLoad?: boolean;
-  /** The components that read usage. */
-  children: ReactNode;
-}
-
-/**
- * Runs the refresh cadence of the host's subscription usage for the components below.
- *
- * @param props - `autoLoad` and the `children`.
- */
-export function ProviderUsageProvider({ autoLoad = true, children }: ProviderUsageProviderProps) {
-  const state = stateOf(useSessionHost().usage);
-
-  useEffect(() => {
-    if (!state) return undefined;
-    if (!autoLoad) {
-      // No probes: still show what was observed of GitHub's limits (no network).
-      void state.loadGithub(false);
-      return undefined;
-    }
-    void state.load(false);
-    const timer = setInterval(() => {
-      if (attended()) void state.load(false);
-    }, REFRESH_MS);
-    // Coming back after a full interval catches up at once instead of waiting for the next tick.
-    const onBack = () => {
-      if (attended() && Date.now() - state.lastLoad() >= REFRESH_MS) void state.load(false);
-    };
-    document.addEventListener('visibilitychange', onBack);
-    window.addEventListener('focus', onBack);
-    return () => {
-      clearInterval(timer);
-      document.removeEventListener('visibilitychange', onBack);
-      window.removeEventListener('focus', onBack);
-    };
-  }, [autoLoad, state]);
-
-  return <>{children}</>;
-}
-
-/** What {@link useProviderUsage} returns. */
-export interface ProviderUsage extends ProviderUsageView {
-  /** Fetches now, bypassing the backend's cache. Works with background probes off. */
-  refresh: () => void;
-  /** Whether the host reports subscription usage at all. */
-  available: boolean;
-}
-
-/**
- * The host's subscription usage: the model providers' windows, GitHub's limits, and a manual refresh. Outside a
- * {@link ProviderUsageProvider} nothing is fetched until `refresh`.
- */
-export function useProviderUsage(): ProviderUsage {
-  const state = stateOf(useSessionHost().usage);
-  const view = useReadable(state ? state.view : EMPTY);
-  const refresh = useCallback(() => void state?.load(true), [state]);
-  return useMemo(() => ({ ...view, refresh, available: state !== null }), [view, refresh, state]);
-}