@schlessera/brain-ui-react 0.35.0 → 0.37.0

package/src/components/settings/settings-panel.tsx

@@ -1,9 +1,14 @@
 import { Suspense, lazy } from "react";
 import { KeyRound, Laptop, Puzzle, SlidersHorizontal } from "lucide-react";
 import { useUIStore, type SettingsTab } from "../../stores/ui-store.js";
-import { SlidePanel } from "../layout/slide-panel.js";
+import { SlidePanel, type SlidePanelClosedBy } from "../layout/slide-panel.js";
 import { cn } from "../../lib/utils.js";
 import { usePrincipalStore } from "../../stores/principal-store.js";
+import { useBrainUiRoot } from "../../root-context.js";
+import { useMediaQuery } from "../../hooks/use-media-query.js";
+import { ThemeToggle } from "../layout/theme.js";
+import { ShortcutSwitch } from "../layout/shortcut-switch.js";
+import { Button, Callout, Icon, Label, ScreenHeader, Surface, type IconName } from "@schlessera/brain-ui-kit";
 
 /**
  * Each tab is fetched the first time it is opened. Settings is the largest
@@ -17,7 +22,10 @@ const PasskeyTab = lazy(() => import("./passkey-tab.js").then((m) => ({ default:
 const DevicesAgentsTab = lazy(() => import("./devices-agents-tab.js").then((m) => ({ default: m.DevicesAgentsTab })));
 const SkillsTab = lazy(() => import("./skills-tab.js").then((m) => ({ default: m.SkillsTab })));
 
-const TABS: Array<{ id: SettingsTab; label: string; icon: typeof KeyRound }> = [
+/** The phone strip's tabs. Appearance and input sit above the strip there. */
+type StripTab = Exclude<SettingsTab, "appearance">;
+
+const TABS: Array<{ id: StripTab; label: string; icon: typeof KeyRound }> = [
   { id: "models", label: "Models", icon: SlidersHorizontal },
   { id: "skills", label: "Skills", icon: Puzzle },
   { id: "security", label: "Security", icon: KeyRound },
@@ -25,9 +33,32 @@ const TABS: Array<{ id: SettingsTab; label: string; icon: typeof KeyRound }> = [
 ];
 
 /**
- * The settings surface: one panel, one entry point in the menus, a tab per
- * area. Only the selected tab is mounted — each fetches its own data on becoming
- * active, so switching tabs (or reopening the panel) always shows current state.
+ * D5's section column, from `laptop:` up. The mono meta names what the
+ * section holds; it is not a count, because the column has no data of its
+ * own to count.
+ */
+const SECTIONS: Array<{ id: SettingsTab; label: string; meta: string; icon: IconName }> = [
+  { id: "appearance", label: "Appearance & input", meta: "this device", icon: "settings" },
+  { id: "models", label: "Models", meta: "providers", icon: "model" },
+  { id: "skills", label: "Skills", meta: "catalog", icon: "capability" },
+  { id: "security", label: "Security", meta: "passkeys", icon: "passkey" },
+  { id: "devices", label: "Devices & agents", meta: "credentials", icon: "agent" },
+];
+
+/** The rail is expanded from here (`laptop:`), and Settings becomes a pane. */
+const PANE_QUERY = "(min-width: 900px)";
+
+/**
+ * The settings surface: one panel, one entry point in the menus, a section
+ * per area. Only the selected section is mounted — each fetches its own data
+ * on becoming active, so switching (or reopening the panel) always shows
+ * current state.
+ *
+ * Two shapes. Below `laptop:` the drawer with its tab strip, unchanged: the
+ * theme toggle and the single-key switch sit above the tabs. From `laptop:`
+ * up it is D5's pane over the content area: a header row, a 216px section
+ * column, and the section's form at a 720px measure. There, Appearance &
+ * input is a section of its own.
  */
 export function SettingsPanel({
   open,
@@ -41,51 +72,234 @@ export function SettingsPanel({
   const mintPending = usePrincipalStore((s) => s.mintPending);
   const oneTimeCredential = usePrincipalStore((s) => s.oneTimeCredential);
   const credentialProtected = mintPending || oneTimeCredential !== null;
+  const pane = useMediaQuery(PANE_QUERY);
+  // While a mint is in flight or its one-time value is unacknowledged, the
+  // panel does not light-dismiss: a stray click or Escape must not hide the
+  // surface the credential is about to land on. Its close control stays live.
+  const closedBy = credentialProtected ? "none" : "any";
 
-  function closeIfSafe() {
-    if (!credentialProtected) onClose();
+  function select(id: SettingsTab) {
+    if (!credentialProtected) setTab(id);
   }
 
+  if (pane) {
+    return (
+      <SettingsPane
+        open={open}
+        tab={tab}
+        credentialProtected={credentialProtected}
+        closedBy={closedBy}
+        onSelect={select}
+        onClose={onClose}
+      />
+    );
+  }
+
+  // The strip has no Appearance tab: a pane selection that survives a resize
+  // down lands on the first tab, and the controls it named are right above.
+  const stripTab: StripTab = tab === "appearance" ? "models" : tab;
+
   return (
-    <SlidePanel open={open} onClose={closeIfSafe} title="Settings" wide>
+    <SlidePanel open={open} onClose={onClose} title="Settings" wide closedBy={closedBy}>
       <div className="flex h-full flex-col">
         <div className="flex shrink-0 gap-1 border-b border-border px-2 pt-2">
-          {TABS.map(({ id, label, icon: Icon }) => (
+          {TABS.map(({ id, label, icon: TabIcon }) => (
             <button
               key={id}
-              onClick={() => {
-                if (!credentialProtected) setTab(id);
-              }}
-              disabled={credentialProtected && tab !== id}
-              aria-selected={tab === id}
+              onClick={() => select(id)}
+              disabled={credentialProtected && stripTab !== id}
+              aria-selected={stripTab === id}
               role="tab"
               className={cn(
                 "flex items-center gap-1.5 rounded-t-lg px-3 py-2 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
-                tab === id
+                stripTab === id
                   ? "border-b-2 border-primary text-foreground"
                   : "text-muted-foreground hover:text-foreground"
               )}
             >
-              <Icon className="h-3.5 w-3.5" />
+              <TabIcon className="h-3.5 w-3.5" />
               {label}
             </button>
           ))}
         </div>
 
+        {/* Appearance is not a tab: it is one control, it applies everywhere,
+            and the design puts the three-way toggle in Settings without
+            giving it a section of its own. */}
+        <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-3 py-2">
+          <span className="text-xs text-muted-foreground">Appearance</span>
+          <ThemeToggle />
+        </div>
+        {/* Settings › Input (D37, as D5 draws it): the off switch for
+            single-key shortcuts as a group row, with the banner that says what
+            turning it off does. One control, applies everywhere, so it sits
+            beside Appearance rather than in a tab. */}
+        <div className="flex shrink-0 flex-col gap-2 border-b border-border px-3 py-2">
+          <Label text="Input" icon="capability" />
+          <Surface pad={0}>
+            <ShortcutSwitch />
+          </Surface>
+          <ShortcutBanner />
+        </div>
+
         <div className="min-h-0 flex-1">
-          <Suspense fallback={null}>
-            {tab === "models" ? (
-              <ModelsTab active={open && tab === "models"} />
-            ) : tab === "skills" ? (
-              <SkillsTab active={open && tab === "skills"} />
-            ) : tab === "security" ? (
-              <PasskeyTab active={open && tab === "security"} />
+          <SectionBody tab={stripTab} open={open} />
+        </div>
+      </div>
+    </SlidePanel>
+  );
+}
+
+/**
+ * D5 from `laptop:` up: the pane. The header row carries the serif title and
+ * the close control; under it the section column and the form area share the
+ * height, and only the form area scrolls.
+ */
+function SettingsPane({
+  open,
+  tab,
+  credentialProtected,
+  closedBy,
+  onSelect,
+  onClose,
+}: {
+  open: boolean;
+  tab: SettingsTab;
+  credentialProtected: boolean;
+  closedBy: SlidePanelClosedBy;
+  onSelect: (tab: SettingsTab) => void;
+  onClose: () => void;
+}) {
+  const appName = useBrainUiRoot().config.appName;
+  return (
+    <SlidePanel open={open} onClose={onClose} title="Settings" mode="pane" closedBy={closedBy}>
+      {/* The kit header is `width: 100%`; it needs a shrinking flex child
+          around it, or it fills the row and pushes Close past the viewport
+          (the Files pane wraps its header the same way). */}
+      <div className="flex shrink-0 items-center border-b border-border pr-3">
+        <div className="min-w-0 flex-1">
+          <ScreenHeader variant="nav" title="Settings" back={false} divider={false} />
+        </div>
+        <div className="shrink-0">
+          <Button label="Close" icon="dismiss" tone="quiet" size="sm" block={false} onClick={onClose} />
+        </div>
+      </div>
+
+      <div className="flex min-h-0 flex-1">
+        <nav aria-label="Settings sections" className="flex w-[216px] shrink-0 flex-col border-r border-border">
+          <div role="tablist" aria-orientation="vertical" className="flex flex-1 flex-col gap-0.5 p-2">
+            {SECTIONS.map(({ id, label, meta, icon }) => {
+              const selected = tab === id;
+              return (
+                <button
+                  key={id}
+                  type="button"
+                  role="tab"
+                  aria-selected={selected}
+                  // The name is the label alone: the mono meta beside it is a
+                  // descriptor, and a test or a screen reader asking for
+                  // "Security" should find it.
+                  aria-label={label}
+                  disabled={credentialProtected && !selected}
+                  onClick={() => onSelect(id)}
+                  className={cn(
+                    "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+                    selected ? "bg-surface-raised" : "hover:bg-surface-raised"
+                  )}
+                >
+                  <Icon icon={icon} size={16} color={selected ? "var(--bk-amber-ink)" : "var(--bk-color-ink-mute)"} />
+                  <span
+                    className={cn("min-w-0 flex-1 truncate text-[12.5px] font-semibold", !selected && "text-foreground")}
+                    style={selected ? { color: "var(--bk-amber-ink)" } : undefined}
+                  >
+                    {label}
+                  </span>
+                  <span className="shrink-0 font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground">
+                    {meta}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+          <div className="shrink-0 border-t border-border px-4 py-3 font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground">
+            {appName}
+          </div>
+        </nav>
+
+        <div className="min-h-0 flex-1 overflow-y-auto">
+          <div className="flex h-full max-w-[720px] flex-col">
+            {tab === "appearance" ? (
+              <AppearanceSection />
             ) : (
-              <DevicesAgentsTab active={open && tab === "devices"} />
+              <SectionBody tab={tab} open={open} />
             )}
-          </Suspense>
+          </div>
         </div>
       </div>
     </SlidePanel>
   );
 }
+
+/**
+ * D5's first section, as the drop draws it: the theme under "Appearance",
+ * the single-key switch and its banner under "Input". Both controls apply to
+ * this device only, which the header says.
+ */
+function AppearanceSection() {
+  return (
+    <div className="flex flex-col">
+      <ScreenHeader
+        variant="nav"
+        title="Appearance & input"
+        subtitle="applies on this device only"
+        back={false}
+        divider={false}
+      />
+      <div className="flex flex-col gap-2 px-4 pb-4">
+        <Label text="Appearance" icon="settings" />
+        <Surface pad={0}>
+          <div className="flex items-center gap-3 px-3 py-3">
+            <Icon icon="settings" size={17} color="var(--bk-color-ink-mute)" />
+            <span className="min-w-0 flex-1 text-[12.5px] font-semibold text-foreground">Theme</span>
+            <ThemeToggle />
+          </div>
+        </Surface>
+      </div>
+      <div className="flex flex-col gap-2 px-4 pb-4">
+        <Label text="Input" icon="capability" />
+        <Surface pad={0}>
+          <ShortcutSwitch />
+        </Surface>
+        <ShortcutBanner />
+      </div>
+    </div>
+  );
+}
+
+function ShortcutBanner() {
+  return (
+    <Callout
+      variant="banner"
+      tone="neutral"
+      icon="scope"
+      text="Turning single-key shortcuts off also removes the printed keys from buttons — a key that no longer fires should not be advertised."
+    />
+  );
+}
+
+/** The lazily fetched section, mounted only while it is the selected one. */
+function SectionBody({ tab, open }: { tab: StripTab; open: boolean }) {
+  return (
+    <Suspense fallback={null}>
+      {tab === "models" ? (
+        <ModelsTab active={open} />
+      ) : tab === "skills" ? (
+        <SkillsTab active={open} />
+      ) : tab === "security" ? (
+        <PasskeyTab active={open} />
+      ) : (
+        <DevicesAgentsTab active={open} />
+      )}
+    </Suspense>
+  );
+}

package/src/components/settings/skills-list.tsx

@@ -0,0 +1,276 @@
+import { Button, Placeholder } from "@schlessera/brain-ui-kit";
+import { Loader2, Pencil, Power, Trash2, Upload } from "lucide-react";
+import type { SkillEntry, SkillInstallOutcome } from "../../lib/api-client.js";
+import { cn } from "../../lib/utils.js";
+
+/**
+ * Settings → Skills, rendered from props (S6). `SkillsTab` is the container:
+ * it owns the list request, the `active`-gated reload, every mutation and its
+ * generation guard, and the editor's fetch; these two views own what is on
+ * screen. `SkillsList` is the list with its create and install rows;
+ * `SkillEditor` is the one-file editor that replaces it while a skill is open.
+ *
+ * Text fields stay native (the kit has no text input); the create, install,
+ * save and close buttons are the kit's `Button`. The per-row edit / enable /
+ * delete controls stay native icon buttons: they are titled, and the kit has
+ * no icon-only button. The zip picker is a native file input behind a label.
+ *
+ * `busy` names the skill whose mutation is in flight, or `"*"` for none in
+ * particular — the container passes the skill name it is working on, and
+ * every row control is inert while any is running, as before.
+ */
+export interface SkillsListProps {
+  skills: SkillEntry[];
+  /** The skill a mutation is running for, or null. */
+  busy: string | null;
+  installing: boolean;
+  error: string | null;
+  warning: string | null;
+  outcomes: SkillInstallOutcome[] | null;
+  newName: string;
+  githubSource: string;
+  overwrite: boolean;
+  onNewName: (value: string) => void;
+  onCreate: () => void;
+  onGithubSource: (value: string) => void;
+  onOverwrite: (value: boolean) => void;
+  onInstallZip: (file: File) => void;
+  onInstallGitHub: () => void;
+  onOpen: (skill: SkillEntry) => void;
+  onToggle: (skill: SkillEntry) => void;
+  onRemove: (skill: SkillEntry) => void;
+}
+
+export function SkillsList(p: SkillsListProps) {
+  const custom = p.skills.filter((s) => s.source === "custom");
+  const builtin = p.skills.filter((s) => s.source === "builtin");
+  const locked = p.busy !== null;
+  const canInstall = !p.installing && p.githubSource.trim().length > 0;
+
+  return (
+    <div className="h-full overflow-y-auto p-4">
+      <h3 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        Your skills
+      </h3>
+      <p className="mt-1 text-xs text-muted-foreground">
+        Custom skills live in your brain repo (<code>.agents/skills/</code>) — they
+        survive redeployments, ride the repo's backups, and apply to every
+        backend. For guided authoring, ask the agent in chat to{" "}
+        <span className="font-medium text-foreground">add a skill</span> — the
+        built-in <code>add-skill</code> skill walks through design and setup.
+      </p>
+
+      <div className="mt-4 flex items-center gap-2">
+        <input
+          value={p.newName}
+          onChange={(e) => p.onNewName(e.target.value.toLowerCase())}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && p.newName.trim()) p.onCreate();
+          }}
+          placeholder="new-skill-name (kebab-case)"
+          className="min-w-0 flex-1 rounded-md border border-border-subtle bg-background px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none"
+        />
+        <Button label="Create" icon="add" tone="primary" size="sm" block={false} disabled={!p.newName.trim()} onClick={p.onCreate} />
+      </div>
+
+      <div className="mt-3 rounded-lg border border-border-subtle bg-surface p-3">
+        <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+          Install
+        </p>
+        <div className="mt-2 flex items-center gap-2">
+          <label
+            className={cn(
+              "flex cursor-pointer items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:border-primary hover:text-primary",
+              p.installing && "pointer-events-none opacity-50",
+            )}
+          >
+            <Upload className="h-3 w-3" />
+            Upload .zip
+            <input
+              type="file"
+              accept=".zip,application/zip"
+              className="hidden"
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                e.target.value = "";
+                if (file) p.onInstallZip(file);
+              }}
+            />
+          </label>
+          <label className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+            <input type="checkbox" checked={p.overwrite} onChange={(e) => p.onOverwrite(e.target.checked)} />
+            overwrite existing
+          </label>
+        </div>
+        <div className="mt-2 flex items-center gap-2">
+          <input
+            value={p.githubSource}
+            onChange={(e) => p.onGithubSource(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && canInstall) p.onInstallGitHub();
+            }}
+            placeholder="GitHub: owner/repo or https://github.com/…/tree/main/skills"
+            className="min-w-0 flex-1 rounded-md border border-border-subtle bg-background px-2 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none"
+          />
+          {p.installing ? <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" aria-hidden /> : null}
+          <Button label="Install" icon="install" tone="ghost" size="sm" block={false} disabled={!canInstall} onClick={p.onInstallGitHub} />
+        </div>
+        <p className="mt-1.5 text-[11px] text-muted-foreground">
+          A skill is any folder with a SKILL.md; one source may carry several.
+          Private repos use the server's GITHUB_TOKEN.
+        </p>
+        {p.outcomes && (
+          <ul className="mt-2 flex flex-col gap-1">
+            {p.outcomes.map((o, i) => (
+              <li key={`${o.name}-${i}`} className="text-[11px]">
+                {o.status === "skipped" ? (
+                  <span className="text-muted-foreground">
+                    ✗ {o.name} — {o.reason}
+                  </span>
+                ) : (
+                  <span className="text-primary">
+                    ✓ {o.name} {o.status === "replaced" ? "replaced" : "installed"}
+                    {typeof o.files === "number" ? ` (${o.files} file${o.files === 1 ? "" : "s"})` : ""}
+                  </span>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {p.error && <p className="mt-2 text-xs text-destructive">{p.error}</p>}
+      {p.warning && <p className="mt-2 text-xs text-muted-foreground">{p.warning}</p>}
+
+      <ul className="mt-4 flex flex-col gap-2">
+        {custom.length === 0 && (
+          <li>
+            <Placeholder variant="empty" message="No custom skills yet." icon="steps" pad={10} />
+          </li>
+        )}
+        {custom.map((skill) => (
+          <li key={skill.name} className="rounded-lg border border-border-subtle bg-surface p-3">
+            {/* A disabled skill is not faded (design-feedback §4): its state
+                word says so, at full contrast. */}
+            <div className="flex items-center gap-2">
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm text-foreground">
+                  {skill.name}
+                  {!skill.enabled && (
+                    <span className="ml-2 text-[11px] text-muted-foreground">disabled</span>
+                  )}
+                </p>
+                <p className="truncate text-[11px] text-muted-foreground">
+                  {skill.warning ? `⚠ ${skill.warning}` : skill.description}
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => p.onOpen(skill)}
+                disabled={locked}
+                title="Edit SKILL.md"
+                className="rounded-md border border-border-subtle p-1.5 text-muted-foreground transition-colors hover:border-primary hover:text-primary disabled:opacity-50"
+              >
+                <Pencil className="h-3.5 w-3.5" />
+              </button>
+              <button
+                type="button"
+                onClick={() => p.onToggle(skill)}
+                disabled={locked}
+                title={skill.enabled ? "Disable (all backends)" : "Enable"}
+                className={cn(
+                  "rounded-md border border-border-subtle p-1.5 transition-colors disabled:opacity-50",
+                  skill.enabled
+                    ? "text-primary hover:border-primary"
+                    : "text-muted-foreground hover:border-primary hover:text-primary",
+                )}
+              >
+                {p.busy === skill.name ? (
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                ) : (
+                  <Power className="h-3.5 w-3.5" />
+                )}
+              </button>
+              <button
+                type="button"
+                onClick={() => p.onRemove(skill)}
+                disabled={locked}
+                title="Delete permanently"
+                className="rounded-md border border-border-subtle p-1.5 text-muted-foreground transition-colors hover:border-destructive hover:text-destructive disabled:opacity-50"
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          </li>
+        ))}
+      </ul>
+
+      <h3 className="mt-6 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        Built-in skills
+      </h3>
+      <p className="mt-1 text-xs text-muted-foreground">
+        Shipped by brain-kit and its modules; managed by <code>brain skills sync</code>.
+        A custom skill with the same name overrides a built-in.
+      </p>
+      <ul className="mt-3 flex flex-col gap-1.5">
+        {builtin.map((skill) => (
+          <li
+            key={skill.name}
+            className="flex items-center gap-2 rounded-lg border border-border-subtle bg-surface px-3 py-2"
+          >
+            <div className="min-w-0 flex-1">
+              <p className="truncate text-xs text-foreground">{skill.name}</p>
+              <p className="truncate text-[11px] text-muted-foreground">{skill.description}</p>
+            </div>
+            <span title="View SKILL.md" className="flex shrink-0">
+              <Button label="View" tone="quiet" size="sm" block={false} disabled={locked} onClick={() => p.onOpen(skill)} />
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export interface SkillEditorProps {
+  name: string;
+  content: string;
+  isNew: boolean;
+  readOnly: boolean;
+  /** A save is in flight. */
+  saving: boolean;
+  error: string | null;
+  onChange: (content: string) => void;
+  onSave: () => void;
+  onClose: () => void;
+}
+
+export function SkillEditor(p: SkillEditorProps) {
+  return (
+    <div className="flex h-full flex-col p-4">
+      <div className="flex items-center justify-between gap-2">
+        <h3 className="text-sm font-medium text-foreground">
+          {p.isNew ? "New skill" : p.name}
+          {p.readOnly && (
+            <span className="ml-2 text-[11px] text-muted-foreground">built-in · read-only</span>
+          )}
+        </h3>
+        <div className="flex gap-2">
+          {!p.readOnly && (
+            <Button label={p.saving ? "Saving…" : "Save"} icon="confirm" tone="primary" size="sm" block={false} disabled={p.saving} onClick={p.onSave} />
+          )}
+          <Button label="Close" icon="dismiss" tone="quiet" size="sm" block={false} onClick={p.onClose} />
+        </div>
+      </div>
+      {p.error && <p className="mt-2 text-xs text-destructive">{p.error}</p>}
+      <textarea
+        value={p.content}
+        readOnly={p.readOnly}
+        aria-label="SKILL.md"
+        onChange={(e) => p.onChange(e.target.value)}
+        spellCheck={false}
+        className="mt-3 min-h-0 flex-1 resize-none rounded-lg border border-border-subtle bg-background p-3 font-mono text-xs text-foreground focus:border-primary focus:outline-none"
+      />
+    </div>
+  );
+}