zidane-ui 9.0.4 → 9.1.3

package/src/settings/sections/skills/SkillList.tsx

@@ -1,494 +0,0 @@
-/**
- * Settings › Skills' list, laid out like the Instructions section: one card
- * per skill with its weight in context, expandable to its whole SKILL.md in
- * the code editor. This computer's Skills and a server's (`HostCatalogSection`)
- * both draw it: an entry without its whole skill (a server's catalog carries
- * none) shows no weights and doesn't expand, and one a plugin or an
- * extension brings shows who brings it and the host's state, read-only.
- *
- *   - Two weights per skill (`skillTokenWeights`): its catalog entry, carried
- *     in every prompt while the skill is enabled, and its body, loaded only
- *     when the agent activates it. A bar above splits the catalog the enabled
- *     skills cost.
- *   - The checkbox is the allowlist (`enabledSkills`); the card's row expands it.
- *   - A search beside the scope tabs narrows the cards to skills whose name
- *     or description holds every typed term. The tab counts and the bar
- *     still count the whole scope.
- *   - Expanded, a skill on disk opens editable when the host can write it
- *     (`skills.write`, refused when the file moved, with the editor's Reload /
- *     Overwrite bar). A built-in or inline skill shows read-only.
- */
-import { lazy, Suspense, useMemo, useRef, useState, type ReactNode } from 'react';
-import type { SkillConfig } from 'zidane';
-import { skillTokenWeights } from 'zidane/chat/pure';
-
-import { useCodeDocument, type SaveOutcome } from '../../../code/editor/useCodeDocument';
-import { BTN_DANGER_CONFIRM, BTN_SECONDARY } from '../../../components/button';
-import { Checkbox, MetaChip } from '../../../components/Form';
-import { IconButton } from '../../../components/IconButton';
-import { LoadError } from '../../../components/LoadError';
-import { Segmented } from '../../../components/Segmented';
-import { EmptyState } from '../../../components/Surface';
-import { formatTokens } from '../../../session/headless/usage-format';
-import type { SettingsFile } from '../../headless/sections-host';
-import { useSettingsHost } from '../../SettingsProvider';
-
-// The code editor (pierre) loads when a skill first expands, never with Settings.
-const CodeEditor = lazy(() => import('../../../code/editor/CodeEditor').then((m) => ({ default: m.CodeEditor })));
-import {
-  OpenFileButton,
-  RevealPathButton,
-  useCatalogSharedLabels,
-  useEnabledList,
-  useSettingsResource,
-} from '../shared/catalog';
-import { useSectionLabels } from '../use-section-labels';
-import { DEFAULT_SKILLS_SECTION_LABELS, type SkillsSectionLabels } from './labels';
-
-/** The Skills section's strings, overridable through `LabelsProvider`. */
-export function useSkillsSectionLabels(): SkillsSectionLabels {
-  return useSectionLabels(DEFAULT_SKILLS_SECTION_LABELS);
-}
-
-/** The skills hue of the composer's context breakdown and the Instructions section. */
-const SKILL_COLOR = '#a855f7';
-
-/** Which skills the list shows: every one, or one scope's (built-in and inline ones show under All). */
-type SourceFilter = 'all' | 'user' | 'project';
-
-/** A skill as the list shows it. */
-export interface SkillListEntry {
-  /** Its name (the `enabledSkills` key). */
-  name: string;
-  /** When the agent reaches for it. */
-  description: string;
-  /** Where it was found. Unstamped: a project one (`parseSkillFile`'s default). */
-  source?: SkillConfig['source'];
-  /** The whole skill: its weights in context, and its SKILL.md when expanded. Absent: neither shows. */
-  skill?: SkillConfig;
-  /** Brought by a plugin or an extension, whose own switch governs it: its box shows `enabled`, read-only. */
-  contributed?: { origin: 'plugin' | 'extension'; by?: string; enabled: boolean };
-}
-
-type Weight = { catalog: number; body: number };
-
-const keyOf = (entry: SkillListEntry) => entry.name;
-const toggleable = (entry: SkillListEntry) => !entry.contributed;
-const onDisk = (skill: SkillConfig) => !!skill.location && skill.source !== 'inline' && skill.source !== 'builtin';
-
-const WHITESPACE_RE = /\s+/;
-
-/** Whether every (lowercased) term appears in the skill's name or description. */
-const matchesTerms = (entry: SkillListEntry, terms: readonly string[]) => {
-  const text = `${entry.name}\n${entry.description}`.toLowerCase();
-  return terms.every((term) => text.includes(term));
-};
-
-export function SkillList({
-  cwd,
-  catalog,
-  actionOf,
-  onSaved,
-  emptyMessage,
-}: {
-  cwd: string | null;
-  catalog: readonly SkillListEntry[];
-  /** Trailing controls on a card (Edit, Delete). */
-  actionOf?: (entry: SkillListEntry) => ReactNode | undefined;
-  /** A SKILL.md was saved: the list re-reads (its description and weights may have changed). */
-  onSaved?: () => void;
-  emptyMessage: string;
-}) {
-  const l = useSkillsSectionLabels();
-  // The allowlist governs the skills on disk; a plugin's or an extension's follow their own switch.
-  const governed = useMemo(() => catalog.filter(toggleable), [catalog]);
-  const { enabledSet, toggle, writable } = useEnabledList(governed, keyOf, 'enabledSkills');
-  const enabledOf = (entry: SkillListEntry) => entry.contributed?.enabled ?? enabledSet.has(entry.name);
-  const [expanded, setExpanded] = useState<ReadonlySet<string>>(() => new Set());
-  const [filter, setFilter] = useState<SourceFilter>('all');
-  const [query, setQuery] = useState('');
-  // An unstamped skill is a project one (`parseSkillFile`'s default).
-  const inScope = filter === 'all' ? catalog : catalog.filter((s) => (s.source ?? 'project') === filter);
-  const terms = query.toLowerCase().split(WHITESPACE_RE).filter(Boolean);
-  const shown = terms.length > 0 ? inScope.filter((s) => matchesTerms(s, terms)) : inScope;
-  const weights = useMemo(
-    () => new Map(catalog.flatMap((e) => (e.skill ? [[e.name, skillTokenWeights(e.skill)] as const] : []))),
-    [catalog],
-  );
-  // The bar and its total follow the scope, not the search: what this scope's enabled skills cost.
-  const enabled = inScope.filter(enabledOf);
-  const filters = [
-    { value: 'all', label: l.skillsSectionFilterAll },
-    { value: 'user', label: l.skillsSectionFilterUser },
-    { value: 'project', label: l.skillsSectionFilterProject },
-  ] as const;
-
-  if (catalog.length === 0) return <EmptyState title={emptyMessage} />;
-  return (
-    <div className="flex flex-col gap-3" data-testid="skill-list">
-      <div className="flex items-center gap-2">
-        <Segmented
-          ariaLabel={l.skillsSectionFilterLabel}
-          value={filter}
-          onChange={setFilter}
-          options={filters.map((f) => ({
-            ...f,
-            label: l.skillsSectionFilterCount(
-              f.label,
-              f.value === 'all' ? catalog.length : catalog.filter((s) => (s.source ?? 'project') === f.value).length,
-            ),
-          }))}
-          size="sm"
-          className="shrink-0"
-        />
-        <div className="relative flex-1 min-w-0">
-          <span
-            aria-hidden
-            className="i-ph-magnifying-glass absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-[var(--zg-text-muted)] pointer-events-none"
-          />
-          <input
-            type="text"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            onKeyDown={(e) => {
-              // Escape clears an active search instead of leaving Settings.
-              if (e.key === 'Escape' && query) {
-                e.stopPropagation();
-                setQuery('');
-              }
-            }}
-            placeholder={l.skillsSectionSearch}
-            aria-label={l.skillsSectionSearchLabel}
-            spellCheck={false}
-            className="zg-well w-full h-7 text-xs pl-7.5 pr-2 placeholder:text-[var(--zg-text-subtle)]"
-          />
-        </div>
-      </div>
-      {weights.size > 0 && <CatalogBar skills={enabled} weights={weights} />}
-      {shown.length === 0 && (
-        <EmptyState
-          title={inScope.length === 0 ? l.skillsSectionNoneInScope(filter) : l.skillsSectionNoMatch(query.trim())}
-        />
-      )}
-      <ul className="flex flex-col gap-2 list-none m-0 p-0">
-        {shown.map((entry) => (
-          <SkillCard
-            key={entry.name}
-            cwd={cwd}
-            entry={entry}
-            enabled={enabledOf(entry)}
-            weight={weights.get(entry.name)}
-            expanded={expanded.has(entry.name)}
-            canToggle={writable && toggleable(entry)}
-            onToggleEnabled={() => toggle(entry.name)}
-            onToggleExpanded={() =>
-              setExpanded((prev) => {
-                const next = new Set(prev);
-                if (!next.delete(entry.name)) next.add(entry.name);
-                return next;
-              })
-            }
-            action={actionOf?.(entry)}
-            onSaved={onSaved}
-          />
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-/** Props of {@link SkillActions}. */
-interface SkillActionsProps {
-  /** The skill. */
-  name: string;
-  /** Its folder on this computer: Edit, its SKILL.md and the folder's buttons. Absent (a server's): none of them. */
-  dir?: string;
-  /** Delete was pressed once: Confirm and Keep show. */
-  armed: boolean;
-  /** Arms or disarms Delete. */
-  onArm: (armed: boolean) => void;
-  /** Deletes it. Absent: no Delete. */
-  onDelete?: () => void;
-  /** Opens an authoring session on its folder. Absent: no Edit. */
-  onEdit?: () => void;
-}
-
-/** A skill card's controls: quiet icons while browsing, and Delete asks before it acts. The folder last. */
-export function SkillActions({ name, dir, armed, onArm, onDelete, onEdit }: SkillActionsProps) {
-  const l = useSkillsSectionLabels();
-  if (armed && onDelete) {
-    return (
-      <span className="flex items-center gap-1">
-        <button type="button" onClick={onDelete} className={BTN_DANGER_CONFIRM}>
-          {l.skillsSectionConfirmDelete}
-        </button>
-        <button type="button" onClick={() => onArm(false)} className={BTN_SECONDARY}>
-          {l.skillsSectionKeep}
-        </button>
-      </span>
-    );
-  }
-  return (
-    <>
-      {dir && onEdit && (
-        <IconButton
-          icon="i-ph-pencil-simple"
-          label={l.skillsSectionEdit(name)}
-          title={l.skillsSectionEditTitle(dir)}
-          size="sm"
-          onClick={onEdit}
-        />
-      )}
-      {dir && <OpenFileButton path={`${dir}/SKILL.md`} name={l.skillsSectionSkillFile(name)} />}
-      {onDelete && (
-        <IconButton
-          icon="i-ph-trash"
-          label={l.skillsSectionDelete(name)}
-          title={l.skillsSectionDeleteTitle(name)}
-          size="sm"
-          onClick={() => onArm(true)}
-        />
-      )}
-      {dir && <RevealPathButton path={dir} name={name} />}
-    </>
-  );
-}
-
-/** What the enabled skills cost in every prompt: one slice per skill, the total on the right. */
-function CatalogBar({
-  skills,
-  weights,
-}: {
-  skills: readonly SkillListEntry[];
-  weights: ReadonlyMap<string, { catalog: number }>;
-}) {
-  const l = useSkillsSectionLabels();
-  const total = skills.reduce((sum, s) => sum + (weights.get(s.name)?.catalog ?? 0), 0);
-  return (
-    <div className="flex items-center gap-3 px-1" data-testid="skill-catalog-bar">
-      <div className="zg-track-chip flex-1 h-1.5 flex gap-px overflow-hidden" aria-hidden>
-        {total > 0 &&
-          skills.map((s) => (
-            <span
-              key={s.name}
-              title={l.skillsSectionSlice(s.name, formatTokens(weights.get(s.name)?.catalog ?? 0))}
-              className="h-full first:rounded-l-full last:rounded-r-full"
-              style={{ width: `${((weights.get(s.name)?.catalog ?? 0) / total) * 100}%`, background: SKILL_COLOR }}
-            />
-          ))}
-      </div>
-      <span className="flex items-center gap-1 tabular-nums shrink-0">
-        <MetaChip title={l.skillsSectionPerPromptTitle}>{l.skillsSectionPerPrompt(formatTokens(total))}</MetaChip>
-        <MetaChip>{l.skillsSectionCount(skills.length)}</MetaChip>
-      </span>
-    </div>
-  );
-}
-
-function SkillCard({
-  cwd,
-  entry,
-  enabled,
-  weight,
-  expanded,
-  canToggle,
-  onToggleEnabled,
-  onToggleExpanded,
-  action,
-  onSaved,
-}: {
-  cwd: string | null;
-  entry: SkillListEntry;
-  enabled: boolean;
-  /** Its weights, when its whole skill is known. */
-  weight: Weight | undefined;
-  expanded: boolean;
-  /** Its box can be flipped here: else it only shows. */
-  canToggle: boolean;
-  onToggleEnabled: () => void;
-  onToggleExpanded: () => void;
-  action: ReactNode | undefined;
-  onSaved?: () => void;
-}) {
-  const l = useSkillsSectionLabels();
-  // Only a skill whose SKILL.md this list can show opens.
-  const skill = entry.skill;
-  const head = (
-    <>
-      {/* Line 1: what it is (name, where it comes from) and what it costs. */}
-      <span className="flex items-center gap-2 min-w-0">
-        {skill && (
-          <span
-            aria-hidden
-            className={`i-ph-caret-right text-zg-meta text-[var(--zg-text-muted)] shrink-0 transition-transform duration-snap ease-snap ${expanded ? 'rotate-90' : ''}`}
-          />
-        )}
-        <span className="text-sm font-medium text-[var(--zg-text)] min-w-0 truncate">{entry.name}</span>
-        <MetaChip>
-          {entry.contributed
-            ? l.skillsSectionFrom(entry.contributed.origin, entry.contributed.by)
-            : (entry.source ?? 'project')}
-        </MetaChip>
-        {weight && (
-          <>
-            <MetaChip
-              className="tabular-nums"
-              title={l.skillsSectionInPromptTitle(weight.catalog.toLocaleString('en-US'))}
-            >
-              <span aria-hidden className="i-ph-text-align-left text-zg-meta" />
-              {l.skillsSectionInPrompt(formatTokens(weight.catalog))}
-            </MetaChip>
-            <MetaChip
-              className="tabular-nums"
-              title={l.skillsSectionWhenUsedTitle(weight.body.toLocaleString('en-US'))}
-            >
-              <span aria-hidden className="i-ph-lightning text-zg-meta" />
-              {l.skillsSectionWhenUsed(formatTokens(weight.body))}
-            </MetaChip>
-          </>
-        )}
-      </span>
-      {/* Line 2: when the agent reaches for it. */}
-      {entry.description && (
-        <span className={`${skill ? 'pl-[19px] ' : ''}text-xs leading-[18px] text-[var(--zg-text-muted)] line-clamp-2`}>
-          {entry.description}
-        </span>
-      )}
-    </>
-  );
-  const headClass = `flex-1 min-w-0 flex flex-col gap-1 text-left transition-opacity ${enabled ? '' : 'opacity-60'}`;
-  return (
-    <li className="zg-raised border rounded-zg-md overflow-hidden" data-testid={`skill-card-${entry.name}`}>
-      <div className="flex items-start gap-2.5 px-3 py-2.5">
-        <button
-          type="button"
-          role="checkbox"
-          aria-checked={enabled}
-          aria-label={l.skillsSectionUse(entry.name)}
-          onClick={onToggleEnabled}
-          disabled={!canToggle}
-          className="shrink-0 mt-px flex bg-transparent border-0 p-0 cursor-pointer disabled:cursor-default rounded-zg-sm zg-focus-ring"
-        >
-          <Checkbox checked={enabled} />
-        </button>
-        {skill ? (
-          <button
-            type="button"
-            aria-expanded={expanded}
-            onClick={onToggleExpanded}
-            className={`${headClass} bg-transparent border-0 p-0 cursor-pointer`}
-          >
-            {head}
-          </button>
-        ) : (
-          <div className={headClass}>{head}</div>
-        )}
-        {action && <div className="shrink-0 flex items-center gap-0.5 -my-0.5">{action}</div>}
-      </div>
-      {skill && expanded && (
-        <div
-          className="border-t border-[var(--zg-hairline)] h-[min(60vh,440px)] flex flex-col"
-          style={{ boxShadow: `inset 2px 0 0 ${SKILL_COLOR}` }}
-        >
-          <SkillContent cwd={cwd} skill={skill} onSaved={onSaved} />
-        </div>
-      )}
-    </li>
-  );
-}
-
-/** The skill's SKILL.md, read from disk (editable when the host writes it), or its instructions when it has no file. */
-function SkillContent({ cwd, skill, onSaved }: { cwd: string | null; skill: SkillConfig; onSaved?: () => void }) {
-  const host = useSettingsHost().skills;
-  const l = useSkillsSectionLabels();
-  const shared = useCatalogSharedLabels();
-  const fromDisk = onDisk(skill) && cwd !== null && host?.file !== undefined;
-  const resource = useMemo(() => (fromDisk ? host!.file!(cwd!, skill.name) : null), [fromDisk, host, cwd, skill.name]);
-  const read = useSettingsResource(resource);
-  const file: SettingsFile | null | undefined = fromDisk ? read.data : null;
-  if (fromDisk && read.error) {
-    return (
-      <LoadError className="px-4 py-3" onRetry={() => void resource?.refresh()}>
-        {l.skillsSectionReadFailed(shared.catalogError(read.error))}
-      </LoadError>
-    );
-  }
-
-  if (file === undefined) return <p className="m-0 px-4 py-3 zg-meta">{l.skillsSectionLoading}</p>;
-  return file && resource && host?.write ? (
-    <SkillDocument cwd={cwd!} skill={skill} file={file} onSaved={onSaved} />
-  ) : (
-    <SkillDocument
-      skill={skill}
-      file={file ?? { path: 'SKILL.md', contents: skill.instructions, mtimeMs: 0 }}
-      readOnly
-    />
-  );
-}
-
-function SkillDocument({
-  cwd,
-  skill,
-  file,
-  readOnly = false,
-  onSaved,
-}: {
-  cwd?: string;
-  skill: SkillConfig;
-  file: SettingsFile;
-  readOnly?: boolean;
-  onSaved?: () => void;
-}) {
-  const host = useSettingsHost().skills;
-  const l = useSkillsSectionLabels();
-  const [disk, setDisk] = useState(file);
-  const [findAsk, setFindAsk] = useState(0);
-  const onSavedRef = useRef(onSaved);
-  // eslint-disable-next-line react-hooks/refs -- the latest callback, read when a save lands
-  onSavedRef.current = onSaved;
-  const reread = async (): Promise<SettingsFile | null> => {
-    if (!cwd || !host?.file) return null;
-    const resource = host.file(cwd, skill.name);
-    await resource.refresh();
-    return resource.get().data ?? null;
-  };
-  const document = useCodeDocument<SettingsFile>({
-    doc: disk,
-    save: async (text, base, force): Promise<SaveOutcome<SettingsFile>> => {
-      const expected = force ? (await reread())?.mtimeMs : base.mtimeMs;
-      const result = await host!.write!(cwd!, skill.name, text, expected ?? base.mtimeMs);
-      if (result.ok) return { ok: true, doc: { ...base, contents: text, mtimeMs: result.mtimeMs } };
-      if (result.reason === 'changed') return { ok: false, reason: 'changed' };
-      throw new Error(l.skillsSectionSaveFailed(result.reason));
-    },
-    reload: reread,
-    onAdopt: (next, reset) => {
-      setDisk(next);
-      if (!reset) onSavedRef.current?.();
-    },
-  });
-  return (
-    // ⌘F inside the card finds in the skill, not in Settings.
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div
-      className="flex-1 min-h-0 flex flex-col"
-      onKeyDown={(e) => {
-        if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'f') {
-          e.preventDefault();
-          e.stopPropagation();
-          setFindAsk((n) => n + 1);
-        }
-      }}
-    >
-      <Suspense fallback={null}>
-        <CodeEditor
-          path={file.path}
-          doc={document}
-          sessionKey={`skill:${file.path}:${document.resets}`}
-          readOnly={readOnly}
-          findAsk={findAsk}
-        />
-      </Suspense>
-    </div>
-  );
-}