claude-think 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -5,6 +5,14 @@ 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

package/package.json

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

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";
@@ -30,11 +30,17 @@ type Modal = "none" | "help" | "actions" | "preview" | "search";
 
 export function App() {
   const { exit } = useApp();
+  const { stdout } = useStdout();
   const [section, setSection] = useState<Section>("profile");
   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));
   }, []);
@@ -97,7 +103,7 @@ export function App() {
   if (modal === "actions") {
     return (
       <Box flexDirection="column" padding={1}>
-        <Header />
+        <Header width={width} />
         <QuickActions
           onMessage={handleMessage}
           onClose={() => setModal("none")}
@@ -109,7 +115,7 @@ export function App() {
   if (modal === "preview") {
     return (
       <Box flexDirection="column" padding={1}>
-        <Header />
+        <Header width={width} />
         <Preview onClose={() => setModal("none")} />
       </Box>
     );
@@ -118,7 +124,7 @@ export function App() {
   if (modal === "search") {
     return (
       <Box flexDirection="column" padding={1}>
-        <Header />
+        <Header width={width} />
         <Search onClose={() => setModal("none")} />
       </Box>
     );
@@ -147,7 +153,7 @@ export function App() {
 
   return (
     <Box flexDirection="column">
-      <Header />
+      <Header width={width} />
 
       <Navigation currentSection={section} onSectionChange={setSection} />
 
@@ -168,20 +174,33 @@ export function App() {
 
       <Box marginTop={1}>
         <Text color="gray">
-          Tab: sections | a: actions | p: preview | /: search | ?: 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() {
+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>
-        ▀█▀ █░█ █ █▄░█ █▄▀
-      </Text>
-      <Text color="gray"> Personal Context for Claude</Text>
+      <Text color="green" bold>think</Text>
+      <Text color="gray"> - Claude Context</Text>
     </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/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>
       )}