miii-cli 1.2.2 → 1.2.3

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

@@ -114,7 +114,8 @@ export const tools = [
         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 out = [stdout, stderr ? `stderr: ${stderr}` : ''].filter(Boolean).join('\n').trim();
+            return out.length > 8000 ? out.slice(0, 8000) + '\n…[truncated]' : out;
         },
     },
     {
@@ -278,16 +279,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 +294,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 +309,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,10 +1,13 @@
 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 { MacroQueue } from '../tasks/queue.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", 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'
                     ? _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');
@@ -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
@@ -453,10 +448,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 +470,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']);
@@ -15,32 +15,27 @@ const EPHEMERAL_PATTERN = /^Tool (read_file|list_files|run_tests) result:|^\[cur
 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({
@@ -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]` });
                                     }
                                 }
                             }
@@ -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') {
@@ -244,6 +247,42 @@ export function useSubmit(deps) {
             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
+            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 taskPrompt = `${designContext}${impeccableRules}
+
+Design task: ${sub}
+
+Analyze what exists, then implement the design. Use the design system above if available. Make it distinctive and well-crafted.`;
+            printer.userMsg(`/design ${sub}`);
+            pushHistory({ role: 'user', content: taskPrompt });
+            await runLoop(buildContext(), 0, sub);
+            return;
+        }
         if (cmd.startsWith('/think ') || cmd === '/think') {
             const query = cmd.slice(6).trim();
             if (!query) {

package/package.json

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