@creative-dswork/dscode 0.2.2 → 0.2.3

package/dist/dscode.mjs

@@ -220426,6 +220426,83 @@ var init_at_file_resolver = __esm({
   }
 });
 
+// src/ui/shared/tool-result-formatter.ts
+function extractWriteSummary(text) {
+  const lines = text.split("\n");
+  const meaningful = [];
+  for (const line of lines) {
+    if (meaningful.length >= 2) break;
+    const trimmed = line.trim();
+    if (trimmed.length > 0) {
+      meaningful.push(trimmed);
+    }
+  }
+  if (meaningful.length === 0) return text.slice(0, DEFAULT_MAX_CHARS);
+  const summary = meaningful.join("\n");
+  const remainingLines = lines.length - 2;
+  if (remainingLines > 0) {
+    return `${summary}
+\u2026 (${remainingLines} more lines \u2014 anchor preview hidden)`;
+  }
+  return summary;
+}
+function isJSON(text) {
+  const trimmed = text.trim();
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return false;
+  try {
+    JSON.parse(trimmed);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function prettyPrintJSON(text) {
+  return JSON.stringify(JSON.parse(text.trim()), null, 2);
+}
+function formatCodeBlock(text, lang) {
+  const fence = lang ? "```" + lang : "```";
+  return `${fence}
+${text}
+\`\`\``;
+}
+function truncate(text) {
+  if (text.length <= DEFAULT_MAX_CHARS) return text;
+  return text.slice(0, DEFAULT_MAX_CHARS) + `
+\u2026 (${text.length - DEFAULT_MAX_CHARS} more chars)`;
+}
+function formatToolResultForUI(toolName, rawText) {
+  if (!rawText) return "";
+  switch (toolName) {
+    case "write_file":
+    case "overwrite_file":
+      return extractWriteSummary(rawText);
+    case "bash":
+      return formatCodeBlock(truncate(rawText), "sh");
+    case "grep":
+    case "glob": {
+      if (isJSON(rawText)) {
+        return formatCodeBlock(truncate(prettyPrintJSON(rawText)), "json");
+      }
+      return formatCodeBlock(truncate(rawText));
+    }
+    case "read_file":
+      return formatCodeBlock(truncate(rawText));
+    default: {
+      if (isJSON(rawText)) {
+        return formatCodeBlock(truncate(prettyPrintJSON(rawText)), "json");
+      }
+      return truncate(rawText);
+    }
+  }
+}
+var DEFAULT_MAX_CHARS;
+var init_tool_result_formatter = __esm({
+  "src/ui/shared/tool-result-formatter.ts"() {
+    "use strict";
+    DEFAULT_MAX_CHARS = 600;
+  }
+});
+
 // src/session/display.ts
 function extractText(content) {
   if (typeof content === "string") return content;
@@ -220449,9 +220526,10 @@ function extractThinkingFromContent(blocks) {
   }
   return parts.length > 0 ? parts.join("\n\n") : void 0;
 }
-function extractToolResultText(blocks) {
+function extractToolResultText(blocks, toolName) {
   if (!Array.isArray(blocks)) return "";
-  return blocks.filter((b) => b && b.type === "text").map((b) => b.text).join("\n");
+  const raw = blocks.filter((b) => b && b.type === "text").map((b) => b.text).join("\n");
+  return formatToolResultForUI(toolName, raw);
 }
 function rebuildDisplayMessages(messages, visionMessages) {
   const visionMap = /* @__PURE__ */ new Map();
@@ -220494,14 +220572,17 @@ function rebuildDisplayMessages(messages, visionMessages) {
       const toolCallId = m.toolCallId;
       if (toolCallId && lastAssistantToolIds.has(toolCallId)) {
         const toolIdx = lastAssistantToolIds.get(toolCallId);
-        const resultText = extractToolResultText(m.content);
+        const assistantMsg = messages[lastAssistantIdx];
+        const parsedTools = assistantMsg.__parsedTools;
+        const toolName = parsedTools?.[toolIdx]?.name ?? "unknown";
+        const resultText = extractToolResultText(m.content, toolName);
         const isError = !!m.isError;
         let results = pendingResults.get(lastAssistantIdx);
         if (!results) {
           results = /* @__PURE__ */ new Map();
           pendingResults.set(lastAssistantIdx, results);
         }
-        results.set(toolCallId, { result: resultText, isError });
+        results.set(toolCallId, { result: resultText, isError, toolName });
       } else {
         output.add(i);
       }
@@ -220577,6 +220658,7 @@ var init_display = __esm({
   "src/session/display.ts"() {
     "use strict";
     init_image_cache();
+    init_tool_result_formatter();
   }
 });
 
@@ -220707,6 +220789,7 @@ var init_web_backend = __esm({
     init_mcp_browser();
     init_at_file_resolver();
     init_display();
+    init_tool_result_formatter();
     init_ws_server();
     WebUiBackend = class {
       port;
@@ -220730,6 +220813,10 @@ var init_web_backend = __esm({
       pendingImages = [];
       // Message accumulation for the current assistant turn
       currentAssistant = null;
+      // Context window broadcast throttling
+      contextWindowThrottleTimer = null;
+      contextWindowThrottlePending = false;
+      isAssistantTurn = false;
       constructor(options) {
         this.port = options.port;
         this.harness = options.harness;
@@ -220758,23 +220845,29 @@ var init_web_backend = __esm({
           this.broadcast({ type: "tool_start", name: e.name, args: e.args });
         });
         h.events.on("tool:end", (e) => {
-          const rs = typeof e.result === "string" ? e.result.slice(0, 5e3) : JSON.stringify(e.result).slice(0, 5e3);
+          const rawResult = typeof e.result === "string" ? e.result : JSON.stringify(e.result);
+          const rs = formatToolResultForUI(e.name, rawResult);
           const imgs = extractImagesFromToolResult(e.result);
           if (this.currentAssistant) {
             this.currentAssistant.tools = this.currentAssistant.tools.filter((t) => t.name !== e.name || t.result !== "");
             this.currentAssistant.tools.push({ name: e.name, args: "", result: rs, isError: e.isError, images: imgs });
           }
           this.broadcast({ type: "tool_end", name: e.name, result: rs, isError: e.isError, images: imgs });
+          this.broadcastContextWindow(false);
         });
         h.events.on("turn:streaming:start", () => {
           this.currentAssistant = { thinking: "", text: "", tools: [] };
           this.broadcast({ type: "assistant_start" });
           this.startSessionTimeBroadcast();
+          this.isAssistantTurn = true;
         });
         h.events.on("turn:end", () => {
           this.broadcastSessionTime();
+          const toolsForBroadcast = this.currentAssistant?.tools ?? [];
           this.currentAssistant = null;
           this.broadcast({ type: "assistant_end" });
+          this.isAssistantTurn = false;
+          this.broadcastContextWindow(true, toolsForBroadcast);
           this.pushSessionListToAll();
         });
         h.events.on("turn:abort", () => {
@@ -220810,6 +220903,7 @@ var init_web_backend = __esm({
           this.currentAssistant = null;
           this.pendingImages = [];
           this.broadcast({ type: "clear_conversation" });
+          this.broadcastContextWindow(true);
         });
         h.events.on("config:change", (e) => {
           this.broadcast({ type: "config", data: e.data });
@@ -220827,6 +220921,9 @@ var init_web_backend = __esm({
         h.events.on("session:created", () => {
           this.pushSessionListToAll();
         });
+        h.events.on("session:deleted", () => {
+          this.pushSessionListToAll();
+        });
       }
       setAppHostManager(manager) {
         this.appHostManager = manager;
@@ -220903,12 +221000,15 @@ var init_web_backend = __esm({
           });
         }
         this.broadcast({ type: "tool_end", name, result: resultStr, isError, images });
+        this.broadcastContextWindow(false);
       }
       finishAssistantMessage() {
         this.broadcastSessionTime();
         this.stopSessionTimeBroadcast();
+        const toolsForBroadcast2 = this.currentAssistant?.tools ?? [];
         this.currentAssistant = null;
         this.broadcast({ type: "assistant_end" });
+        this.broadcastContextWindow(true, toolsForBroadcast2);
         const sm2 = this.harness.sessionManager;
         if (sm2) {
           const sessions2 = sm2.listSessions();
@@ -221013,9 +221113,11 @@ var init_web_backend = __esm({
       focusEditor() {
       }
       clearConversationView() {
+        const toolsForBroadcast3 = this.currentAssistant?.tools ?? [];
         this.currentAssistant = null;
         this.pendingImages = [];
         this.broadcast({ type: "clear_conversation" });
+        this.broadcastContextWindow(true, toolsForBroadcast3);
       }
       // ── UiBackend Processing ──
       setProcessing(processing) {
@@ -221060,6 +221162,7 @@ var init_web_backend = __esm({
           config: configData,
           messages
         });
+        this.broadcastContextWindow(true);
         if (this.mcpManager) {
           this.pushMcpState();
         }
@@ -221601,6 +221704,7 @@ ${matchList}` });
               config: this.buildConfigData(),
               messages
             });
+            this.broadcastContextWindow(true);
             this.pushSessionList(client);
             break;
           }
@@ -221609,15 +221713,21 @@ ${matchList}` });
               client.send({ type: "error", text: "Session ID required." });
               return;
             }
+            const wasCurrent = sessionManager.getCurrentSessionId?.() === cmd.id;
             const result = sessionManager.deleteSession(cmd.id);
             if (!result.success) {
               client.send({ type: "error", text: `Failed to delete session: ${result.error}` });
               return;
             }
+            if (wasCurrent) {
+              client.send({ type: "clear_conversation" });
+            }
             client.send({ type: "info", display: "toast", text: "Session deleted." });
             const sessions = sessionManager.listSessions();
+            const currentId = sessionManager.getCurrentSessionId?.() ?? void 0;
             client.send({
               type: "sessions",
+              currentSessionId: currentId,
               data: sessions.slice(0, 50).map((s) => ({
                 id: s.id,
                 title: s.title,
@@ -221716,6 +221826,44 @@ ${matchList}` });
         const vms = this.harness.sessionManager?.visionMessages ?? [];
         return rebuildDisplayMessages(messages, vms);
       }
+      getSkillToolNames() {
+        const names = /* @__PURE__ */ new Set();
+        const sm = this.harness.skillManager;
+        if (sm) {
+          for (const name of sm.listAllSkillNames()) {
+            names.add(name);
+          }
+        }
+        return names;
+      }
+      broadcastContextWindow(bypassThrottle, toolsOverride) {
+        const cm = this.harness.contextManager;
+        const cw = cm.getContextWindow();
+        if (cw <= 0) return;
+        if (!bypassThrottle) {
+          if (this.contextWindowThrottleTimer) {
+            this.contextWindowThrottlePending = true;
+            return;
+          }
+          this.contextWindowThrottleTimer = setTimeout(() => {
+            this.contextWindowThrottleTimer = null;
+            if (this.contextWindowThrottlePending) {
+              this.contextWindowThrottlePending = false;
+              this.broadcastContextWindow(true, toolsOverride);
+            }
+          }, 500);
+        }
+        const messages = this.harness.agent.state.messages;
+        const tools = toolsOverride ?? this.currentAssistant?.tools ?? [];
+        const breakdown = cm.getCategoryBreakdown(messages, tools, this.getSkillToolNames());
+        this.broadcast({
+          type: "context_window",
+          total: breakdown.total,
+          used: breakdown.used,
+          free: breakdown.free,
+          categories: breakdown.categories
+        });
+      }
       broadcast(event) {
         this.wsServer.broadcast(event);
       }
@@ -222253,6 +222401,7 @@ var SessionManager = class {
   deleteSession(id) {
     try {
       this.store.delete(id);
+      if (id === this.current?.id) this.current = null;
       this.events?.emit({ type: "session:deleted", id });
       return { success: true };
     } catch (err) {
@@ -222402,6 +222551,99 @@ var ContextManager = class {
     const reservedTools = 3e3;
     return this.contextWindow - this.maxTokens - reservedSystem - reservedTools;
   }
+  getContextWindow() {
+    return this.contextWindow;
+  }
+  classifyToolCategory(toolName, skillNames) {
+    if (toolName.startsWith("mcp__")) return "mcp";
+    if (skillNames?.has(toolName)) return "skill";
+    if (toolName === "read_file" || toolName === "list_files" || toolName === "grep" || toolName === "glob" || toolName === "write_file" || toolName === "overwrite_file")
+      return "readwrite";
+    if (toolName === "edit" || toolName === "edit_undo") return "edit";
+    if (toolName === "bash") return "shell";
+    return "other";
+  }
+  getCategoryBreakdown(messages, tools, skillNames) {
+    const categories = {
+      system: 0,
+      rules: 0,
+      user: 0,
+      thinking: 0,
+      readwrite: 0,
+      edit: 0,
+      shell: 0,
+      skill: 0,
+      mcp: 0,
+      other: 0
+    };
+    let systemMsgIndex = 0;
+    for (const msg of messages) {
+      const m = msg;
+      const role = m?.role;
+      const content = m?.content;
+      if (role === "system") {
+        systemMsgIndex++;
+        const target = systemMsgIndex === 1 ? "system" : "rules";
+        if (typeof content === "string") {
+          categories[target] += estimateTokens(content);
+          categories[target] += 4;
+        } else if (Array.isArray(content)) {
+          for (const block of content) {
+            if (block?.type === "text" && typeof block.text === "string") {
+              categories[target] += estimateTokens(block.text);
+            }
+          }
+          categories[target] += 4;
+        }
+      } else if (role === "user") {
+        if (typeof content === "string") {
+          categories.user += estimateTokens(content);
+        } else if (Array.isArray(content)) {
+          for (const block of content) {
+            if (block?.type === "text" && typeof block.text === "string") {
+              categories.user += estimateTokens(block.text);
+            }
+          }
+        }
+        categories.user += 4;
+      } else if (role === "assistant") {
+        if (typeof content === "string") {
+          categories.thinking += estimateTokens(content);
+        } else if (Array.isArray(content)) {
+          for (const block of content) {
+            if (block?.type === "text" && typeof block.text === "string") {
+              categories.thinking += estimateTokens(block.text);
+            } else if (block?.type === "thinking" && typeof block.thinking === "string") {
+              categories.thinking += estimateTokens(block.thinking);
+            }
+          }
+        }
+        categories.thinking += 4;
+      } else if (role === "toolResult") {
+        const toolName = m?.toolName ?? "";
+        const cat = this.classifyToolCategory(toolName, skillNames);
+        if (Array.isArray(content)) {
+          for (const block of content) {
+            if (block?.type === "text" && typeof block.text === "string") {
+              categories[cat] += estimateTokens(block.text);
+            }
+          }
+        } else if (typeof content === "string") {
+          categories[cat] += estimateTokens(content);
+        }
+        categories[cat] += 20;
+      }
+    }
+    for (const tool of tools) {
+      const cat = this.classifyToolCategory(tool.name, skillNames);
+      const resultTokens = typeof tool.result === "string" ? estimateTokens(tool.result) : 0;
+      categories[cat] += resultTokens + 20;
+    }
+    const used = Object.values(categories).reduce((a, b) => a + b, 0);
+    const total = this.contextWindow;
+    const free = Math.max(0, total - used);
+    return { total, used, free, categories };
+  }
   getEstimatedTokens(messages) {
     return estimateMessagesTokens(messages);
   }

package/dist/web/assets/index-B-Z5Vm7r.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Geist Sans,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:Geist Mono,JetBrains Mono,Fira Code,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}*{scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;transition:background-color .3s ease,border-color .3s ease,color .3s ease}*::-webkit-scrollbar{width:6px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:3px}body{font-family:Geist Sans,system-ui,sans-serif;background-color:var(--color-bg);color:var(--color-text)}.btn{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.btn:focus{outline:2px solid transparent;outline-offset:2px}.btn:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-offset-width: 1px}.btn:disabled{cursor:not-allowed;opacity:.5}.btn{border-radius:6px;border:1px solid transparent}.btn-primary{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.btn-primary:focus{outline:2px solid transparent;outline-offset:2px}.btn-primary:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-offset-width: 1px}.btn-primary:disabled{cursor:not-allowed;opacity:.5}.btn-primary{border-radius:6px;border:1px solid transparent;background-color:var(--color-accent);color:#fff;border-color:var(--color-accent)}.btn-primary:hover{background-color:var(--color-accent-hover);border-color:var(--color-accent-hover)}.btn-secondary{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.btn-secondary:focus{outline:2px solid transparent;outline-offset:2px}.btn-secondary:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-offset-width: 1px}.btn-secondary:disabled{cursor:not-allowed;opacity:.5}.btn-secondary{border-radius:6px;border:1px solid transparent;background-color:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.btn-secondary:hover{background-color:var(--color-surface-hover)}.btn-danger{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.btn-danger:focus{outline:2px solid transparent;outline-offset:2px}.btn-danger:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-offset-width: 1px}.btn-danger:disabled{cursor:not-allowed;opacity:.5}.btn-danger{border-radius:6px;border:1px solid transparent;background-color:var(--color-error);color:var(--color-error-text);border-color:var(--color-error-text)}.btn-danger:hover{filter:brightness(.95)}.input{width:100%;padding:.625rem 1rem;font-size:.875rem;line-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.input::-moz-placeholder{color:var(--color-text-muted)}.input::placeholder{color:var(--color-text-muted)}.input:focus{outline:2px solid transparent;outline-offset:2px}.input{border-radius:12px;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text)}.input:focus{border-color:var(--color-accent)}.card{border-radius:8px;border:1px solid var(--color-border);background-color:var(--color-surface);padding:1rem}.resize-handle{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;z-index:10;transition:background-color .15s ease}.resize-handle:hover{background-color:var(--color-border)}.resize-handle:active{background-color:var(--color-accent)}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.inset-y-0{top:0;bottom:0}.-right-1\.5{right:-.375rem}.-top-1\.5{top:-.375rem}.bottom-full{bottom:100%}.left-0{left:0}.left-1\/2{left:50%}.left-4{left:1rem}.right-4{right:1rem}.top-4{top:1rem}.top-full{top:100%}.z-40{z-index:40}.z-50{z-index:50}.z-\[100\]{z-index:100}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.hidden{display:none}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-screen{height:100vh}.max-h-24{max-height:6rem}.max-h-32{max-height:8rem}.max-h-40{max-height:10rem}.max-h-48{max-height:12rem}.max-h-60{max-height:15rem}.max-h-\[200px\]{max-height:200px}.max-h-\[300px\]{max-height:300px}.max-h-\[400px\]{max-height:400px}.max-h-\[70vh\]{max-height:70vh}.min-h-0{min-height:0px}.min-h-\[40px\]{min-height:40px}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-5{width:1.25rem}.w-72{width:18rem}.w-80{width:20rem}.w-full{width:100%}.min-w-0{min-width:0px}.min-w-full{min-width:100%}.max-w-4xl{max-width:56rem}.max-w-\[200px\]{max-width:200px}.max-w-\[300px\]{max-width:300px}.max-w-\[85\%\]{max-width:85%}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-full{--tw-translate-x: -100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{animation:bounce 1s infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-btn{border-radius:6px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.bg-black\/30{background-color:#0000004d}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pl-3{padding-left:.75rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-mono{font-family:Geist Mono,JetBrains Mono,Fira Code,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\[10px\]{font-size:10px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.capitalize{text-transform:capitalize}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.underline{text-decoration-line:underline}.\!opacity-0{opacity:0!important}.opacity-0{opacity:0}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[filter\]{transition-property:filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}:root{--color-bg: #f8f7f5;--color-surface: #f3f2ef;--color-surface-hover: #ebe9e5;--color-border: #e6e4e0;--color-text: #2d2a26;--color-text-muted: #8a8580;--color-accent: #ca8a04;--color-accent-hover: #a07004;--color-success: #edf4ed;--color-success-text: #347539;--color-error: #fdebec;--color-error-text: #9f2f2d;--color-warning: #fbf3db;--color-warning-text: #956400;--color-user-bubble: #ca8a04;--color-user-bubble-text: #ffffff;--cw-system: #8a8580;--cw-rules: #a0908b;--cw-user: #ca8a04;--cw-thinking: #a78bfa;--cw-readwrite: #eab308;--cw-edit: #3b82f6;--cw-shell: #ef4444;--cw-skill: #059669;--cw-mcp: #8b5cf6;--cw-other: #6b7280}.dark{--color-bg: #1e1c19;--color-surface: #282622;--color-surface-hover: #322e2a;--color-border: #3a3732;--color-text: #e8e4dd;--color-text-muted: #8a8580;--cw-system: #8a8580;--cw-rules: #b0a09b;--cw-user: #d49708;--cw-thinking: #7c6bb0;--cw-readwrite: #ca8a04;--cw-edit: #60a5fa;--cw-shell: #f87171;--cw-skill: #10b981;--cw-mcp: #a78bfa;--cw-other: #9ca3af;--color-accent: #d49708;--color-accent-hover: #e5a50a;--color-success: #1a2e1a;--color-success-text: #5ca860;--color-error: #3a1a1a;--color-error-text: #e05553;--color-warning: #3a2e10;--color-warning-text: #d4a017;--color-user-bubble: #d49708;--color-user-bubble-text: #1e1c19}@media (max-width: 767px){.resize-handle{display:none}}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}.animate-fade-up{animation:fade-up .6s cubic-bezier(.16,1,.3,1) forwards}.animate-slide-in{animation:slide-in .3s ease-out forwards}@media (prefers-reduced-motion: reduce){.animate-fade-up,.animate-slide-in{animation:none}*{transition:none!important}}.hover\:opacity-70:hover{opacity:.7}.hover\:opacity-90:hover{opacity:.9}.hover\:brightness-95:hover{--tw-brightness: brightness(.95);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width: 640px){.sm\:inline{display:inline}}@media (min-width: 768px){.md\:static{position:static}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:max-w-\[75\%\]{max-width:75%}.md\:translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}