claude-think 0.2.1 → 0.3.1

package/.claude/settings.local.json

@@ -29,7 +29,8 @@
       "Bash(xargs:*)",
       "WebSearch",
       "Bash(__NEW_LINE_db734bce153d7d1e__ echo \"\")",
-      "Bash(git checkout:*)"
+      "Bash(git checkout:*)",
+      "Bash(npm i:*)"
     ]
   }
 }

package/CHANGELOG.md

@@ -5,6 +5,30 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.1] - 2025-02-05
+
+### Fixed
+- Responsive TUI - adapts to terminal width:
+  - Narrow terminals (<80 cols): compact nav labels, shorter status
+  - Very narrow (<50 cols): minimal header, single nav indicator
+  - Footer shortcuts adjust to available space
+
+## [0.3.0] - 2025-02-05
+
+### Added
+- Enhanced TUI with new features:
+  - **Status bar** - shows learnings count, pending count, last sync time
+  - **Quick actions menu** (press `a`) - sync, add learning, search
+  - **Preview panel** (press `p`) - view generated CLAUDE.md with scrolling
+  - **Search** (press `/`) - search across all config files
+  - **Better help screen** (press `?`) - organized shortcuts and CLI commands
+- New keyboard shortcuts: `a` actions, `p` preview, `/` search, `Ctrl+S` sync
+- Bordered content panels for cleaner visual design
+
+### Changed
+- TUI now uses modals for actions, preview, search, and help
+- Improved navigation hints in footer
+
 ## [0.2.1] - 2025-02-05
 
 ### Added

package/README.md

@@ -25,7 +25,7 @@ Personal context manager for Claude. Stop repeating yourself.
 
 ```bash
 # With bun (recommended)
-bun install -g claude-think
+bun add -g claude-think
 
 # With npm
 npm install -g claude-think
@@ -47,8 +47,8 @@ claude
 ## How it works
 
 1. Your preferences live in `~/.think/` (markdown files)
-2. `think sync` generates a Claude plugin at `~/.claude/plugins/think/`
-3. Claude Code auto-loads the plugin, so your context is always there
+2. `think sync` generates `~/.claude/CLAUDE.md`
+3. Claude Code auto-loads CLAUDE.md at session start
 
 ## Commands
 
@@ -65,6 +65,7 @@ claude
 | `think edit <file>` | Edit any config file |
 | `think allow "cmd"` | Pre-approve a command |
 | `think tree` | Preview project file tree |
+| `think project learn` | Generate CLAUDE.md for current project |
 | `think help` | Show all commands |
 
 ## What you can configure

package/bun.lock

@@ -10,6 +10,7 @@
         "commander": "^14.0.3",
         "gray-matter": "^4.0.3",
         "ink": "^6.6.0",
+        "ink-text-input": "^6.0.0",
         "react": "^19.2.4",
         "string-similarity": "^4.0.4",
       },
@@ -86,6 +87,8 @@
 
     "ink": ["ink@6.6.0", "", { "dependencies": { "@alcalzone/ansi-tokenize": "^0.2.1", "ansi-escapes": "^7.2.0", "ansi-styles": "^6.2.1", "auto-bind": "^5.0.1", "chalk": "^5.6.0", "cli-boxes": "^3.0.0", "cli-cursor": "^4.0.0", "cli-truncate": "^5.1.1", "code-excerpt": "^4.0.0", "es-toolkit": "^1.39.10", "indent-string": "^5.0.0", "is-in-ci": "^2.0.0", "patch-console": "^2.0.0", "react-reconciler": "^0.33.0", "signal-exit": "^3.0.7", "slice-ansi": "^7.1.0", "stack-utils": "^2.0.6", "string-width": "^8.1.0", "type-fest": "^4.27.0", "widest-line": "^5.0.0", "wrap-ansi": "^9.0.0", "ws": "^8.18.0", "yoga-layout": "~3.2.1" }, "peerDependencies": { "@types/react": ">=19.0.0", "react": ">=19.0.0", "react-devtools-core": "^6.1.2" }, "optionalPeers": ["@types/react", "react-devtools-core"] }, "sha512-QDt6FgJxgmSxAelcOvOHUvFxbIUjVpCH5bx+Slvc5m7IEcpGt3dYwbz/L+oRnqEGeRvwy1tineKK4ect3nW1vQ=="],
 
+    "ink-text-input": ["ink-text-input@6.0.0", "", { "dependencies": { "chalk": "^5.3.0", "type-fest": "^4.18.2" }, "peerDependencies": { "ink": ">=5", "react": ">=18" } }, "sha512-Fw64n7Yha5deb1rHY137zHTAbSTNelUKuB5Kkk2HACXEtwIHBCf9OH2tP/LQ9fRYTl1F0dZgbW0zPnZk6FA9Lw=="],
+
     "is-extendable": ["is-extendable@0.1.1", "", {}, "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw=="],
 
     "is-fullwidth-code-point": ["is-fullwidth-code-point@5.1.0", "", { "dependencies": { "get-east-asian-width": "^1.3.1" } }, "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ=="],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-think",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Personal context manager for Claude - manage your preferences, patterns, and memory",
   "author": "Amit Feldman",
   "license": "MIT",
@@ -32,6 +32,7 @@
     "commander": "^14.0.3",
     "gray-matter": "^4.0.3",
     "ink": "^6.6.0",
+    "ink-text-input": "^6.0.0",
     "react": "^19.2.4",
     "string-similarity": "^4.0.4"
   }

package/src/tui/App.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Box, Text, useInput, useApp } from "ink";
+import { Box, Text, useInput, useApp, useStdout } from "ink";
 import { Navigation } from "./components/Navigation";
 import { Profile } from "./components/Profile";
 import { Preferences } from "./components/Preferences";
@@ -9,9 +9,14 @@ import { Skills } from "./components/Skills";
 import { Agents } from "./components/Agents";
 import { Automation } from "./components/Automation";
 import { Help } from "./components/Help";
+import { StatusBar } from "./components/StatusBar";
+import { QuickActions } from "./components/QuickActions";
+import { Preview } from "./components/Preview";
+import { Search } from "./components/Search";
 import { existsSync } from "fs";
 import { CONFIG } from "../core/config";
 
+// Note: "help" is handled as a modal, not a navigation section
 type Section =
   | "profile"
   | "preferences"
@@ -19,39 +24,110 @@ type Section =
   | "permissions"
   | "skills"
   | "agents"
-  | "automation"
-  | "help";
+  | "automation";
+
+type Modal = "none" | "help" | "actions" | "preview" | "search";
 
 export function App() {
   const { exit } = useApp();
+  const { stdout } = useStdout();
   const [section, setSection] = useState<Section>("profile");
-  const [showHelp, setShowHelp] = useState(false);
+  const [modal, setModal] = useState<Modal>("none");
+  const [statusMessage, setStatusMessage] = useState<string | undefined>();
   const [initialized, setInitialized] = useState(false);
 
+  // Get terminal dimensions
+  const width = stdout?.columns ?? 80;
+  const isNarrow = width < 80;
+  const isVeryNarrow = width < 50;
+
   useEffect(() => {
     setInitialized(existsSync(CONFIG.thinkDir));
   }, []);
 
   useInput((input, key) => {
+    // Global shortcuts (when no modal open)
+    if (modal !== "none") return;
+
     if (input === "q" || (key.ctrl && input === "c")) {
       exit();
     }
     if (input === "?") {
-      setShowHelp(!showHelp);
+      setModal("help");
+    }
+    if (key.ctrl && input === "s") {
+      setModal("actions");
+    }
+    if (input === "a") {
+      setModal("actions");
+    }
+    if (input === "p") {
+      setModal("preview");
+    }
+    if (input === "/" || (key.ctrl && input === "f")) {
+      setModal("search");
     }
   });
 
+  function handleMessage(msg: string) {
+    setStatusMessage(msg);
+    setTimeout(() => setStatusMessage(undefined), 3000);
+  }
+
   if (!initialized) {
     return (
       <Box flexDirection="column" padding={1}>
-        <Text color="red">~/.think not found.</Text>
-        <Text>Run `think init` first, then launch the TUI.</Text>
+        <Box
+          borderStyle="round"
+          borderColor="red"
+          paddingX={2}
+          paddingY={1}
+          flexDirection="column"
+        >
+          <Text color="red" bold>
+            ~/.think not found
+          </Text>
+          <Box marginTop={1}>
+            <Text color="gray">Run `think init` first, then launch the TUI.</Text>
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Render modals
+  if (modal === "help") {
+    return <Help onClose={() => setModal("none")} />;
+  }
+
+  if (modal === "actions") {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Header width={width} />
+        <QuickActions
+          onMessage={handleMessage}
+          onClose={() => setModal("none")}
+        />
       </Box>
     );
   }
 
-  if (showHelp) {
-    return <Help onClose={() => setShowHelp(false)} />;
+  if (modal === "preview") {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Header width={width} />
+        <Preview onClose={() => setModal("none")} />
+      </Box>
+    );
+  }
+
+  if (modal === "search") {
+    return (
+      <Box flexDirection="column" padding={1}>
+        <Header width={width} />
+        <Search onClose={() => setModal("none")} />
+      </Box>
+    );
   }
 
   const renderSection = () => {
@@ -77,24 +153,54 @@ export function App() {
 
   return (
     <Box flexDirection="column">
-      <Box marginBottom={1}>
-        <Text color="green" bold>
-          ▀█▀ █░█ █ █▄░█ █▄▀
-        </Text>
-        <Text color="gray"> Personal Context for Claude</Text>
-      </Box>
+      <Header width={width} />
 
       <Navigation currentSection={section} onSectionChange={setSection} />
 
-      <Box flexDirection="column" marginTop={1}>
+      <Box
+        flexDirection="column"
+        marginTop={1}
+        borderStyle="single"
+        borderColor="gray"
+        padding={1}
+        minHeight={15}
+      >
         {renderSection()}
       </Box>
 
+      <Box marginTop={1}>
+        <StatusBar message={statusMessage} />
+      </Box>
+
       <Box marginTop={1}>
         <Text color="gray">
-          Tab: switch sections | ?: help | q: quit
+          {isNarrow
+            ? "Tab:nav a:act p:prev /:search ?:help q:quit"
+            : "Tab: sections | a: actions | p: preview | /: search | ?: help | q: quit"}
         </Text>
       </Box>
     </Box>
   );
 }
+
+function Header({ width }: { width: number }) {
+  // Full banner needs ~45 chars, compact needs ~25
+  if (width >= 50) {
+    return (
+      <Box marginBottom={1}>
+        <Text color="green" bold>
+          ▀█▀ █░█ █ █▄░█ █▄▀
+        </Text>
+        <Text color="gray"> Personal Context for Claude</Text>
+      </Box>
+    );
+  }
+
+  // Compact header for narrow terminals
+  return (
+    <Box marginBottom={1}>
+      <Text color="green" bold>think</Text>
+      <Text color="gray"> - Claude Context</Text>
+    </Box>
+  );
+}

package/src/tui/components/Help.tsx

@@ -16,40 +16,70 @@ export function Help({ onClose }: HelpProps) {
     <Box flexDirection="column" padding={1}>
       <Box marginBottom={1}>
         <Text bold color="green">
-          Keyboard Shortcuts
+          ▀█▀ █░█ █ █▄░█ █▄▀
         </Text>
+        <Text color="gray"> Help</Text>
       </Box>
 
-      <Box flexDirection="column" paddingLeft={1}>
-        <Text key="nav-header" bold color="cyan">Navigation</Text>
-        <Text key="nav-1">  Tab / Shift+Tab   Switch sections</Text>
-        <Text key="nav-2">  1-7               Jump to section</Text>
-        <Text key="nav-3">  ← / →             Switch sub-sections</Text>
-        <Text key="nav-4">  ↑ / ↓             Select item in list</Text>
-        <Text key="nav-spacer"> </Text>
-
-        <Text key="act-header" bold color="cyan">Actions</Text>
-        <Text key="act-1">  e                 Edit in $EDITOR</Text>
-        <Text key="act-2">  n                 Create new (skills/agents)</Text>
-        <Text key="act-3">  Enter             Select / Open</Text>
-        <Text key="act-spacer"> </Text>
-
-        <Text key="gen-header" bold color="cyan">General</Text>
-        <Text key="gen-1">  ?                 Toggle help</Text>
-        <Text key="gen-2">  q / Ctrl+C        Quit</Text>
-        <Text key="gen-spacer"> </Text>
-
-        <Text key="cli-header" bold color="cyan">CLI Commands</Text>
-        <Text key="cli-1">  think init        Initialize ~/.think</Text>
-        <Text key="cli-2">  think sync        Sync to Claude plugin</Text>
-        <Text key="cli-3">  think status      Show status</Text>
-        <Text key="cli-4">  think learn       Add a learning</Text>
-        <Text key="cli-5">  think review      Review pending learnings</Text>
-        <Text key="cli-6">  think allow       Add allowed command</Text>
+      <Box
+        flexDirection="column"
+        borderStyle="single"
+        borderColor="gray"
+        padding={1}
+      >
+        <Box flexDirection="row">
+          <Box flexDirection="column" marginRight={4}>
+            <Text bold color="cyan">Navigation</Text>
+            <Text><Text color="green">Tab</Text>         Switch sections</Text>
+            <Text><Text color="green">1-7</Text>         Jump to section</Text>
+            <Text><Text color="green">←/→</Text>         Sub-sections</Text>
+            <Text><Text color="green">↑/↓</Text>         Select item</Text>
+          </Box>
+
+          <Box flexDirection="column" marginRight={4}>
+            <Text bold color="cyan">Quick Actions</Text>
+            <Text><Text color="green">a</Text>           Actions menu</Text>
+            <Text><Text color="green">p</Text>           Preview CLAUDE.md</Text>
+            <Text><Text color="green">/</Text>           Search</Text>
+            <Text><Text color="green">Ctrl+S</Text>      Sync</Text>
+          </Box>
+
+          <Box flexDirection="column">
+            <Text bold color="cyan">Editing</Text>
+            <Text><Text color="green">e</Text>           Edit in $EDITOR</Text>
+            <Text><Text color="green">n</Text>           Create new item</Text>
+            <Text><Text color="green">Enter</Text>       Select/Open</Text>
+            <Text><Text color="green">Esc</Text>         Close modal</Text>
+          </Box>
+        </Box>
+
+        <Box marginTop={1} flexDirection="column">
+          <Text bold color="cyan">CLI Commands</Text>
+          <Box flexDirection="row">
+            <Box flexDirection="column" marginRight={2}>
+              <Text color="gray">think init</Text>
+              <Text color="gray">think setup</Text>
+              <Text color="gray">think sync</Text>
+              <Text color="gray">think status</Text>
+            </Box>
+            <Box flexDirection="column" marginRight={2}>
+              <Text color="gray">think learn "..."</Text>
+              <Text color="gray">think review</Text>
+              <Text color="gray">think profile</Text>
+              <Text color="gray">think edit &lt;file&gt;</Text>
+            </Box>
+            <Box flexDirection="column">
+              <Text color="gray">think allow "cmd"</Text>
+              <Text color="gray">think tree</Text>
+              <Text color="gray">think project learn</Text>
+              <Text color="gray">think help</Text>
+            </Box>
+          </Box>
+        </Box>
       </Box>
 
       <Box marginTop={1}>
-        <Text color="gray">Press ? or Escape to close</Text>
+        <Text color="gray">Press ? or Esc to close</Text>
       </Box>
     </Box>
   );

package/src/tui/components/Navigation.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Text, useInput } from "ink";
+import { Box, Text, useInput, useStdout } from "ink";
 
 type Section =
   | "profile"
@@ -15,38 +15,76 @@ interface NavigationProps {
   onSectionChange: (section: Section) => void;
 }
 
-const sections: { key: Section; label: string }[] = [
-  { key: "profile", label: "Profile" },
-  { key: "preferences", label: "Preferences" },
-  { key: "memory", label: "Memory" },
-  { key: "permissions", label: "Permissions" },
-  { key: "skills", label: "Skills" },
-  { key: "agents", label: "Agents" },
-  { key: "automation", label: "Automation" },
+const sections: { key: Section; label: string; short: string }[] = [
+  { key: "profile", label: "Profile", short: "Prof" },
+  { key: "preferences", label: "Preferences", short: "Pref" },
+  { key: "memory", label: "Memory", short: "Mem" },
+  { key: "permissions", label: "Permissions", short: "Perm" },
+  { key: "skills", label: "Skills", short: "Skill" },
+  { key: "agents", label: "Agents", short: "Agent" },
+  { key: "automation", label: "Automation", short: "Auto" },
 ];
 
 export function Navigation({
   currentSection,
   onSectionChange,
 }: NavigationProps) {
+  const { stdout } = useStdout();
+  const width = stdout?.columns ?? 80;
+  const isNarrow = width < 80;
+  const isVeryNarrow = width < 50;
+
   useInput((input, key) => {
     if (key.tab) {
       const currentIndex = sections.findIndex((s) => s.key === currentSection);
       const nextIndex = key.shift
         ? (currentIndex - 1 + sections.length) % sections.length
         : (currentIndex + 1) % sections.length;
-      onSectionChange(sections[nextIndex].key);
+      onSectionChange(sections[nextIndex]!.key);
     }
 
     // Number keys for quick navigation
     const num = parseInt(input);
     if (num >= 1 && num <= sections.length) {
-      onSectionChange(sections[num - 1].key);
+      onSectionChange(sections[num - 1]!.key);
     }
   });
 
+  // Very narrow: show only current + numbers
+  if (isVeryNarrow) {
+    const currentIdx = sections.findIndex((s) => s.key === currentSection);
+    const current = sections[currentIdx]!;
+    return (
+      <Box>
+        <Text color="green" bold>
+          [{currentIdx + 1}/{sections.length}] {current.label}
+        </Text>
+        <Text color="gray"> (Tab/1-7)</Text>
+      </Box>
+    );
+  }
+
+  // Narrow: use short labels
+  if (isNarrow) {
+    return (
+      <Box flexWrap="wrap">
+        {sections.map((section, index) => (
+          <Box key={section.key} marginRight={1}>
+            <Text
+              color={currentSection === section.key ? "green" : "gray"}
+              bold={currentSection === section.key}
+            >
+              {index + 1}.{section.short}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+    );
+  }
+
+  // Full width: show full labels with indicator
   return (
-    <Box>
+    <Box flexWrap="wrap">
       {sections.map((section, index) => (
         <Box key={section.key} marginRight={1}>
           <Text

package/src/tui/components/Preview.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import { readFile } from "fs/promises";
+import { existsSync } from "fs";
+import { CONFIG } from "../../core/config";
+
+interface PreviewProps {
+  onClose: () => void;
+}
+
+export function Preview({ onClose }: PreviewProps) {
+  const [content, setContent] = useState<string[]>([]);
+  const [scroll, setScroll] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const maxLines = 20;
+
+  useEffect(() => {
+    loadPreview();
+  }, []);
+
+  async function loadPreview() {
+    if (existsSync(CONFIG.claudeMdPath)) {
+      const text = await readFile(CONFIG.claudeMdPath, "utf-8");
+      setContent(text.split("\n"));
+    }
+    setLoading(false);
+  }
+
+  useInput((input, key) => {
+    if (key.escape || input === "q") {
+      onClose();
+    }
+    if (key.upArrow || input === "k") {
+      setScroll((s) => Math.max(0, s - 1));
+    }
+    if (key.downArrow || input === "j") {
+      setScroll((s) => Math.min(content.length - maxLines, s + 1));
+    }
+    if (key.pageUp) {
+      setScroll((s) => Math.max(0, s - maxLines));
+    }
+    if (key.pageDown) {
+      setScroll((s) => Math.min(content.length - maxLines, s + maxLines));
+    }
+  });
+
+  if (loading) {
+    return <Text color="gray">Loading preview...</Text>;
+  }
+
+  const visibleLines = content.slice(scroll, scroll + maxLines);
+  const scrollPercent = content.length > maxLines
+    ? Math.round((scroll / (content.length - maxLines)) * 100)
+    : 100;
+
+  return (
+    <Box flexDirection="column" borderStyle="single" borderColor="cyan" padding={1}>
+      <Box marginBottom={1}>
+        <Text bold color="cyan">CLAUDE.md Preview</Text>
+        <Text color="gray"> ({content.length} lines)</Text>
+        <Box flexGrow={1} />
+        <Text color="gray">{scrollPercent}%</Text>
+      </Box>
+
+      <Box flexDirection="column" height={maxLines}>
+        {visibleLines.map((line, i) => {
+          let color: string | undefined;
+          if (line.startsWith("# ")) color = "green";
+          else if (line.startsWith("## ")) color = "yellow";
+          else if (line.startsWith("- ")) color = "white";
+          else if (line.startsWith("**")) color = "cyan";
+
+          return (
+            <Text key={scroll + i} color={color} dimColor={!color}>
+              {line || " "}
+            </Text>
+          );
+        })}
+      </Box>
+
+      <Box marginTop={1}>
+        <Text color="gray">↑↓/jk: scroll | PgUp/PgDn: page | Esc: close</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/QuickActions.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import { generatePlugin } from "../../core/generator";
+import { addLearning } from "../../core/dedup";
+import { readFile, writeFile } from "fs/promises";
+import { existsSync } from "fs";
+import { thinkPath, CONFIG } from "../../core/config";
+
+interface QuickActionsProps {
+  onMessage: (msg: string) => void;
+  onClose: () => void;
+}
+
+type Action = "menu" | "sync" | "learn" | "search";
+
+export function QuickActions({ onMessage, onClose }: QuickActionsProps) {
+  const [action, setAction] = useState<Action>("menu");
+  const [input, setInput] = useState("");
+  const [selected, setSelected] = useState(0);
+
+  const menuItems = [
+    { key: "s", label: "Sync", desc: "Regenerate CLAUDE.md" },
+    { key: "l", label: "Learn", desc: "Add a new learning" },
+    { key: "f", label: "Search", desc: "Search all files" },
+  ];
+
+  useInput((key, mod) => {
+    if (mod.escape || key === "q") {
+      if (action === "menu") {
+        onClose();
+      } else {
+        setAction("menu");
+        setInput("");
+      }
+      return;
+    }
+
+    if (action === "menu") {
+      if (mod.upArrow || key === "k") {
+        setSelected((s) => (s - 1 + menuItems.length) % menuItems.length);
+      }
+      if (mod.downArrow || key === "j") {
+        setSelected((s) => (s + 1) % menuItems.length);
+      }
+      if (mod.return) {
+        const item = menuItems[selected]!;
+        if (item.key === "s") handleSync();
+        else if (item.key === "l") setAction("learn");
+        else if (item.key === "f") setAction("search");
+      }
+      // Quick keys
+      if (key === "s") handleSync();
+      if (key === "l") setAction("learn");
+      if (key === "f") setAction("search");
+    }
+  });
+
+  async function handleSync() {
+    onMessage("Syncing...");
+    try {
+      await generatePlugin();
+      onMessage("Synced successfully!");
+    } catch (e) {
+      onMessage("Sync failed!");
+    }
+    setTimeout(onClose, 1500);
+  }
+
+  async function handleLearn() {
+    if (!input.trim()) return;
+
+    const learningsPath = thinkPath(CONFIG.files.learnings);
+    let content = "";
+    if (existsSync(learningsPath)) {
+      content = await readFile(learningsPath, "utf-8");
+    }
+
+    const result = addLearning(content, input.trim());
+    if (result.added) {
+      await writeFile(learningsPath, result.newContent);
+      onMessage(`Added: "${input.trim()}"`);
+      await generatePlugin();
+    } else {
+      onMessage(`Similar exists: "${result.similar}"`);
+    }
+    setInput("");
+    setTimeout(onClose, 1500);
+  }
+
+  if (action === "menu") {
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="green" padding={1}>
+        <Text bold color="green">Quick Actions</Text>
+        <Box flexDirection="column" marginTop={1}>
+          {menuItems.map((item, i) => (
+            <Box key={item.key}>
+              <Text color={i === selected ? "green" : "gray"}>
+                {i === selected ? "▸ " : "  "}
+              </Text>
+              <Text color={i === selected ? "white" : "gray"} bold={i === selected}>
+                [{item.key}] {item.label}
+              </Text>
+              <Text color="gray"> - {item.desc}</Text>
+            </Box>
+          ))}
+        </Box>
+        <Box marginTop={1}>
+          <Text color="gray">↑↓: navigate | Enter: select | Esc: close</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (action === "learn") {
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="yellow" padding={1}>
+        <Text bold color="yellow">Add Learning</Text>
+        <Box marginTop={1}>
+          <Text color="gray">▸ </Text>
+          <TextInput
+            value={input}
+            onChange={setInput}
+            onSubmit={handleLearn}
+            placeholder="Type your learning..."
+          />
+        </Box>
+        <Box marginTop={1}>
+          <Text color="gray">Enter: add | Esc: cancel</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (action === "search") {
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1}>
+        <Text bold color="cyan">Search</Text>
+        <Box marginTop={1}>
+          <Text color="gray">▸ </Text>
+          <TextInput
+            value={input}
+            onChange={setInput}
+            placeholder="Search term..."
+          />
+        </Box>
+        <Box marginTop={1}>
+          <Text color="gray">Enter: search | Esc: cancel</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return null;
+}

package/src/tui/components/Search.tsx

@@ -0,0 +1,129 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import { readFile } from "fs/promises";
+import { existsSync } from "fs";
+import { thinkPath, CONFIG } from "../../core/config";
+
+interface SearchProps {
+  onClose: () => void;
+}
+
+interface SearchResult {
+  file: string;
+  line: number;
+  content: string;
+}
+
+const searchFiles = [
+  { name: "profile", path: CONFIG.files.profile },
+  { name: "tools", path: CONFIG.files.tools },
+  { name: "patterns", path: CONFIG.files.patterns },
+  { name: "anti-patterns", path: CONFIG.files.antiPatterns },
+  { name: "learnings", path: CONFIG.files.learnings },
+  { name: "corrections", path: CONFIG.files.corrections },
+  { name: "subagents", path: CONFIG.files.subagents },
+  { name: "workflows", path: CONFIG.files.workflows },
+];
+
+export function Search({ onClose }: SearchProps) {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [selected, setSelected] = useState(0);
+  const [searching, setSearching] = useState(false);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onClose();
+    }
+    if (key.upArrow || (key.ctrl && input === "p")) {
+      setSelected((s) => Math.max(0, s - 1));
+    }
+    if (key.downArrow || (key.ctrl && input === "n")) {
+      setSelected((s) => Math.min(results.length - 1, s + 1));
+    }
+  });
+
+  async function handleSearch(q: string) {
+    setQuery(q);
+    if (q.length < 2) {
+      setResults([]);
+      return;
+    }
+
+    setSearching(true);
+    const found: SearchResult[] = [];
+    const lowerQuery = q.toLowerCase();
+
+    for (const file of searchFiles) {
+      const fullPath = thinkPath(file.path);
+      if (!existsSync(fullPath)) continue;
+
+      const content = await readFile(fullPath, "utf-8");
+      const lines = content.split("\n");
+
+      lines.forEach((line, i) => {
+        if (line.toLowerCase().includes(lowerQuery)) {
+          found.push({
+            file: file.name,
+            line: i + 1,
+            content: line.trim(),
+          });
+        }
+      });
+    }
+
+    setResults(found.slice(0, 15));
+    setSelected(0);
+    setSearching(false);
+  }
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1}>
+      <Box marginBottom={1}>
+        <Text bold color="cyan">Search</Text>
+        {results.length > 0 && (
+          <Text color="gray"> ({results.length} results)</Text>
+        )}
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text color="cyan">▸ </Text>
+        <TextInput
+          value={query}
+          onChange={handleSearch}
+          placeholder="Type to search..."
+        />
+      </Box>
+
+      {searching && <Text color="gray">Searching...</Text>}
+
+      {results.length > 0 && (
+        <Box flexDirection="column" marginTop={1}>
+          {results.map((r, i) => (
+            <Box key={`${r.file}-${r.line}`}>
+              <Text color={i === selected ? "cyan" : "gray"}>
+                {i === selected ? "▸ " : "  "}
+              </Text>
+              <Text color="yellow">{r.file}</Text>
+              <Text color="gray">:{r.line} </Text>
+              <Text color={i === selected ? "white" : "gray"}>
+                {r.content.length > 50
+                  ? r.content.substring(0, 50) + "..."
+                  : r.content}
+              </Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+
+      {query.length >= 2 && results.length === 0 && !searching && (
+        <Text color="gray">No results found</Text>
+      )}
+
+      <Box marginTop={1}>
+        <Text color="gray">↑↓: navigate | Esc: close</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/StatusBar.tsx

@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useStdout } from "ink";
+import { existsSync, statSync } from "fs";
+import { readFile } from "fs/promises";
+import { CONFIG, thinkPath } from "../../core/config";
+import { extractLearnings } from "../../core/dedup";
+
+interface StatusBarProps {
+  message?: string;
+}
+
+export function StatusBar({ message }: StatusBarProps) {
+  const [pendingCount, setPendingCount] = useState(0);
+  const [learningsCount, setLearningsCount] = useState(0);
+  const [lastSync, setLastSync] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadStatus();
+    const interval = setInterval(loadStatus, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  async function loadStatus() {
+    // Count pending
+    const pendingPath = thinkPath(CONFIG.files.pending);
+    if (existsSync(pendingPath)) {
+      const content = await readFile(pendingPath, "utf-8");
+      setPendingCount(extractLearnings(content).length);
+    }
+
+    // Count learnings
+    const learningsPath = thinkPath(CONFIG.files.learnings);
+    if (existsSync(learningsPath)) {
+      const content = await readFile(learningsPath, "utf-8");
+      setLearningsCount(extractLearnings(content).length);
+    }
+
+    // Last sync time
+    if (existsSync(CONFIG.claudeMdPath)) {
+      const stats = statSync(CONFIG.claudeMdPath);
+      const ago = formatTimeAgo(stats.mtime);
+      setLastSync(ago);
+    }
+  }
+
+  const { stdout } = useStdout();
+  const width = stdout?.columns ?? 80;
+  const isNarrow = width < 60;
+
+  return (
+    <Box borderStyle="single" borderColor="gray" paddingX={1}>
+      <Box flexGrow={1}>
+        {message ? (
+          <Text color="yellow">{message}</Text>
+        ) : (
+          <Text color="gray">Ready</Text>
+        )}
+      </Box>
+      <Box marginLeft={1}>
+        <Text color="green">{learningsCount}</Text>
+        <Text color="gray">{isNarrow ? "L" : " learnings"}</Text>
+      </Box>
+      {pendingCount > 0 && (
+        <Box marginLeft={1}>
+          <Text color="yellow">{pendingCount}</Text>
+          <Text color="gray">{isNarrow ? "P" : " pending"}</Text>
+        </Box>
+      )}
+      {lastSync && !isNarrow && (
+        <Box marginLeft={1}>
+          <Text color="gray">synced {lastSync}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+function formatTimeAgo(date: Date): string {
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+  if (seconds < 60) return "just now";
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m ago`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h ago`;
+  return `${Math.floor(seconds / 86400)}d ago`;
+}