@odori/cli 0.0.8 → 0.0.10

package/src/registry-snapshot.json

@@ -4035,7 +4035,7 @@
       "files": [
         {
           "path": "components/statement/statement.tsx",
-          "content": "import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from \"odori\";\n\nexport type StatementChip = {\n  /** The chip's text. */\n  label: string;\n  /** A glyph drawn before the label: a logo, a symbol, a single letter. */\n  icon?: string;\n  /** Which surface the chip is drawn on. */\n  tone?: \"neutral\" | \"dark\" | \"accent\";\n};\n\nexport type StatementProps = {\n  /** The sentence, in order. A string is a word; an object is a chip. */\n  parts: Array<string | StatementChip>;\n  /**\n   * What arrives at a time. Characters read as someone typing, words as\n   * someone talking, and `none` puts the whole line up at once.\n   */\n  reveal?: \"characters\" | \"words\" | \"none\";\n  /**\n   * How a part arrives. `rise` lifts and fades it in; `cut` switches it on.\n   * A cut is not a lesser rise: a video built entirely of hard cuts has a\n   * rhythm that any easing softens away.\n   */\n  motion?: \"rise\" | \"cut\";\n  /** Frames between one unit and the next. */\n  stagger?: number;\n  /** Where the sentence sits. */\n  align?: \"left\" | \"center\";\n  /** Light page or dark page. Chips and text follow it. */\n  theme?: \"light\" | \"dark\";\n  /** A chip that replaces the last chip in place. */\n  swap?: StatementChip;\n  /** The frame the swap happens on. */\n  swapAt?: number;\n};\n\nconst isChip = (part: string | StatementChip): part is StatementChip => typeof part !== \"string\";\n\n/**\n * A sentence, arriving under its own discipline, with product controls set\n * inline where the prose needs one.\n *\n * Real product videos disagree about how type should arrive, and they are all\n * right. One types character by character because it is imitating a person at\n * a keyboard. One cuts word by word with no easing anywhere, because every\n * other transition in it is a cut and a single eased rise would sound a wrong\n * note. One lifts whole phrases because it is narrating. So the discipline is\n * a choice here rather than a house opinion baked into three near-identical\n * components.\n *\n * Characters reveal inside a layout that is already the whole sentence: each\n * glyph switches on where it will finally sit, so nothing reflows and no caret\n * is needed to explain a ragged edge, because there is no ragged edge.\n *\n * A chip is drawn the way the interface draws it, so a sentence can name a\n * control and the next scene can cut to that control at scale without the two\n * disagreeing about what the product looks like. `swap` exchanges the last\n * chip in place, so one vendor becoming another is a substitution rather than\n * a reflow of the line.\n */\nexport const Statement = ({\n  parts,\n  reveal = \"words\",\n  motion = \"rise\",\n  stagger,\n  align = \"left\",\n  theme = \"light\",\n  swap,\n  swapAt,\n}: StatementProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const dark = theme === \"dark\";\n  const ink = dark ? brand.colors.background : brand.colors.foreground;\n  const paper = dark ? brand.colors.foreground : brand.colors.background;\n\n  // One frame per character reads as typing; a couple of stagger units per\n  // word reads as speech.\n  const step = stagger ?? (reveal === \"characters\" ? 1 : brand.motion.staggerFrames * 2);\n  const start = 6;\n  const lastChip = parts.map(isChip).lastIndexOf(true);\n  const swapFrame = swapAt ?? 0;\n\n  // Where each part begins, counted in whatever unit is being revealed.\n  const offsets: number[] = [];\n  let units = 0;\n  for (const part of parts) {\n    offsets.push(units);\n    units += reveal === \"characters\" && !isChip(part) ? part.length + 1 : 1;\n  }\n\n  const shown = (unit: number) => {\n    if (reveal === \"none\") return frame >= start ? 1 : 0;\n    const at = start + unit * step;\n    if (motion === \"cut\") return frame >= at ? 1 : 0;\n    return interpolate(frame, [at, at + 20], [0, 1], {easing: Easing.standard});\n  };\n\n  const enter = (progress: number) =>\n    motion === \"cut\"\n      ? {display: \"inline-block\", opacity: progress}\n      : {\n          display: \"inline-block\",\n          opacity: progress,\n          transform: `translateY(${(1 - progress) * 26 * scale}px)`,\n        };\n\n  const chipSurface = (tone: StatementChip[\"tone\"]) => {\n    if (tone === \"accent\") return {background: brand.colors.accent, color: paper, border: \"transparent\"};\n    if (tone === \"dark\") return {background: ink, color: paper, border: \"transparent\"};\n    // Mixed from the ink rather than named, so a neutral chip is legible on a\n    // light brand, a dark brand, and the inverted scenes without being told\n    // which it is standing on.\n    return {\n      background: `color-mix(in srgb, ${ink} 8%, transparent)`,\n      color: ink,\n      border: `color-mix(in srgb, ${ink} 20%, transparent)`,\n    };\n  };\n\n  const chipBody = (chip: StatementChip) => {\n    const surface = chipSurface(chip.tone);\n    return (\n      <span\n        style={{\n          alignItems: \"center\",\n          background: surface.background,\n          border: `${Math.max(1, scale)}px solid ${surface.border}`,\n          borderRadius: 14 * scale,\n          color: surface.color,\n          display: \"inline-flex\",\n          gap: 10 * scale,\n          padding: `${6 * scale}px ${16 * scale}px`,\n          whiteSpace: \"nowrap\",\n        }}\n      >\n        {chip.icon ? <span style={{fontSize: 46 * scale, lineHeight: 1}}>{chip.icon}</span> : null}\n        {chip.label}\n      </span>\n    );\n  };\n\n  return (\n    <Fill\n      style={{\n        alignItems: align === \"center\" ? \"center\" : \"flex-start\",\n        background: dark ? ink : \"transparent\",\n        justifyContent: \"center\",\n        padding: `${120 * scale}px ${150 * scale}px`,\n      }}\n    >\n      <div\n        style={{\n          alignItems: \"center\",\n          color: ink,\n          columnGap: 16 * scale,\n          display: \"flex\",\n          flexWrap: \"wrap\",\n          fontSize: 64 * scale,\n          fontWeight: 500,\n          justifyContent: align === \"center\" ? \"center\" : \"flex-start\",\n          letterSpacing: \"-0.03em\",\n          lineHeight: 1.35,\n          rowGap: 8 * scale,\n          textAlign: align,\n        }}\n      >\n        {parts.map((part, index) => {\n          const swapping = swap !== undefined && index === lastChip;\n          const swapped = swapping\n            ? interpolate(frame, [swapFrame, swapFrame + (motion === \"cut\" ? 1 : 16)], [0, 1], {\n                easing: Easing.standard,\n              })\n            : 0;\n\n          if (!isChip(part)) {\n            // In a pre-measured layout every glyph already occupies its final\n            // place, so revealing one cannot move the ones after it.\n            if (reveal === \"characters\") {\n              return (\n                <span key={`${part}-${index}`} style={{display: \"inline-block\", whiteSpace: \"pre\"}}>\n                  {[...part].map((character, position) => (\n                    <span key={position} style={{display: \"inline-block\", opacity: shown(offsets[index] + position)}}>\n                      {character}\n                    </span>\n                  ))}\n                </span>\n              );\n            }\n            return (\n              <span key={`${part}-${index}`} style={enter(shown(offsets[index]))}>\n                {part}\n              </span>\n            );\n          }\n\n          const entrance = shown(offsets[index]);\n          return (\n            <span\n              key={`chip-${index}`}\n              style={{\n                ...enter(entrance),\n                // A chip settles from slightly small, the way a control that\n                // just appeared under the cursor does. A cut skips the settle.\n                ...(motion === \"cut\"\n                  ? {}\n                  : {transform: `translateY(${(1 - entrance) * 26 * scale}px) scale(${0.92 + entrance * 0.08})`}),\n              }}\n            >\n              {swapping ? (\n                <span style={{display: \"inline-grid\"}}>\n                  <span\n                    style={{\n                      gridArea: \"1 / 1\",\n                      opacity: 1 - swapped,\n                      transform: motion === \"cut\" ? undefined : `translateY(${swapped * -18 * scale}px)`,\n                    }}\n                  >\n                    {chipBody(part)}\n                  </span>\n                  <span\n                    style={{\n                      gridArea: \"1 / 1\",\n                      opacity: swapped,\n                      transform: motion === \"cut\" ? undefined : `translateY(${(1 - swapped) * 18 * scale}px)`,\n                    }}\n                  >\n                    {chipBody(swap)}\n                  </span>\n                </span>\n              ) : (\n                chipBody(part)\n              )}\n            </span>\n          );\n        })}\n      </div>\n    </Fill>\n  );\n};\n",
+          "content": "import {Fill, Easing, interpolate, useBrand, useFrame, useDesignScale} from \"odori\";\n\nexport type StatementChip = {\n  /** The chip's text. */\n  label: string;\n  /** A glyph drawn before the label: a logo, a symbol, a single letter. */\n  icon?: string;\n  /** Which surface the chip is drawn on. */\n  tone?: \"neutral\" | \"dark\" | \"accent\";\n};\n\nexport type StatementProps = {\n  /** The sentence, in order. A string is a word; an object is a chip. */\n  parts: Array<string | StatementChip>;\n  /**\n   * What arrives at a time. Characters read as someone typing, words as\n   * someone talking, and `none` puts the whole line up at once.\n   */\n  reveal?: \"characters\" | \"words\" | \"none\";\n  /**\n   * How a part arrives. `rise` lifts and fades it in; `cut` switches it on.\n   * A cut is not a lesser rise: a video built entirely of hard cuts has a\n   * rhythm that any easing softens away.\n   */\n  motion?: \"rise\" | \"cut\";\n  /** Frames between one unit and the next. */\n  stagger?: number;\n  /** Where the sentence sits. */\n  align?: \"left\" | \"center\";\n  /** Light page or dark page. Chips and text follow it. */\n  theme?: \"light\" | \"dark\";\n  /** A chip that replaces the last chip in place. */\n  swap?: StatementChip;\n  /** The frame the swap happens on. */\n  swapAt?: number;\n};\n\nconst isChip = (part: string | StatementChip): part is StatementChip => typeof part !== \"string\";\n\n/**\n * A sentence, arriving under its own discipline, with product controls set\n * inline where the prose needs one.\n *\n * Real product videos disagree about how type should arrive, and they are all\n * right. One types character by character because it is imitating a person at\n * a keyboard. One cuts word by word with no easing anywhere, because every\n * other transition in it is a cut and a single eased rise would sound a wrong\n * note. One lifts whole phrases because it is narrating. So the discipline is\n * a choice here rather than a house opinion baked into three near-identical\n * components.\n *\n * Characters reveal inside a layout that is already the whole sentence: each\n * glyph switches on where it will finally sit, so nothing reflows and no caret\n * is needed to explain a ragged edge, because there is no ragged edge.\n *\n * A chip is drawn the way the interface draws it, so a sentence can name a\n * control and the next scene can cut to that control at scale without the two\n * disagreeing about what the product looks like. `swap` exchanges the last\n * chip in place, so one vendor becoming another is a substitution rather than\n * a reflow of the line.\n */\nexport const Statement = ({\n  parts,\n  reveal = \"words\",\n  motion = \"rise\",\n  stagger,\n  align = \"left\",\n  theme = \"light\",\n  swap,\n  swapAt,\n}: StatementProps) => {\n  const frame = useFrame();\n  const brand = useBrand();\n  const scale = useDesignScale();\n  const dark = theme === \"dark\";\n  const ink = dark ? brand.colors.background : brand.colors.foreground;\n  const paper = dark ? brand.colors.foreground : brand.colors.background;\n\n  // One frame per character reads as typing; a couple of stagger units per\n  // word reads as speech.\n  const step = stagger ?? (reveal === \"characters\" ? 1 : brand.motion.staggerFrames * 2);\n  const start = 6;\n  const lastChip = parts.map(isChip).lastIndexOf(true);\n  const swapFrame = swapAt ?? 0;\n\n  // Where each part begins, counted in whatever unit is being revealed.\n  const offsets: number[] = [];\n  let units = 0;\n  for (const part of parts) {\n    offsets.push(units);\n    units += reveal === \"characters\" && !isChip(part) ? part.length + 1 : 1;\n  }\n\n  const shown = (unit: number) => {\n    if (reveal === \"none\") return frame >= start ? 1 : 0;\n    const at = start + unit * step;\n    if (motion === \"cut\") return frame >= at ? 1 : 0;\n    return interpolate(frame, [at, at + 20], [0, 1], {easing: Easing.standard});\n  };\n\n  const enter = (progress: number) =>\n    motion === \"cut\"\n      ? {display: \"inline-block\", opacity: progress}\n      : {\n          display: \"inline-block\",\n          opacity: progress,\n          transform: `translateY(${(1 - progress) * 26 * scale}px)`,\n        };\n\n  const chipSurface = (tone: StatementChip[\"tone\"]) => {\n    if (tone === \"accent\") return {background: brand.colors.accent, color: paper, border: \"transparent\"};\n    if (tone === \"dark\") return {background: ink, color: paper, border: \"transparent\"};\n    // Mixed from the ink rather than named, so a neutral chip is legible on a\n    // light brand, a dark brand, and the inverted scenes without being told\n    // which it is standing on.\n    return {\n      background: `color-mix(in srgb, ${ink} 8%, transparent)`,\n      color: ink,\n      border: `color-mix(in srgb, ${ink} 20%, transparent)`,\n    };\n  };\n\n  const chipBody = (chip: StatementChip) => {\n    const surface = chipSurface(chip.tone);\n    return (\n      <span\n        style={{\n          alignItems: \"center\",\n          background: surface.background,\n          border: `${Math.max(1, scale)}px solid ${surface.border}`,\n          borderRadius: 14 * scale,\n          color: surface.color,\n          display: \"inline-flex\",\n          gap: 10 * scale,\n          padding: `${6 * scale}px ${16 * scale}px`,\n          whiteSpace: \"nowrap\",\n        }}\n      >\n        {chip.icon ? <span style={{fontSize: 46 * scale, lineHeight: 1}}>{chip.icon}</span> : null}\n        {chip.label}\n      </span>\n    );\n  };\n\n  return (\n    <Fill\n      style={{\n        alignItems: align === \"center\" ? \"center\" : \"flex-start\",\n        // paper, not ink. ink is the type colour, and painting the ground\n        // with it put light text on a light ground: the dark theme rendered\n        // the sentence invisible, including in this component's own fixture.\n        background: dark ? paper : \"transparent\",\n        justifyContent: \"center\",\n        padding: `${120 * scale}px ${150 * scale}px`,\n      }}\n    >\n      <div\n        style={{\n          alignItems: \"center\",\n          color: ink,\n          columnGap: 16 * scale,\n          display: \"flex\",\n          flexWrap: \"wrap\",\n          fontSize: 64 * scale,\n          fontWeight: 500,\n          justifyContent: align === \"center\" ? \"center\" : \"flex-start\",\n          letterSpacing: \"-0.03em\",\n          lineHeight: 1.35,\n          rowGap: 8 * scale,\n          textAlign: align,\n        }}\n      >\n        {parts.map((part, index) => {\n          const swapping = swap !== undefined && index === lastChip;\n          const swapped = swapping\n            ? interpolate(frame, [swapFrame, swapFrame + (motion === \"cut\" ? 1 : 16)], [0, 1], {\n                easing: Easing.standard,\n              })\n            : 0;\n\n          if (!isChip(part)) {\n            // In a pre-measured layout every glyph already occupies its final\n            // place, so revealing one cannot move the ones after it.\n            if (reveal === \"characters\") {\n              return (\n                <span key={`${part}-${index}`} style={{display: \"inline-block\", whiteSpace: \"pre\"}}>\n                  {[...part].map((character, position) => (\n                    <span key={position} style={{display: \"inline-block\", opacity: shown(offsets[index] + position)}}>\n                      {character}\n                    </span>\n                  ))}\n                </span>\n              );\n            }\n            return (\n              <span key={`${part}-${index}`} style={enter(shown(offsets[index]))}>\n                {part}\n              </span>\n            );\n          }\n\n          const entrance = shown(offsets[index]);\n          return (\n            <span\n              key={`chip-${index}`}\n              style={{\n                ...enter(entrance),\n                // A chip settles from slightly small, the way a control that\n                // just appeared under the cursor does. A cut skips the settle.\n                ...(motion === \"cut\"\n                  ? {}\n                  : {transform: `translateY(${(1 - entrance) * 26 * scale}px) scale(${0.92 + entrance * 0.08})`}),\n              }}\n            >\n              {swapping ? (\n                <span style={{display: \"inline-grid\"}}>\n                  <span\n                    style={{\n                      gridArea: \"1 / 1\",\n                      opacity: 1 - swapped,\n                      transform: motion === \"cut\" ? undefined : `translateY(${swapped * -18 * scale}px)`,\n                    }}\n                  >\n                    {chipBody(part)}\n                  </span>\n                  <span\n                    style={{\n                      gridArea: \"1 / 1\",\n                      opacity: swapped,\n                      transform: motion === \"cut\" ? undefined : `translateY(${(1 - swapped) * 18 * scale}px)`,\n                    }}\n                  >\n                    {chipBody(swap)}\n                  </span>\n                </span>\n              ) : (\n                chipBody(part)\n              )}\n            </span>\n          );\n        })}\n      </div>\n    </Fill>\n  );\n};\n",
           "target": "videos/components/statement/statement.tsx"
         },
         {

package/src/server.ts

@@ -42,6 +42,15 @@ const RESOLVED_ID = `\0${VIRTUAL_ID}`;
  * the aliases below are simply not installed — Vite then resolves `odori`
  * through its own exports map, which is what should happen.
  */
+/** The CLI's own published version, for the status bar. */
+const cliVersion = (): string => {
+  try {
+    return (createRequire(import.meta.url)("../package.json") as {version: string}).version;
+  } catch {
+    return "dev";
+  }
+};
+
 const runtimeSource = (root: string): string | null => {
   for (const from of [resolve(root, "package.json"), import.meta.url]) {
     try {
@@ -99,6 +108,7 @@ const odoriProjectPlugin = (config: ResolvedConfig, getGraph: () => ProjectGraph
         audioDir: config.audioDir,
         docsUrl: config.docsUrl,
         audio: graph.audio,
+        version: cliVersion(),
         sourceHash: graph.sourceHash,
         assets: config.assets ?? [],
         files: {

package/studio/src/Studio.tsx

@@ -4,7 +4,6 @@ import {VideosView} from "./views/VideosView";
 import {ComponentsView} from "./views/ComponentsView";
 import {BrandsView} from "./views/BrandsView";
 import {AssetsView} from "./views/AssetsView";
-import {IntegrationsView} from "./views/IntegrationsView";
 import {HomeView} from "./views/HomeView";
 import {CommandPalette} from "./components/CommandPalette";
 import {Wordmark} from "./components/Wordmark";
@@ -12,7 +11,7 @@ import {Button, Icon, Kbd} from "./components/ui";
 import {Settings} from "./components/Settings";
 import {useTheme} from "./theme";
 
-const VIEWS = ["videos", "components", "brands", "assets", "integrations"] as const;
+const VIEWS = ["videos", "components", "brands", "assets"] as const;
 
 export type StudioView = (typeof VIEWS)[number] | "home";
 
@@ -146,12 +145,11 @@ export const Studio = () => {
           <BrandsView selection={route.selection} onSelect={(name) => navigate("brands", name)} />
         ) : null}
         {route.view === "assets" ? <AssetsView /> : null}
-        {route.view === "integrations" ? <IntegrationsView /> : null}
         {route.view === "home" ? <HomeView onOpen={(view, selection) => navigate(view, selection)} /> : null}
       </main>
 
       <footer className="statusbar">
-        <span>source {project.sourceHash.slice(0, 10)}</span>
+        <span>odori {project.version}</span>
         <a className="statusbar-link" href={project.docsUrl} target="_blank" rel="noreferrer">
           Documentation
           <Icon name="external" />

package/studio/src/components/GenerateBed.tsx

@@ -0,0 +1,148 @@
+import {useEffect, useState} from "react";
+import {Button} from "./ui";
+import {INTEGRATIONS_CHANGED, loadProviders} from "../integrations";
+
+/**
+ * Prompt to registered role, without a terminal. The server walks the same
+ * path the CLI does — provider, prepare, register — and the numbers it prints
+ * there render here, warnings included, with the result playable in place.
+ *
+ * This lives with the audio library because that is where the result lands:
+ * a generated bed is an asset the moment the pipeline finishes with it. Keys
+ * are configured in Settings, under Audio; the panel gates on a provider
+ * being connected and unlocks in place when one is stored, announced over a
+ * window event so no reload sits between pasting a key and using it.
+ */
+export const GenerateBed = () => {
+  const [connected, setConnected] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const load = () => {
+      loadProviders()
+        .then((providers) => setConnected(providers.some((provider) => provider.source !== null)))
+        .catch(() => setConnected(null));
+    };
+    load();
+    window.addEventListener(INTEGRATIONS_CHANGED, load);
+    return () => window.removeEventListener(INTEGRATIONS_CHANGED, load);
+  }, []);
+
+  if (connected === null) return null;
+  if (!connected) {
+    return (
+      <p className="hint">
+        A provider can compose a bed from a prompt, prepared and levelled like any file you drop in. Open Settings
+        from the gear in the header and paste an API key under Audio; the panel unlocks here the moment one is
+        stored.
+      </p>
+    );
+  }
+
+  return <GeneratePanel />;
+};
+
+type GenerateReport = {
+  destination: string;
+  role: string;
+  url: string | null;
+  registered: {file: string; already: boolean} | null;
+  before: {lufs: number; peak: number; range: number};
+  after: {lufs: number; peak: number};
+  warnings: string[];
+};
+
+const GeneratePanel = () => {
+  const [prompt, setPrompt] = useState("");
+  const [seconds, setSeconds] = useState(60);
+  const [role, setRole] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [report, setReport] = useState<GenerateReport | null>(null);
+
+  const generate = async () => {
+    setBusy(true);
+    setError(null);
+    setReport(null);
+    try {
+      const response = await fetch("/__odori/generate", {
+        method: "POST",
+        headers: {"content-type": "application/json"},
+        body: JSON.stringify({prompt: prompt.trim(), seconds, role: role.trim() || undefined}),
+      });
+      const body = (await response.json()) as GenerateReport & {error?: string};
+      if (!response.ok) {
+        setError(body.error ?? "Generation failed.");
+        return;
+      }
+      setReport(body);
+    } catch {
+      setError("Studio could not reach its own server. Is odori dev still running?");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="integration generate-panel">
+      <textarea
+        className="generate-prompt"
+        rows={2}
+        placeholder="steady ambient bed, no drums, warm"
+        value={prompt}
+        onChange={(event) => setPrompt(event.target.value)}
+        disabled={busy}
+        aria-label="Prompt"
+      />
+      <div className="generate-controls">
+        <label className="generate-field">
+          seconds
+          <input
+            type="number"
+            min={5}
+            max={300}
+            value={seconds}
+            onChange={(event) => setSeconds(Number(event.target.value) || 60)}
+            disabled={busy}
+          />
+        </label>
+        <label className="generate-field">
+          role
+          <input
+            type="text"
+            placeholder="bed.main"
+            value={role}
+            onChange={(event) => setRole(event.target.value)}
+            disabled={busy}
+          />
+        </label>
+        <Button variant="primary" disabled={busy || !prompt.trim()} onClick={() => void generate()}>
+          {busy ? "Generating…" : "Generate"}
+        </Button>
+      </div>
+      {busy ? <p className="hint">The provider is composing, then the track is levelled to the stem target. A minute is normal.</p> : null}
+      {error ? <p className="hint">{error}</p> : null}
+      {report ? (
+        <div className="generate-report">
+          {report.url ? <audio controls src={report.url} style={{width: "100%"}} /> : null}
+          <p className="hint">
+            {report.destination} · {report.before.lufs.toFixed(1)} → {report.after.lufs.toFixed(1)} LUFS · range{" "}
+            {report.before.range.toFixed(1)} LU
+            {report.registered
+              ? report.registered.already
+                ? ` · "${report.role}" was already registered`
+                : ` · registered "${report.role}" in ${report.registered.file}`
+              : ""}
+          </p>
+          {report.warnings.map((warning) => (
+            <p key={warning} className="hint">
+              {warning}
+            </p>
+          ))}
+          <p className="integration-usage">
+            <code>{`<Audio src="${report.role}" fadeIn="1s" fadeOut="1.5s" duckUnder />`}</code>
+          </p>
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/studio/src/components/Settings.tsx

@@ -2,15 +2,24 @@ import {useEffect, useRef, useState} from "react";
 import {Button, Icon} from "./ui";
 import {useStartSound} from "../settings";
 import {useTheme, type Theme} from "../theme";
+import {INTEGRATIONS_CHANGED, loadProviders, type ProviderStatus} from "../integrations";
 
 /**
  * The workspace preferences, behind one control in the header.
  *
- * This replaced a three-button theme switcher. Theme was the only preference
- * Studio had, so spending a permanent row of chrome on it was fine right up
- * until there was a second one; three more buttons for sound would have made
- * the header a settings panel that never closes. A gear says "there are
- * choices here" in the space one of the old buttons used.
+ * A dialog with pages rather than a popover: the menu was right when the
+ * choices were two radio groups, and wrong the moment a page's worth of
+ * audio configuration — the start-sound default and the provider keys —
+ * had to fold into a strip beside the gear. A dialog gives each area a page
+ * and room to grow one setting at a time, the way every tool this one sits
+ * beside does it.
+ *
+ * Provider keys live here because a key is configuration of the machine,
+ * not material of the project. The form is one-way about secrets: a key can
+ * be typed and sent to the local server, but it never comes back — status
+ * is a source ("environment", "stored") and nothing else. A key from the
+ * environment wins over a stored one and cannot be edited here, because
+ * the place to change an environment is the environment.
  */
 const THEMES: Array<{id: Theme; label: string; hint: string}> = [
   {id: "system", label: "System", hint: "Follow the operating system"},
@@ -23,87 +32,294 @@ const SOUNDS = [
   {id: "off" as const, label: "Off", hint: "Open every video muted"},
 ];
 
+const PAGES = [
+  {id: "appearance" as const, label: "Appearance"},
+  {id: "audio" as const, label: "Audio"},
+];
+
+type Page = (typeof PAGES)[number]["id"];
+
 export const Settings = () => {
   const [open, setOpen] = useState(false);
-  const {theme, setTheme} = useTheme();
-  const [sound, setSound] = useStartSound();
-  const wrapper = useRef<HTMLDivElement>(null);
   const trigger = useRef<HTMLButtonElement>(null);
 
-  useEffect(() => {
-    if (!open) return undefined;
-    const onPointerDown = (event: PointerEvent) => {
-      if (!wrapper.current?.contains(event.target as Node)) setOpen(false);
-    };
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") return;
-      setOpen(false);
-      // Closing with the keyboard has to put the focus somewhere, and the
-      // control that opened the menu is the only place that is not a surprise.
-      trigger.current?.focus();
-    };
-    // Capture, so a click that also does something else still closes the menu.
-    document.addEventListener("pointerdown", onPointerDown, true);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown, true);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open]);
-
   return (
-    <div className="settings" ref={wrapper}>
+    <div className="settings">
       <Button
         ref={trigger}
         icon
         active={open}
         aria-label="Settings"
         aria-expanded={open}
-        aria-haspopup="menu"
+        aria-haspopup="dialog"
         title="Settings"
-        onClick={() => setOpen((value) => !value)}
+        onClick={() => setOpen(true)}
       >
         <Icon name="settings" />
       </Button>
 
       {open ? (
-        <div className="menu settings-menu" role="menu" aria-label="Settings">
-          <p className="menu-heading">Theme</p>
-          {THEMES.map((option) => (
+        <SettingsDialog
+          onClose={() => {
+            setOpen(false);
+            // Closing has to put the focus somewhere, and the control that
+            // opened the dialog is the only place that is not a surprise.
+            trigger.current?.focus();
+          }}
+        />
+      ) : null}
+    </div>
+  );
+};
+
+const SettingsDialog = ({onClose}: {onClose: () => void}) => {
+  const [page, setPage] = useState<Page>("appearance");
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [onClose]);
+
+  return (
+    <div className="overlay" onPointerDown={onClose}>
+      <div
+        className="settings-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Settings"
+        onPointerDown={(event) => event.stopPropagation()}
+      >
+        <nav className="settings-nav" aria-label="Settings pages">
+          <p className="settings-nav-title">Settings</p>
+          {PAGES.map((item) => (
             <button
-              key={option.id}
+              key={item.id}
               type="button"
-              role="menuitemradio"
-              aria-checked={theme === option.id}
-              className="menu-item"
-              data-selected={theme === option.id ? "true" : undefined}
-              onClick={() => setTheme(option.id)}
+              className="settings-nav-item"
+              data-selected={page === item.id ? "true" : undefined}
+              aria-current={page === item.id ? "page" : undefined}
+              onClick={() => setPage(item.id)}
             >
-              <span>{option.label}</span>
-              <span className="menu-hint">{option.hint}</span>
+              {item.label}
             </button>
           ))}
+        </nav>
 
-          <p className="menu-heading">Sound</p>
+        <div className="settings-body">
+          <div className="settings-body-head">
+            <h2 className="settings-body-title">{PAGES.find((item) => item.id === page)?.label}</h2>
+            <Button icon aria-label="Close settings" title="Close" onClick={onClose}>
+              <Icon name="close" />
+            </Button>
+          </div>
+          {page === "appearance" ? <AppearancePage /> : null}
+          {page === "audio" ? <AudioPage /> : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const AppearancePage = () => {
+  const {theme, setTheme} = useTheme();
+
+  return (
+    <section className="settings-group" aria-label="Theme">
+      <p className="settings-group-title">Theme</p>
+      <div className="settings-options" role="radiogroup" aria-label="Theme">
+        {THEMES.map((option) => (
+          <button
+            key={option.id}
+            type="button"
+            role="radio"
+            aria-checked={theme === option.id}
+            className="settings-option"
+            data-selected={theme === option.id ? "true" : undefined}
+            onClick={() => setTheme(option.id)}
+          >
+            <span>{option.label}</span>
+            <span className="settings-option-hint">{option.hint}</span>
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+const AudioPage = () => {
+  const [sound, setSound] = useStartSound();
+  const [providers, setProviders] = useState<ProviderStatus[] | null>(null);
+
+  /* Fetched when the page shows rather than with Studio: the status can
+     change underneath a long session (a key exported in another shell), and
+     opening settings is the moment it has to be right. */
+  useEffect(() => {
+    loadProviders()
+      .then(setProviders)
+      .catch(() => setProviders(null));
+  }, []);
+
+  return (
+    <>
+      <section className="settings-group" aria-label="Sound">
+        <p className="settings-group-title">Sound</p>
+        <div className="settings-options" role="radiogroup" aria-label="Sound">
           {SOUNDS.map((option) => (
             <button
               key={option.id}
               type="button"
-              role="menuitemradio"
+              role="radio"
               aria-checked={sound === option.id}
-              className="menu-item"
+              className="settings-option"
               data-selected={sound === option.id ? "true" : undefined}
               onClick={() => setSound(option.id)}
             >
               <span>{option.label}</span>
-              <span className="menu-hint">{option.hint}</span>
+              <span className="settings-option-hint">{option.hint}</span>
             </button>
           ))}
-          {/* Changing it now would mute or unmute the video being watched,
-              which is not what a default is. */}
-          <p className="menu-note">Applies to the next video you open.</p>
         </div>
+        {/* Changing it now would mute or unmute the video being watched,
+            which is not what a default is. */}
+        <p className="settings-note">Applies to the next video you open.</p>
+      </section>
+
+      <section className="settings-group" aria-label="Integrations">
+        <p className="settings-group-title">Integrations</p>
+        {(providers ?? []).map((provider) => (
+          <ProviderKeyRow
+            key={provider.name}
+            provider={provider}
+            onChanged={async () => {
+              setProviders(await loadProviders());
+              window.dispatchEvent(new Event(INTEGRATIONS_CHANGED));
+            }}
+          />
+        ))}
+      </section>
+    </>
+  );
+};
+
+const ProviderKeyRow = ({provider, onChanged}: {provider: ProviderStatus; onChanged: () => Promise<void>}) => {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+
+  const submit = async (key: string) => {
+    setBusy(true);
+    setMessage(null);
+    try {
+      const response = await fetch("/__odori/integrations", {
+        method: "POST",
+        headers: {"content-type": "application/json"},
+        body: JSON.stringify({provider: provider.name, key}),
+      });
+      const body = (await response.json()) as {error?: string; verified?: boolean | null};
+      if (!response.ok) {
+        setMessage(body.error ?? "The key was not accepted.");
+        return;
+      }
+      setDraft("");
+      setEditing(false);
+      setMessage(
+        key === ""
+          ? "Key removed."
+          : body.verified
+            ? "Checked against the provider and stored on this machine."
+            : "Stored. The provider could not be reached to check it, so the first generation will tell.",
+      );
+      await onChanged();
+    } catch {
+      setMessage("Studio could not reach its own server.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const connected = provider.source !== null;
+  const fromEnvironment = provider.source === "environment";
+  const status = fromEnvironment
+    ? `Connected from ${provider.keyVariable}`
+    : connected
+      ? "Connected"
+      : "Not connected";
+
+  return (
+    <div className="settings-provider">
+      <div className="settings-provider-head">
+        <div className="settings-provider-id">
+          <span className="settings-provider-name">{provider.title}</span>
+          <span className="settings-provider-sub" data-tone={connected ? "ok" : undefined}>
+            <span className="settings-provider-dot" aria-hidden="true" />
+            {status}
+            {" · "}
+            <a href={provider.docsUrl} target="_blank" rel="noreferrer">
+              docs
+            </a>
+          </span>
+        </div>
+        {/* One action at a time. The environment case has none: the place to
+            change an environment is the environment. */}
+        {fromEnvironment ? null : connected ? (
+          <Button disabled={busy} onClick={() => void submit("")}>
+            Disconnect
+          </Button>
+        ) : editing ? null : (
+          <Button
+            onClick={() => {
+              setEditing(true);
+              setMessage(null);
+            }}
+          >
+            Connect
+          </Button>
+        )}
+      </div>
+      {editing && !connected ? (
+        <>
+          <form
+            className="settings-provider-form"
+            onSubmit={(event) => {
+              event.preventDefault();
+              if (draft.trim()) void submit(draft.trim());
+            }}
+          >
+            <input
+              className="settings-integration-input"
+              type="password"
+              autoFocus
+              autoComplete="off"
+              placeholder={provider.keyVariable}
+              value={draft}
+              onChange={(event) => setDraft(event.target.value)}
+              disabled={busy}
+              aria-label={`${provider.title} API key`}
+            />
+            <Button variant="primary" disabled={busy || !draft.trim()} onClick={() => void submit(draft.trim())}>
+              {busy ? "Checking…" : "Save"}
+            </Button>
+            <Button
+              disabled={busy}
+              onClick={() => {
+                setEditing(false);
+                setDraft("");
+              }}
+            >
+              Cancel
+            </Button>
+          </form>
+          <p className="settings-note">
+            Checked against the provider, then stored in <code>~/.config/odori</code> on this machine — never shown
+            again. A key in the environment wins over a stored one.
+          </p>
+        </>
       ) : null}
+      {message ? <p className="settings-note">{message}</p> : null}
     </div>
   );
 };

package/studio/src/components/ui.tsx

@@ -72,7 +72,8 @@ export const Icon = ({
     | "external"
     | "sidebar"
     | "settings"
-    | "search";
+    | "search"
+    | "close";
 }) => {
   const paths: Record<string, ReactNode> = {
     play: <path d="M4.5 2.8v8.4l7-4.2z" fill="currentColor" />,
@@ -92,6 +93,15 @@ export const Icon = ({
         <circle cx="12" cy="12" r="3" />
       </g>
     ),
+    close: (
+      <path
+        d="M3.6 3.6l6.8 6.8M10.4 3.6l-6.8 6.8"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.2"
+      />
+    ),
     sun: (
       <>
         <circle cx="7" cy="7" r="2.5" fill="none" stroke="currentColor" strokeWidth="1.2" />