@abyssinia-labs/sokie 0.0.0-stage → 0.1.0

package/dist/inspector/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <title>Sokie</title>
+  <style>.tile{fill:#0a0a0a}.visor{fill:#ffffff}.nose{fill:#22c55e}@media (prefers-color-scheme: dark){.tile{fill:#ffffff}.visor{fill:#000000}.nose{fill:#4ade80}}</style>
+  <rect class="tile" x="2" y="2" width="60" height="60" rx="15"/>
+  <rect class="visor" x="9" y="15" width="46" height="22" rx="11"/>
+  <rect class="tile" x="20" y="22" width="6" height="8" rx="3"/>
+  <rect class="tile" x="38" y="22" width="6" height="8" rx="3"/>
+  <circle class="nose" cx="32" cy="48" r="4"/>
+</svg>

package/dist/inspector/index.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>sokie dev</title>
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="stylesheet" href="/tokens.css" />
+    <link rel="stylesheet" href="/inspector.css" />
+    <link rel="stylesheet" href="/tool.css" />
+    <script type="module" src="/inspector.js"></script>
+  </head>
+  <body>
+    <header class="bar">
+      <div class="identity">
+        <h1 id="server-name">Starting…</h1>
+        <p id="server-url" class="url" translate="no"></p>
+      </div>
+      <p id="status" class="status" role="status" aria-live="polite">Building the server</p>
+    </header>
+
+    <section id="findings" class="findings" hidden aria-label="Build findings"></section>
+
+    <main class="layout">
+      <nav class="catalog" aria-label="Catalog">
+        <h2>Tools <span id="tool-count" class="count"></span></h2>
+        <ul id="tools" class="items"></ul>
+        <h2>Prompts <span id="prompt-count" class="count"></span></h2>
+        <ul id="prompts" class="items quiet"></ul>
+        <h2>Resources <span id="resource-count" class="count"></span></h2>
+        <ul id="resources" class="items quiet"></ul>
+      </nav>
+
+      <article id="detail" class="detail">
+        <p class="empty">Choose a tool to read its description and call it.</p>
+      </article>
+    </main>
+
+    <template id="tool-detail">
+      <header class="tool-head">
+        <h2 class="tool-title">Tool</h2>
+        <code class="tool-name" translate="no"></code>
+        <ul class="hints" aria-label="Behaviour"></ul>
+      </header>
+      <p class="description"></p>
+      <form class="call">
+        <label for="arguments">Arguments</label>
+        <textarea id="arguments" name="arguments" rows="8" spellcheck="false" autocomplete="off"></textarea>
+        <p class="schema-note"></p>
+        <div class="actions">
+          <button type="submit" class="primary">Call tool</button>
+          <kbd>⌘&nbsp;Enter</kbd>
+        </div>
+      </form>
+      <section class="result" hidden aria-live="polite">
+        <h3 class="result-head">Result</h3>
+        <pre class="result-body"></pre>
+      </section>
+    </template>
+  </body>
+</html>

package/dist/inspector/inspector.css

@@ -0,0 +1,203 @@
+/* The sokie dev inspector. Every value comes from tokens.css (packages/tokens). */
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--sokie-ground);
+  color: var(--sokie-body);
+  font-family: var(--sokie-font-sans);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+h1,
+h2,
+h3 {
+  color: var(--sokie-text);
+  margin: 0;
+  letter-spacing: var(--sokie-tracking-tight);
+}
+
+code,
+pre,
+textarea,
+kbd {
+  font-family: var(--sokie-font-mono);
+  font-size: 13px;
+}
+
+.bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 24px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  background: var(--sokie-chrome);
+  border-bottom: 1px solid var(--sokie-border);
+}
+
+.bar h1 {
+  font-size: 20px;
+  font-weight: var(--sokie-weight-bold);
+}
+
+.url {
+  margin: 0;
+  color: var(--sokie-muted);
+  font-family: var(--sokie-font-mono);
+  font-size: 13px;
+}
+
+.status {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--sokie-body);
+}
+
+.status::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--sokie-muted);
+}
+
+.status[data-state="running"]::before {
+  background: var(--sokie-live);
+}
+
+.status[data-state="failed"]::before {
+  background: var(--sokie-danger);
+}
+
+.findings {
+  margin: 0;
+  padding: 12px 24px;
+  background: var(--sokie-danger-soft);
+  border-bottom: 1px solid var(--sokie-border);
+}
+
+.findings[data-level="warning"] {
+  background: var(--sokie-nested);
+}
+
+.findings p {
+  margin: 0;
+  font-family: var(--sokie-font-mono);
+  font-size: 13px;
+  color: var(--sokie-text);
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(220px, 300px) 1fr;
+  min-height: calc(100vh - 72px);
+}
+
+.catalog {
+  padding: 16px 12px;
+  border-right: 1px solid var(--sokie-border);
+}
+
+.catalog h2 {
+  font-size: 14px;
+  font-weight: var(--sokie-weight-semibold);
+  padding: 12px 12px 6px;
+}
+
+.count {
+  color: var(--sokie-muted);
+  font-weight: var(--sokie-weight-regular);
+}
+
+.items {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.items button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 8px 12px;
+  border: 0;
+  border-radius: var(--sokie-radius-md);
+  background: transparent;
+  color: var(--sokie-text);
+  font: inherit;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition: background-color var(--sokie-duration-fast) var(--sokie-ease-out);
+}
+
+.items button:hover {
+  background: var(--sokie-nested);
+}
+
+.items button[aria-current="true"] {
+  background: var(--sokie-nested);
+  box-shadow: inset 2px 0 0 var(--sokie-primary);
+}
+
+.items .sub {
+  display: block;
+  color: var(--sokie-muted);
+  font-family: var(--sokie-font-mono);
+  font-size: 12px;
+}
+
+.quiet li {
+  padding: 6px 12px;
+  color: var(--sokie-text);
+}
+
+/* After a reload, what changed says so once: the save you just made, landing. */
+.items .changed {
+  animation: landed var(--sokie-persona-live) var(--sokie-ease-out);
+}
+
+@keyframes landed {
+  from {
+    background: var(--sokie-live-soft);
+    box-shadow: inset 2px 0 0 var(--sokie-live);
+  }
+}
+
+:focus-visible {
+  outline: 2px solid var(--sokie-primary);
+  outline-offset: 2px;
+}
+
+@media (max-width: 720px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+
+  .catalog {
+    border-right: 0;
+    border-bottom: 1px solid var(--sokie-border);
+  }
+
+  .detail {
+    padding: 20px 16px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .items .changed,
+  .description.changed {
+    animation: none;
+  }
+
+  .items button {
+    transition: none;
+  }
+}

package/dist/inspector/inspector.js

@@ -0,0 +1,271 @@
+// The sokie dev inspector page. It follows the dev session over server-sent
+// events and re-lists the catalog whenever a reload lands, marking what
+// changed. Calls go through the dev process (/api/call), which talks MCP to
+// the running server like any client.
+
+const $ = (id) => document.getElementById(id);
+const mac = /Mac|iPhone|iPad/.test(navigator.platform);
+
+let catalog = { tools: [], prompts: [], resources: [] };
+let selected = null;
+let revision = 0;
+const drafts = new Map();
+const results = new Map();
+
+const HINTS = [
+  ["readOnlyHint", "Read only", ""],
+  ["destructiveHint", "Destructive", "destructive"],
+  ["idempotentHint", "Idempotent", ""],
+];
+
+function fingerprint(tool) {
+  return JSON.stringify([tool.title, tool.description, tool.inputSchema, tool.annotations]);
+}
+
+/** A starting point for the arguments: every required property, empty of its type. */
+function skeletonOf(schema) {
+  const props = schema?.properties ?? {};
+  const out = {};
+  for (const name of schema?.required ?? []) {
+    const type = props[name]?.type;
+    out[name] =
+      type === "number" || type === "integer"
+        ? 0
+        : type === "boolean"
+          ? false
+          : type === "array"
+            ? []
+            : type === "object"
+              ? skeletonOf(props[name])
+              : "";
+  }
+  return out;
+}
+
+const skeleton = (schema) => JSON.stringify(skeletonOf(schema), null, 2);
+
+/** Joins the hard-wrapped lines of a tool file into paragraphs; blank lines still part them. */
+function reflow(text) {
+  return text
+    .split(/\n{2,}/)
+    .map((paragraph) => paragraph.replace(/\s*\n\s*/g, " "))
+    .join("\n\n");
+}
+
+function schemaNote(schema) {
+  const names = Object.keys(schema?.properties ?? {});
+  if (names.length === 0) return "This tool takes no arguments.";
+  const required = new Set(schema.required ?? []);
+  const optional = names.filter((n) => !required.has(n));
+  return optional.length > 0 ? `Optional: ${optional.join(", ")}.` : "Every argument is required.";
+}
+
+function renderStatus(state) {
+  const status = $("status");
+  status.dataset.state = state.status;
+  if (state.name) $("server-name").textContent = state.name;
+  $("server-url").textContent = `${state.serverUrl}/mcp`;
+  if (state.status === "running") {
+    const at = new Date(state.reloadedAt).toLocaleTimeString();
+    status.textContent = `Live, ${state.accessMode}. Reloaded at ${at} in ${state.reloadMs} ms`;
+  } else if (state.status === "failed") {
+    status.textContent =
+      state.revision > 0 ? "Build failed. The last good build is still serving" : "Build failed";
+  }
+  renderFindings(state);
+}
+
+function renderFindings(state) {
+  const box = $("findings");
+  const notes = state.findings.filter((f) => f.level !== "info");
+  const secrets = state.secrets;
+  const lines = [
+    ...notes.map((f) => `${f.file || "."}: ${f.message}`),
+    ...(secrets?.missing ?? []).map((s) => `${s.name} has no value in .sokie/dev.env.`),
+    ...(secrets?.standInsMissing ?? []).map((name) => `${name} is not set in .sokie/dev.env.`),
+  ];
+  box.replaceChildren(
+    ...lines.map((text) => Object.assign(document.createElement("p"), { textContent: text })),
+  );
+  box.dataset.level = notes.some((f) => f.level === "error") ? "error" : "warning";
+  box.hidden = lines.length === 0;
+}
+
+function renderList(changed) {
+  $("tool-count").textContent = String(catalog.tools.length);
+  $("prompt-count").textContent = String(catalog.prompts.length);
+  $("resource-count").textContent = String(catalog.resources.length);
+  $("tools").replaceChildren(
+    ...catalog.tools.map((tool) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.setAttribute("aria-current", String(tool.name === selected));
+      button.append(tool.title ?? tool.name);
+      if (tool.title) {
+        button.append(
+          Object.assign(document.createElement("span"), {
+            className: "sub",
+            textContent: tool.name,
+            translate: false,
+          }),
+        );
+      }
+      if (changed.has(tool.name)) button.classList.add("changed");
+      button.addEventListener("click", () => select(tool.name));
+      const item = document.createElement("li");
+      item.append(button);
+      return item;
+    }),
+  );
+  const quiet = (items, describe) =>
+    items.map((item) => {
+      const li = document.createElement("li");
+      li.append(item.title ?? item.name);
+      li.append(
+        Object.assign(document.createElement("span"), {
+          className: "sub",
+          textContent: describe(item),
+          translate: false,
+        }),
+      );
+      return li;
+    });
+  $("prompts").replaceChildren(...quiet(catalog.prompts, (p) => p.name));
+  $("resources").replaceChildren(...quiet(catalog.resources, (r) => r.uri));
+}
+
+function renderDetail(changed) {
+  const tool = catalog.tools.find((t) => t.name === selected);
+  const detail = $("detail");
+  if (!tool) {
+    const empty = Object.assign(document.createElement("p"), { className: "empty" });
+    empty.textContent =
+      catalog.tools.length > 0
+        ? "Choose a tool to read its description and call it."
+        : "This server exposes no tools yet. Add a file under tools/ and save.";
+    detail.replaceChildren(empty);
+    return;
+  }
+  const view = $("tool-detail").content.cloneNode(true);
+  view.querySelector(".tool-title").textContent = tool.title ?? tool.name;
+  view.querySelector(".tool-name").textContent = tool.name;
+  const hints = view.querySelector(".hints");
+  for (const [key, label, className] of HINTS) {
+    if (tool.annotations?.[key])
+      hints.append(Object.assign(document.createElement("li"), { textContent: label, className }));
+  }
+  const description = view.querySelector(".description");
+  description.textContent = reflow(tool.description ?? "");
+  if (changed.has(tool.name)) description.classList.add("changed");
+  const textarea = view.querySelector("textarea");
+  textarea.value = drafts.get(tool.name) ?? skeleton(tool.inputSchema);
+  textarea.addEventListener("input", () => drafts.set(tool.name, textarea.value));
+  textarea.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      textarea.form.requestSubmit();
+    }
+  });
+  view.querySelector(".schema-note").textContent = schemaNote(tool.inputSchema);
+  view.querySelector("kbd").textContent = mac ? "⌘\u00a0Enter" : "Ctrl\u00a0Enter";
+  view.querySelector("form").addEventListener("submit", (event) => {
+    event.preventDefault();
+    call(tool.name, textarea.value);
+  });
+  detail.replaceChildren(view);
+  const last = results.get(tool.name);
+  if (last) showResult(tool.name, ...last);
+}
+
+function showResult(name, head, body, isError) {
+  results.set(name, [head, body, isError]);
+  const result = document.querySelector(".result");
+  if (!result || selected !== name) return;
+  result.hidden = false;
+  result.dataset.error = String(isError);
+  result.querySelector(".result-head").textContent = head;
+  result.querySelector(".result-body").textContent = body;
+}
+
+function contentText(result) {
+  return (result.content ?? [])
+    .map((part) => {
+      if (part.type !== "text") return JSON.stringify(part, null, 2);
+      try {
+        return JSON.stringify(JSON.parse(part.text), null, 2);
+      } catch {
+        return part.text;
+      }
+    })
+    .join("\n\n");
+}
+
+async function call(name, text) {
+  let args;
+  try {
+    args = JSON.parse(text || "{}");
+  } catch (error) {
+    showResult(name, "The arguments are not valid JSON", error.message, true);
+    return;
+  }
+  const button = document.querySelector(".call .primary");
+  button.disabled = true;
+  button.textContent = "Calling…";
+  try {
+    const response = await fetch("/api/call", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ name, arguments: args }),
+    });
+    const body = await response.json();
+    if (!response.ok) showResult(name, "The call did not reach the tool", body.error, true);
+    else if (body.result.isError)
+      showResult(
+        name,
+        `The tool returned an error after ${body.ms} ms`,
+        contentText(body.result),
+        true,
+      );
+    else showResult(name, `Result in ${body.ms} ms`, contentText(body.result), false);
+  } finally {
+    button.disabled = false;
+    button.textContent = "Call tool";
+  }
+}
+
+function select(name) {
+  selected = name;
+  renderList(new Set());
+  renderDetail(new Set());
+}
+
+async function refresh() {
+  const response = await fetch("/api/catalog");
+  if (!response.ok) return;
+  const next = await response.json();
+  const before = new Map(catalog.tools.map((t) => [t.name, fingerprint(t)]));
+  const changed = new Set(
+    before.size === 0
+      ? []
+      : next.tools.filter((t) => before.get(t.name) !== fingerprint(t)).map((t) => t.name),
+  );
+  catalog = next;
+  if (!selected && catalog.tools[0]) selected = catalog.tools[0].name;
+  renderList(changed);
+  renderDetail(changed);
+}
+
+const events = new EventSource("/api/events");
+events.addEventListener("message", (event) => {
+  const state = JSON.parse(event.data);
+  renderStatus(state);
+  if (state.revision !== revision) {
+    revision = state.revision;
+    refresh();
+  }
+});
+events.addEventListener("error", () => {
+  const status = $("status");
+  status.dataset.state = "failed";
+  status.textContent = "sokie dev stopped. Run it again to reconnect";
+});

package/dist/inspector/tokens.css

@@ -0,0 +1,154 @@
+/* Generated from packages/tokens/src by `bun run build` in packages/tokens.
+   Do not edit: change the source and rebuild. */
+
+:root {
+  --sokie-ground: #ffffff;
+  --sokie-chrome: #f7f7f7;
+  --sokie-card: #ffffff;
+  --sokie-nested: #f4f4f4;
+  --sokie-border: rgba(0, 0, 0, 0.08);
+  --sokie-border-strong: rgba(0, 0, 0, 0.2);
+  --sokie-text: #0a0a0a;
+  --sokie-body: #3d3d3d;
+  --sokie-muted: #6b6b6b;
+  --sokie-primary: #0a0a0a;
+  --sokie-on-primary: #ffffff;
+  --sokie-live: #16a34a;
+  --sokie-live-text: #15803d;
+  --sokie-live-soft: #f0fdf4;
+  --sokie-danger: #b91c1c;
+  --sokie-danger-soft: #fef2f2;
+  --sokie-warn: #b45309;
+  --sokie-warn-soft: #fffbeb;
+  --sokie-mark-tile: #0a0a0a;
+  --sokie-mark-visor: #ffffff;
+  --sokie-mark-nose: #22c55e;
+  --sokie-mark-drop: #3b82f6;
+  --sokie-agent-claude: #d97757;
+  --sokie-agent-neutral: #0a0a0a;
+  --sokie-agent-gemini: #e8eefd;
+  --sokie-agent-gemini-star: #3b82f6;
+  --sokie-agent-glyph: #ffffff;
+  --sokie-mark-error: #ef4444;
+  --sokie-mark-concern: #f59e0b;
+  --sokie-radius-sm: 6px;
+  --sokie-radius-md: 8px;
+  --sokie-radius-lg: 10px;
+  --sokie-radius-xl: 12px;
+  --sokie-radius-2xl: 16px;
+  --sokie-font-sans:
+    "Schibsted Grotesk Variable", "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --sokie-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --sokie-weight-regular: 400;
+  --sokie-weight-medium: 500;
+  --sokie-weight-semibold: 600;
+  --sokie-weight-bold: 700;
+  --sokie-weight-heavy: 800;
+  --sokie-tracking-tight: -0.02em;
+  --sokie-tracking-display: -0.045em;
+  --sokie-ease-standard: cubic-bezier(0.45, 0, 0.55, 1);
+  --sokie-ease-out: cubic-bezier(0.2, 0.7, 0.4, 1);
+  --sokie-ease-in: cubic-bezier(0.6, 0, 0.8, 0.3);
+  --sokie-duration-fast: 150ms;
+  --sokie-duration-base: 200ms;
+  --sokie-duration-slow: 300ms;
+  --sokie-persona-idle-breath: 3600ms;
+  --sokie-persona-idle-glance: 7000ms;
+  --sokie-persona-idle-blink: 6000ms;
+  --sokie-persona-listening: 4400ms;
+  --sokie-persona-working-bob: 600ms;
+  --sokie-persona-working-dart: 2400ms;
+  --sokie-persona-working-dots: 1200ms;
+  --sokie-persona-reading: 4200ms;
+  --sokie-persona-searching: 3600ms;
+  --sokie-persona-live: 2000ms;
+  --sokie-persona-error: 2600ms;
+  --sokie-persona-concerned-breath: 700ms;
+  --sokie-persona-concerned-glance: 3000ms;
+  --sokie-persona-sad: 5000ms;
+  --sokie-persona-asleep: 4000ms;
+  --sokie-persona-curious: 3200ms;
+  --sokie-persona-surprised: 2800ms;
+  --sokie-persona-wink: 2400ms;
+  --sokie-persona-connecting: 900ms;
+  --sokie-persona-concerned-twitch: 1400ms;
+  --sokie-persona-glint: 6000ms;
+  --sokie-persona-prop-question: 1600ms;
+  --sokie-persona-prop-question-wobble: 1800ms;
+  --sokie-persona-prop-sweat: 2200ms;
+  --sokie-persona-prop-tear: 2400ms;
+  --sokie-persona-prop-zzz: 3000ms;
+  --sokie-persona-agent-pulse: 2400ms;
+  --sokie-scene-wire-rest: 3000ms;
+  --sokie-scene-wire-hot: 1100ms;
+  --sokie-scene-wire-busy: 500ms;
+  --sokie-scene-ticker: 16000ms;
+  --sokie-scene-float: 6000ms;
+  --sokie-scene-marquee: 36000ms;
+  --sokie-scene-caret: 1000ms;
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --sokie-ground: #000000;
+    --sokie-chrome: #080808;
+    --sokie-card: #0f0f0f;
+    --sokie-nested: #161616;
+    --sokie-border: rgba(255, 255, 255, 0.1);
+    --sokie-border-strong: rgba(255, 255, 255, 0.22);
+    --sokie-text: #ffffff;
+    --sokie-body: #b8b8b8;
+    --sokie-muted: #999999;
+    --sokie-primary: #ffffff;
+    --sokie-on-primary: #000000;
+    --sokie-live: #4ade80;
+    --sokie-live-text: #4ade80;
+    --sokie-live-soft: rgba(74, 222, 128, 0.12);
+    --sokie-danger: #f87171;
+    --sokie-danger-soft: rgba(248, 113, 113, 0.12);
+    --sokie-warn: #fbbf24;
+    --sokie-warn-soft: rgba(251, 191, 36, 0.12);
+    --sokie-mark-tile: #ffffff;
+    --sokie-mark-visor: #000000;
+    --sokie-mark-nose: #4ade80;
+    --sokie-mark-drop: #60a5fa;
+    --sokie-agent-claude: #d97757;
+    --sokie-agent-neutral: #2a2a2a;
+    --sokie-agent-gemini: #ffffff;
+    --sokie-agent-gemini-star: #3b82f6;
+    --sokie-agent-glyph: #ffffff;
+    color-scheme: dark;
+  }
+}
+
+:root[data-theme="dark"] {
+  --sokie-ground: #000000;
+  --sokie-chrome: #080808;
+  --sokie-card: #0f0f0f;
+  --sokie-nested: #161616;
+  --sokie-border: rgba(255, 255, 255, 0.1);
+  --sokie-border-strong: rgba(255, 255, 255, 0.22);
+  --sokie-text: #ffffff;
+  --sokie-body: #b8b8b8;
+  --sokie-muted: #999999;
+  --sokie-primary: #ffffff;
+  --sokie-on-primary: #000000;
+  --sokie-live: #4ade80;
+  --sokie-live-text: #4ade80;
+  --sokie-live-soft: rgba(74, 222, 128, 0.12);
+  --sokie-danger: #f87171;
+  --sokie-danger-soft: rgba(248, 113, 113, 0.12);
+  --sokie-warn: #fbbf24;
+  --sokie-warn-soft: rgba(251, 191, 36, 0.12);
+  --sokie-mark-tile: #ffffff;
+  --sokie-mark-visor: #000000;
+  --sokie-mark-nose: #4ade80;
+  --sokie-mark-drop: #60a5fa;
+  --sokie-agent-claude: #d97757;
+  --sokie-agent-neutral: #2a2a2a;
+  --sokie-agent-gemini: #ffffff;
+  --sokie-agent-gemini-star: #3b82f6;
+  --sokie-agent-glyph: #ffffff;
+  color-scheme: dark;
+}