@jiggai/kitchen 0.1.12 → 0.2.0

package/openclaw/index.ts

@@ -11,14 +11,44 @@ type KitchenConfig = {
   dev?: boolean;
   host?: string;
   port?: number;
+  /**
+   * Enables HTTP Basic auth when binding to a non-localhost host.
+   * Username is fixed to "kitchen"; password is this token.
+   */
   authToken?: string;
+  /**
+   * Optional, disabled-by-default bypass intended ONLY for automated/headless QA.
+   * If set, a request may present ?qaToken=... once to receive a short-lived cookie.
+   */
+  qaToken?: string;
 };
 
+type KitchenAuthMode = "on" | "local" | "off";
+
+function parseAuthMode(v: unknown): KitchenAuthMode {
+  const s = String(v ?? "").trim().toLowerCase();
+  if (s === "off") return "off";
+  if (s === "local") return "local";
+  return "on";
+}
+
 function isLocalhost(host: string) {
   const h = (host || "").trim().toLowerCase();
   return h === "127.0.0.1" || h === "localhost" || h === "::1";
 }
 
+function isLoopbackRemoteAddress(addr: string | undefined | null) {
+  const a = String(addr || "").trim().toLowerCase();
+  if (!a) return false;
+  // Node often reports IPv4-mapped IPv6 addresses.
+  if (a === "::1") return true;
+  if (a.startsWith("::ffff:")) {
+    const v4 = a.slice("::ffff:".length);
+    return v4 === "127.0.0.1";
+  }
+  return a === "127.0.0.1";
+}
+
 function parseBasicAuth(req: http.IncomingMessage) {
   const header = String(req.headers.authorization || "").trim();
   if (!header.toLowerCase().startsWith("basic ")) return null;
@@ -32,6 +62,20 @@ function parseBasicAuth(req: http.IncomingMessage) {
   }
 }
 
+function parseCookies(req: http.IncomingMessage): Record<string, string> {
+  const header = String(req.headers.cookie || "");
+  const out: Record<string, string> = {};
+  for (const part of header.split(";")) {
+    const [kRaw, ...vParts] = part.trim().split("=");
+    if (!kRaw) continue;
+    const k = kRaw.trim();
+    const v = vParts.join("=").trim();
+    if (!k) continue;
+    out[k] = decodeURIComponent(v || "");
+  }
+  return out;
+}
+
 let server: http.Server | null = null;
 let startedAt: string | null = null;
 
@@ -40,11 +84,17 @@ async function startKitchen(api: OpenClawPluginApi, cfg: KitchenConfig) {
 
   const host = String(cfg.host || "127.0.0.1").trim();
   const port = Number(cfg.port || 7777);
-  const dev = cfg.dev !== false;
+  // Default to production/stable mode unless explicitly enabled.
+  // Dev mode (turbopack) can transiently 404 routes until compilation finishes.
+  const dev = cfg.dev === true;
   const authToken = String(cfg.authToken || "");
+  const qaToken = String(cfg.qaToken || "");
+  const authMode = parseAuthMode(process.env.KITCHEN_AUTH_MODE);
 
-  if (!isLocalhost(host) && !authToken.trim()) {
-    throw new Error("Kitchen: authToken is required when binding to a non-localhost host (for Tailscale/remote access).");
+  if (authMode !== "off" && !isLocalhost(host) && !authToken.trim()) {
+    throw new Error(
+      "Kitchen: authToken is required when binding to a non-localhost host (for Tailscale/remote access).",
+    );
   }
 
   const rootDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
@@ -65,9 +115,38 @@ async function startKitchen(api: OpenClawPluginApi, cfg: KitchenConfig) {
         return;
       }
 
-      if (!isLocalhost(host) && authToken.trim()) {
+      const shouldProtect = authMode !== "off" && !isLocalhost(host) && authToken.trim();
+      const isLocalRequest = isLoopbackRemoteAddress(req.socket.remoteAddress);
+
+      if (shouldProtect && !(authMode === "local" && isLocalRequest)) {
+        // Optional headless QA bypass: safe-by-default (disabled unless cfg.qaToken is set).
+        // Flow:
+        // - First request: /some/path?qaToken=... (must match cfg.qaToken)
+        // - Server sets an HttpOnly cookie and 302-redirects to the same URL without qaToken.
+        // - Subsequent requests present the cookie.
+        const cookies = parseCookies(req);
+        const hasQaCookie = qaToken.trim() && cookies.kitchenQaToken === qaToken;
+
+        // Note: req.url here is path+query only, so we need a base.
+        const reqUrl = new URL(url, `http://${host}:${port}`);
+        const qpQaToken = String(reqUrl.searchParams.get("qaToken") || "");
+
+        if (!hasQaCookie && qaToken.trim() && qpQaToken && qpQaToken === qaToken) {
+          // Set cookie (15 minutes) and redirect to clear token from URL.
+          res.statusCode = 302;
+          res.setHeader(
+            "set-cookie",
+            `kitchenQaToken=${encodeURIComponent(qaToken)}; HttpOnly; Path=/; Max-Age=${15 * 60}; SameSite=Lax`,
+          );
+          reqUrl.searchParams.delete("qaToken");
+          res.setHeader("location", reqUrl.pathname + (reqUrl.search ? `?${reqUrl.searchParams.toString()}` : ""));
+          api.logger.warn(`[kitchen] QA token used for ${req.method || "GET"} ${reqUrl.pathname}`);
+          res.end("OK");
+          return;
+        }
+
         const creds = parseBasicAuth(req);
-        const ok = creds && creds.user === "kitchen" && creds.pass === authToken;
+        const ok = hasQaCookie || (creds && creds.user === "kitchen" && creds.pass === authToken);
         if (!ok) {
           res.statusCode = 401;
           res.setHeader("www-authenticate", 'Basic realm="kitchen"');
@@ -102,11 +181,58 @@ async function stopKitchen(api: OpenClawPluginApi) {
   api.logger.info("[kitchen] stopped");
 }
 
+function fetchHealthJson(healthUrl: string): Promise<{ ok?: boolean; startedAt?: unknown }> {
+  return new Promise<{ ok?: boolean; startedAt?: unknown }>((resolve, reject) => {
+    const req = http.get(healthUrl, (res) => {
+      const status = res.statusCode || 0;
+      let buf = "";
+      res.setEncoding("utf8");
+      res.on("data", (d) => (buf += d));
+      res.on("end", () => {
+        if (status < 200 || status >= 300) {
+          reject(new Error(`healthz returned HTTP ${status}`));
+          return;
+        }
+        try {
+          resolve(JSON.parse(buf));
+        } catch (e) {
+          reject(e);
+        }
+      });
+    });
+    req.on("error", reject);
+  });
+}
+
 const kitchenPlugin = {
   id: "kitchen",
   name: "ClawKitchen",
   description: "Local UI for managing recipes, teams, agents, cron jobs, and skills.",
-  configSchema: { type: "object", additionalProperties: true, properties: {} },
+  configSchema: {
+    type: "object",
+    additionalProperties: false,
+    properties: {
+      enabled: { type: "boolean", default: true },
+      dev: {
+        type: "boolean",
+        default: false,
+        description: "Run Next.js in dev mode (not recommended for end users).",
+      },
+      host: { type: "string", default: "127.0.0.1" },
+      port: { type: "integer", default: 7777, minimum: 1, maximum: 65535 },
+      authToken: {
+        type: "string",
+        default: "",
+        description: "Required when host is not localhost. Used for HTTP Basic auth (username: kitchen).",
+      },
+      qaToken: {
+        type: "string",
+        default: "",
+        description:
+          "Optional QA-only bypass token. If set, visiting any URL with ?qaToken=<token> sets a short-lived cookie for headless/automated access.",
+      },
+    },
+  },
   register(api: OpenClawPluginApi) {
     // Expose the plugin API to the Next.js server runtime (runs in-process with the gateway).
     // This lets API routes call into OpenClaw runtime helpers without using child_process or env.
@@ -139,26 +265,7 @@ const kitchenPlugin = {
             } = { ok: true, running: false, url, startedAt: null };
 
             try {
-              const json = await new Promise<{ ok?: boolean; startedAt?: unknown }>((resolve, reject) => {
-                const req = http.get(healthUrl, (res) => {
-                  const status = res.statusCode || 0;
-                  let buf = "";
-                  res.setEncoding("utf8");
-                  res.on("data", (d) => (buf += d));
-                  res.on("end", () => {
-                    if (status < 200 || status >= 300) {
-                      reject(new Error(`healthz returned HTTP ${status}`));
-                      return;
-                    }
-                    try {
-                      resolve(JSON.parse(buf));
-                    } catch (e) {
-                      reject(e);
-                    }
-                  });
-                });
-                req.on("error", reject);
-              });
+              const json = await fetchHealthJson(healthUrl);
 
               result.running = Boolean(json.ok);
               result.startedAt = typeof json.startedAt === "string" ? json.startedAt : null;

package/openclaw.plugin.json

@@ -2,7 +2,7 @@
   "id": "kitchen",
   "name": "ClawKitchen",
   "description": "Local UI for managing OpenClaw recipes, teams, agents, cron jobs, and skills.",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "configSchema": {
     "type": "object",
     "additionalProperties": false,
@@ -29,6 +29,10 @@
       "authToken": {
         "type": "string",
         "default": ""
+      },
+      "qaToken": {
+        "type": "string",
+        "default": ""
       }
     }
   },
@@ -50,6 +54,10 @@
     "authToken": {
       "label": "Auth token",
       "help": "Required when host is not localhost. Used for HTTP Basic auth (username: kitchen)."
+    },
+    "qaToken": {
+      "label": "QA token (optional)",
+      "help": "QA/dev-only. If set, visiting any URL with ?qaToken=<token> sets a short-lived cookie so headless browsers can access the UI without a Basic auth prompt."
     }
   },
   "main": "openclaw/index.ts"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiggai/kitchen",
-  "version": "0.1.12",
+  "version": "0.2.0",
   "private": false,
   "openclaw": {
     "extensions": [
@@ -9,11 +9,18 @@
   },
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "NODE_ENV=production next build",
     "postbuild": "node scripts/copy-standalone-static.mjs",
     "start": "next start",
     "lint": "eslint",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "coverage": "vitest run --coverage",
+    "check": "npm run lint && npm run test:run",
+    "dup:check": "jscpd src --min-tokens 50 --min-lines 10 --reporters html,console",
+    "refactor:report": "node scripts/refactor-report.mjs",
     "smoke:goals": "node scripts/goals-smoke.mjs",
+    "prepare": "husky",
     "prepack": "npm run build"
   },
   "files": [
@@ -42,12 +49,26 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/coverage-v8": "^4.0.18",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
+    "eslint-plugin-sonarjs": "^4.0.0",
+    "husky": "^9.1.7",
+    "jscpd": "^4.0.8",
+    "jsdom": "^28.1.0",
+    "lint-staged": "^16.2.7",
     "tailwindcss": "^4",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vite-tsconfig-paths": "^6.1.1",
+    "vitest": "^4.0.18"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": "eslint --fix"
   }
 }

package/src/app/HomeClient.tsx

@@ -2,14 +2,7 @@
 
 import Link from "next/link";
 import { useMemo, useState } from "react";
-
-type AgentListItem = {
-  id: string;
-  identityName?: string;
-  workspace?: string;
-  model?: string;
-  isDefault?: boolean;
-};
+import type { AgentListItem } from "@/lib/agents";
 
 function inferTeamIdFromWorkspace(workspace: string | undefined) {
   if (!workspace) return null;
@@ -98,7 +91,7 @@ export default function HomeClient({
   }, [agents, teamFilter, teamNames]);
 
   return (
-    <div className="ck-glass mx-auto max-w-5xl p-6 sm:p-8">
+    <div className="ck-glass w-full p-6 sm:p-8">
       <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h1 className="text-3xl font-semibold tracking-tight">
@@ -111,6 +104,12 @@ export default function HomeClient({
         </div>
 
         <div className="flex flex-col items-start gap-2 sm:items-end">
+          <Link
+            href="/recipes?createCustomTeam=1"
+            className="rounded-[var(--ck-radius-sm)] border border-[color:var(--ck-border-subtle)] bg-[color:var(--ck-bg-glass)] px-3 py-1.5 text-sm font-medium text-[color:var(--ck-text-primary)] shadow-[var(--ck-shadow-1)] transition-colors hover:bg-[color:var(--ck-bg-glass-strong)]"
+          >
+            Create team
+          </Link>
           <Link
             href="/recipes"
             className="text-sm font-medium text-[color:var(--ck-text-secondary)] transition-colors hover:text-[color:var(--ck-text-primary)]"

package/src/app/agents/[agentId]/agent-editor-tabs.tsx

@@ -0,0 +1,298 @@
+"use client";
+
+import { FileListWithOptionalToggle } from "@/components/FileListWithOptionalToggle";
+
+type FileEntry = { name: string; missing: boolean; required?: boolean; rationale?: string };
+
+export function IdentityTab({
+  name,
+  emoji,
+  theme,
+  avatar,
+  saving,
+  returnTo,
+  onNameChange,
+  onEmojiChange,
+  onThemeChange,
+  onAvatarChange,
+  onSave,
+  router,
+}: {
+  name: string;
+  emoji: string;
+  theme: string;
+  avatar: string;
+  saving: boolean;
+  returnTo?: string;
+  onNameChange: (v: string) => void;
+  onEmojiChange: (v: string) => void;
+  onThemeChange: (v: string) => void;
+  onAvatarChange: (v: string) => void;
+  onSave: () => Promise<void>;
+  router: { push: (href: string) => void };
+}) {
+  return (
+    <div className="ck-glass-strong p-4">
+      <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Identity</div>
+      <label className="mt-3 block text-xs font-medium text-[color:var(--ck-text-secondary)]">Name</label>
+      <input
+        value={name}
+        onChange={(e) => onNameChange(e.target.value)}
+        className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+      />
+      <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-3">
+        <div>
+          <label className="block text-xs font-medium text-[color:var(--ck-text-secondary)]">Emoji</label>
+          <input
+            value={emoji}
+            onChange={(e) => onEmojiChange(e.target.value)}
+            placeholder="🦞"
+            className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-[color:var(--ck-text-secondary)]">Theme</label>
+          <input
+            value={theme}
+            onChange={(e) => onThemeChange(e.target.value)}
+            placeholder="warm, sharp, calm"
+            className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-[color:var(--ck-text-secondary)]">Avatar</label>
+          <input
+            value={avatar}
+            onChange={(e) => onAvatarChange(e.target.value)}
+            placeholder="avatars/openclaw.png"
+            className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+          />
+        </div>
+      </div>
+      <div className="mt-4 flex flex-col gap-2 sm:flex-row">
+        <button
+          disabled={saving}
+          onClick={onSave}
+          className="rounded-[var(--ck-radius-sm)] bg-[var(--ck-accent-red)] px-3 py-2 text-sm font-medium text-white shadow-[var(--ck-shadow-1)] transition-colors hover:bg-[var(--ck-accent-red-hover)] active:bg-[var(--ck-accent-red-active)] disabled:opacity-50"
+        >
+          {saving ? "Saving…" : "Save"}
+        </button>
+        {returnTo ? (
+          <button
+            disabled={saving}
+            onClick={async () => {
+              await onSave();
+              router.push(returnTo);
+            }}
+            className="rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-3 py-2 text-sm font-medium text-[color:var(--ck-text-primary)] shadow-[var(--ck-shadow-1)] transition-colors hover:bg-white/10 active:bg-white/15 disabled:opacity-50"
+          >
+            Save & return
+          </button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export function ConfigTab({
+  model,
+  saving,
+  onModelChange,
+  onSave,
+}: {
+  model: string;
+  saving: boolean;
+  onModelChange: (v: string) => void;
+  onSave: () => Promise<void>;
+}) {
+  return (
+    <div className="ck-glass-strong p-4">
+      <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Config</div>
+      <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
+        Thin slice: edit the configured model id for this agent (writes to OpenClaw config).
+      </p>
+      <label className="mt-3 block text-xs font-medium text-[color:var(--ck-text-secondary)]">Model</label>
+      <input
+        value={model}
+        onChange={(e) => onModelChange(e.target.value)}
+        placeholder="openai/gpt-5.2"
+        className="mt-1 w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+      />
+      <div className="mt-3">
+        <button
+          disabled={saving}
+          onClick={onSave}
+          className="rounded-[var(--ck-radius-sm)] bg-[var(--ck-accent-red)] px-3 py-2 text-sm font-medium text-white shadow-[var(--ck-shadow-1)] disabled:opacity-50"
+        >
+          {saving ? "Saving…" : "Save config"}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function SkillsTab({
+  agentId,
+  skillsList,
+  availableSkills,
+  skillsLoading,
+  selectedSkill,
+  installingSkill,
+  skillError,
+  skillMsg,
+  onSelectedSkillChange,
+  onInstallSkill,
+}: {
+  agentId: string;
+  skillsList: string[];
+  availableSkills: string[];
+  skillsLoading: boolean;
+  selectedSkill: string;
+  installingSkill: boolean;
+  skillError: string;
+  skillMsg: string;
+  onSelectedSkillChange: (v: string) => void;
+  onInstallSkill: () => Promise<void>;
+}) {
+  return (
+    <div className="ck-glass-strong p-4">
+      <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Skills</div>
+      <p className="mt-2 text-sm text-[color:var(--ck-text-secondary)]">
+        Skills installed in this <strong>agent</strong> workspace (<code>skills/</code>). If you want a skill available to all agents,
+        add it at the team level.
+      </p>
+      <div className="mt-4">
+        <div className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Installed</div>
+        <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-[color:var(--ck-text-secondary)]">
+          {skillsLoading && <li>Loading…</li>}
+          {!skillsLoading && skillsList.length > 0 && skillsList.map((s) => <li key={s}>{s}</li>)}
+          {!skillsLoading && !skillsList.length && <li>None installed.</li>}
+        </ul>
+      </div>
+      <div className="mt-5 rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/15 p-3">
+        <div className="text-xs font-medium text-[color:var(--ck-text-secondary)]">Add a skill</div>
+        <div className="mt-2 flex flex-col gap-2 sm:flex-row sm:items-center">
+          <select
+            value={selectedSkill}
+            onChange={(e) => onSelectedSkillChange(e.target.value)}
+            className="w-full rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 px-3 py-2 text-sm text-[color:var(--ck-text-primary)]"
+            disabled={installingSkill || !availableSkills.length}
+          >
+            {availableSkills.length ? (
+              availableSkills.map((s) => (
+                <option key={s} value={s}>
+                  {s}
+                </option>
+              ))
+            ) : (
+              <option value="">No skills found</option>
+            )}
+          </select>
+          <button
+            type="button"
+            disabled={installingSkill || !selectedSkill}
+            onClick={() => void onInstallSkill()}
+            className="rounded-[var(--ck-radius-sm)] bg-[var(--ck-accent-red)] px-3 py-2 text-sm font-medium text-white shadow-[var(--ck-shadow-1)] disabled:opacity-50"
+          >
+            {installingSkill ? "Adding…" : "Add"}
+          </button>
+        </div>
+        {skillError && (
+          <div className="mt-3 rounded-[var(--ck-radius-sm)] border border-red-400/30 bg-red-500/10 p-3 text-sm text-red-100">
+            {skillError}
+          </div>
+        )}
+        {!skillError && skillMsg && (
+          <div className="mt-3 rounded-[var(--ck-radius-sm)] border border-emerald-400/30 bg-emerald-500/10 p-3 text-sm text-emerald-100">
+            {skillMsg}
+          </div>
+        )}
+        <div className="mt-2 text-xs text-[color:var(--ck-text-tertiary)]">
+          This uses <code>openclaw recipes install-skill &lt;skill&gt; --agent-id {agentId} --yes</code>.
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function FilesTab({
+  agentFiles,
+  agentFilesLoading,
+  showOptionalFiles,
+  fileName,
+  fileContent,
+  loadingFile,
+  saving,
+  fileError,
+  onShowOptionalChange,
+  onLoadFile,
+  onFileContentChange,
+  onSaveFile,
+  onCreateMissingFile,
+}: {
+  agentFiles: FileEntry[];
+  agentFilesLoading: boolean;
+  showOptionalFiles: boolean;
+  fileName: string;
+  fileContent: string;
+  loadingFile: boolean;
+  saving: boolean;
+  fileError: string;
+  onShowOptionalChange: (v: boolean) => void;
+  onLoadFile: (name: string) => void;
+  onFileContentChange: (v: string) => void;
+  onSaveFile: () => Promise<void>;
+  onCreateMissingFile: (name: string) => Promise<void>;
+}) {
+  return (
+    <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+      <FileListWithOptionalToggle
+        title="Agent files"
+        files={agentFiles}
+        loading={agentFilesLoading}
+        showOptionalFiles={showOptionalFiles}
+        onShowOptionalChange={onShowOptionalChange}
+        selectedFileName={fileName}
+        onSelectFile={onLoadFile}
+        renderItemExtra={(f) =>
+          f.missing ? (
+            <button
+              type="button"
+              disabled={saving}
+              onClick={() => void onCreateMissingFile(f.name)}
+              className="shrink-0 rounded-[var(--ck-radius-sm)] border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-[color:var(--ck-text-primary)] hover:bg-white/10 disabled:opacity-50"
+            >
+              Create
+            </button>
+          ) : null
+        }
+      />
+      <div className="ck-glass-strong p-4 lg:col-span-2">
+        <div className="flex items-center justify-between gap-3">
+          <div className="text-sm font-medium text-[color:var(--ck-text-primary)]">Edit: {fileName}</div>
+          <div className="flex items-center gap-3">
+            {loadingFile ? <span className="text-xs text-[color:var(--ck-text-tertiary)]">Loading…</span> : null}
+            <button
+              disabled={saving}
+              onClick={onSaveFile}
+              className="rounded-[var(--ck-radius-sm)] bg-[var(--ck-accent-red)] px-3 py-2 text-sm font-medium text-white shadow-[var(--ck-shadow-1)] disabled:opacity-50"
+            >
+              {saving ? "Saving…" : "Save file"}
+            </button>
+          </div>
+        </div>
+        {fileError ? (
+          <div className="mt-3 rounded-[var(--ck-radius-sm)] border border-red-400/30 bg-red-500/10 p-3 text-sm text-red-100">
+            {fileError}
+          </div>
+        ) : null}
+        <textarea
+          value={fileContent}
+          onChange={(e) => onFileContentChange(e.target.value)}
+          className="mt-3 h-[55vh] w-full resize-none rounded-[var(--ck-radius-sm)] border border-white/10 bg-black/25 p-3 font-mono text-xs text-[color:var(--ck-text-primary)]"
+          spellCheck={false}
+        />
+      </div>
+    </div>
+  );
+}