miii-cli 1.2.2 → 1.2.4

package/dist/memory/store.js

@@ -1,6 +1,6 @@
 import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
 import { join } from 'path';
-const MAX_FACTS = 200;
+const MAX_FACTS = 50;
 function memoryPath(projectDir) {
     return join(projectDir, 'memory.json');
 }

package/dist/skills/loader.js

@@ -28,6 +28,11 @@ const builtin = [
             return 'Normal mode.';
         },
     },
+    {
+        name: 'design',
+        ns: 'default',
+        description: 'Impeccable UI design — /design teach to learn brand, /design <task> to create',
+    },
     {
         name: 'review',
         ns: 'default',
@@ -39,7 +44,7 @@ const builtin = [
         ns: 'default',
         description: 'Show available commands',
         execute: (_, ctx) => {
-            return 'Built-in: /review /mkdir /mv /touch /models /sessions /session /clear /list /help\nType /list for all loaded skills.';
+            return 'Built-in: /review /mkdir /mv /touch /models /sessions /session /clear /list /help\n\nDesign:\n  /design teach    answer 7 questions → generates DESIGN.md (impeccable design system)\n  /design <task>   implement UI using DESIGN.md as brand context\n\nType /list for all loaded skills.';
         },
     },
     {

package/dist/tools/index.js

@@ -7,6 +7,12 @@ import { getTavilyKey, tavilySearch, tavilyExtract } from '../tavily/client.js';
 const run = promisify(exec);
 const runFile = promisify(execFile);
 const EXEC_TIMEOUT_MS = 30_000;
+function requireArg(val, name, tool) {
+    if (typeof val !== 'string' || !val.length) {
+        throw new Error(`${tool}: "${name}" argument is required and must be a non-empty string`);
+    }
+    return val;
+}
 export const tools = [
     {
         name: 'read_file',
@@ -14,7 +20,7 @@ export const tools = [
         params: '{"path": "string"}',
         execute: async ({ path }) => {
             try {
-                return readFile(guardPath(path));
+                return readFile(guardPath(requireArg(path, 'path', 'read_file')));
             }
             catch (e) {
                 throw new Error(`read_file: ${e}`);
@@ -26,7 +32,7 @@ export const tools = [
         description: 'List directory contents',
         params: '{"path": "string", "recursive": "boolean (optional)"}',
         execute: async ({ path, recursive = false }) => {
-            const entries = listFiles(guardPath(path), recursive);
+            const entries = listFiles(guardPath(requireArg(path, 'path', 'list_files')), recursive);
             if (!entries.length)
                 return '(empty)';
             return entries.map(e => `${e.type === 'dir' ? 'd' : 'f'}  ${e.rel}`).join('\n');
@@ -37,10 +43,10 @@ export const tools = [
         description: 'Create a new file with content — fails if file already exists. Prefer edit_file for new files.',
         params: '{"path": "string", "content": "string"}',
         execute: async ({ path, content }) => {
-            const safe = guardPath(path);
+            const safe = guardPath(requireArg(path, 'path', 'create_file'));
             if (existsSync(safe))
                 throw new Error(`file already exists: ${path}`);
-            writeFile(safe, content);
+            writeFile(safe, requireArg(content, 'content', 'create_file'));
             return `created: ${path}`;
         },
     },
@@ -49,13 +55,13 @@ export const tools = [
         description: 'Write a new file — only for files that do not exist yet. Use update_file to modify existing files.',
         params: '{"path": "string", "content": "string"}',
         execute: async ({ path, content }) => {
-            const safe = guardPath(path);
+            const safe = guardPath(requireArg(path, 'path', 'edit_file'));
             if (existsSync(safe)) {
                 throw new Error(`edit_file cannot overwrite existing file: ${path}\n` +
                     `Use update_file with <old> and <new> blocks to make targeted edits.\n` +
                     `Call read_file first to get the exact current text.`);
             }
-            const text = content;
+            const text = requireArg(content, 'content', 'edit_file');
             writeFile(safe, text);
             const lines = text.split('\n').length;
             return `created: ${path} (${lines} line${lines === 1 ? '' : 's'})`;
@@ -66,13 +72,15 @@ export const tools = [
         description: 'Replace an exact unique string in an existing file. Always call read_file first to get the exact text.',
         params: '{"path": "string", "old": "string", "new": "string"}',
         execute: async ({ path, old: oldStr, new: newStr }) => {
-            const safe = guardPath(path);
+            const safe = guardPath(requireArg(path, 'path', 'update_file'));
             const current = readFile(safe);
             if (current === null)
                 throw new Error(`file not found: ${path}`);
             if (current === '')
                 throw new Error(`file empty: ${path}`);
-            const old = oldStr;
+            const old = requireArg(oldStr, 'old', 'update_file');
+            if (newStr === undefined || newStr === null)
+                throw new Error('update_file: "new" argument is required');
             const count = current.split(old).length - 1;
             if (count === 0) {
                 throw new Error(`old text not found in ${path} — file may have changed since last read.\n` +
@@ -104,7 +112,7 @@ export const tools = [
         description: 'Delete a file',
         params: '{"path": "string"}',
         execute: async ({ path }) => {
-            deleteFile(guardPath(path));
+            deleteFile(guardPath(requireArg(path, 'path', 'delete_file')));
             return `deleted: ${path}`;
         },
     },
@@ -113,8 +121,9 @@ export const tools = [
         description: 'Run a shell command in cwd',
         params: '{"command": "string"}',
         execute: async ({ command }) => {
-            const { stdout, stderr } = await run(command, { cwd: process.cwd(), timeout: EXEC_TIMEOUT_MS });
-            return [stdout, stderr ? `stderr: ${stderr}` : ''].filter(Boolean).join('\n').trim();
+            const { stdout, stderr } = await run(requireArg(command, 'command', 'run_command'), { cwd: process.cwd(), timeout: EXEC_TIMEOUT_MS });
+            const out = [stdout, stderr ? `stderr: ${stderr}` : ''].filter(Boolean).join('\n').trim();
+            return out.length > 8000 ? out.slice(0, 8000) + '\n…[truncated]' : out;
         },
     },
     {
@@ -122,7 +131,7 @@ export const tools = [
         description: 'Create a directory (and any missing parents)',
         params: '{"path": "string"}',
         execute: async ({ path }) => {
-            createDir(guardPath(path));
+            createDir(guardPath(requireArg(path, 'path', 'create_folder')));
             return `created: ${path}`;
         },
     },
@@ -131,7 +140,7 @@ export const tools = [
         description: 'Move or rename a file or directory',
         params: '{"from": "string", "to": "string"}',
         execute: async ({ from, to }) => {
-            moveFile(guardPath(from), guardPath(to));
+            moveFile(guardPath(requireArg(from, 'from', 'move_file')), guardPath(requireArg(to, 'to', 'move_file')));
             return `moved: ${from} → ${to}`;
         },
     },
@@ -278,16 +287,14 @@ export function getSystemPrompt(extra = '', extraTools = []) {
     const toolDocs = allTools.map(t => `- ${t.name}(${t.params}): ${t.description}`).join('\n');
     const deepThinkDoc = `- deep_think({"query": "string", "needs_web": "boolean (optional)"}): Research tool — gathers information from files, git, and optionally the web before answering. Returns a compiled research summary. Guardrails: read-only tools only, max 6 tool calls, max 4 web calls inside. Use when a question requires reading multiple files or searching the web first.
 - search_codebase({"query": "string", "k": "number (optional)"}): Semantic vector search over the indexed codebase. Returns top-k relevant code snippets by meaning. Requires the user to have run /index build. Use this when you need to find code by concept rather than exact string — e.g. "authentication logic", "error handling patterns", "database queries".`;
-    return `You are Miii — a fast, local AI coding assistant.
+    return `You are Miii — AI coding assistant.
 
-Use tools by emitting:
+Tools via:
 <tool_call>
 {"name": "tool_name", "args": {...}}
 </tool_call>
 
-Put file content in named blocks (never inside JSON — avoids escaping errors):
-
-For edit_file / create_file use <content> block:
+File content in named blocks (not inside JSON):
 <tool_call>
 {"name": "edit_file", "args": {"path": "src/foo.ts"}}
 <content>
@@ -295,7 +302,6 @@ full file content here
 </content>
 </tool_call>
 
-For update_file use <old> and <new> blocks:
 <tool_call>
 {"name": "update_file", "args": {"path": "src/foo.ts"}}
 <old>
@@ -311,26 +317,11 @@ ${toolDocs}
 ${deepThinkDoc}
 
 Rules:
-- edit_file only works on NEW files — it throws an error if the file exists. Never call it on existing files
-- To modify any existing file: call read_file first, then update_file with the exact text from that read as the <old> block
-- Never guess or reuse old text from earlier in the conversation — always re-read immediately before patching
-- If update_file reports "old text not found", call read_file again and retry with the exact current text
-- Never delete without confirming
-- Use git_status and git_diff before any refactor to understand what has already changed
-- Use git_log to understand recent history before suggesting changes
-- Always call git_status before git_commit to verify what will be staged
-- Be concise
-- Output plain text only — never use markdown formatting in your responses
-- No headers (no #, ##), no bold (**text**), no italic (*text*), no bullet points with *, no horizontal rules (---)
-- NEVER show file content or code in your text response — always use edit_file, update_file, or create_file tools to write code to files
-- If you want to show the user code, write it to the file with a tool call instead
-- No fenced code blocks (no \`\`\`). If you find yourself about to write a code block, use a tool call instead
-- Use plain indentation and labels for structure. This is a terminal, not a chat UI
-- After editing files that have tests, call run_tests to verify nothing broke
-- If run_tests fails, read the failing test output and fix the code, then run_tests again (max 3 retries)
-- You have web_search and web_extract tools — use them whenever the user asks about anything requiring internet access, current information, documentation, library versions, news, or external URLs
-- NEVER say you cannot search the web — always call web_search instead
-- web_search REQUIRES the "query" key exactly — never omit it, never use "q" or "search_query" or any other key name
-- Use deep_think when the question requires gathering from multiple files or sources before you can answer well — it runs a safe read-only research phase and returns a summary you can reason over
-- deep_think cannot edit files or run shell commands — it is purely for information gathering${extra}`;
+- edit_file: new files only (errors if exists). For existing files: read_file then update_file with exact <old> text
+- Never guess old text — always re-read immediately before patching. If "old text not found": read_file again and retry
+- Plain text responses only. No markdown (#/*/\`), no code blocks — write code with tools, not in responses
+- git_status/git_diff before refactors. git_status before git_commit
+- run_tests after edits. Fix failures, retry up to 3 times
+- web_search requires "query" key exactly. Never say you can't search — always call web_search
+- deep_think: read-only research only, cannot edit files${extra}`;
 }

package/dist/tui/InputBar.js

@@ -1,12 +1,15 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useMemo, useEffect } from 'react';
+import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { existsSync } from 'fs';
+import { join } from 'path';
 import { Box, Text, useStdout } from 'ink';
 import { InputArea } from './components/InputArea.js';
 import { ModelPicker } from './components/ModelPicker.js';
 import { ConfigPicker } from './components/ConfigPicker.js';
 import { Divider } from './components/StatusBar.js';
+import { DesignTeachModal, DESIGN_TEACH_QUESTIONS, buildDesignPrompt } from './components/DesignTeachModal.js';
 import { tools } from '../tools/index.js';
-import { toolArgSummary, formatElapsed } from './printer.js';
+import { toolLabel, permissionDesc, formatElapsed, EDIT_TOOLS, DELETE_TOOLS } from './printer.js';
 import { MacroQueue } from '../tasks/queue.js';
 import { TaskExecutor } from '../tasks/executor.js';
 import { THINKING_PHRASES, SPARKLE } from './thinking.js';
@@ -96,7 +99,26 @@ export function InputBar({ config: initialConfig, skills, cwd, session, version,
     const executorRef = useRef(new TaskExecutor(tools));
     const lastGitStatusRef = useRef('');
     const abortRef = useRef(null);
-    const { projectDir, setSessionName, sessionNameRef, historyRef, saveTimerRef, systemPromptRef, pushHistory, buildContext, renameFromMessage, updateMemory, } = useSession(session, cwd, config, mcpTools);
+    const [designTeachState, setDesignTeachState] = useState(null);
+    const [designReadyPrompt, setDesignReadyPrompt] = useState(null);
+    const { projectDir, setSessionName, sessionNameRef, historyRef, saveTimerRef, systemPromptRef, pushHistory, setHistory, buildContext, renameFromMessage, updateMemory, } = useSession(session, cwd, config, mcpTools);
+    const startDesignTeach = useCallback(() => {
+        setDesignTeachState({ answers: [], idx: 0 });
+    }, []);
+    const handleDesignAnswer = useCallback((answer) => {
+        setDesignTeachState(prev => {
+            if (!prev)
+                return null;
+            const answers = [...prev.answers, answer];
+            const nextIdx = prev.idx + 1;
+            if (nextIdx >= DESIGN_TEACH_QUESTIONS.length) {
+                const exists = existsSync(join(cwd, 'DESIGN.md'));
+                setDesignReadyPrompt(buildDesignPrompt(DESIGN_TEACH_QUESTIONS, answers, exists));
+                return null;
+            }
+            return { answers, idx: nextIdx };
+        });
+    }, []);
     const { currentModel, setCurrentModel, currentModelRef, pickerOpen, setPickerOpen, pickerModels, pickerLoading, pickerError, pullState, handleModelSelect, handleModelPull, } = useModelPicker(config);
     const deepThinkTool = useMemo(() => ({
         name: 'deep_think',
@@ -109,7 +131,7 @@ export function InputBar({ config: initialConfig, skills, cwd, session, version,
     }), [config]);
     const searchTool = useMemo(() => createSearchCodebaseTool(config, cwd), [config, cwd]);
     const allTools = useMemo(() => [...tools, deepThinkTool, searchTool, ...mcpTools], [deepThinkTool, searchTool, mcpTools]);
-    const { status, setStatus, tick, currentTool, setCurrentTool, taskLabel, setTaskLabel, thinkingStartRef, runLoop, handleAbort, permissionRequest, resolvePermission, compactRequest, resolveCompact, } = useRunLoop(config, currentModelRef, pushHistory, allTools, abortRef);
+    const { status, setStatus, tick, currentTool, setCurrentTool, taskLabel, setTaskLabel, thinkingStartRef, runLoop, handleAbort, permissionRequest, resolvePermission, } = useRunLoop(config, currentModelRef, pushHistory, allTools, abortRef, setHistory);
     const { runRefactor } = useRefactor({
         config, currentModelRef, systemPromptRef, abortRef,
         macroQueueRef, executorRef,
@@ -126,7 +148,15 @@ export function InputBar({ config: initialConfig, skills, cwd, session, version,
         runRefactor, handleGit, lastGitStatusRef, mcpTools, setConfig,
         setConfigOpen, updateMemory,
         startWatch, stopWatch, watchActive,
+        startDesignTeach,
     });
+    useEffect(() => {
+        if (!designReadyPrompt)
+            return;
+        setDesignReadyPrompt(null);
+        pushHistory({ role: 'user', content: designReadyPrompt });
+        runLoop(buildContext(), 0, 'create or update DESIGN.md');
+    }, [designReadyPrompt, pushHistory, buildContext, runLoop]);
     const skillList = skills.list();
     return (_jsxs(Box, { flexDirection: "column", children: [configOpen ? (_jsxs(_Fragment, { children: [_jsx(ConfigPicker, { config: config, currentModel: currentModel, tavilyKey: tavilyKey, onUpdate: ({ model, ...configPatch }) => {
                             if (model)
@@ -135,7 +165,11 @@ export function InputBar({ config: initialConfig, skills, cwd, session, version,
                                 setConfig(c => ({ ...c, ...configPatch }));
                                 saveConfig(configPatch);
                             }
-                        }, onTavilyKey: (key) => { saveTavilyKey(key); setTavilyKey(key); }, onClose: () => { setConfigOpen(false); } }), _jsx(Divider, { cols: cols })] })) : pickerOpen ? (_jsxs(_Fragment, { children: [_jsx(ModelPicker, { models: pickerModels, current: currentModel, loading: pickerLoading, error: pickerError, pull: pullState, onSelect: handleModelSelect, onPull: handleModelPull, onClose: () => { setPickerOpen(false); } }), _jsx(Divider, { cols: cols })] })) : compactRequest ? (_jsxs(Box, { paddingX: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "yellow", children: "\u26A0" }), _jsx(Text, { color: "white", bold: true, children: "context is large" }), _jsxs(Text, { color: "gray", children: ["(~", compactRequest.messageCount, "k chars)"] })] }), _jsx(Text, { color: "gray", dimColor: true, children: "compact to keep responses fast, or keep full history" })] })) : permissionRequest ? (_jsxs(Box, { paddingX: 1, flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "yellow", children: "\u26A0" }), _jsx(Text, { color: "white", bold: true, children: permissionRequest.toolName }), _jsx(Text, { color: "gray", children: toolArgSummary(permissionRequest.args) })] }), _jsx(DiffPreview, { toolName: permissionRequest.toolName, args: permissionRequest.args })] })) : (status === 'thinking' || status === 'tool') ? (_jsx(Box, { paddingX: 1, gap: 1, children: status === 'thinking'
+                        }, onTavilyKey: (key) => { saveTavilyKey(key); setTavilyKey(key); }, onClose: () => { setConfigOpen(false); } }), _jsx(Divider, { cols: cols })] })) : pickerOpen ? (_jsxs(_Fragment, { children: [_jsx(ModelPicker, { models: pickerModels, current: currentModel, loading: pickerLoading, error: pickerError, pull: pullState, onSelect: handleModelSelect, onPull: handleModelPull, onClose: () => { setPickerOpen(false); } }), _jsx(Divider, { cols: cols })] })) : designTeachState ? (_jsx(DesignTeachModal, { question: DESIGN_TEACH_QUESTIONS[designTeachState.idx], index: designTeachState.idx, total: DESIGN_TEACH_QUESTIONS.length })) : permissionRequest ? (_jsxs(Box, { paddingX: 1, flexDirection: "column", gap: 0, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: DELETE_TOOLS.has(permissionRequest.toolName) ? 'red' : EDIT_TOOLS.has(permissionRequest.toolName) ? 'green' : 'blue', children: "\u25CF" }), _jsx(Text, { color: "white", bold: true, children: toolLabel(permissionRequest.toolName, permissionRequest.args) })] }), _jsx(Box, { paddingLeft: 2, children: _jsxs(Text, { color: "gray", dimColor: true, children: ['└ ', permissionDesc(permissionRequest.toolName)] }) }), _jsx(DiffPreview, { toolName: permissionRequest.toolName, args: permissionRequest.args })] })) : (status === 'thinking' || status === 'tool') ? (_jsx(Box, { paddingX: 1, gap: 1, children: status === 'thinking'
                     ? _jsxs(_Fragment, { children: [_jsx(Text, { color: "yellow", children: SPARKLE[tick % SPARKLE.length] }), _jsx(Text, { color: Math.floor(tick / 4) % 6 >= 2 && Math.floor(tick / 4) % 6 <= 4 ? 'white' : 'gray', italic: true, children: THINKING_PHRASES[phraseSeq[Math.floor(tick / 62) % phraseSeq.length]] }), _jsx(Text, { color: "gray", dimColor: true, children: formatElapsed(Date.now() - thinkingStartRef.current) }), taskLabel && _jsx(Text, { color: "cyan", dimColor: true, children: taskLabel })] })
-                    : _jsxs(_Fragment, { children: [_jsxs(Text, { color: "yellow", dimColor: true, children: ["\u2699 running ", currentTool ?? 'tool', "\u2026"] }), _jsx(Text, { color: "gray", dimColor: true, children: formatElapsed(Date.now() - thinkingStartRef.current) }), taskLabel && _jsx(Text, { color: "cyan", dimColor: true, children: taskLabel })] }) })) : null, _jsx(InputArea, { status: status, skills: skillList, cwd: cwd, planningMode: planningMode, permissionRequest: permissionRequest, onPermissionResponse: resolvePermission, compactRequest: compactRequest, onCompactResponse: resolveCompact, onSubmit: handleSubmit, onAbort: handleAbort, history: historyRef.current.filter(m => m.role === 'user').map(m => m.content), watchActive: watchActive })] }));
+                    : _jsxs(_Fragment, { children: [_jsxs(Text, { color: "yellow", dimColor: true, children: ["\u2699 running ", currentTool ?? 'tool', "\u2026"] }), _jsx(Text, { color: "gray", dimColor: true, children: formatElapsed(Date.now() - thinkingStartRef.current) }), taskLabel && _jsx(Text, { color: "cyan", dimColor: true, children: taskLabel })] }) })) : null, _jsx(InputArea, { status: status, skills: skillList, cwd: cwd, planningMode: planningMode, permissionRequest: permissionRequest, onPermissionResponse: resolvePermission, designTeach: designTeachState ? {
+                    question: DESIGN_TEACH_QUESTIONS[designTeachState.idx],
+                    index: designTeachState.idx,
+                    total: DESIGN_TEACH_QUESTIONS.length,
+                } : null, onDesignTeachAnswer: handleDesignAnswer, onSubmit: handleSubmit, onAbort: handleAbort, history: historyRef.current.filter(m => m.role === 'user').map(m => m.content), watchActive: watchActive })] }));
 }

package/dist/tui/components/DesignTeachModal.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export const DESIGN_TEACH_QUESTIONS = [
+    'What does your product do? (one sentence)',
+    'Who are your primary users? (e.g. developers, consumers, small teams, enterprises)',
+    'How should it feel? List 3–5 words (e.g. bold, calm, precise, playful, minimal, trustworthy)',
+    'Any existing brand colors? (hex codes — or "none" to start fresh)',
+    'Any existing fonts? (font names — or "none" to choose new ones)',
+    'Interface type? (dashboard / marketing / app / docs / landing page / other)',
+    'Products or brands you want to look DIFFERENT from? (or "none")',
+];
+export function DesignTeachModal({ question, index, total }) {
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: "\u25C6 design setup" }), _jsxs(Text, { color: "gray", dimColor: true, children: [index + 1, " of ", total] })] }), _jsx(Text, { color: "white", children: question })] }));
+}
+export function buildDesignPrompt(questions, answers, exists) {
+    const brief = questions.map((q, i) => `${q}\n→ ${answers[i] ?? '(skipped)'}`).join('\n\n');
+    const fileInstruction = exists
+        ? `DESIGN.md already exists. First call read_file on DESIGN.md to get the current content, then call update_file to replace the entire content with the updated design system (use the full current file as the <old> block).`
+        : `Write DESIGN.md to the project root using the create_file tool.`;
+    return `You are an expert UI/UX designer following impeccable design principles. ${exists ? 'Update' : 'Create'} DESIGN.md based on this product brief.
+
+Product Brief:
+${brief}
+
+Impeccable design philosophy (apply strictly):
+- Typography: choose purposeful, distinctive fonts — avoid Inter/Roboto/generic defaults. Use modular scale. Consider display fonts for headings if brand personality supports it.
+- Color: OKLCH-based system, tint neutrals with primary hue, minimum 4.5:1 contrast. No generic gray-on-white. Define primary, secondary, accent, 5 neutral steps, semantic colors (success/warning/error/info).
+- Spatial: 4px-base spacing scale, clear hierarchy through deliberate whitespace.
+- Motion: cubic-bezier curves (not linear/ease), respect prefers-reduced-motion.
+- Interaction: always-visible focus states, meaningful hover/active transitions.
+- Anti-patterns to eliminate: nested card shadows, purple-to-blue gradients, Inter everywhere, insufficient contrast, centered walls of text, auto-playing anything, generic SaaS aesthetics.
+
+${exists ? 'Update' : 'Create'} DESIGN.md with ALL these sections:
+
+## Product
+[2-3 sentences: what it is, who uses it, core value]
+
+## Brand Voice
+[5 personality adjectives + 1 sentence on visual tone]
+
+## Colors
+Full OKLCH color system with hex equivalents:
+- Primary: oklch(...) / #... [usage: CTAs, links, key actions]
+- Secondary: oklch(...) / #...
+- Accent: oklch(...) / #...
+- Neutral-50 through Neutral-900 (tinted with primary hue)
+- Success / Warning / Error / Info
+Rationale: why these colors fit the brand personality.
+
+## Typography
+Heading font: [specific name] — why it fits this brand
+Body font: [specific name] — why it fits
+Scale:
+- 3xl: 2.5rem / 700 — hero headings
+- 2xl: 2rem / 600 — section headings
+- xl: 1.5rem / 600 — card titles
+- lg: 1.125rem / 500 — subheadings
+- base: 1rem / 400 — body text
+- sm: 0.875rem / 400 — captions, labels
+- xs: 0.75rem / 400 — metadata
+
+## Spacing
+Token scale (4px base):
+space-1: 4px | space-2: 8px | space-3: 12px | space-4: 16px
+space-6: 24px | space-8: 32px | space-12: 48px | space-16: 64px | space-24: 96px
+
+## Components
+- Border-radius approach and why (sharp/medium/large/pill)
+- Shadow style (none/subtle/elevated/dramatic)
+- Button: primary, secondary, ghost — hover/active/focus/disabled states
+- Input: default, focus, error, disabled states
+- Card: background, border, shadow, padding
+- Navigation: desktop + mobile pattern
+
+## Motion
+- Durations: fast 100ms / base 200ms / slow 350ms
+- Easing: cubic-bezier(0.4, 0, 0.2, 1) standard, cubic-bezier(0, 0, 0.2, 1) decelerate
+- Use cases: button click, hover transitions, modal open, page change
+
+## Anti-patterns
+8–10 specific things NOT to do for THIS product (derive from brand personality + interface type, not generic advice)
+
+## Design Principles
+4 guiding principles specific to this product — not generic platitudes
+
+Be specific, opinionated, brand-appropriate. Every choice needs a reason. No placeholder text.
+${fileInstruction}`;
+}

package/dist/tui/components/InputArea.js

@@ -56,7 +56,7 @@ function wordEndAfter(line, col) {
         i++;
     return i;
 }
-export function InputArea({ status, skills, cwd, planningMode, permissionRequest, onPermissionResponse, compactRequest, onCompactResponse, onSubmit, onAbort, history = [], watchActive = false }) {
+export function InputArea({ status, skills, cwd, planningMode, permissionRequest, onPermissionResponse, designTeach, onDesignTeachAnswer, onSubmit, onAbort, history = [], watchActive = false }) {
     const [lines, setLines] = useState(['']);
     const [cursor, setCursor] = useState({ row: 0, col: 0 });
     const [overlay, setOverlay] = useState('none');
@@ -180,19 +180,19 @@ export function InputArea({ status, skills, cwd, planningMode, permissionRequest
         onSubmit(name);
     }
     function selectFile(file) {
+        const r = cursor.row;
+        const line = lines[r];
+        const before = line.slice(0, cursor.col);
+        const atIdx = before.lastIndexOf('@');
+        if (atIdx === -1)
+            return;
+        const newLine = line.slice(0, atIdx) + '@' + file.rel + ' ' + line.slice(cursor.col);
         setLines(prev => {
             const next = [...prev];
-            const r = cursor.row;
-            const line = next[r];
-            const before = line.slice(0, cursor.col);
-            const atIdx = before.lastIndexOf('@');
-            if (atIdx === -1)
-                return prev;
-            const newLine = line.slice(0, atIdx) + '@' + file.rel + ' ' + line.slice(cursor.col);
             next[r] = newLine;
-            setCursor({ row: r, col: atIdx + 1 + file.rel.length + 1 });
             return next;
         });
+        setCursor({ row: r, col: atIdx + 1 + file.rel.length + 1 });
         setOverlay('none');
         setOverlayIdx(0);
     }
@@ -212,17 +212,6 @@ export function InputArea({ status, skills, cwd, planningMode, permissionRequest
             }
             return;
         }
-        if (compactRequest && onCompactResponse) {
-            if (input === 'y' || input === 'Y') {
-                onCompactResponse(true);
-                return;
-            }
-            if (input === 'n' || input === 'N' || key.escape) {
-                onCompactResponse(false);
-                return;
-            }
-            return;
-        }
         if (key.escape) {
             if (overlay !== 'none') {
                 setOverlay('none');
@@ -277,6 +266,12 @@ export function InputArea({ status, skills, cwd, planningMode, permissionRequest
             }
         }
         if (key.return) {
+            if (designTeach && onDesignTeachAnswer) {
+                const answer = fullInput.trim();
+                clearInput();
+                onDesignTeachAnswer(answer || '(skipped)');
+                return;
+            }
             const typed = fullInput.trim();
             const pasted = pasteRef.current;
             const text = pasted
@@ -433,14 +428,20 @@ export function InputArea({ status, skills, cwd, planningMode, permissionRequest
             appendChar(input);
             if (prospective.startsWith('/')) {
                 if (prospective.slice(1).includes(' ')) {
-                    setOverlay('none');
+                    if (input === '@' || overlay === 'at') {
+                        setOverlay('at');
+                        setOverlayIdx(0);
+                    }
+                    else {
+                        setOverlay('none');
+                    }
                 }
                 else {
                     setOverlay('command');
                     setOverlayIdx(0);
                 }
             }
-            else if (input === '@' || (overlay === 'at' && atQuery !== undefined)) {
+            else if (input === '@' || (overlay === 'at' && atQuery !== '')) {
                 setOverlay('at');
                 setOverlayIdx(0);
             }
@@ -453,10 +454,10 @@ export function InputArea({ status, skills, cwd, planningMode, permissionRequest
     const cols = stdout.columns ?? 80;
     const availWidth = Math.max(20, cols - 4); // paddingX(2) + "> "(2)
     const isProcessing = status !== 'idle';
-    const promptColor = (permissionRequest || compactRequest) ? 'yellow' : isProcessing ? 'yellow' : 'green';
+    const promptColor = permissionRequest ? 'yellow' : designTeach ? 'cyan' : isProcessing ? 'yellow' : 'green';
     const inHistory = historyIdx !== -1;
-    const hint = compactRequest
-        ? 'y  compact   n  keep full context'
+    const hint = designTeach
+        ? 'enter  submit answer   esc  skip'
         : permissionRequest
             ? 'y  approve once   a  approve for session   n  deny'
             : isProcessing
@@ -475,7 +476,7 @@ export function InputArea({ status, skills, cwd, planningMode, permissionRequest
     const pastePreview = pasteRef.current
         ? pasteRef.current.split('\n')[0].slice(0, cols - 6)
         : '';
-    return (_jsxs(Box, { flexDirection: "column", children: [overlay === 'command' && (_jsx(CommandPalette, { skills: allCommands, query: commandQuery, idx: overlayIdx })), overlay === 'at' && (_jsx(AtPicker, { files: filteredFiles, query: atQuery, idx: overlayIdx })), _jsx(Text, { color: "gray", dimColor: true, children: '─'.repeat(Math.max(cols, 10)) }), _jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: promptColor, bold: true, children: '> ' }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: permissionRequest ? (_jsxs(Box, { gap: 3, children: [_jsx(Text, { color: "green", bold: true, children: "y  once" }), _jsx(Text, { color: "cyan", bold: true, children: "a  session" }), _jsx(Text, { color: "red", bold: true, children: "n  deny" })] })) : compactRequest ? (_jsxs(Box, { gap: 2, children: [_jsx(Text, { color: "green", bold: true, children: "y  yes" }), _jsx(Text, { color: "red", bold: true, children: "n  no" })] })) : pasteLines > 0 ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "cyan", children: "\u2398" }), _jsxs(Text, { color: "cyan", children: ["pasted ", pasteLines, " line", pasteLines !== 1 ? 's' : ''] }), (lines.length > 1 || lines[0]) && (_jsx(Text, { color: "gray", dimColor: true, children: "+ typed text" }))] }), pastePreview && (_jsxs(Text, { color: "gray", dimColor: true, children: ["  ", pastePreview, pasteRef.current.split('\n')[0].length > cols - 6 ? '…' : ''] }))] })) : lines.length === 1 && !lines[0] ? (watchActive && isActive
+    return (_jsxs(Box, { flexDirection: "column", children: [overlay === 'command' && (_jsx(CommandPalette, { skills: allCommands, query: commandQuery, idx: overlayIdx })), overlay === 'at' && (_jsx(AtPicker, { files: filteredFiles, query: atQuery, idx: overlayIdx })), _jsx(Text, { color: "gray", dimColor: true, children: '─'.repeat(Math.max(cols, 10)) }), _jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: promptColor, bold: true, children: '> ' }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: permissionRequest ? (_jsxs(Box, { gap: 3, children: [_jsx(Text, { color: "green", bold: true, children: "y  once" }), _jsx(Text, { color: "cyan", bold: true, children: "a  session" }), _jsx(Text, { color: "red", bold: true, children: "n  deny" })] })) : pasteLines > 0 ? (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "cyan", children: "\u2398" }), _jsxs(Text, { color: "cyan", children: ["pasted ", pasteLines, " line", pasteLines !== 1 ? 's' : ''] }), (lines.length > 1 || lines[0]) && (_jsx(Text, { color: "gray", dimColor: true, children: "+ typed text" }))] }), pastePreview && (_jsxs(Text, { color: "gray", dimColor: true, children: ["  ", pastePreview, pasteRef.current.split('\n')[0].length > cols - 6 ? '…' : ''] }))] })) : lines.length === 1 && !lines[0] ? (watchActive && isActive
                             ? _jsxs(Text, { children: [_jsx(Text, { color: "cyan", dimColor: true, children: "watching\u2026 " }), _jsx(Text, { children: "\u2588" })] })
                             : _jsx(Text, { children: isActive ? '█' : ' ' })) : (lines.map((line, i) => (_jsx(Text, { children: i === cursor.row
                                 ? viewportLine(line, cursor.col, availWidth, isActive)

package/dist/tui/hooks/useRunLoop.js

@@ -3,7 +3,7 @@ import { readFileSync, writeFileSync, unlinkSync, existsSync } from 'fs';
 import { chat } from '../../llm/stream.js';
 import { tools as staticTools } from '../../tools/index.js';
 import { StreamParser, extractBareToolCall } from '../../parser/stream-parser.js';
-import { shouldCompact, compactContext, contextSize } from '../../tasks/compactor.js';
+import { shouldCompact, compactContext } from '../../tasks/compactor.js';
 import * as printer from '../printer.js';
 const MAX_TOOL_DEPTH = 10;
 const FILE_EDIT_TOOLS = new Set(['edit_file', 'create_file', 'update_file', 'delete_file']);
@@ -11,36 +11,31 @@ const SHOW_RESULT_TOOLS = new Set(['run_tests', 'git_commit']);
 const PERMISSION_TOOLS = new Set(['edit_file', 'update_file', 'delete_file', 'create_file', 'move_file', 'run_command', 'git_commit']);
 const CHECKPOINT_TOOLS = new Set(['edit_file', 'update_file', 'create_file', 'delete_file']);
 // Tool result messages that are ephemeral — never worth storing in memory or compact summaries
-const EPHEMERAL_PATTERN = /^Tool (read_file|list_files|run_tests) result:|^\[current state of|^\[Context compacted/;
+const EPHEMERAL_PATTERN = /^Tool (read_file|list_files|run_tests) result:|^\[current state of|^\[Context compacted|^\[file updated:/;
 export function stripEphemeral(messages) {
     return messages.filter(m => m.role !== 'user' || !EPHEMERAL_PATTERN.test(m.content));
 }
-export function useRunLoop(config, currentModelRef, pushHistory, extraTools = [], abortRef) {
+export function useRunLoop(config, currentModelRef, pushHistory, extraTools = [], abortRef, replaceHistory) {
     const [status, setStatus] = useState('idle');
     const [tick, setTick] = useState(0);
     const [currentTool, setCurrentTool] = useState();
     const [taskLabel, setTaskLabel] = useState();
     const [permissionRequest, setPermissionRequest] = useState(null);
     const permissionResolveRef = useRef(null);
-    const [compactRequest, setCompactRequest] = useState(null);
-    const compactResolveRef = useRef(null);
     const checkpointRef = useRef(new Map());
     const sessionApprovedRef = useRef(new Set());
     const thinkingStartRef = useRef(0);
     const extraToolsRef = useRef(extraTools);
     extraToolsRef.current = extraTools;
     const pushHistoryRef = useRef(pushHistory);
+    const replaceHistoryRef = useRef(replaceHistory);
     useEffect(() => { pushHistoryRef.current = pushHistory; }, [pushHistory]);
+    useEffect(() => { replaceHistoryRef.current = replaceHistory; }, [replaceHistory]);
     const resolvePermission = useCallback((result) => {
         permissionResolveRef.current?.(result);
         permissionResolveRef.current = null;
         setPermissionRequest(null);
     }, []);
-    const resolveCompact = useCallback((approved) => {
-        compactResolveRef.current?.(approved);
-        compactResolveRef.current = null;
-        setCompactRequest(null);
-    }, []);
     useEffect(() => {
         if (status === 'idle')
             return;
@@ -60,24 +55,16 @@ export function useRunLoop(config, currentModelRef, pushHistory, extraTools = []
         }
         let msgs = contextMsgs;
         if (shouldCompact(contextMsgs)) {
-            const approved = await new Promise(resolve => {
-                compactResolveRef.current = resolve;
-                setCompactRequest({ messageCount: Math.round(contextSize(contextMsgs) / 1000) });
-            });
-            if (approved) {
-                printer.systemMsg('compacting context…');
-                const toCompact = stripEphemeral(contextMsgs);
-                msgs = await compactContext(toCompact, {
-                    provider: config.provider,
-                    model: currentModelRef.current,
-                    baseUrl: config.baseUrl,
-                    apiKey: config.apiKey,
-                }, goal);
-                printer.systemMsg(`compacted: ${contextMsgs.length} → ${msgs.length} messages`);
-            }
-            else {
-                printer.systemMsg('keeping full context — responses may be slower');
-            }
+            printer.systemMsg('compacting context…');
+            const toCompact = stripEphemeral(contextMsgs);
+            msgs = await compactContext(toCompact, {
+                provider: config.provider,
+                model: currentModelRef.current,
+                baseUrl: config.baseUrl,
+                apiKey: config.apiKey,
+            }, goal);
+            printer.systemMsg(`compacted: ${contextMsgs.length} → ${msgs.length} messages`);
+            replaceHistoryRef.current?.(msgs.filter(m => m.role !== 'system'));
         }
         abortRef.current = new AbortController();
         await chat({
@@ -176,13 +163,13 @@ export function useRunLoop(config, currentModelRef, pushHistory, extraTools = []
                                         if (occurrences === 0) {
                                             printer.errorMsg(`patch stale: old text not found in ${filePath} — injecting fresh content`);
                                             next.push({ role: 'user', content: `Tool read_file result:\n${current}` });
-                                            next.push({ role: 'user', content: `update_file failed: old text not found in ${filePath}. The file content above is the current state. Retry update_file with the correct exact text.` });
+                                            next.push({ role: 'user', content: `update_file failed: the <old> text you used does not exist in ${filePath}. The CURRENT file content is shown above. Re-read it carefully, find the exact text you want to replace, and retry update_file using text that exactly matches what is in the file now.` });
                                             continue;
                                         }
                                         if (occurrences > 1) {
                                             printer.errorMsg(`patch ambiguous: old text matches ${occurrences} locations in ${filePath} — injecting fresh content`);
                                             next.push({ role: 'user', content: `Tool read_file result:\n${current}` });
-                                            next.push({ role: 'user', content: `update_file failed: old text matches ${occurrences} locations in ${filePath}. Use more surrounding context to make old text unique, then retry.` });
+                                            next.push({ role: 'user', content: `update_file failed: the <old> text matches ${occurrences} locations in ${filePath}. Add more surrounding lines to the <old> block to make it unique, then retry.` });
                                             continue;
                                         }
                                     }
@@ -193,12 +180,11 @@ export function useRunLoop(config, currentModelRef, pushHistory, extraTools = []
                                 if (SHOW_RESULT_TOOLS.has(tc.name))
                                     printer.toolMsg(tc.name, result);
                                 next.push({ role: 'user', content: `Tool ${tc.name} result:\n${result}` });
-                                // After any file edit, inject fresh file state so next tool sees actual content
                                 if (FILE_EDIT_TOOLS.has(tc.name)) {
                                     const filePath = tc.args.path;
                                     if (filePath && existsSync(filePath)) {
-                                        const fresh = readFileSync(filePath, 'utf-8');
-                                        next.push({ role: 'user', content: `[current state of ${filePath} after edit]\n${fresh}` });
+                                        const lineCount = readFileSync(filePath, 'utf-8').split('\n').length;
+                                        next.push({ role: 'user', content: `[file updated: ${filePath} — ${lineCount} lines]` });
                                     }
                                 }
                             }
@@ -223,7 +209,7 @@ export function useRunLoop(config, currentModelRef, pushHistory, extraTools = []
                 if (didEditFiles) {
                     const systemMsg = msgs.find(m => m.role === 'system');
                     const goalMsg = msgs.find(m => m.role === 'user' && !m.content.startsWith('[') && !m.content.startsWith('Tool '));
-                    const batchStart = msgs.length + 1; // index in next where this batch's messages start
+                    const batchStart = msgs.length; // include assistant message so model sees its own tool call on retry
                     const batchMsgs = next.slice(batchStart);
                     const slimCtx = [
                         ...(systemMsg ? [systemMsg] : []),
@@ -251,11 +237,6 @@ export function useRunLoop(config, currentModelRef, pushHistory, extraTools = []
             permissionResolveRef.current = null;
             setPermissionRequest(null);
         }
-        if (compactResolveRef.current) {
-            compactResolveRef.current(false);
-            compactResolveRef.current = null;
-            setCompactRequest(null);
-        }
         // Restore checkpointed files
         if (checkpointRef.current.size > 0) {
             let restored = 0;
@@ -285,6 +266,5 @@ export function useRunLoop(config, currentModelRef, pushHistory, extraTools = []
         thinkingStartRef,
         runLoop, handleAbort,
         permissionRequest, resolvePermission,
-        compactRequest, resolveCompact,
     };
 }

package/dist/tui/hooks/useSession.js

@@ -5,7 +5,7 @@ import { getTavilyKey, saveTavilyKey } from '../../tavily/client.js';
 import * as printer from '../printer.js';
 import { loadLongMemory, saveLongMemory, mergeFacts, formatMemoryBlock } from '../../memory/store.js';
 import { extractFacts } from '../../memory/extractor.js';
-const SHORT_MEMORY_SIZE = 40;
+const SHORT_MEMORY_SIZE = 50;
 function buildSystemPrompt(cwd, facts, extraTools = []) {
     return getSystemPrompt(`\n- CWD: ${cwd}`, extraTools) + formatMemoryBlock(facts);
 }
@@ -88,6 +88,10 @@ export function useSession(initialSession, cwd, config, extraTools = []) {
             ctx.push(extra);
         return ctx;
     }
+    function setHistory(msgs) {
+        historyRef.current = msgs;
+        scheduleSave();
+    }
     function updateMemory(newFacts) {
         if (!newFacts.length)
             return;
@@ -101,6 +105,6 @@ export function useSession(initialSession, cwd, config, extraTools = []) {
         sessionName, setSessionName, sessionNameRef,
         historyRef, saveTimerRef, systemPromptRef,
         longMemoryRef,
-        pushHistory, buildContext, renameFromMessage, updateMemory,
+        pushHistory, setHistory, buildContext, renameFromMessage, updateMemory,
     };
 }

package/dist/tui/hooks/useSubmit.js

@@ -37,7 +37,7 @@ export function useSubmit(deps) {
     const depsRef = useRef(deps);
     depsRef.current = deps;
     const handleSubmit = useCallback(async (text) => {
-        const { config, skills, cwd, projectDir, version, currentModelRef, setCurrentModel, historyRef, sessionNameRef, saveTimerRef, systemPromptRef, abortRef, setPlanningMode, runLoop, buildContext, pushHistory, setSessionName, renameFromMessage, setStatus, setTaskLabel, setCurrentTool, runRefactor, handleGit, lastGitStatusRef, mcpTools, setConfig, setConfigOpen, updateMemory, startWatch, stopWatch, } = depsRef.current;
+        const { config, skills, cwd, projectDir, version, currentModelRef, setCurrentModel, historyRef, sessionNameRef, saveTimerRef, systemPromptRef, abortRef, setPlanningMode, runLoop, buildContext, pushHistory, setSessionName, renameFromMessage, setStatus, setTaskLabel, setCurrentTool, runRefactor, handleGit, lastGitStatusRef, mcpTools, setConfig, setConfigOpen, updateMemory, startWatch, stopWatch, startDesignTeach, } = depsRef.current;
         const cmd = text.trim();
         if (cmd === '?') {
             printer.systemMsg('shortcuts:\n' +
@@ -52,7 +52,10 @@ export function useSubmit(deps) {
                 '  @filename      inject file into context\n' +
                 '  /cmd           open command palette\n' +
                 '  esc            abort / clear input\n' +
-                '  ctrl+c         abort / exit');
+                '  ctrl+c         abort / exit\n' +
+                '\ndesign commands:\n' +
+                '  /design teach  answer 7 questions → generates DESIGN.md (impeccable system)\n' +
+                '  /design <task> design or implement UI using DESIGN.md as brand context');
             return;
         }
         if (cmd === '/version') {
@@ -241,16 +244,60 @@ export function useSubmit(deps) {
                 printer.systemMsg('usage: /refactor <goal>');
                 return;
             }
+            const atRefactorContext = buildAtContext(text);
+            if (atRefactorContext)
+                pushHistory({ role: 'user', content: atRefactorContext });
             await runRefactor(goal);
             return;
         }
+        if (cmd === '/design' || cmd.startsWith('/design ')) {
+            const sub = cmd.slice(7).trim();
+            if (!sub || sub === 'teach') {
+                startDesignTeach();
+                return;
+            }
+            // Design task phase: use DESIGN.md context + impeccable principles
+            const atDesignContext = buildAtContext(text);
+            let designContext = '';
+            try {
+                const designFile = readFile(guardPath('DESIGN.md', cwd));
+                if (designFile)
+                    designContext = `\n\nProject design system (from DESIGN.md):\n${designFile}\n`;
+            }
+            catch { }
+            const impeccableRules = `
+Impeccable design rules — follow strictly:
+- Typography: purposeful font selection, modular scale, intentional pairing. No Inter/Roboto by default.
+- Color: OKLCH-based system, tinted neutrals, 4.5:1 contrast minimum. No generic gray-on-white.
+- Spatial design: consistent spacing scale, clear visual hierarchy, intentional whitespace.
+- Motion: contemporary easing (cubic-bezier not linear), respect prefers-reduced-motion.
+- Interaction: visible focus states, loading patterns, meaningful hover states.
+- Responsive: mobile-first, fluid typography where appropriate.
+- UX copy: precise microcopy in labels, errors, empty states. No lorem ipsum.
+- Anti-patterns to eliminate: nested card shadows, purple-to-blue gradients, disabled gray without reason, centered walls of text, auto-playing anything.
+- Write distinctive, crafted UI — not generic SaaS templates.
+- Write all code to files using tools. No code blocks in responses.`;
+            const taskDesc = sub.replace(/@[\w./\-]+/g, '').trim();
+            const taskPrompt = `${designContext}${impeccableRules}
+
+Design task: ${taskDesc}
+
+Analyze what exists, then implement the design. Use the design system above if available. Make it distinctive and well-crafted.`;
+            printer.userMsg(text);
+            pushHistory({ role: 'user', content: atDesignContext + taskPrompt });
+            await runLoop(buildContext(), 0, sub);
+            return;
+        }
         if (cmd.startsWith('/think ') || cmd === '/think') {
             const query = cmd.slice(6).trim();
             if (!query) {
                 printer.systemMsg('usage: /think <query>');
                 return;
             }
-            printer.userMsg(`/think ${query}`);
+            const atThinkContext = buildAtContext(text);
+            if (atThinkContext)
+                pushHistory({ role: 'user', content: atThinkContext });
+            printer.userMsg(text);
             setStatus('thinking');
             setTaskLabel(`gathering: ${query}`);
             abortRef.current = new AbortController();
@@ -473,6 +520,9 @@ export function useSubmit(deps) {
                     return;
                 }
                 if (skill.execute) {
+                    const atContext = buildAtContext(text);
+                    if (atContext)
+                        pushHistory({ role: 'user', content: atContext });
                     const ctx = {
                         messages: historyRef.current.map(m => ({ role: m.role, content: m.content })),
                         appendMessage: (_role, content) => printer.systemMsg(content),
@@ -485,8 +535,9 @@ export function useSubmit(deps) {
                     return;
                 }
                 if (skill.prompt) {
-                    printer.userMsg(skill.prompt);
-                    pushHistory({ role: 'user', content: skill.prompt });
+                    const atContext = buildAtContext(text);
+                    printer.userMsg(text);
+                    pushHistory({ role: 'user', content: atContext + skill.prompt });
                     await runLoop(buildContext());
                     return;
                 }

package/dist/tui/printer.js

@@ -25,6 +25,8 @@ const gray = (s) => col(90, s);
 const yellow = (s) => col(93, s);
 const purple = (s) => col(95, s);
 const red = (s) => col(91, s);
+function bgRed(s) { return `\x1b[48;2;65;18;18m\x1b[91m${s}${R}`; }
+function bgGreen(s) { return `\x1b[48;2;14;46;14m\x1b[92m${s}${R}`; }
 function stripMarkdown(s) {
     return s
         .replace(/\*\*\*(.+?)\*\*\*/g, '$1')
@@ -121,6 +123,7 @@ export function welcome(provider, model, cwd, version, updateAvailable, linked)
         `  ${bold(yellow('Tips for getting started'))}`,
         `  Type ${cyan('@filename')} to inject file into context`,
         `  Use ${cyan('/skill')} to run a skill or command`,
+        `  Use ${cyan('/design teach')} to generate a design system`,
         `  Use ${cyan('/config')} to switch provider, model, or API key`,
         '',
     ];
@@ -159,30 +162,42 @@ export function assistantMsg(text) {
     const tail = lines.slice(idx + 1).join('\n');
     write(`\n${blue('●')} ${head}${tail ? '\n' + tail : ''}\n`);
 }
-const EDIT_TOOLS = new Set(['edit_file', 'update_file', 'create_file', 'write_file']);
-const DELETE_TOOLS = new Set(['delete_file', 'remove_file']);
-function toolLabel(name, args) {
+export const EDIT_TOOLS = new Set(['edit_file', 'update_file', 'create_file', 'write_file']);
+export const DELETE_TOOLS = new Set(['delete_file', 'remove_file']);
+const PERM_DESC = {
+    delete_file: 'delete this file',
+    update_file: 'edit this file',
+    create_file: 'create this file',
+    edit_file: 'create this file',
+    move_file: 'move this file',
+    run_command: 'run in shell',
+    git_commit: 'commit to git',
+};
+export function permissionDesc(toolName) {
+    return PERM_DESC[toolName] ?? 'allow this action';
+}
+export function toolLabel(name, args) {
     const a = args;
     const short = (s, n = 55) => s.length > n ? s.slice(0, n) + '…' : s;
     switch (name) {
-        case 'read_file': return `Reading ${a.path ?? ''}`;
-        case 'list_files': return `Listing ${a.path || '.'}`;
-        case 'create_file': return `Creating ${a.path ?? ''}`;
-        case 'edit_file': return `Writing ${a.path ?? ''}`;
-        case 'update_file': return `Updating ${a.path ?? ''}`;
-        case 'delete_file': return `Deleting ${a.path ?? ''}`;
-        case 'move_file': return `Moving ${a.from} → ${a.to}`;
-        case 'create_folder': return `Creating folder ${a.path ?? ''}`;
-        case 'run_command': return `Running ${short(a.command ?? '')}`;
-        case 'git_status': return 'Checking git status';
-        case 'git_diff': return 'Reading diff';
-        case 'git_log': return 'Reading commits';
-        case 'git_commit': return `Committing: ${short(a.message ?? '')}`;
-        case 'run_tests': return a.path ? `Running tests › ${a.path}` : 'Running tests';
-        case 'web_search': return `Searching: ${short(a.query ?? '')}`;
-        case 'web_extract': return `Extracting page`;
-        case 'deep_think': return `Researching: ${short(a.query ?? '')}`;
-        case 'search_codebase': return `Searching codebase: ${short(a.query ?? '')}`;
+        case 'read_file': return `Read(${a.path ?? ''})`;
+        case 'list_files': return `List(${a.path || '.'})`;
+        case 'create_file': return `Create(${a.path ?? ''})`;
+        case 'edit_file': return `Create(${a.path ?? ''})`;
+        case 'update_file': return `Update(${a.path ?? ''})`;
+        case 'delete_file': return `Delete(${a.path ?? ''})`;
+        case 'move_file': return `Move(${a.from} → ${a.to})`;
+        case 'create_folder': return `Mkdir(${a.path ?? ''})`;
+        case 'run_command': return `Run(${short(a.command ?? '')})`;
+        case 'git_status': return 'Git(status)';
+        case 'git_diff': return 'Git(diff)';
+        case 'git_log': return 'Git(log)';
+        case 'git_commit': return `Git(commit: ${short(a.message ?? '')})`;
+        case 'run_tests': return a.path ? `Test(${a.path})` : 'Test(suite)';
+        case 'web_search': return `Search(${short(a.query ?? '')})`;
+        case 'web_extract': return `Extract(${Array.isArray(a.urls) ? String(a.urls[0] ?? '') : String(a.urls ?? 'url')})`;
+        case 'deep_think': return `Think(${short(a.query ?? '')})`;
+        case 'search_codebase': return `Index(${short(a.query ?? '')})`;
         default: {
             const s = toolArgSummary(args);
             return s ? `${name} ${s}` : name;
@@ -192,20 +207,31 @@ function toolLabel(name, args) {
 export function planSummary(tools) {
     if (!tools.length)
         return;
-    const header = gray(`─ plan (${tools.length} action${tools.length === 1 ? '' : 's'})`);
-    write(header + '\n');
+    const lines = [gray(`─ plan (${tools.length} action${tools.length === 1 ? '' : 's'})`)];
     for (const t of tools) {
         const dot = DELETE_TOOLS.has(t.name) ? red('◦') : EDIT_TOOLS.has(t.name) ? green('◦') : blue('◦');
-        const label = toolLabel(t.name, t.args);
-        write(`  ${dot} ${gray(label)}\n`);
+        lines.push(`  ${dot} ${gray(toolLabel(t.name, t.args))}`);
     }
+    write(lines.join('\n') + '\n');
 }
 const DIFF_CTX = 2;
 const DIFF_MAX = 40;
 function printUpdateDiff(filePath, oldText, newText) {
     const oldLines = oldText.split('\n');
     const newLines = newText.split('\n');
-    write(gray(`  └ Added ${newLines.length} line${newLines.length !== 1 ? 's' : ''}, removed ${oldLines.length} line${oldLines.length !== 1 ? 's' : ''}\n`));
+    const addedCount = newLines.length;
+    const removedCount = oldLines.length;
+    const parts = [];
+    if (addedCount > 0 && removedCount > 0) {
+        parts.push(green(`+${addedCount}`), gray(' / '), red(`-${removedCount}`));
+    }
+    else if (addedCount > 0) {
+        parts.push(green(`+${addedCount} line${addedCount !== 1 ? 's' : ''}`));
+    }
+    else {
+        parts.push(red(`-${removedCount} line${removedCount !== 1 ? 's' : ''}`));
+    }
+    const out = [`  ${gray('└')} ${parts.join('')}\n`];
     let fileLines = [];
     let lineOffset = 0;
     try {
@@ -216,47 +242,50 @@ function printUpdateDiff(filePath, oldText, newText) {
             if (idx >= 0)
                 lineOffset = content.slice(0, idx).split('\n').length - 1;
             else
-                fileLines = []; // old text not in file — skip context lines
+                fileLines = [];
         }
     }
     catch { }
     let shown = 0;
     const ctxStart = Math.max(0, lineOffset - DIFF_CTX);
     for (let i = ctxStart; i < lineOffset && shown < DIFF_MAX; i++, shown++) {
-        write(gray(`  ${String(i + 1).padStart(4)}    ${fileLines[i] ?? ''}\n`));
+        out.push(`  ${gray(String(i + 1).padStart(4))}  ${gray(fileLines[i] ?? '')}\n`);
     }
     for (let i = 0; i < oldLines.length && shown < DIFF_MAX; i++, shown++) {
-        write(`  ${gray(String(lineOffset + i + 1).padStart(4))} ${red('- ')}${red(oldLines[i])}\n`);
+        out.push(`  ${gray(String(lineOffset + i + 1).padStart(4))} ${bgRed(`- ${oldLines[i]}`)}\n`);
     }
     for (let i = 0; i < newLines.length && shown < DIFF_MAX; i++, shown++) {
-        write(`  ${gray(String(lineOffset + i + 1).padStart(4))} ${green('+ ')}${green(newLines[i])}\n`);
+        out.push(`  ${gray(String(lineOffset + i + 1).padStart(4))} ${bgGreen(`+ ${newLines[i]}`)}\n`);
     }
     const ctxEnd = Math.min(fileLines.length, lineOffset + oldLines.length + DIFF_CTX);
     for (let i = lineOffset + oldLines.length; i < ctxEnd && shown < DIFF_MAX; i++, shown++) {
-        write(gray(`  ${String(i + 1).padStart(4)}    ${fileLines[i] ?? ''}\n`));
+        out.push(`  ${gray(String(i + 1).padStart(4))}  ${gray(fileLines[i] ?? '')}\n`);
     }
+    return out.join('');
 }
 function printEditPreview(content) {
     const lines = content.split('\n');
     const visible = lines.slice(0, DIFF_MAX);
     const hidden = lines.length - visible.length;
-    write(gray(`  └ ${lines.length} line${lines.length !== 1 ? 's' : ''}\n`));
+    const out = [`  ${gray('└')} ${green(`+${lines.length} line${lines.length !== 1 ? 's' : ''}`)}\n`];
     visible.forEach((line, i) => {
-        write(`  ${gray(String(i + 1).padStart(4))} ${green('+ ')}${green(line)}\n`);
+        out.push(`  ${gray(String(i + 1).padStart(4))} ${bgGreen(`+ ${line}`)}\n`);
     });
     if (hidden > 0)
-        write(gray(`  …${hidden} more line${hidden !== 1 ? 's' : ''}\n`));
+        out.push(gray(`  …${hidden} more line${hidden !== 1 ? 's' : ''}\n`));
+    return out.join('');
 }
 export function toolCallStart(name, args) {
     const dot = DELETE_TOOLS.has(name) ? red('●') : EDIT_TOOLS.has(name) ? green('●') : blue('●');
-    write(`\n${dot} ${bold(toolLabel(name, args))}\n`);
+    let out = `\n${dot} ${bold(toolLabel(name, args))}\n`;
     const a = args;
     if (name === 'update_file' && a.old && a.new && a.path) {
-        printUpdateDiff(a.path, a.old, a.new);
+        out += printUpdateDiff(a.path, a.old, a.new);
     }
-    else if (name === 'edit_file' && a.content && a.path) {
-        printEditPreview(a.content);
+    else if ((name === 'edit_file' || name === 'create_file') && a.content && a.path) {
+        out += printEditPreview(a.content);
     }
+    write(out);
 }
 export function toolResultSummary(name, args, result) {
     const a = args;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miii-cli",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "type": "module",
   "description": "The high-performance local AI coding agent for your terminal. Automate complex workflows with local LLMs.",
   "license": "MIT",