claude-think 0.3.0 → 0.3.2

package/.claude/settings.local.json

@@ -30,7 +30,10 @@
       "WebSearch",
       "Bash(__NEW_LINE_db734bce153d7d1e__ echo \"\")",
       "Bash(git checkout:*)",
-      "Bash(npm i:*)"
+      "Bash(npm i:*)",
+      "Bash(think learn \"Always test TUI changes locally before publishing releases\")",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:www.npmjs.com)"
     ]
   }
 }

package/CHANGELOG.md

@@ -5,6 +5,26 @@ 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.2] - 2025-02-05
+
+### Added
+- Fullscreen TUI using alternate screen buffer (preserves terminal history on exit)
+- Scrollable content in all sections (↑↓ or j/k to scroll)
+- Terminal resize support - UI adapts dynamically
+
+### Changed
+- New double-line box header design
+- Content area now fills available terminal height
+- Improved responsive layout for different terminal sizes
+
+## [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-think",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Personal context manager for Claude - manage your preferences, patterns, and memory",
   "author": "Amit Feldman",
   "license": "MIT",

package/src/tui/App.tsx

@@ -13,6 +13,7 @@ import { StatusBar } from "./components/StatusBar";
 import { QuickActions } from "./components/QuickActions";
 import { Preview } from "./components/Preview";
 import { Search } from "./components/Search";
+import { FullScreen, useTerminalSize } from "./components/FullScreen";
 import { existsSync } from "fs";
 import { CONFIG } from "../core/config";
 
@@ -30,11 +31,21 @@ type Modal = "none" | "help" | "actions" | "preview" | "search";
 
 export function App() {
   const { exit } = useApp();
+  const { width, height } = useTerminalSize();
   const [section, setSection] = useState<Section>("profile");
   const [modal, setModal] = useState<Modal>("none");
   const [statusMessage, setStatusMessage] = useState<string | undefined>();
   const [initialized, setInitialized] = useState(false);
 
+  const isNarrow = width < 80;
+
+  // Calculate content height
+  // Banner: 5 lines (spacer + 3 + margin), compact: 2 lines
+  const hasBanner = width >= 44;
+  const headerHeight = hasBanner ? 5 : 2;
+  // total - header - nav(1) - borders(2) - status(3) - footer(1) - padding(2)
+  const contentHeight = Math.max(5, height - headerHeight - 9);
+
   useEffect(() => {
     setInitialized(existsSync(CONFIG.thinkDir));
   }, []);
@@ -70,118 +81,154 @@ export function App() {
 
   if (!initialized) {
     return (
-      <Box flexDirection="column" padding={1}>
-        <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>
+      <FullScreen>
+        <Box flexDirection="column" padding={1} justifyContent="center" alignItems="center" height="100%">
+          <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>
-      </Box>
+      </FullScreen>
     );
   }
 
-  // Render modals
+  // Render modals in fullscreen
   if (modal === "help") {
-    return <Help onClose={() => setModal("none")} />;
+    return (
+      <FullScreen>
+        <Help onClose={() => setModal("none")} height={height} width={width} />
+      </FullScreen>
+    );
   }
 
   if (modal === "actions") {
     return (
-      <Box flexDirection="column" padding={1}>
-        <Header />
-        <QuickActions
-          onMessage={handleMessage}
-          onClose={() => setModal("none")}
-        />
-      </Box>
+      <FullScreen>
+        <Box flexDirection="column" padding={1}>
+          <Header width={width} />
+          <QuickActions
+            onMessage={handleMessage}
+            onClose={() => setModal("none")}
+          />
+        </Box>
+      </FullScreen>
     );
   }
 
   if (modal === "preview") {
     return (
-      <Box flexDirection="column" padding={1}>
-        <Header />
-        <Preview onClose={() => setModal("none")} />
-      </Box>
+      <FullScreen>
+        <Box flexDirection="column" padding={1}>
+          <Header width={width} />
+          <Preview onClose={() => setModal("none")} height={height - 6} />
+        </Box>
+      </FullScreen>
     );
   }
 
   if (modal === "search") {
     return (
-      <Box flexDirection="column" padding={1}>
-        <Header />
-        <Search onClose={() => setModal("none")} />
-      </Box>
+      <FullScreen>
+        <Box flexDirection="column" padding={1}>
+          <Header width={width} />
+          <Search onClose={() => setModal("none")} height={height - 6} />
+        </Box>
+      </FullScreen>
     );
   }
 
   const renderSection = () => {
     switch (section) {
       case "profile":
-        return <Profile />;
+        return <Profile height={contentHeight} />;
       case "preferences":
-        return <Preferences />;
+        return <Preferences height={contentHeight} />;
       case "memory":
-        return <Memory />;
+        return <Memory height={contentHeight} />;
       case "permissions":
-        return <Permissions />;
+        return <Permissions height={contentHeight} />;
       case "skills":
-        return <Skills />;
+        return <Skills height={contentHeight} />;
       case "agents":
-        return <Agents />;
+        return <Agents height={contentHeight} />;
       case "automation":
-        return <Automation />;
+        return <Automation height={contentHeight} />;
       default:
-        return <Profile />;
+        return <Profile height={contentHeight} />;
     }
   };
 
   return (
-    <Box flexDirection="column">
-      <Header />
-
-      <Navigation currentSection={section} onSectionChange={setSection} />
-
-      <Box
-        flexDirection="column"
-        marginTop={1}
-        borderStyle="single"
-        borderColor="gray"
-        padding={1}
-        minHeight={15}
-      >
-        {renderSection()}
-      </Box>
+    <FullScreen>
+      <Box flexDirection="column" padding={1} height="100%">
+        <Header width={width} />
 
-      <Box marginTop={1}>
-        <StatusBar message={statusMessage} />
-      </Box>
+        <Navigation currentSection={section} onSectionChange={setSection} />
 
-      <Box marginTop={1}>
-        <Text color="gray">
-          Tab: sections | a: actions | p: preview | /: search | ?: help | q: quit
-        </Text>
+        <Box
+          flexDirection="column"
+          marginTop={1}
+          borderStyle="single"
+          borderColor="gray"
+          padding={1}
+          flexGrow={1}
+          height={contentHeight + 2}
+        >
+          {renderSection()}
+        </Box>
+
+        <Box marginTop={1}>
+          <StatusBar message={statusMessage} />
+        </Box>
+
+        <Box>
+          <Text color="gray">
+            {isNarrow
+              ? "Tab:nav ↑↓:scroll a:act p:prev /:search ?:help q:quit"
+              : "Tab: sections | ↑↓/jk: scroll | a: actions | p: preview | /: search | ?: help | q: quit"}
+          </Text>
+        </Box>
       </Box>
-    </Box>
+    </FullScreen>
   );
 }
 
-function Header() {
+function Header({ width, showBanner = true }: { width: number; showBanner?: boolean }) {
+  // Double-line box banner
+  if (width >= 44 && showBanner) {
+    return (
+      <Box flexDirection="column" marginBottom={1}>
+        <Text> </Text>
+        <Text color="green">╔═══════════════════════════════════════╗</Text>
+        <Text color="green">║  <Text bold>THINK</Text> · <Text color="gray">Personal Context for Claude</Text>  ║</Text>
+        <Text color="green">╚═══════════════════════════════════════╝</Text>
+      </Box>
+    );
+  }
+
+  // Compact header for narrow terminals
+  if (width < 35) {
+    return (
+      <Box marginBottom={1}>
+        <Text color="green" bold>think</Text>
+      </Box>
+    );
+  }
+
   return (
     <Box marginBottom={1}>
-      <Text color="green" bold>
-        ▀█▀ █░█ █ █▄░█ █▄▀
-      </Text>
-      <Text color="gray"> Personal Context for Claude</Text>
+      <Text color="green" bold>think</Text>
+      <Text color="gray"> · Personal Context for Claude</Text>
     </Box>
   );
 }

package/src/tui/components/Agents.tsx

@@ -13,7 +13,11 @@ interface AgentInfo {
   path: string;
 }
 
-export function Agents() {
+interface AgentsProps {
+  height?: number;
+}
+
+export function Agents({ height = 15 }: AgentsProps) {
   const [agents, setAgents] = useState<AgentInfo[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [loading, setLoading] = useState(true);

package/src/tui/components/Automation.tsx

@@ -11,7 +11,11 @@ const files: { key: AutomationFile; label: string; path: string }[] = [
   { key: "workflows", label: "Workflows", path: CONFIG.files.workflows },
 ];
 
-export function Automation() {
+interface AutomationProps {
+  height?: number;
+}
+
+export function Automation({ height = 15 }: AutomationProps) {
   const [selected, setSelected] = useState<AutomationFile>("subagents");
   const [content, setContent] = useState<string>("");
   const [loading, setLoading] = useState(true);

package/src/tui/components/FullScreen.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react";
+import { Box, useStdout } from "ink";
+
+const enterAltScreenCommand = "\x1b[?1049h";
+const leaveAltScreenCommand = "\x1b[?1049l";
+
+interface FullScreenProps {
+  children: React.ReactNode;
+}
+
+export function FullScreen({ children }: FullScreenProps) {
+  const { stdout } = useStdout();
+  const [dimensions, setDimensions] = useState({
+    width: stdout?.columns ?? 80,
+    height: stdout?.rows ?? 24,
+  });
+
+  useEffect(() => {
+    // Enter alternate screen buffer (preserves terminal history)
+    process.stdout.write(enterAltScreenCommand);
+
+    // Handle resize
+    const handleResize = () => {
+      setDimensions({
+        width: process.stdout.columns,
+        height: process.stdout.rows,
+      });
+    };
+
+    process.stdout.on("resize", handleResize);
+
+    // Cleanup: leave alternate screen buffer
+    return () => {
+      process.stdout.off("resize", handleResize);
+      process.stdout.write(leaveAltScreenCommand);
+    };
+  }, []);
+
+  return (
+    <Box
+      width={dimensions.width}
+      height={dimensions.height}
+      flexDirection="column"
+    >
+      {children}
+    </Box>
+  );
+}
+
+export function useTerminalSize() {
+  const { stdout } = useStdout();
+  const [size, setSize] = useState({
+    width: stdout?.columns ?? 80,
+    height: stdout?.rows ?? 24,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSize({
+        width: process.stdout.columns,
+        height: process.stdout.rows,
+      });
+    };
+
+    process.stdout.on("resize", handleResize);
+    return () => {
+      process.stdout.off("resize", handleResize);
+    };
+  }, []);
+
+  return size;
+}

package/src/tui/components/Help.tsx

@@ -3,22 +3,24 @@ import { Box, Text, useInput } from "ink";
 
 interface HelpProps {
   onClose: () => void;
+  height?: number;
+  width?: number;
 }
 
-export function Help({ onClose }: HelpProps) {
+export function Help({ onClose, height = 24, width = 80 }: HelpProps) {
   useInput((input, key) => {
     if (input === "?" || key.escape || input === "q") {
       onClose();
     }
   });
 
+  const isNarrow = width < 70;
+
   return (
-    <Box flexDirection="column" padding={1}>
+    <Box flexDirection="column" padding={1} height={height}>
       <Box marginBottom={1}>
-        <Text bold color="green">
-          ▀█▀ █░█ █ █▄░█ █▄▀
-        </Text>
-        <Text color="gray"> Help</Text>
+        <Text bold color="green">think</Text>
+        <Text color="gray"> · Help</Text>
       </Box>
 
       <Box
@@ -26,55 +28,55 @@ export function Help({ onClose }: HelpProps) {
         borderStyle="single"
         borderColor="gray"
         padding={1}
+        flexGrow={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>
-
+        {isNarrow ? (
           <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>
+            <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">↑↓/jk</Text> Scroll</Text>
+            <Text> </Text>
+            <Text bold color="cyan">Actions</Text>
+            <Text><Text color="green">a</Text> Actions menu</Text>
+            <Text><Text color="green">p</Text> Preview</Text>
+            <Text><Text color="green">/</Text> Search</Text>
+            <Text><Text color="green">e</Text> Edit in $EDITOR</Text>
+            <Text><Text color="green">?</Text> Help</Text>
+            <Text><Text color="green">q</Text> Quit</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 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">↑↓/jk</Text>       Scroll content</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 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 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>
+              <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">Esc</Text>         Close modal</Text>
+              <Text><Text color="green">q</Text>           Quit</Text>
             </Box>
           </Box>
+        )}
+
+        <Box marginTop={1} flexDirection="column">
+          <Text bold color="cyan">CLI Commands</Text>
+          <Text color="gray">think init | setup | sync | status | learn | review | profile | edit | tree | project learn</Text>
         </Box>
       </Box>
 

package/src/tui/components/Memory.tsx

@@ -14,13 +14,19 @@ const sections: { key: MemorySection; label: string; path: string }[] = [
   { key: "pending", label: "Pending", path: CONFIG.files.pending },
 ];
 
-export function Memory() {
+interface MemoryProps {
+  height?: number;
+}
+
+export function Memory({ height = 15 }: MemoryProps) {
   const [selected, setSelected] = useState<MemorySection>("learnings");
   const [items, setItems] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
+  const [scroll, setScroll] = useState(0);
 
   useEffect(() => {
     loadContent();
+    setScroll(0);
   }, [selected]);
 
   async function loadContent() {
@@ -38,14 +44,23 @@ export function Memory() {
     setLoading(false);
   }
 
+  const contentHeight = height - 3;
+  const maxScroll = Math.max(0, items.length - contentHeight);
+
   useInput((input, key) => {
     if (key.leftArrow || input === "h") {
       const idx = sections.findIndex((s) => s.key === selected);
-      setSelected(sections[(idx - 1 + sections.length) % sections.length].key);
+      setSelected(sections[(idx - 1 + sections.length) % sections.length]!.key);
     }
     if (key.rightArrow || input === "l") {
       const idx = sections.findIndex((s) => s.key === selected);
-      setSelected(sections[(idx + 1) % sections.length].key);
+      setSelected(sections[(idx + 1) % sections.length]!.key);
+    }
+    if (key.upArrow || input === "k") {
+      setScroll((s) => Math.max(0, s - 1));
+    }
+    if (key.downArrow || input === "j") {
+      setScroll((s) => Math.min(maxScroll, s + 1));
     }
     if (input === "e") {
       const section = sections.find((s) => s.key === selected);
@@ -60,8 +75,10 @@ export function Memory() {
     }
   });
 
+  const visibleItems = items.slice(scroll, scroll + contentHeight);
+
   return (
-    <Box flexDirection="column">
+    <Box flexDirection="column" height={height}>
       <Box marginBottom={1}>
         {sections.map((section) => (
           <Box key={section.key} marginRight={2}>
@@ -74,16 +91,17 @@ export function Memory() {
             </Text>
           </Box>
         ))}
+        <Text color="gray">({items.length})</Text>
       </Box>
 
-      <Box flexDirection="column" paddingLeft={1}>
+      <Box flexDirection="column" flexGrow={1}>
         {loading ? (
           <Text color="gray">Loading...</Text>
         ) : items.length === 0 ? (
           <Text color="gray">No items</Text>
         ) : (
-          items.map((item, i) => (
-            <Text key={i}>
+          visibleItems.map((item, i) => (
+            <Text key={scroll + i}>
               <Text color="green">• </Text>
               {item}
             </Text>
@@ -91,10 +109,8 @@ export function Memory() {
         )}
       </Box>
 
-      <Box marginTop={1}>
-        <Text color="gray">
-          ←/→: switch | e: edit | {items.length} item(s)
-        </Text>
+      <Box>
+        <Text color="gray">←/→: switch | e: edit{maxScroll > 0 ? " | ↑↓: scroll" : ""}</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/Permissions.tsx

@@ -11,7 +11,11 @@ const files: { key: PermissionFile; label: string; path: string }[] = [
   { key: "settings", label: "Settings", path: CONFIG.files.settings },
 ];
 
-export function Permissions() {
+interface PermissionsProps {
+  height?: number;
+}
+
+export function Permissions({ height = 15 }: PermissionsProps) {
   const [selected, setSelected] = useState<PermissionFile>("commands");
   const [content, setContent] = useState<string>("");
   const [loading, setLoading] = useState(true);

package/src/tui/components/Preferences.tsx

@@ -12,13 +12,19 @@ const files: { key: PreferenceFile; label: string; path: string }[] = [
   { key: "antiPatterns", label: "Anti-Patterns", path: CONFIG.files.antiPatterns },
 ];
 
-export function Preferences() {
+interface PreferencesProps {
+  height?: number;
+}
+
+export function Preferences({ height = 15 }: PreferencesProps) {
   const [selected, setSelected] = useState<PreferenceFile>("tools");
   const [content, setContent] = useState<string>("");
   const [loading, setLoading] = useState(true);
+  const [scroll, setScroll] = useState(0);
 
   useEffect(() => {
     loadContent();
+    setScroll(0);
   }, [selected]);
 
   async function loadContent() {
@@ -31,14 +37,24 @@ export function Preferences() {
     setLoading(false);
   }
 
+  const lines = content.split("\n");
+  const contentHeight = height - 3;
+  const maxScroll = Math.max(0, lines.length - contentHeight);
+
   useInput((input, key) => {
     if (key.leftArrow || input === "h") {
       const idx = files.findIndex((f) => f.key === selected);
-      setSelected(files[(idx - 1 + files.length) % files.length].key);
+      setSelected(files[(idx - 1 + files.length) % files.length]!.key);
     }
     if (key.rightArrow || input === "l") {
       const idx = files.findIndex((f) => f.key === selected);
-      setSelected(files[(idx + 1) % files.length].key);
+      setSelected(files[(idx + 1) % files.length]!.key);
+    }
+    if (key.upArrow || input === "k") {
+      setScroll((s) => Math.max(0, s - 1));
+    }
+    if (key.downArrow || input === "j") {
+      setScroll((s) => Math.min(maxScroll, s + 1));
     }
     if (input === "e") {
       const file = files.find((f) => f.key === selected);
@@ -53,8 +69,10 @@ export function Preferences() {
     }
   });
 
+  const visibleLines = lines.slice(scroll, scroll + contentHeight);
+
   return (
-    <Box flexDirection="column">
+    <Box flexDirection="column" height={height}>
       <Box marginBottom={1}>
         {files.map((file) => (
           <Box key={file.key} marginRight={2}>
@@ -67,22 +85,25 @@ export function Preferences() {
             </Text>
           </Box>
         ))}
+        {maxScroll > 0 && (
+          <Text color="gray">[{scroll + 1}-{Math.min(scroll + contentHeight, lines.length)}/{lines.length}]</Text>
+        )}
       </Box>
 
-      <Box flexDirection="column" paddingLeft={1}>
+      <Box flexDirection="column" flexGrow={1}>
         {loading ? (
           <Text color="gray">Loading...</Text>
         ) : (
-          content.split("\n").map((line, i) => (
-            <Text key={i} color={line.startsWith("#") ? "cyan" : undefined}>
-              {line}
+          visibleLines.map((line, i) => (
+            <Text key={scroll + i} color={line.startsWith("#") ? "cyan" : undefined}>
+              {line || " "}
             </Text>
           ))
         )}
       </Box>
 
-      <Box marginTop={1}>
-        <Text color="gray">←/→: switch | e: edit in $EDITOR</Text>
+      <Box>
+        <Text color="gray">←/→: switch | e: edit{maxScroll > 0 ? " | ↑↓: scroll" : ""}</Text>
       </Box>
     </Box>
   );

package/src/tui/components/Preview.tsx

@@ -6,13 +6,14 @@ import { CONFIG } from "../../core/config";
 
 interface PreviewProps {
   onClose: () => void;
+  height?: number;
 }
 
-export function Preview({ onClose }: PreviewProps) {
+export function Preview({ onClose, height = 20 }: PreviewProps) {
   const [content, setContent] = useState<string[]>([]);
   const [scroll, setScroll] = useState(0);
   const [loading, setLoading] = useState(true);
-  const maxLines = 20;
+  const maxLines = Math.max(5, height - 4);
 
   useEffect(() => {
     loadPreview();
@@ -54,7 +55,7 @@ export function Preview({ onClose }: PreviewProps) {
     : 100;
 
   return (
-    <Box flexDirection="column" borderStyle="single" borderColor="cyan" padding={1}>
+    <Box flexDirection="column" borderStyle="single" borderColor="cyan" padding={1} height={height}>
       <Box marginBottom={1}>
         <Text bold color="cyan">CLAUDE.md Preview</Text>
         <Text color="gray"> ({content.length} lines)</Text>

package/src/tui/components/Profile.tsx

@@ -4,10 +4,15 @@ import { parseMarkdown } from "../../core/parser";
 import { thinkPath, CONFIG } from "../../core/config";
 import { spawn } from "child_process";
 
-export function Profile() {
+interface ProfileProps {
+  height?: number;
+}
+
+export function Profile({ height = 15 }: ProfileProps) {
   const [content, setContent] = useState<string>("");
   const [name, setName] = useState<string>("");
   const [loading, setLoading] = useState(true);
+  const [scroll, setScroll] = useState(0);
 
   useEffect(() => {
     loadProfile();
@@ -22,7 +27,11 @@ export function Profile() {
     setLoading(false);
   }
 
-  useInput((input) => {
+  const lines = content.split("\n");
+  const contentHeight = height - 3; // header + footer
+  const maxScroll = Math.max(0, lines.length - contentHeight);
+
+  useInput((input, key) => {
     if (input === "e") {
       const editor = process.env.EDITOR || "vi";
       spawn(editor, [thinkPath(CONFIG.files.profile)], {
@@ -31,31 +40,40 @@ export function Profile() {
         loadProfile();
       });
     }
+    if (key.upArrow || input === "k") {
+      setScroll((s) => Math.max(0, s - 1));
+    }
+    if (key.downArrow || input === "j") {
+      setScroll((s) => Math.min(maxScroll, s + 1));
+    }
   });
 
   if (loading) {
     return <Text color="gray">Loading...</Text>;
   }
 
+  const visibleLines = lines.slice(scroll, scroll + contentHeight);
+
   return (
-    <Box flexDirection="column">
+    <Box flexDirection="column" height={height}>
       <Box marginBottom={1}>
-        <Text bold color="green">
-          Profile
-        </Text>
+        <Text bold color="green">Profile</Text>
         {name && <Text color="gray"> - {name}</Text>}
+        {maxScroll > 0 && (
+          <Text color="gray"> [{scroll + 1}-{Math.min(scroll + contentHeight, lines.length)}/{lines.length}]</Text>
+        )}
       </Box>
 
-      <Box flexDirection="column" paddingLeft={1}>
-        {content.split("\n").map((line, i) => (
-          <Text key={i} color={line.startsWith("#") ? "cyan" : undefined}>
-            {line}
+      <Box flexDirection="column" flexGrow={1}>
+        {visibleLines.map((line, i) => (
+          <Text key={scroll + i} color={line.startsWith("#") ? "cyan" : undefined}>
+            {line || " "}
           </Text>
         ))}
       </Box>
 
-      <Box marginTop={1}>
-        <Text color="gray">Press 'e' to edit in $EDITOR</Text>
+      <Box>
+        <Text color="gray">e: edit{maxScroll > 0 ? " | ↑↓/jk: scroll" : ""}</Text>
       </Box>
     </Box>
   );

package/src/tui/components/ScrollableBox.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+
+interface ScrollableBoxProps {
+  children: React.ReactNode;
+  height: number;
+  showScrollbar?: boolean;
+}
+
+export function ScrollableBox({
+  children,
+  height,
+  showScrollbar = true,
+}: ScrollableBoxProps) {
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const [contentHeight, setContentHeight] = useState(0);
+
+  // Convert children to array of lines for scrolling
+  const lines = React.Children.toArray(children);
+  const maxScroll = Math.max(0, lines.length - height);
+
+  useInput((input, key) => {
+    if (key.upArrow || input === "k") {
+      setScrollOffset((s) => Math.max(0, s - 1));
+    }
+    if (key.downArrow || input === "j") {
+      setScrollOffset((s) => Math.min(maxScroll, s + 1));
+    }
+    if (key.pageUp) {
+      setScrollOffset((s) => Math.max(0, s - height));
+    }
+    if (key.pageDown) {
+      setScrollOffset((s) => Math.min(maxScroll, s + height));
+    }
+  });
+
+  const visibleLines = lines.slice(scrollOffset, scrollOffset + height);
+  const scrollPercent =
+    maxScroll > 0 ? Math.round((scrollOffset / maxScroll) * 100) : 100;
+
+  return (
+    <Box flexDirection="row" height={height}>
+      <Box flexDirection="column" flexGrow={1}>
+        {visibleLines}
+        {/* Pad remaining space */}
+        {Array.from({ length: height - visibleLines.length }).map((_, i) => (
+          <Text key={`pad-${i}`}> </Text>
+        ))}
+      </Box>
+      {showScrollbar && maxScroll > 0 && (
+        <Box flexDirection="column" marginLeft={1}>
+          <Text color="gray">{scrollPercent.toString().padStart(3)}%</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/Search.tsx

@@ -7,6 +7,7 @@ import { thinkPath, CONFIG } from "../../core/config";
 
 interface SearchProps {
   onClose: () => void;
+  height?: number;
 }
 
 interface SearchResult {
@@ -26,7 +27,7 @@ const searchFiles = [
   { name: "workflows", path: CONFIG.files.workflows },
 ];
 
-export function Search({ onClose }: SearchProps) {
+export function Search({ onClose, height = 20 }: SearchProps) {
   const [query, setQuery] = useState("");
   const [results, setResults] = useState<SearchResult[]>([]);
   const [selected, setSelected] = useState(0);

package/src/tui/components/Skills.tsx

@@ -13,7 +13,11 @@ interface SkillInfo {
   path: string;
 }
 
-export function Skills() {
+interface SkillsProps {
+  height?: number;
+}
+
+export function Skills({ height = 15 }: SkillsProps) {
   const [skills, setSkills] = useState<SkillInfo[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [loading, setLoading] = useState(true);

package/src/tui/components/StatusBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Box, Text } from "ink";
+import { Box, Text, useStdout } from "ink";
 import { existsSync, statSync } from "fs";
 import { readFile } from "fs/promises";
 import { CONFIG, thinkPath } from "../../core/config";
@@ -43,6 +43,10 @@ export function StatusBar({ message }: StatusBarProps) {
     }
   }
 
+  const { stdout } = useStdout();
+  const width = stdout?.columns ?? 80;
+  const isNarrow = width < 60;
+
   return (
     <Box borderStyle="single" borderColor="gray" paddingX={1}>
       <Box flexGrow={1}>
@@ -52,18 +56,18 @@ export function StatusBar({ message }: StatusBarProps) {
           <Text color="gray">Ready</Text>
         )}
       </Box>
-      <Box marginLeft={2}>
+      <Box marginLeft={1}>
         <Text color="green">{learningsCount}</Text>
-        <Text color="gray"> learnings</Text>
+        <Text color="gray">{isNarrow ? "L" : " learnings"}</Text>
       </Box>
       {pendingCount > 0 && (
-        <Box marginLeft={2}>
+        <Box marginLeft={1}>
           <Text color="yellow">{pendingCount}</Text>
-          <Text color="gray"> pending</Text>
+          <Text color="gray">{isNarrow ? "P" : " pending"}</Text>
         </Box>
       )}
-      {lastSync && (
-        <Box marginLeft={2}>
+      {lastSync && !isNarrow && (
+        <Box marginLeft={1}>
           <Text color="gray">synced {lastSync}</Text>
         </Box>
       )}