@odori/cli 0.0.8 → 0.0.10

package/studio/src/integrations.ts

@@ -0,0 +1,29 @@
+/**
+ * Provider status, shared by the two places that show it.
+ *
+ * The settings menu owns configuration and the Integrations view owns
+ * generation, so both need to know what is connected. Status is a source and
+ * nothing else — a key can be sent to the local server, but it never comes
+ * back.
+ */
+export type ProviderStatus = {
+  name: string;
+  title: string;
+  kind: string;
+  keyVariable: string;
+  docsUrl: string;
+  source: "environment" | "stored" | null;
+};
+
+export const loadProviders = async (): Promise<ProviderStatus[]> => {
+  const response = await fetch("/__odori/integrations");
+  if (!response.ok) throw new Error(`${response.status}`);
+  const body = (await response.json()) as {providers: ProviderStatus[]};
+  return body.providers;
+};
+
+/**
+ * Fired on `window` after a key is stored or removed, so a view that gates on
+ * connection state catches up without waiting for a reload.
+ */
+export const INTEGRATIONS_CHANGED = "odori:integrations-changed";

package/studio/src/studio.css

@@ -344,9 +344,176 @@ a.button {
 }
 /* Right-aligned: the trigger is the last thing in the header, so a menu
    growing rightward from its left edge would leave the window. */
-.settings-menu {
-  left: auto;
-  right: 0;
+/* The settings dialog: pages down the left, one page's controls on the right. */
+.settings-dialog {
+  background: var(--elevated);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  display: flex;
+  /* One size regardless of the page shown: a dialog that grows and shrinks
+     as you switch pages reads as two dialogs. The body scrolls instead. */
+  height: min(480px, 82vh);
+  overflow: hidden;
+  width: min(640px, 92vw);
+}
+.settings-nav {
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  gap: 2px;
+  padding: 14px 10px;
+  width: 168px;
+}
+.settings-nav-title {
+  color: var(--subtle);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  margin: 0 0 8px;
+  padding: 0 8px;
+  text-transform: uppercase;
+}
+.settings-nav-item {
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  padding: 7px 8px;
+  text-align: left;
+}
+.settings-nav-item:hover {
+  color: var(--foreground);
+}
+.settings-nav-item[data-selected="true"] {
+  background: var(--active);
+  color: var(--foreground);
+}
+.settings-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 18px;
+  min-width: 0;
+  overflow-y: auto;
+  padding: 14px 18px 20px;
+}
+.settings-body-head {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+.settings-body-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 0;
+}
+.settings-group {
+  display: grid;
+  gap: 8px;
+}
+.settings-group-title {
+  color: var(--subtle);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  margin: 0;
+  text-transform: uppercase;
+}
+.settings-options {
+  display: grid;
+  gap: 2px;
+}
+.settings-option {
+  align-items: baseline;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--muted);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-size: 13px;
+  gap: 10px;
+  justify-content: space-between;
+  padding: 7px 9px;
+  text-align: left;
+}
+.settings-option:hover {
+  color: var(--foreground);
+}
+.settings-option[data-selected="true"] {
+  background: var(--active);
+  color: var(--foreground);
+}
+.settings-option-hint {
+  color: var(--subtle);
+  font-size: 11px;
+}
+.settings-note {
+  color: var(--subtle);
+  font-size: 12px;
+  line-height: 1.5;
+  margin: 0;
+}
+.settings-provider {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  display: grid;
+  gap: 10px;
+  padding: 12px 14px;
+}
+.settings-provider-head {
+  align-items: center;
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+}
+.settings-provider-id {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+.settings-provider-name {
+  font-size: 13px;
+  font-weight: 600;
+}
+.settings-provider-sub {
+  align-items: center;
+  color: var(--subtle);
+  display: flex;
+  font-size: 12px;
+  gap: 6px;
+}
+.settings-provider-sub a {
+  color: inherit;
+}
+.settings-provider-dot {
+  background: var(--subtle);
+  border-radius: 999px;
+  flex: none;
+  height: 6px;
+  width: 6px;
+}
+.settings-provider-sub[data-tone="ok"] .settings-provider-dot {
+  background: var(--success);
+}
+.settings-provider-form {
+  display: flex;
+  gap: 8px;
+}
+.settings-integration-input {
+  flex: 1;
+  min-width: 0;
+  background: var(--field, transparent);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  padding: 6px 10px;
 }
 .menu-heading {
   color: var(--subtle);

package/studio/src/views/AssetsView.tsx

@@ -2,6 +2,7 @@ import {resolveEntryLayout} from "odori";
 import {project, videos} from "virtual:odori-project";
 import {AudioClip} from "../components/AudioClip";
 import {Empty, SectionTitle} from "../components/ui";
+import {GenerateBed} from "../components/GenerateBed";
 
 const isImage = (url: string) => /\.(png|jpe?g|gif|svg|webp|avif)$/i.test(url);
 const isAudio = (url: string) => /\.(m4a|mp3|wav|aac|ogg|opus|flac)$/i.test(url);
@@ -88,6 +89,11 @@ export const AssetsView = () => {
         )}
       </section>
 
+      <section>
+        <SectionTitle>Generate a bed</SectionTitle>
+        <GenerateBed />
+      </section>
+
       <section>
         <SectionTitle>Fonts</SectionTitle>
         {/* Studio's own chrome never loaded these faces, so a name rendered in

package/studio/src/virtual.d.ts

@@ -17,6 +17,7 @@ declare module "virtual:odori-project" {
     exportDir: string;
     audioDir: string;
     audio: Array<{name: string; url: string; relativeFile: string; bytes: number}>;
+    version: string;
     sourceHash: string;
     assets: Array<{reference: string; url: string}>;
     files: {

package/studio/src/views/IntegrationsView.tsx

@@ -1,270 +0,0 @@
-import {useEffect, useState} from "react";
-import {Badge, Button, Empty, SectionTitle} from "../components/ui";
-
-type ProviderStatus = {
-  name: string;
-  title: string;
-  kind: string;
-  keyVariable: string;
-  docsUrl: string;
-  source: "environment" | "stored" | null;
-};
-
-/**
- * Where generation providers are connected.
- *
- * The page is deliberately one-way about secrets: a key can be typed here and
- * sent to the local server once, 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.
- */
-export const IntegrationsView = () => {
-  const [providers, setProviders] = useState<ProviderStatus[] | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const load = async () => {
-    try {
-      const response = await fetch("/__odori/integrations");
-      if (!response.ok) throw new Error(`${response.status}`);
-      const body = (await response.json()) as {providers: ProviderStatus[]};
-      setProviders(body.providers);
-    } catch {
-      setError("Studio could not reach its own server. Is odori dev still running?");
-    }
-  };
-
-  useEffect(() => {
-    void load();
-  }, []);
-
-  if (error) return <Empty title="Integrations unavailable">{error}</Empty>;
-  if (!providers) return <Empty title="Loading" />;
-
-  return (
-    <div className="integrations-view">
-      <section>
-        <SectionTitle>Music</SectionTitle>
-        <p className="hint">
-          A provider generates at author time only: the track lands in <code>public/audio</code>, prepared and
-          committed, and the render never calls a network. Keys live in <code>~/.config/odori</code> on this machine —
-          never in the project, and never readable from this page.
-        </p>
-        <ul className="integration-list">
-          {providers.map((provider) => (
-            <IntegrationRow key={provider.name} provider={provider} onChanged={load} />
-          ))}
-        </ul>
-      </section>
-      {providers.some((provider) => provider.source !== null) ? (
-        <section>
-          <SectionTitle>Generate a bed</SectionTitle>
-          <GeneratePanel />
-        </section>
-      ) : null}
-    </div>
-  );
-};
-
-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[];
-};
-
-/**
- * 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.
- */
-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>
-  );
-};
-
-const IntegrationRow = ({provider, onChanged}: {provider: ProviderStatus; onChanged: () => Promise<void>}) => {
-  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("");
-      setMessage(
-        key === ""
-          ? "Key removed."
-          : body.verified
-            ? "Connected. The key was 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";
-
-  return (
-    <li className="integration">
-      <div className="integration-head">
-        <span className="integration-title">{provider.title}</span>
-        {connected ? (
-          <Badge tone="success">{fromEnvironment ? `connected · ${provider.keyVariable}` : "connected"}</Badge>
-        ) : (
-          <Badge tone="warning">not configured</Badge>
-        )}
-        <a className="integration-docs" href={provider.docsUrl} target="_blank" rel="noreferrer">
-          docs
-        </a>
-      </div>
-      {fromEnvironment ? (
-        <p className="hint">
-          The key comes from <code>{provider.keyVariable}</code> in the environment, which always wins over a stored
-          one. Change it where the environment is set.
-        </p>
-      ) : (
-        <form
-          className="integration-form"
-          onSubmit={(event) => {
-            event.preventDefault();
-            if (draft.trim()) void submit(draft.trim());
-          }}
-        >
-          <input
-            className="integration-input"
-            type="password"
-            autoComplete="off"
-            placeholder={connected ? "Replace the stored key" : `Paste an API key (${provider.keyVariable})`}
-            value={draft}
-            onChange={(event) => setDraft(event.target.value)}
-            disabled={busy}
-            aria-label={`${provider.title} API key`}
-          />
-          <Button disabled={busy || !draft.trim()} onClick={() => void submit(draft.trim())}>
-            {connected ? "Replace" : "Connect"}
-          </Button>
-          {connected ? (
-            <Button disabled={busy} onClick={() => void submit("")}>
-              Disconnect
-            </Button>
-          ) : null}
-        </form>
-      )}
-      {message ? <p className="hint">{message}</p> : null}
-      <p className="integration-usage">
-        <code>odori bed "steady ambient, no drums" --generate --role bed.main</code>
-      </p>
-    </li>
-  );
-};