zidane-ui 9.1.1 → 9.1.3

package/src/chat/sidebar/SidebarDecoration.tsx

@@ -1,93 +0,0 @@
-/**
- * What extensions put on a sidebar row: the decorations' icon and chips
- * (`SidebarRowDecoration`, merged by `createDecorator`). A component one of
- * them names is drawn through the extensions' component resolver in place of
- * that decoration's own icon and chips, its fallback (while it loads, without
- * a loader, after a throw); the other decorations' chips stay beside it.
- */
-import { memo, type CSSProperties } from 'react';
-
-import { ExtensionComponent } from '../../extensions/ExtensionComponent';
-import { badgeToneClass } from '../../session/ArtifactRowChips';
-import type { SidebarRowChip, SidebarRowDecoration } from '../headless/sidebar/query';
-
-const CHIP = 'zg-row-badge zg-meta inline-flex items-center gap-1 h-[18px] px-1.5 rounded-zg-sm whitespace-nowrap';
-
-/** Props of {@link SidebarChip}. */
-export interface SidebarChipProps {
-  /** The chip. */
-  chip: SidebarRowChip;
-  /** Extra classes on the chip. */
-  className?: string;
-  /** Inline styles on the chip. */
-  style?: CSSProperties;
-}
-
-/**
- * One chip of a decoration or an item: its icon and text in its tone.
- *
- * @param props - The chip, `className` and `style`.
- */
-export function SidebarChip({ chip, className = '', style }: SidebarChipProps) {
-  return (
-    <span data-testid="row-chip" className={`${CHIP} ${badgeToneClass(chip.tone)} ${className}`.trim()} style={style}>
-      {chip.icon && <span aria-hidden className={`${chip.icon} text-zg-meta`} />}
-      {chip.text}
-    </span>
-  );
-}
-
-/** Props of {@link SidebarDecoration}. */
-export interface SidebarDecorationProps {
-  /** The row's merged decoration. */
-  decoration: SidebarRowDecoration;
-  /** The session the row lists: a decoration's component gets it as `sessionId`. */
-  sessionId: string;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * The decorations' icon and chips on a session row; a component one of them names in place of that
- * decoration's own icon and chips, which are its fallback.
- *
- * @param props - The decoration, the session, `className` and `style`.
- */
-export const SidebarDecoration = memo(function SidebarDecoration({
-  decoration,
-  sessionId,
-  className = '',
-  style,
-}: SidebarDecorationProps) {
-  const { component } = decoration;
-  const own = new Set(component?.chips);
-  const icon = (cls: string | undefined) =>
-    cls && <span aria-hidden className={`${cls} text-zg-meta ${badgeToneClass(decoration.tone)}`} />;
-  const chipsOf = (list: readonly SidebarRowChip[]) =>
-    list.map((chip, i) => <SidebarChip key={`${i}:${chip.text}`} chip={chip} />);
-  return (
-    <span
-      data-testid="row-decoration"
-      className={`inline-flex items-center gap-1 min-w-0 shrink-0 ${className}`.trim()}
-      style={style}
-    >
-      {component && component.icon === decoration.icon ? null : icon(decoration.icon)}
-      {component && (
-        <ExtensionComponent
-          extension={component.extension}
-          component={component.component}
-          props={{ sessionId }}
-          fallback={
-            <>
-              {icon(component.icon)}
-              {chipsOf(component.chips)}
-            </>
-          }
-        />
-      )}
-      {chipsOf(decoration.chips.filter((chip) => !own.has(chip)))}
-    </span>
-  );
-});

package/src/chat/sidebar/SidebarFilterMenu.tsx

@@ -1,270 +0,0 @@
-import { useMemo } from 'react';
-
-import {
-  SessionFilterMenu,
-  type SessionFilterAction,
-  type SessionFilterExtra,
-  type SessionView,
-} from '../SessionFilterMenu';
-import type { SessionSortBy } from '../headless/session-list';
-import type { SidebarQueryLayer } from '../headless/sidebar/query';
-import {
-  VIEW_CHOICE,
-  type SidebarExtensionView,
-  type SidebarGroupBy,
-  type SidebarView,
-} from '../headless/sidebar/types';
-import { useChatLabels } from '../useChatLabels';
-import { useAgentNames } from './useAgentNames';
-
-const VIEWS: readonly SidebarGroupBy[] = ['project', 'none', 'date', 'state', 'agent'];
-const VIEWS_WITH_HOST: readonly SidebarGroupBy[] = ['project', 'host', 'none', 'date', 'state', 'agent'];
-const SORTS: readonly SessionSortBy[] = ['alphabetical', 'createdTime', 'recency'];
-const ALL_AGENTS = '__all__';
-const ANY = '__any__';
-const SPACE = '@space';
-const NO_GROUPS: SidebarQueryLayer['groups'] = [];
-const NO_SORTS: SidebarQueryLayer['sorts'] = [];
-
-/** Props of {@link SidebarFilterMenu}. */
-export interface SidebarFilterMenuProps {
-  /** The shown space's view. */
-  view: SidebarView;
-  /** Every project the listed sessions belong to (by folder name). */
-  projects: readonly string[];
-  /** Change some axes of the view. */
-  onChange: (patch: Partial<SidebarView>) => void;
-  /** Remote hosts are on: offer the per-host view. */
-  hosts?: boolean;
-  /** The agents the space's sessions run (`AgentProfile.id`): the agent filter's choices. Absent or empty: no agent filter. */
-  agents?: readonly string[];
-  /** Agent names by id. Default: the composer host's agent catalog. An agent left out shows its id. */
-  agentNames?: Readonly<Record<string, string>>;
-  /**
-   * The space and what the extensions offer it (`SessionDirectoryView.query`): their filters, sorts
-   * and groupings join the menu, and the space's own grouping and sort are a choice.
-   */
-  query?: Pick<SidebarQueryLayer, 'space' | 'filters' | 'sorts' | 'groups'>;
-  /** Saves the view as a space of its own. Absent: no such row. */
-  onSaveView?: () => void;
-  /** Extra classes on the trigger button. */
-  className?: string;
-}
-
-/** The extension layer with one change, empty parts dropped. */
-function withExtension(view: SidebarView, change: Partial<SidebarExtensionView>): SidebarExtensionView {
-  const next = { filters: {}, ...view.extension, ...change };
-  const out: SidebarExtensionView = { filters: next.filters };
-  if (next.sort) out.sort = next.sort;
-  if (next.group) out.group = next.group;
-  return out;
-}
-
-/**
- * The sidebar's filter axes in the kit's filter menu: view, status, project, activity, agent, sort,
- * and what extensions contribute (filters, sorts, groupings), with Save view as space.
- *
- * @param props - The {@link SidebarFilterMenuProps}.
- */
-export function SidebarFilterMenu({
-  view,
-  projects,
-  onChange,
-  hosts = false,
-  agents,
-  agentNames: agentNamesProp,
-  query,
-  onSaveView,
-  className,
-}: SidebarFilterMenuProps) {
-  const labels = useChatLabels();
-  const catalogNames = useAgentNames();
-  const agentNames = agentNamesProp ?? catalogNames;
-  const { groupBy } = view;
-  const viewOptions = hosts || groupBy === 'host' ? VIEWS_WITH_HOST : VIEWS;
-  const space = query?.space;
-  const groups = query?.groups ?? NO_GROUPS;
-  const sorts = query?.sorts ?? NO_SORTS;
-  const groupChoice = groups.length > 0 || Boolean(space?.groupBy);
-  const sortChoice = sorts.length > 0 || Boolean(space?.sortBy);
-
-  const extras = useMemo<SessionFilterExtra[]>(() => {
-    const out: SessionFilterExtra[] = [];
-    const ext = view.extension;
-    if (groupChoice) {
-      const picked = ext?.group;
-      const contributed = picked ? groups.find((g) => g.item.id === picked) : undefined;
-      const current = contributed ? contributed.item.id : space?.groupBy && picked !== VIEW_CHOICE ? SPACE : groupBy;
-      const options = [
-        ...(space?.groupBy ? [{ id: SPACE, label: labels.filterSpaceDefault }] : []),
-        ...viewOptions.map((id) => ({ id, label: labels.filterViews[id] })),
-        ...groups.map((g) => ({ id: g.item.id, label: g.item.label })),
-      ];
-      out.push({
-        kind: 'choice',
-        id: 'view',
-        label: labels.filterView,
-        placement: 'view',
-        value: options.find((o) => o.id === current)?.label ?? current,
-        atDefault: current === (space?.groupBy ? SPACE : 'project'),
-        options,
-        current,
-        onChange: (next) => {
-          if (next === SPACE) onChange({ extension: withExtension(view, { group: undefined }) });
-          else if (groups.some((g) => g.item.id === next))
-            onChange({ extension: withExtension(view, { group: next }) });
-          else
-            onChange({
-              groupBy: next as SidebarGroupBy,
-              extension: withExtension(view, { group: space?.groupBy ? VIEW_CHOICE : undefined }),
-            });
-        },
-      });
-    }
-    for (const { item } of query?.filters ?? []) {
-      const value = ext?.filters[item.id];
-      const set = (next: boolean | string | readonly string[] | undefined) => {
-        const filters = { ...view.extension?.filters };
-        if (next === undefined || next === false || (Array.isArray(next) && next.length === 0)) delete filters[item.id];
-        else filters[item.id] = next;
-        onChange({ extension: withExtension(view, { filters }) });
-      };
-      const options = (item.options ?? []).map((o) => ({ id: o.id, label: o.label }));
-      if (item.kind === 'toggle') {
-        out.push({
-          kind: 'toggle',
-          id: item.id,
-          label: item.label,
-          placement: 'filter',
-          checked: value === true,
-          onChange: (checked) => set(checked),
-        });
-      } else if (item.kind === 'select') {
-        const current = typeof value === 'string' && options.some((o) => o.id === value) ? value : ANY;
-        out.push({
-          kind: 'choice',
-          id: item.id,
-          label: item.label,
-          placement: 'filter',
-          value: options.find((o) => o.id === current)?.label ?? labels.filterAny,
-          atDefault: current === ANY,
-          options: [{ id: ANY, label: labels.filterAny }, ...options],
-          current,
-          onChange: (next) => set(next === ANY ? undefined : next),
-        });
-      } else {
-        const current = Array.isArray(value) ? value.filter((id) => options.some((o) => o.id === id)) : [];
-        out.push({
-          kind: 'multi',
-          id: item.id,
-          label: item.label,
-          placement: 'filter',
-          value:
-            current.length === 0
-              ? labels.filterAny
-              : current.length === 1
-                ? (options.find((o) => o.id === current[0])?.label ?? current[0]!)
-                : labels.filterPicked(current.length),
-          options,
-          current,
-          onChange: (next) => set(next),
-        });
-      }
-    }
-    if (sortChoice) {
-      const picked = ext?.sort;
-      const contributed = picked ? sorts.find((s) => s.item.id === picked) : undefined;
-      const current = contributed ? contributed.item.id : space?.sortBy && picked !== VIEW_CHOICE ? SPACE : view.sortBy;
-      const options = [
-        ...(space?.sortBy ? [{ id: SPACE, label: labels.filterSpaceDefault }] : []),
-        ...SORTS.map((id) => ({ id, label: labels.filterSorts[id] })),
-        ...sorts.map((s) => ({ id: s.item.id, label: s.item.label })),
-      ];
-      out.push({
-        kind: 'choice',
-        id: 'sort',
-        label: labels.filterSort,
-        placement: 'sort',
-        value: options.find((o) => o.id === current)?.label ?? current,
-        atDefault: current === (space?.sortBy ? SPACE : 'recency'),
-        options,
-        current,
-        onChange: (next) => {
-          if (next === SPACE) onChange({ extension: withExtension(view, { sort: undefined }) });
-          else if (sorts.some((s) => s.item.id === next)) onChange({ extension: withExtension(view, { sort: next }) });
-          else
-            onChange({
-              sortBy: next as SessionSortBy,
-              extension: withExtension(view, { sort: space?.sortBy ? VIEW_CHOICE : undefined }),
-            });
-        },
-      });
-    }
-    const agentList = agents ?? [];
-    if (agentList.length > 0 || view.agent) {
-      const current = view.agent ?? ALL_AGENTS;
-      const name = (id: string) => agentNames?.[id] ?? id;
-      const ids = view.agent && !agentList.includes(view.agent) ? [...agentList, view.agent] : agentList;
-      out.push({
-        kind: 'choice',
-        id: 'agent',
-        label: labels.filterAgent,
-        placement: 'filter',
-        value: view.agent ? name(view.agent) : labels.filterAllAgents,
-        atDefault: !view.agent,
-        options: [
-          { id: ALL_AGENTS, label: labels.filterAllAgentsOption },
-          ...ids.map((id) => ({ id, label: name(id) })),
-        ],
-        current,
-        onChange: (next) => onChange({ agent: next === ALL_AGENTS ? null : next }),
-      });
-    }
-    return out;
-  }, [
-    view,
-    groupBy,
-    viewOptions,
-    space,
-    groups,
-    sorts,
-    groupChoice,
-    sortChoice,
-    query,
-    agents,
-    agentNames,
-    labels,
-    onChange,
-  ]);
-
-  const actions = useMemo<SessionFilterAction[]>(
-    () =>
-      onSaveView
-        ? [{ id: 'save-view', label: labels.filterSaveView, icon: 'i-ph-bookmark-simple', onSelect: onSaveView }]
-        : [],
-    [onSaveView, labels],
-  );
-
-  return (
-    <SessionFilterMenu<SessionView>
-      {...(className ? { className } : {})}
-      {...(groupChoice
-        ? {}
-        : {
-            view: {
-              value: groupBy,
-              onChange: (next: SessionView) => onChange({ groupBy: next as SidebarGroupBy }),
-              options: viewOptions,
-            },
-          })}
-      status={{ value: view.archive, onChange: (archive) => onChange({ archive }) }}
-      project={{ value: view.project, options: projects, onChange: (project) => onChange({ project }) }}
-      activity={{ value: view.activity, onChange: (activity) => onChange({ activity }) }}
-      {...(sortChoice
-        ? {}
-        : { sort: { value: view.sortBy, onChange: (sortBy: SessionSortBy) => onChange({ sortBy }) } })}
-      extras={extras}
-      actions={actions}
-    />
-  );
-}

package/src/chat/sidebar/SidebarFooter.tsx

@@ -1,244 +0,0 @@
-/**
- * The strip at the bottom of the sidebar:
- *
- *   [status …]   [spaces]   [settings]
- *
- * The status side holds what the app puts there (the daemon dot, the sign-in
- * prompt, the usage chip, the compacting indicator, each below), then what
- * extensions put in `sidebar.footer` and `app.statusbar`; the spaces
- * switcher sits at the TRUE center (equal `1fr` sides, each clipping rather
- * than pushing it; without it the status side runs up to the gear, clipping
- * there); the gear opens Settings, with a dot when something waits
- * there (an update).
- */
-import { useEffect, useState, type CSSProperties, type ReactNode } from 'react';
-import {
-  activeSnapshotFor,
-  compactingParts,
-  formatUsagePercent,
-  mostConstrainedWindow,
-  resetLabel,
-  usageTone,
-  type ProviderUsageSnapshot,
-} from 'zidane/chat/pure';
-
-import { IconButton } from '../../components/IconButton';
-import { ExtensionSlot } from '../../extensions/ExtensionSlot';
-import type { CompactionProgress } from '../headless/sidebar/compaction';
-import { Throbber } from '../Throbber';
-import { useSidebarLabels } from './useSidebarLabels';
-
-/** Something waiting in Settings: the gear's dot and its name. */
-export interface SidebarSettingsNote {
-  /** Said after "Settings" in the gear's name. */
-  text: string;
-  /** A warning (a failed update) rather than news. */
-  warn?: boolean;
-}
-
-/** Props of {@link SidebarFooter}. */
-export interface SidebarFooterProps {
-  /** The status side, left: the app's indicators. */
-  status?: ReactNode;
-  /** The center: the spaces switcher (Spaces on). */
-  spaces?: ReactNode;
-  /** Opens Settings. */
-  onOpenSettings: () => void;
-  /** Something waiting in Settings. */
-  settingsNote?: SidebarSettingsNote;
-  /** The session on screen: its extensions' `sidebar.footer` and `app.statusbar` items show too. */
-  sessionId?: string;
-  /** Extra classes on the strip. */
-  className?: string;
-  /** Inline styles on the strip. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the sidebar's footer strip.
- *
- * @param props - The status side, the spaces switcher, the settings gear, `className` and `style`.
- */
-export function SidebarFooter({
-  status,
-  spaces,
-  onOpenSettings,
-  settingsNote,
-  sessionId,
-  className = '',
-  style,
-}: SidebarFooterProps) {
-  const scoped = sessionId ? { sessionId } : {};
-  const labels = useSidebarLabels();
-  return (
-    /*
-     * Height: 28px content (h-7 buttons) + 5px top + 4px bottom padding = 37px,
-     * on the sidebar's tray tone with no border line. Bottom-anchored with a
-     * fixed height, so its top edge stays one band with a composer's control
-     * axis that is also 37px from the window's bottom.
-     */
-    <div
-      className={`grid ${spaces ? 'grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]' : 'grid-cols-[minmax(0,1fr)_auto]'} items-center gap-2 px-2 pt-[5px] pb-1 text-zg-meta text-[var(--zg-text-muted)] shrink-0${className ? ` ${className}` : ''}`}
-      style={style}
-    >
-      {/* Clipped sideways only (focus rings and hit areas keep their 6px): a narrow sidebar never spills the status over the gear. */}
-      <div className="flex items-center gap-2 min-w-0 -mx-1.5 px-1.5 [overflow-x:clip]">
-        {status}
-        <ExtensionSlot at="sidebar.footer" {...scoped} />
-        <ExtensionSlot at="app.statusbar" {...scoped} />
-      </div>
-      {spaces && <div className="flex items-center justify-center min-w-0">{spaces}</div>}
-      <div className="flex items-center justify-end min-w-0">
-        <IconButton
-          icon="i-ph-gear-six"
-          label={settingsNote ? labels.footerSettingsWithNote(settingsNote.text) : labels.footerSettings}
-          onClick={onOpenSettings}
-          className="zg-hit-extend relative"
-        >
-          {settingsNote && (
-            <span
-              aria-hidden
-              data-update-dot
-              className={`pointer-events-none absolute top-1 right-1 w-1.5 h-1.5 rounded-full ${
-                settingsNote.warn ? 'bg-[var(--zg-warn)]' : 'bg-[var(--zg-accent)]'
-              }`}
-            />
-          )}
-        </IconButton>
-      </div>
-    </div>
-  );
-}
-
-/** Props of {@link SidebarSignInPrompt}. */
-export interface SidebarSignInPromptProps {
-  /** Opens the sign-in. */
-  onClick: () => void;
-  /** Extra classes on the button. */
-  className?: string;
-  /** Inline styles on the button. */
-  style?: CSSProperties;
-}
-
-/** Text buttons in the strip (sign in): the icon buttons' lift, sized to their label. */
-const FOOTER_TEXT_BUTTON =
-  'zg-segment-item zg-press-soft zg-hit-extend relative inline-flex items-center gap-1.5 h-7 px-2 rounded-zg-sm bg-transparent border-0 cursor-pointer shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--zg-ring)]';
-
-/**
- * The "sign in" prompt, for while no provider credentials exist. The signed-in state has no footer presence.
- *
- * @param props - What it opens, `className` and `style`.
- */
-export function SidebarSignInPrompt({ onClick, className = '', style }: SidebarSignInPromptProps) {
-  const labels = useSidebarLabels();
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      title={labels.footerSignInTitle}
-      className={`${FOOTER_TEXT_BUTTON}${className ? ` ${className}` : ''}`}
-      style={style}
-    >
-      <span className="inline-block w-1.5 h-1.5 rounded-full bg-zg-danger-dot" />
-      <span className="text-[var(--zg-danger)]">{labels.footerSignIn}</span>
-    </button>
-  );
-}
-
-/** Props of {@link SidebarUsageIndicator}. */
-export interface SidebarUsageIndicatorProps {
-  /** The providers' usage snapshots (`useProviderUsage`, `zidane-ui/session`). */
-  snapshots: readonly ProviderUsageSnapshot[];
-  /** The open session's provider. Absent: nothing renders. */
-  providerKey?: string;
-  /** The account the session is pinned to, when it is. */
-  account?: string;
-  /** Extra classes on the chip. */
-  className?: string;
-  /** Inline styles on the chip. */
-  style?: CSSProperties;
-}
-
-/**
- * `▰ 5h 43%`: the open session's provider's most constrained subscription window, on the TUI footer's
- * helpers so both read the same number in the same color. Nothing when the provider reports no usage.
- *
- * @param props - The snapshots, the session's provider and account, `className` and `style`.
- */
-export function SidebarUsageIndicator({
-  snapshots,
-  providerKey,
-  account,
-  className = '',
-  style,
-}: SidebarUsageIndicatorProps) {
-  const labels = useSidebarLabels();
-  // A provider with several accounts has several snapshots; a session pinned to one shows THAT account's.
-  const snapshot = providerKey ? activeSnapshotFor(snapshots, providerKey, account) : null;
-  const worst = snapshot && snapshot.status === 'ok' ? mostConstrainedWindow(snapshot) : null;
-  if (!worst) return null;
-  const tone = usageTone(worst.usedPercent);
-  const toneCls = tone === 'error' ? '!text-zg-danger' : tone === 'warn' ? '!text-zg-warn' : '';
-  return (
-    <span
-      className={`zg-track-chip zg-meta inline-flex items-center gap-1 h-5 px-2 shrink-0 ${toneCls}${className ? ` ${className}` : ''}`}
-      style={style}
-      title={[
-        `${snapshot?.label ?? ''}${snapshot?.account ? ` (${snapshot.account})` : ''}`,
-        labels.usageWindow(worst.label, formatUsagePercent(worst.usedPercent)),
-        worst.resetsAt ? resetLabel(worst.resetsAt) : null,
-        labels.usagePanelHint,
-      ]
-        .filter(Boolean)
-        .join('\n')}
-    >
-      <span aria-hidden>▰</span>
-      {worst.label} {formatUsagePercent(worst.usedPercent)}%
-    </span>
-  );
-}
-
-/** Props of {@link SidebarCompactingIndicator}. */
-export interface SidebarCompactingIndicatorProps {
-  /** The compaction's progress; `null` before it reports any. */
-  progress: CompactionProgress | null;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * "compacting…" with the Throbber's ellipsis, then a live `~12k` summary estimate and the elapsed time past
- * one second, so a long compaction reads as progress rather than a hang.
- *
- * @param props - The progress, `className` and `style`.
- */
-export function SidebarCompactingIndicator({ progress, className = '', style }: SidebarCompactingIndicatorProps) {
-  const labels = useSidebarLabels();
-  const [, tick] = useState(0);
-  useEffect(() => {
-    if (!progress) return undefined;
-    const timer = setInterval(() => tick((n) => n + 1), 1000);
-    return () => clearInterval(timer);
-  }, [progress]);
-  const { label, meta } = compactingParts(progress?.estTokens ?? null, progress?.startedAt ?? null);
-  return (
-    <span
-      className={`inline-flex flex-wrap items-center gap-x-1 h-5 min-w-0 overflow-hidden${className ? ` ${className}` : ''}`}
-      style={style}
-      title={labels.compactingTitle}
-    >
-      <span className="zg-track-chip inline-flex items-center gap-2 h-5 px-2 min-w-0">
-        <span className="zg-meta truncate">{label}</span>
-        <Throbber />
-      </span>
-      {meta.map((value) => (
-        // The elapsed time differs between a server render and its hydration; the next tick repaints it.
-        <span key={value} className="zg-track-chip zg-meta inline-flex items-center h-5 px-2" suppressHydrationWarning>
-          {value}
-        </span>
-      ))}
-    </span>
-  );
-}