zidane-ui 9.0.4 → 9.1.3

package/src/session/ArtifactRowChips.tsx

@@ -1,251 +0,0 @@
-/**
- * An artifact row's second line as chips (lead / diff / facts): the id first
- * (mono for hashes), the change size in the diff colors, then each fact with
- * its own icon and color. Every chip with an `href` is a link. Also
- * `DiffFacts`, a change size the way the app shows it everywhere.
- */
-import type { CSSProperties, ReactNode } from 'react';
-import { isBadgeColor, type ExtensionArtifactRowFact, type ExtensionBadgeTone } from 'zidane/chat/pure';
-
-import { useSessionLabels } from './useSessionLabels';
-
-const TONE_CLASS: Record<ExtensionBadgeTone, string> = {
-  muted: 'text-[var(--zg-text-muted)]',
-  subtle: 'text-[var(--zg-text-subtle)]',
-  accent: 'text-[var(--zg-accent)]',
-  success: 'text-zg-success',
-  warn: 'text-zg-warn',
-  danger: 'text-zg-danger',
-};
-
-/**
- * The text color class for a tone; `muted` for none or an unknown one.
- *
- * @param tone - A badge tone.
- */
-export function badgeToneClass(tone: ExtensionBadgeTone | undefined): string {
-  return (tone && TONE_CLASS[tone]) || TONE_CLASS.muted;
-}
-
-/**
- * An exact icon color (`#rgb` / `#rrggbb`) as an inline style over the tone class; nothing for anything else.
- *
- * @param color - The color an extension named.
- */
-export function badgeColorStyle(color: unknown): CSSProperties | undefined {
-  return isBadgeColor(color) ? { color } : undefined;
-}
-
-/**
- * Icon classes extension badges and references may name. Icons are UnoCSS classes generated at
- * build time from literals in scanned source, so an icon an extension names exists only if it
- * appears here (or anywhere else the app's Uno scans); one outside it paints nothing and the badge
- * keeps its text.
- */
-export const BADGE_ICONS = [
-  'i-ph-git-commit',
-  'i-ph-git-pull-request',
-  'i-ph-git-branch',
-  'i-ph-git-merge',
-  'i-ph-ticket',
-  'i-ph-kanban',
-  'i-ph-cube',
-  'i-ph-users-three',
-  'i-ph-arrows-clockwise',
-  'i-ph-eye',
-  'i-ph-chat-circle',
-  'i-ph-caret-right',
-  'i-ph-user-circle',
-  'i-ph-files',
-  'i-ph-git-commit',
-  'i-ph-circle',
-  'i-ph-circle-dashed',
-  'i-ph-circle-half',
-  'i-ph-circle-half-fill',
-  'i-ph-check-circle',
-  'i-ph-check-circle-fill',
-  'i-ph-x-circle',
-  'i-ph-x-circle-fill',
-  'i-ph-prohibit',
-  'i-ph-bug',
-  'i-ph-rocket-launch',
-  'i-ph-flag',
-  'i-ph-folder-simple',
-  'i-ph-file',
-  'i-ph-link',
-  'i-ph-globe',
-  'i-ph-cloud-arrow-up',
-  'i-ph-package',
-  'i-ph-tag',
-  'i-ph-warning-circle',
-  'i-ph-warning-circle-fill',
-  'i-ph-record',
-  'i-ph-hash',
-] as const;
-
-/** Props for {@link DiffFacts}. */
-export interface DiffFactsProps {
-  /** Lines added. */
-  added: number;
-  /** Lines removed. */
-  removed: number;
-  /** Files changed. Absent: not shown. */
-  files?: number;
-  /** Makes it a link (a pull request's files tab). */
-  href?: string;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * A change size: `+added` green, `−removed` red (a zero muted), then the files icon and count.
- *
- * @param props - The counts, an optional `href`, `className` and `style`.
- */
-export function DiffFacts({ added, removed, files, href, className = '', style }: DiffFactsProps) {
-  const labels = useSessionLabels();
-  const counts = (
-    <>
-      <span className={added > 0 ? 'text-zg-success' : 'text-[var(--zg-text-subtle)]'}>+{added}</span>
-      <span className={removed > 0 ? 'text-zg-danger' : 'text-[var(--zg-text-subtle)]'}>−{removed}</span>
-      {files !== undefined && (
-        <span className="inline-flex items-center gap-1 ml-1 text-[var(--zg-text-muted)]">
-          <span aria-hidden className="i-ph-files text-zg-meta" />
-          {labels.diffFiles(files)}
-        </span>
-      )}
-    </>
-  );
-  return href ? (
-    <a
-      href={href}
-      target="_blank"
-      rel="noreferrer"
-      title={href}
-      onClick={(e) => e.stopPropagation()}
-      className={`inline-flex items-center gap-1 tabular-nums no-underline hover:underline hover:decoration-[var(--zg-text-subtle)] ${className}`}
-      style={style}
-    >
-      {counts}
-    </a>
-  ) : (
-    <span className={`inline-flex items-center gap-1 tabular-nums ${className}`} style={style}>
-      {counts}
-    </span>
-  );
-}
-
-/** The fields of an artifact row's chips line. */
-export interface ArtifactRowChipsFields {
-  /** A short id (a commit hash, `owner/repo#12`); `mono` for hashes. */
-  lead?: { text: string; href?: string; mono?: boolean };
-  /** A change size. */
-  diff?: { added: number; removed: number; files?: number; href?: string };
-  /** Quiet facts after the diff. */
-  facts?: readonly ExtensionArtifactRowFact[];
-}
-
-/** Props for {@link ArtifactRowChips}. */
-export interface ArtifactRowChipsProps extends ArtifactRowChipsFields {
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-const CHIP =
-  'zg-track-chip inline-flex items-center gap-1 h-[18px] px-1.5 text-zg-meta leading-4 whitespace-nowrap max-w-full min-w-0';
-
-function Chip({
-  href,
-  title,
-  className = '',
-  children,
-}: {
-  href?: string;
-  title?: string;
-  className?: string;
-  children: ReactNode;
-}) {
-  return href ? (
-    <a
-      href={href}
-      target="_blank"
-      rel="noreferrer"
-      title={title ?? href}
-      onClick={(e) => e.stopPropagation()}
-      className={`${CHIP} ${className} no-underline hover:bg-[var(--zg-row-hover)] hover:text-[var(--zg-text)]`}
-    >
-      {children}
-    </a>
-  ) : (
-    <span title={title} className={`${CHIP} ${className}`}>
-      {children}
-    </span>
-  );
-}
-
-function factClass(tone: ExtensionBadgeTone | undefined): string {
-  return tone && tone !== 'muted' ? badgeToneClass(tone) : 'text-[var(--zg-text-muted)]';
-}
-
-/**
- * Whether the fields have anything to show.
- *
- * @param fields - The row's lead, diff and facts.
- */
-export function hasArtifactRowChips(fields: ArtifactRowChipsFields): boolean {
-  return Boolean(fields.lead || fields.diff || (fields.facts && fields.facts.length > 0));
-}
-
-/**
- * Renders an artifact row's lead, diff and facts as chips; nothing when there are none.
- *
- * @param props - The `lead`, `diff`, `facts`, `className` and `style`.
- */
-export function ArtifactRowChips({ lead, diff, facts, className = '', style }: ArtifactRowChipsProps) {
-  if (!hasArtifactRowChips({ lead, diff, facts })) return null;
-  return (
-    <div className={`mt-1 flex flex-wrap items-center gap-1 ${className}`} style={style} data-testid="artifact-facts">
-      {lead && (
-        <Chip
-          {...(lead.href ? { href: lead.href } : {})}
-          className={lead.mono ? 'font-mono text-[var(--zg-text-muted)]' : 'text-[var(--zg-text-muted)]'}
-        >
-          <span className={`truncate ${lead.mono ? 'font-mono' : ''}`}>{lead.text}</span>
-        </Chip>
-      )}
-      {diff && (
-        <span className={CHIP}>
-          <DiffFacts
-            added={diff.added}
-            removed={diff.removed}
-            {...(diff.files !== undefined ? { files: diff.files } : {})}
-            {...(diff.href ? { href: diff.href } : {})}
-          />
-        </span>
-      )}
-      {facts?.map((fact, i) => (
-        <Chip
-          key={`${fact.text}:${i}`}
-          {...(fact.href ? { href: fact.href } : {})}
-          {...(fact.title ? { title: fact.title } : {})}
-          className={factClass(fact.tone)}
-        >
-          {fact.icon?.gui && (
-            <span
-              aria-hidden
-              className={`${fact.icon.gui} shrink-0 text-zg-meta ${factClass(fact.tone)}`}
-              style={badgeColorStyle(fact.color)}
-            />
-          )}
-          <span className={`truncate ${factClass(fact.tone)}`} style={badgeColorStyle(fact.color)}>
-            {fact.text}
-          </span>
-        </Chip>
-      ))}
-    </div>
-  );
-}

package/src/session/ArtifactsPanel.tsx

@@ -1,381 +0,0 @@
-/**
- * The Artifacts panel body: what one session produced (pull requests,
- * branches, commits, recorded files, extension kinds), flat rows under
- * small-caps kind labels, a single accent (the state word) per row. The row
- * is the link; copy, reveal and remove live in its right-click menu.
- *
- * Rows arrive rendered by the host (`artifacts.groups`), so unknown kinds
- * still show. When the list is in, every row is re-resolved once per open
- * (`artifacts.refreshRow` with `force`), and again (cache-gated) on hover;
- * a change comes back through the host's wake-up.
- */
-import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
-
-import { PANEL_ROW, PANEL_ROW_HOVER, RowBadge } from '../components/PanelRows';
-import { PanelEmpty, PanelLoading } from '../components/PanelEmpty';
-import { RowActionsMenu, type RowActionItem } from '../components/RowActionsMenu';
-import { ArtifactRowChips, badgeColorStyle, badgeToneClass } from './ArtifactRowChips';
-import { countArtifacts } from './headless/artifacts';
-import type { SessionArtifactRow, SessionArtifactRowView } from './headless/host';
-import { useSessionArtifacts, useSessionHost } from './SessionProvider';
-import { useSessionLabels } from './useSessionLabels';
-
-/** What a sidebar badge pointed the panel at: a kind's group, or one artifact. */
-export interface ArtifactsPanelFocus {
-  /** The kind's group to bring into view. */
-  kind?: string;
-  /** The artifact (by URI) to bring into view and mark. */
-  uri?: string;
-}
-
-/** The modifier keys of the click that opened a path. */
-export interface ArtifactOpenEvent {
-  /** ⌘ was held. */
-  metaKey?: boolean;
-  /** Ctrl was held. */
-  ctrlKey?: boolean;
-}
-
-/** Props for {@link ArtifactsPanel}. */
-export interface ArtifactsPanelProps {
-  /** The session whose artifacts to list. */
-  sessionId: string;
-  /** Brings a group or an artifact into view and marks it, until the next focus. */
-  focus?: ArtifactsPanelFocus | null;
-  /** The machine the session's paths are on when it is not this one: a path row says so instead of opening. */
-  remoteName?: string | null;
-  /** Opens a path (a file, a folder). Resolves `false` when it is unavailable. Absent: path rows are text. */
-  onOpenPath?: (path: string, event?: ArtifactOpenEvent) => Promise<boolean>;
-  /** Shows a path in the file manager. Absent: no Reveal item. */
-  onRevealPath?: (path: string) => void;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/** Forced refreshes by artifact id, across mounts: remounting the panel must not refetch every row each time. */
-const lastForcedAt = new Map<string, number>();
-const FORCED_REFRESH_FRESH_MS = 30_000;
-
-/**
- * Renders a session's artifacts by kind, with a count summary under them.
- *
- * @param props - The `sessionId`, an optional `focus`, path handlers, `className` and `style`.
- */
-export function ArtifactsPanel({
-  sessionId,
-  focus = null,
-  remoteName = null,
-  onOpenPath,
-  onRevealPath,
-  className = '',
-  style,
-}: ArtifactsPanelProps) {
-  const labels = useSessionLabels();
-  const groups = useSessionArtifacts(sessionId);
-  const host = useSessionHost().artifacts;
-  const fetchSession = host?.refresh;
-  const refreshRow = host?.refreshRow;
-  const removeArtifact = host?.remove;
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    void fetchSession?.(sessionId).catch((err: Error) => setError(err.message));
-  }, [fetchSession, sessionId]);
-
-  const total = countArtifacts(groups);
-
-  const bodyRef = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
-    if (!focus || !groups) return;
-    const body = bodyRef.current;
-    const target =
-      (focus.uri && body?.querySelector(`[data-artifact-uri="${CSS.escape(focus.uri)}"]`)) ||
-      (focus.kind && body?.querySelector(`[data-artifact-kind="${CSS.escape(focus.kind)}"]`));
-    if (target instanceof HTMLElement)
-      target.scrollIntoView?.({
-        block: 'start',
-        // A glide only at full motion; reduced / off jump.
-        behavior: document.documentElement.dataset.motion === 'full' ? 'smooth' : 'auto',
-      });
-  }, [focus, groups]);
-
-  const refreshed = useRef(new Set<string>());
-  const refresh = useCallback(
-    (row: SessionArtifactRow, force = false) => {
-      if (!refreshRow || refreshed.current.has(row.artifact.id)) return;
-      refreshed.current.add(row.artifact.id);
-      // A forced refresh a moment ago (the panel reopened, a session switched back) is current enough.
-      const now = Date.now();
-      if (force && now - (lastForcedAt.get(row.artifact.id) ?? -Infinity) < FORCED_REFRESH_FRESH_MS) return;
-      if (force) lastForcedAt.set(row.artifact.id, now);
-      void refreshRow(sessionId, row.artifact, force ? { force: true } : undefined).catch(() => undefined);
-    },
-    [refreshRow, sessionId],
-  );
-  useEffect(() => {
-    for (const group of groups ?? []) for (const row of group.rows) refresh(row, true);
-  }, [groups, refresh]);
-
-  const remove = useMemo(
-    () =>
-      removeArtifact
-        ? (row: SessionArtifactRow) => {
-            setError(null);
-            void removeArtifact(sessionId, row.artifact.id, row.artifact.sessionId)
-              .then((ok) => {
-                if (!ok) setError(labels.artifactsUnsupported);
-              })
-              .catch((err: Error) => setError(err.message));
-          }
-        : undefined,
-    [removeArtifact, sessionId, labels.artifactsUnsupported],
-  );
-
-  return (
-    <div className={`flex-1 min-h-0 flex flex-col ${className}`} style={style} aria-label={labels.artifactsLabel}>
-      <div ref={bodyRef} className="flex-1 min-h-0 flex flex-col overflow-y-auto px-3 pt-3 pb-3">
-        {error && (
-          <div className="text-xs text-[var(--zg-warn)] mb-2" role="alert">
-            {error}
-          </div>
-        )}
-
-        {groups === null ? (
-          <PanelLoading />
-        ) : total === 0 ? (
-          <PanelEmpty icon="i-ph-cube-transparent" title={labels.artifactsEmpty} hint={labels.artifactsEmptyHint} />
-        ) : (
-          <div className="flex flex-col gap-4">
-            {groups.map((group) => (
-              <section
-                key={group.kind}
-                className="flex flex-col"
-                data-artifact-kind={group.kind}
-                data-focused={focus?.kind === group.kind && !focus.uri ? '' : undefined}
-              >
-                <h3
-                  className={`zg-section-label m-0 mb-1 select-none${focus?.kind === group.kind ? ' text-[var(--zg-accent)]' : ''}`}
-                >
-                  {labels.artifactsGroup(group.label, group.rows.length)}
-                </h3>
-                <ul className="m-0 p-0 list-none flex flex-col">
-                  {group.rows.map((row) => (
-                    <ArtifactRow
-                      key={row.artifact.id}
-                      row={row}
-                      focused={focus?.uri === row.artifact.uri}
-                      remoteName={remoteName}
-                      onOpenPath={onOpenPath}
-                      onRevealPath={onRevealPath}
-                      onFocus={() => refresh(row)}
-                      onRemove={remove ? () => remove(row) : undefined}
-                    />
-                  ))}
-                </ul>
-              </section>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {groups && groups.length > 0 && (
-        <div className="shrink-0 flex flex-wrap gap-1 px-3 py-2" data-testid="artifacts-summary">
-          {groups.map((g) => (
-            <RowBadge key={g.kind} text={labels.artifactsCount(g.label, g.rows.length)} />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ArtifactRow({
-  row,
-  focused,
-  remoteName,
-  onOpenPath,
-  onRevealPath,
-  onFocus,
-  onRemove,
-}: {
-  row: SessionArtifactRow;
-  focused: boolean;
-  remoteName: string | null;
-  onOpenPath: ArtifactsPanelProps['onOpenPath'];
-  onRevealPath: ArtifactsPanelProps['onRevealPath'];
-  onFocus: () => void;
-  onRemove: (() => void) | undefined;
-}) {
-  const labels = useSessionLabels();
-  const { artifact, row: view } = row;
-  const href = view.href;
-  const isUrl = href !== undefined && /^https?:\/\//.test(href);
-
-  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);
-  const [openError, setOpenError] = useState<string | null>(null);
-  const open = async (event?: ArtifactOpenEvent) => {
-    setOpenError(null);
-    try {
-      if (!href || !onOpenPath) return;
-      if (remoteName !== null && !isUrl) {
-        setOpenError(labels.artifactOnRemote(remoteName));
-        return;
-      }
-      if (!(await onOpenPath(href, event))) setOpenError(labels.artifactPathUnavailable);
-    } catch (err) {
-      setOpenError(err instanceof Error ? err.message : String(err));
-    }
-  };
-  const menuItems = useMemo<RowActionItem[]>(
-    () => [
-      {
-        id: 'copy',
-        label:
-          artifact.kind === 'commit'
-            ? labels.artifactCopySha
-            : isUrl
-              ? labels.artifactCopyLink
-              : labels.artifactCopyPath,
-        shortcut: 'c',
-        onSelect: () =>
-          void navigator.clipboard.writeText(
-            artifact.kind === 'commit' ? artifact.uri.replace(/^git:commit:/, '') : (href ?? artifact.uri),
-          ),
-      },
-      ...(href && !isUrl && onRevealPath
-        ? [
-            {
-              id: 'reveal',
-              label: labels.artifactReveal,
-              shortcut: 'f',
-              onSelect: () => onRevealPath(href),
-            } satisfies RowActionItem,
-          ]
-        : []),
-      ...(onRemove
-        ? [
-            {
-              id: 'remove',
-              label: labels.artifactRemove,
-              shortcut: 'r',
-              destructive: true,
-              onSelect: onRemove,
-            } satisfies RowActionItem,
-          ]
-        : []),
-    ],
-    [isUrl, href, artifact.kind, artifact.uri, onRemove, onRevealPath, labels],
-  );
-
-  return (
-    <li
-      className={`${PANEL_ROW} ${PANEL_ROW_HOVER}${focused ? ' bg-[var(--zg-row-hover)]' : ''}`}
-      data-artifact-uri={artifact.uri}
-      data-focused={focused ? '' : undefined}
-      onMouseEnter={onFocus}
-      onFocus={onFocus}
-      onContextMenu={(e) => {
-        e.preventDefault();
-        setMenu({ x: e.clientX, y: e.clientY });
-      }}
-    >
-      <LeadingIcon view={view} />
-      <div className="flex-1 min-w-0 flex flex-col">
-        <div className="flex items-baseline gap-2 min-w-0">
-          {isUrl ? (
-            <a
-              href={href}
-              target="_blank"
-              rel="noreferrer"
-              className="truncate text-zg-ui text-[var(--zg-text)] no-underline hover:underline"
-              title={href}
-            >
-              {view.title}
-            </a>
-          ) : href && onOpenPath ? (
-            <button
-              type="button"
-              onClick={(e) => void open(e)}
-              className="truncate text-left text-zg-ui text-[var(--zg-text)] bg-transparent border-0 p-0 cursor-pointer hover:underline"
-              title={labels.artifactOpen(href)}
-            >
-              {view.title}
-            </button>
-          ) : (
-            <span className="truncate text-zg-ui text-[var(--zg-text)]" title={href ?? artifact.uri}>
-              {view.title}
-            </span>
-          )}
-          {view.status && (
-            <span
-              className={`ml-auto shrink-0 text-zg-meta leading-4 whitespace-nowrap ${badgeToneClass(view.tone)}`}
-              style={badgeColorStyle(view.color)}
-            >
-              {view.status}
-            </span>
-          )}
-        </div>
-        {openError && (
-          <div role="alert" className="text-xs text-[var(--zg-warn)]">
-            {openError}
-          </div>
-        )}
-        <RowFacts view={view} />
-      </div>
-
-      <RowActionsMenu
-        open={menu !== null}
-        position={menu ?? undefined}
-        onClose={() => setMenu(null)}
-        items={menuItems}
-      />
-    </li>
-  );
-}
-
-/** The row's state icon (in its tone or exact color); a quiet dot for rows without one. */
-function LeadingIcon({ view }: { view: SessionArtifactRowView }) {
-  if (view.icon?.gui) {
-    return (
-      <span
-        aria-hidden
-        className={`${view.icon.gui} mt-[3px] text-zg-ui shrink-0 ${badgeToneClass(view.tone)}`}
-        style={badgeColorStyle(view.color)}
-      />
-    );
-  }
-  return <span aria-hidden className="mt-[7px] w-1 h-1 rounded-full shrink-0 bg-[var(--zg-border)]" />;
-}
-
-/** Line 2: the chips for rows on the shared layout; older rows keep their subtitle and badges. */
-function RowFacts({ view }: { view: SessionArtifactRowView }) {
-  const shared = view.lead || view.diff || (view.facts && view.facts.length > 0);
-  if (!shared) {
-    const subtitle = view.subtitle && view.subtitle !== view.title ? view.subtitle : undefined;
-    return (
-      <>
-        {subtitle && (
-          <div className="truncate text-zg-meta text-[var(--zg-text-muted)] font-mono" title={subtitle}>
-            {subtitle}
-          </div>
-        )}
-        {view.badges && view.badges.length > 0 && (
-          <div className="mt-1 flex flex-wrap items-center gap-1.5">
-            {view.badges.map((badge) => (
-              <RowBadge key={badge.text} text={badge.text} tone={badge.tone} title={badge.title} />
-            ))}
-          </div>
-        )}
-      </>
-    );
-  }
-  return (
-    <ArtifactRowChips
-      {...(view.lead ? { lead: view.lead } : {})}
-      {...(view.diff ? { diff: view.diff } : {})}
-      {...(view.facts ? { facts: view.facts } : {})}
-    />
-  );
-}