@uniqbit/mate-core 0.18.5 → 1.0.0-canary.0

package/src/cli/commands/studio/views/palette.ts

@@ -0,0 +1,134 @@
+import { DARK_PALETTE, LIGHT_PALETTE, type ReportPalette } from "../../report/palette";
+
+/**
+ * Studio's colour tokens, built from the report palette so Studio and its hosted
+ * reports share the Mate brand colours. Token names stay Studio's own; the values
+ * come from `ReportPalette`, plus Studio-only label colours for workflow badges.
+ */
+
+export interface StudioPalette {
+  bg: string;
+  bgRail: string;
+  panel: string;
+  /** Nested boxes inside a card: the page colour keeps light accent text at 5:1. */
+  panelSoft: string;
+  border: string;
+  text: string;
+  muted: string;
+  accent: string;
+  done: string;
+  warn: string;
+  bad: string;
+  info: string;
+  what: string;
+  why: string;
+  /** Text drawn on an accent or success fill (toast, nav badge). */
+  onAccent: string;
+  promptBg: string;
+  promptText: string;
+  /** Only the off-canvas terminal drawer floats over the page. */
+  drawerShadow: string;
+}
+
+/** Colours read as text or status markers; each must reach 4.5:1 on the page and on cards. */
+export const STUDIO_TEXT_TOKENS = [
+  "text",
+  "muted",
+  "accent",
+  "done",
+  "warn",
+  "bad",
+  "info",
+  "what",
+  "why",
+] as const satisfies readonly (keyof StudioPalette)[];
+
+/** Each of these also gets a `--<name>-soft` tint: this share of the colour over the card surface. */
+const TINTED_TOKENS = [
+  "accent",
+  "done",
+  "warn",
+  "bad",
+  "info",
+  "what",
+  "why",
+] as const satisfies readonly (keyof StudioPalette)[];
+
+export const TINT_PERCENT = 12;
+
+function fromReport(
+  report: ReportPalette,
+  studio: Pick<StudioPalette, "what" | "why" | "onAccent" | "drawerShadow">,
+): StudioPalette {
+  return {
+    bg: report.bg,
+    bgRail: report.surface,
+    panel: report.surface,
+    panelSoft: report.bg,
+    border: report.rule,
+    text: report.ink,
+    muted: report.muted,
+    accent: report.accent,
+    done: report.ok,
+    warn: report.warn,
+    bad: report.error,
+    info: report.info,
+    promptBg: report.bg,
+    promptText: report.ink,
+    ...studio,
+  };
+}
+
+export const STUDIO_LIGHT_PALETTE = fromReport(LIGHT_PALETTE, {
+  what: "#176B75",
+  why: "#6346A5",
+  onAccent: "#FFFFFF",
+  drawerShadow: "0 12px 32px rgb(31 36 33 / 12%)",
+});
+
+export const STUDIO_DARK_PALETTE = fromReport(DARK_PALETTE, {
+  what: "#74D3D8",
+  why: "#CAA8FF",
+  onAccent: DARK_PALETTE.bg,
+  drawerShadow: "0 14px 36px rgb(0 0 0 / 40%)",
+});
+
+const kebab = (name: string): string => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+
+function declarations(palette: StudioPalette, indent: string): string {
+  const lines = Object.entries(palette).map(([name, value]) => `--${kebab(name)}: ${value};`);
+  lines.push("--border-soft: color-mix(in srgb, var(--border) 55%, var(--panel));");
+  for (const token of TINTED_TOKENS) {
+    lines.push(
+      `--${token}-soft: color-mix(in srgb, var(--${token}) ${TINT_PERCENT}%, var(--panel));`,
+    );
+  }
+  return lines.map((line) => `${indent}${line}`).join("\n");
+}
+
+/**
+ * Dark is the default; light applies through the system preference or the in-page
+ * toggle, and an explicit `data-theme` wins over the media query in both directions.
+ */
+export function studioPaletteCss(): string {
+  return `:root {
+  color-scheme: dark;
+${declarations(STUDIO_DARK_PALETTE, "  ")}
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) {
+    color-scheme: light;
+${declarations(STUDIO_LIGHT_PALETTE, "    ")}
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) { color-scheme: dark; }
+}
+:root[data-theme="light"] {
+  color-scheme: light;
+${declarations(STUDIO_LIGHT_PALETTE, "  ")}
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+}`;
+}

package/src/cli/commands/studio/views/reports/index.tsx

@@ -6,13 +6,8 @@
  */
 export function Reports() {
   return (
-    <section className="panel reports-panel" data-reports-view>
-      <div className="section-header">
-        <div>
-          <h3>Hosted reports</h3>
-          <p className="section-note">Reports published by agent sessions Studio started.</p>
-        </div>
-      </div>
+    <section className="view-section" data-reports-view aria-label="Hosted reports">
+      <p className="view-summary">Reports published by agent sessions Studio started.</p>
       <div className="reports-layout">
         <div className="reports-side">
           <ul id="reports-list" className="reports-list" aria-label="Reports" />

package/src/cli/commands/studio/views/skills/index.tsx

@@ -18,69 +18,50 @@ export function Skills({ skills }: SkillsProps) {
   const total = inventory.claude.length + inventory.opencode.length + inventory.agents.length;
 
   return (
-    <section className="panel skills-panel">
-      <div className="section-header">
-        <div>
-          <h3>Agent Skills</h3>
-          <p className="section-note">Every skill installed in this Companion Repository.</p>
-        </div>
-        <span className="section-count">
-          {total} {total === 1 ? "skill" : "skills"}
-        </span>
+    <section className="view-section" aria-label="Agent skills" data-skills-root>
+      <div className="view-intro">
+        <label className="view-choice">
+          <span>Agent</span>
+          <select data-skills-select>
+            {PROFILES.map((profile, index) => (
+              <option key={profile.id} value={profile.id} selected={index === 0}>
+                {profile.label} – {inventory[profile.id].length} skills
+              </option>
+            ))}
+          </select>
+        </label>
+        <p className="view-summary">
+          {total} {total === 1 ? "skill" : "skills"} · installed in this Companion Repository
+        </p>
       </div>
-      <div className="skills-tabs" data-skills-root>
-        <div className="skills-tab-list" role="tablist" aria-label="Skill source">
-          {PROFILES.map((profile, index) => {
-            const active = index === 0;
-            const names = inventory[profile.id];
-            return (
-              <button
-                key={profile.id}
-                type="button"
-                role="tab"
-                id={`skills-tab-${profile.id}`}
-                aria-selected={active}
-                aria-controls={`skills-panel-${profile.id}`}
-                data-skill-profile={profile.id}
-              >
-                <strong>{profile.label}</strong>
-                <span>{names.length} skills</span>
-              </button>
-            );
-          })}
-        </div>
-        <div className="skills-panels">
-          {PROFILES.map((profile, index) => {
-            const active = index === 0;
-            const names = inventory[profile.id];
-            return (
-              <div
-                key={profile.id}
-                id={`skills-panel-${profile.id}`}
-                role="tabpanel"
-                aria-labelledby={`skills-tab-${profile.id}`}
-                aria-hidden={!active}
-                data-skill-panel={profile.id}
-                data-active={active}
-                tabIndex={0}
-              >
-                <p className="skills-panel-description">{profile.description}</p>
-                {names.length === 0 ? (
-                  <p className="empty">No {profile.label} skills in this companion.</p>
-                ) : (
-                  <div className="skills-grid">
-                    {names.map((name) => (
-                      <div key={name} className="skill-card">
-                        <code>{name}</code>
-                        <span>/{name}</span>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-            );
-          })}
-        </div>
+      <div className="skills-panels">
+        {PROFILES.map((profile, index) => {
+          const active = index === 0;
+          const names = inventory[profile.id];
+          return (
+            <div
+              key={profile.id}
+              id={`skills-panel-${profile.id}`}
+              aria-hidden={!active}
+              data-skill-panel={profile.id}
+              data-active={active}
+            >
+              <p className="skills-panel-description">{profile.description}</p>
+              {names.length === 0 ? (
+                <p className="empty">No {profile.label} skills in this companion.</p>
+              ) : (
+                <div className="skills-grid">
+                  {names.map((name) => (
+                    <div key={name} className="skill-card">
+                      <code>{name}</code>
+                      <span>/{name}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
       </div>
     </section>
   );

package/src/cli/commands/studio/views/specs/index.tsx

@@ -96,27 +96,19 @@ function SpecsByArea({ specs, actions }: { specs: StudioSpec[]; actions: SpecAct
   const groups = groupSpecsByArea(specs);
 
   return (
-    <section className="panel">
-      <div className="section-header">
-        <div>
-          <h3>Specs by Area</h3>
-          <p className="section-note">Capabilities grouped by the Areas they serve.</p>
-        </div>
-        <span className="section-count">
-          {specs.length} {specs.length === 1 ? "spec" : "specs"}
-        </span>
-      </div>
+    <section className="view-section" aria-label="Specs by Area">
+      <p className="view-summary">
+        {specs.length} {specs.length === 1 ? "spec" : "specs"} · capabilities grouped by the Areas
+        they serve
+      </p>
       {groups.length === 0 ? (
         <p className="empty">No specs in this companion.</p>
       ) : (
         <div className="specs-area-grid">
-          {groups.map(([area, areaSpecs], index) => (
+          {groups.map(([area, areaSpecs]) => (
             <section key={area} className="specs-area-card" aria-label={`Area ${area}`}>
               <div className="specs-area-card-head">
-                <div className="specs-area-name">
-                  <span className="specs-area-number">{String(index + 1).padStart(2, "0")}</span>
-                  <h4>{area}</h4>
-                </div>
+                <h4 className="specs-area-name">{area}</h4>
                 <span className="specs-area-count">{`${areaSpecs.length} specs`}</span>
               </div>
               <div className="specs-card-list">

package/src/cli/commands/studio/views/studio-client/actions.ts

@@ -0,0 +1,51 @@
+import { copy } from "./page";
+
+const AGENT_ORDER = ["claude", "opencode"];
+
+/** Copies whatever a control carries and confirms it in the page. */
+export function wireCopyControls(): void {
+  document.querySelectorAll("[data-copy]").forEach((node) => {
+    node.addEventListener("click", () => {
+      const text = node.getAttribute("data-copy");
+      if (text) void copy(text, node.getAttribute("data-copy-label") || "prompt");
+    });
+  });
+}
+
+function copyPromptFor(node: Element): string | null {
+  const viewed = document.documentElement.getAttribute("data-agent-viewed");
+  const order = viewed ? [viewed, ...AGENT_ORDER] : AGENT_ORDER;
+  for (const agent of order) {
+    const text = node.getAttribute(`data-prompt-${agent}`);
+    if (text) return text;
+  }
+  return null;
+}
+
+/** Delegated: a spec row's controls need no per-node wiring. */
+export function wireDelegatedActions(): void {
+  if (typeof document.addEventListener !== "function") return;
+  document.addEventListener("click", (event) => {
+    const target = event.target as Element | null;
+    if (!target || typeof target.closest !== "function") return;
+    const run = target.closest("[data-studio-action]");
+    if (run) {
+      const agents = (run.getAttribute("data-studio-agents") || "").split(" ").filter(Boolean);
+      document.dispatchEvent(
+        new CustomEvent("studio:terminal-action", {
+          detail: {
+            action: run.getAttribute("data-studio-action"),
+            subject: run.getAttribute("data-studio-subject"),
+            agents,
+          },
+        }),
+      );
+      return;
+    }
+    const prompt = target.closest("[data-studio-copy-prompt]");
+    if (prompt) {
+      const text = copyPromptFor(prompt);
+      if (text) void copy(text, "prompt");
+    }
+  });
+}

package/src/cli/commands/studio/views/studio-client/companion.ts

@@ -0,0 +1,13 @@
+import { COMPANION_STORAGE_KEY } from "./keys";
+
+/** Remembers the companion the served page resolved, for the next visit's restore. */
+export function rememberCompanion(): void {
+  const scope = document.querySelector("[data-companion]");
+  const current = scope && scope.getAttribute("data-companion");
+  if (!current) return;
+  try {
+    localStorage.setItem(COMPANION_STORAGE_KEY, current);
+  } catch {
+    /* a blocked web store only costs the next visit, never the page */
+  }
+}

package/src/cli/commands/studio/views/studio-client/index.ts

@@ -0,0 +1,32 @@
+import { wireCopyControls, wireDelegatedActions } from "./actions";
+import { rememberCompanion } from "./companion";
+import { wireNavigation } from "./page";
+import { wireReports } from "./reports";
+import { wireSkillsSelect, wireWorkflowSchemaSelect, wireWorkflowStageSelection } from "./panels";
+import { wireTheme, wireThemeToggle } from "./theme";
+import { wireUnloadGuard } from "./vault-editor";
+import { wireVaultPane } from "./vault-pane";
+import { wireVaultBrowser } from "./vault-tree";
+
+/**
+ * The only browser code Studio ships beyond the prepaint script: cycling the
+ * appearance, remembering the companion on screen, switching the workflow
+ * schema, marking the selected workflow stage, copying a prompt, the vault's editor, filter and tree toggle, swapping
+ * in a deferred vault tree, and hosted reports. Each needs an API the server
+ * does not have; all markup comes from the server.
+ */
+export function startStudioClient(): void {
+  wireTheme();
+  rememberCompanion();
+  wireWorkflowSchemaSelect();
+  wireWorkflowStageSelection();
+  wireSkillsSelect();
+  wireThemeToggle();
+  wireCopyControls();
+  wireDelegatedActions();
+  wireUnloadGuard();
+  wireNavigation();
+  wireVaultPane();
+  wireVaultBrowser();
+  wireReports();
+}

package/src/cli/commands/studio/views/studio-client/keys.ts

@@ -0,0 +1,3 @@
+export const THEME_STORAGE_KEY = "mate-studio-theme";
+export const COMPANION_STORAGE_KEY = "mate-studio-companion";
+export const VAULT_TREE_STORAGE_KEY = "mate-studio-vault-tree";

package/src/cli/commands/studio/views/studio-client/main.ts

@@ -0,0 +1,3 @@
+import { startStudioClient } from "./index";
+
+startStudioClient();

package/src/cli/commands/studio/views/studio-client/page.ts

@@ -0,0 +1,146 @@
+let toastTimer: ReturnType<typeof setTimeout> | undefined;
+
+export function announce(message: string): void {
+  const toast = document.getElementById("studio-toast");
+  if (!toast) return;
+  toast.textContent = message;
+  toast.setAttribute("data-shown", "true");
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => {
+    toast.setAttribute("data-shown", "false");
+  }, 1400);
+}
+
+export function copy(text: string, label: string): Promise<void> {
+  if (
+    typeof navigator === "undefined" ||
+    !navigator.clipboard ||
+    typeof navigator.clipboard.writeText !== "function"
+  ) {
+    announce("copying is blocked in this browser");
+    return Promise.resolve();
+  }
+  return Promise.resolve()
+    .then(() => navigator.clipboard.writeText(text))
+    .then(
+      () => {
+        announce(`copied ${label}`);
+      },
+      () => {
+        /* a blocked clipboard costs the copy, never the page */
+        announce("copying is blocked in this browser");
+      },
+    );
+}
+
+export function failure(error: unknown): string {
+  const message = (error as { message?: string } | null | undefined)?.message;
+  return message ? message : String(error);
+}
+
+export function fetchMarkup(url: string, signal?: AbortSignal): Promise<string> {
+  return fetch(url, { headers: { accept: "text/html" }, signal }).then((response) => {
+    if (!response.ok) throw new Error(`status ${response.status}`);
+    return response.text();
+  });
+}
+
+/** Moves server-rendered nodes into a container; builds no markup of its own. */
+export function moveInto(container: Element, markup: string): void {
+  const parsed = new DOMParser().parseFromString(markup, "text/html");
+  container.replaceChildren(
+    ...Array.from(parsed.body.childNodes, (child) => document.importNode(child, true)),
+  );
+}
+
+/** The save in flight, so navigation waits for it and a second save is refused. */
+let savePromise: Promise<boolean> | null = null;
+
+export function pendingSave(): Promise<boolean> | null {
+  return savePromise;
+}
+
+export function setPendingSave(save: Promise<boolean> | null): void {
+  savePromise = save;
+}
+
+export function editor(): HTMLTextAreaElement | null {
+  return document.getElementById("vault-editor") as HTMLTextAreaElement | null;
+}
+
+export function dirty(): boolean {
+  const node = editor();
+  return !!node && node.value !== (node.getAttribute("data-vault-original") || "");
+}
+
+function askBeforeNavigation(): boolean {
+  return !dirty() || window.confirm("Discard unsaved changes?");
+}
+
+/**
+ * The one check every departure from the shown state goes through: a save in flight settles
+ * first, then unsaved text is confirmed. Resolves true when the departure may proceed.
+ */
+export function guard(): Promise<boolean> {
+  return (savePromise ?? Promise.resolve(true)).then((allowed) => allowed && askBeforeNavigation());
+}
+
+/** Set by the vault: shows `url` without replacing the document, or returns false to leave it to the browser. */
+let showInPlace: ((url: string) => boolean) | null = null;
+
+export function setInPlaceNavigation(show: ((url: string) => boolean) | null): void {
+  showInPlace = show;
+}
+
+/**
+ * Leaves for `url` once any save has settled, unless the viewer keeps unsaved changes.
+ * `inPlace` is for a control that opens a file of the vault and may leave the document alone.
+ */
+export function navigate(url: string, inPlace = false): void {
+  void guard().then((allowed) => {
+    if (!allowed) return;
+    if (inPlace && showInPlace && showInPlace(url)) return;
+    location.assign(url);
+  });
+}
+
+/** True for a click the browser would treat as an ordinary same-tab follow of a link. */
+export function isPlainClick(event: MouseEvent): boolean {
+  return !(
+    event.defaultPrevented ||
+    event.button !== 0 ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey
+  );
+}
+
+function navigationUrl(form: HTMLFormElement, submitter?: HTMLElement | null): string {
+  const target = new URL(form.action || location.href, location.href);
+  new FormData(form).forEach((value, key) => {
+    if (typeof value === "string") target.searchParams.append(key, value);
+  });
+  const named = submitter as HTMLButtonElement | null | undefined;
+  if (named && named.name && named.value) target.searchParams.set(named.name, named.value);
+  return target.toString();
+}
+
+export function wireNavigation(scope?: ParentNode): void {
+  (scope || document)
+    .querySelectorAll<HTMLFormElement>('form[method="get"]:not([data-vault-refresh])')
+    .forEach((form) => {
+      form.addEventListener("submit", (event) => {
+        event.preventDefault();
+        navigate(
+          navigationUrl(form, (event as SubmitEvent).submitter),
+          form.hasAttribute("data-vault-open"),
+        );
+      });
+      form.querySelectorAll("select").forEach((select) => {
+        select.addEventListener("change", () => {
+          navigate(navigationUrl(form));
+        });
+      });
+    });
+}

package/src/cli/commands/studio/views/studio-client/panels.ts

@@ -0,0 +1,57 @@
+interface SelectPanels {
+  root: string;
+  select: string;
+  panel: string;
+  /** Skills panels also hide from assistive technology when inactive. */
+  hidePanels: boolean;
+}
+
+/** Shows the panel named by a select's value; the server marks the first one active. */
+function wireSelectPanels({ root, select, panel, hidePanels }: SelectPanels): void {
+  document.querySelectorAll(`[${root}]`).forEach((scope) => {
+    const control = scope.querySelector(`[${select}]`) as HTMLSelectElement | null;
+    if (!control) return;
+    const panels = scope.querySelectorAll(`[${panel}]`);
+    function show(): void {
+      panels.forEach((node) => {
+        const active = node.getAttribute(panel) === control!.value;
+        node.setAttribute("data-active", active ? "true" : "false");
+        if (hidePanels) node.setAttribute("aria-hidden", active ? "false" : "true");
+      });
+    }
+    control.addEventListener("change", show);
+    show();
+  });
+}
+
+export function wireWorkflowSchemaSelect(): void {
+  wireSelectPanels({
+    root: "data-workflow-schema-root",
+    select: "data-workflow-schema-select",
+    panel: "data-workflow-schema-panel",
+    hidePanels: false,
+  });
+}
+
+export function wireSkillsSelect(): void {
+  wireSelectPanels({
+    root: "data-skills-root",
+    select: "data-skills-select",
+    panel: "data-skill-panel",
+    hidePanels: true,
+  });
+}
+
+function markSelectedStage(): void {
+  document.querySelectorAll("a[data-map-stage]").forEach((link) => {
+    if (link.getAttribute("href") === location.hash) link.setAttribute("aria-current", "true");
+    else link.removeAttribute("aria-current");
+  });
+}
+
+/** Marks the graph node whose card the address targets; CSS shows the card itself. */
+export function wireWorkflowStageSelection(): void {
+  if (!document.querySelector("a[data-map-stage]")) return;
+  window.addEventListener("hashchange", markSelectedStage);
+  markSelectedStage();
+}