codemaxxing 0.1.1 → 0.1.2

package/dist/index.js

@@ -9,7 +9,7 @@ import { loadConfig, detectLocalProvider, parseCLIArgs, applyOverrides, listMode
 import { listSessions, getSession, loadMessages } from "./utils/sessions.js";
 import { execSync } from "child_process";
 import { isGitRepo, getBranch, getStatus, getDiff, undoLastCommit } from "./utils/git.js";
-import { getTheme, THEMES, DEFAULT_THEME } from "./themes.js";
+import { getTheme, listThemes, THEMES, DEFAULT_THEME } from "./themes.js";
 const VERSION = "0.1.0";
 // ── Helpers ──
 function formatTimeAgo(date) {
@@ -102,6 +102,8 @@ function App() {
     const [inputKey, setInputKey] = useState(0);
     const [sessionPicker, setSessionPicker] = useState(null);
     const [sessionPickerIndex, setSessionPickerIndex] = useState(0);
+    const [themePicker, setThemePicker] = useState(false);
+    const [themePickerIndex, setThemePickerIndex] = useState(0);
     const [approval, setApproval] = useState(null);
     // Listen for paste events from stdin interceptor
     useEffect(() => {
@@ -329,10 +331,10 @@ function App() {
         if (trimmed.startsWith("/theme")) {
             const themeName = trimmed.replace("/theme", "").trim();
             if (!themeName) {
-                const available = Object.entries(THEMES)
-                    .map(([key, t]) => `  ${key === theme.name.toLowerCase() ? "▸ " : "  "}${key} — ${t.description}`)
-                    .join("\n");
-                addMsg("info", `Current theme: ${theme.name}\n\nAvailable themes:\n${available}\n\n  Usage: /theme <name>`);
+                const themeKeys = listThemes();
+                const currentIdx = themeKeys.indexOf(theme.name.toLowerCase());
+                setThemePicker(true);
+                setThemePickerIndex(currentIdx >= 0 ? currentIdx : 0);
                 return;
             }
             if (!THEMES[themeName]) {
@@ -485,6 +487,30 @@ function App() {
                 return;
             }
         }
+        // Theme picker navigation
+        if (themePicker) {
+            const themeKeys = listThemes();
+            if (key.upArrow) {
+                setThemePickerIndex((prev) => (prev - 1 + themeKeys.length) % themeKeys.length);
+                return;
+            }
+            if (key.downArrow) {
+                setThemePickerIndex((prev) => (prev + 1) % themeKeys.length);
+                return;
+            }
+            if (key.return) {
+                const selected = themeKeys[themePickerIndex];
+                setTheme(getTheme(selected));
+                setThemePicker(false);
+                addMsg("info", `✅ Switched to theme: ${THEMES[selected].name}`);
+                return;
+            }
+            if (key.escape) {
+                setThemePicker(false);
+                return;
+            }
+            return;
+        }
         // Session picker navigation
         if (sessionPicker) {
             if (key.upArrow) {
@@ -616,7 +642,7 @@ function App() {
                     default:
                         return _jsx(Text, { children: msg.text }, msg.id);
                 }
-            }), loading && !approval && !streaming && _jsx(NeonSpinner, { message: spinnerMsg, colors: theme.colors }), streaming && !loading && _jsx(StreamingIndicator, { colors: theme.colors }), approval && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.warning, paddingX: 1, marginTop: 1, children: [_jsxs(Text, { bold: true, color: theme.colors.warning, children: ["\u26A0 Approve ", approval.tool, "?"] }), approval.tool === "write_file" && approval.args.path ? (_jsxs(Text, { color: theme.colors.muted, children: ["  📄 ", String(approval.args.path)] })) : null, approval.tool === "write_file" && approval.args.content ? (_jsxs(Text, { color: theme.colors.muted, children: ["  ", String(approval.args.content).split("\n").length, " lines, ", String(approval.args.content).length, "B"] })) : null, approval.tool === "run_command" && approval.args.command ? (_jsxs(Text, { color: theme.colors.muted, children: ["  $ ", String(approval.args.command)] })) : null, _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.success, bold: true, children: " [y]" }), _jsx(Text, { children: "es  " }), _jsx(Text, { color: theme.colors.error, bold: true, children: "[n]" }), _jsx(Text, { children: "o  " }), _jsx(Text, { color: theme.colors.primary, bold: true, children: "[a]" }), _jsx(Text, { children: "lways" })] })] })), sessionPicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.secondary, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "Resume a session:" }), sessionPicker.map((s, i) => (_jsxs(Text, { children: [i === sessionPickerIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === sessionPickerIndex ? theme.colors.suggestion : theme.colors.muted, children: s.display })] }, s.id))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter select · Esc cancel" })] })), showSuggestions && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.muted, paddingX: 1, marginBottom: 0, children: [cmdMatches.slice(0, 6).map((c, i) => (_jsxs(Text, { children: [i === cmdIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === cmdIndex ? theme.colors.suggestion : theme.colors.primary, bold: true, children: c.cmd }), _jsxs(Text, { color: theme.colors.muted, children: [" — ", c.desc] })] }, i))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Tab select" })] })), _jsxs(Box, { borderStyle: "single", borderColor: approval ? theme.colors.warning : theme.colors.border, paddingX: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: "> " }), approval ? (_jsx(Text, { color: theme.colors.warning, children: "waiting for approval..." })) : ready && !loading ? (_jsxs(Box, { children: [pastedChunks.map((p) => (_jsxs(Text, { color: theme.colors.muted, children: ["[Pasted text #", p.id, " +", p.lines, " lines]"] }, p.id))), _jsx(TextInput, { value: input, onChange: (v) => { setInput(v); setCmdIndex(0); }, onSubmit: handleSubmit }, inputKey)] })) : (_jsx(Text, { dimColor: true, children: loading ? "waiting for response..." : "initializing..." }))] }), agent && (_jsx(Box, { paddingX: 2, children: _jsxs(Text, { dimColor: true, children: ["💬 ", agent.getContextLength(), " messages · ~", (() => {
+            }), loading && !approval && !streaming && _jsx(NeonSpinner, { message: spinnerMsg, colors: theme.colors }), streaming && !loading && _jsx(StreamingIndicator, { colors: theme.colors }), approval && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.warning, paddingX: 1, marginTop: 1, children: [_jsxs(Text, { bold: true, color: theme.colors.warning, children: ["\u26A0 Approve ", approval.tool, "?"] }), approval.tool === "write_file" && approval.args.path ? (_jsxs(Text, { color: theme.colors.muted, children: ["  📄 ", String(approval.args.path)] })) : null, approval.tool === "write_file" && approval.args.content ? (_jsxs(Text, { color: theme.colors.muted, children: ["  ", String(approval.args.content).split("\n").length, " lines, ", String(approval.args.content).length, "B"] })) : null, approval.tool === "run_command" && approval.args.command ? (_jsxs(Text, { color: theme.colors.muted, children: ["  $ ", String(approval.args.command)] })) : null, _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.success, bold: true, children: " [y]" }), _jsx(Text, { children: "es  " }), _jsx(Text, { color: theme.colors.error, bold: true, children: "[n]" }), _jsx(Text, { children: "o  " }), _jsx(Text, { color: theme.colors.primary, bold: true, children: "[a]" }), _jsx(Text, { children: "lways" })] })] })), themePicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.border, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "Choose a theme:" }), listThemes().map((key, i) => (_jsxs(Text, { children: [i === themePickerIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === themePickerIndex ? theme.colors.suggestion : theme.colors.primary, bold: true, children: key }), _jsxs(Text, { color: theme.colors.muted, children: [" — ", THEMES[key].description] }), key === theme.name.toLowerCase() ? _jsx(Text, { color: theme.colors.muted, children: " (current)" }) : null] }, key))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter select · Esc cancel" })] })), sessionPicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.secondary, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "Resume a session:" }), sessionPicker.map((s, i) => (_jsxs(Text, { children: [i === sessionPickerIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === sessionPickerIndex ? theme.colors.suggestion : theme.colors.muted, children: s.display })] }, s.id))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter select · Esc cancel" })] })), showSuggestions && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.muted, paddingX: 1, marginBottom: 0, children: [cmdMatches.slice(0, 6).map((c, i) => (_jsxs(Text, { children: [i === cmdIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === cmdIndex ? theme.colors.suggestion : theme.colors.primary, bold: true, children: c.cmd }), _jsxs(Text, { color: theme.colors.muted, children: [" — ", c.desc] })] }, i))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Tab select" })] })), _jsxs(Box, { borderStyle: "single", borderColor: approval ? theme.colors.warning : theme.colors.border, paddingX: 1, children: [_jsx(Text, { color: theme.colors.secondary, bold: true, children: "> " }), approval ? (_jsx(Text, { color: theme.colors.warning, children: "waiting for approval..." })) : ready && !loading ? (_jsxs(Box, { children: [pastedChunks.map((p) => (_jsxs(Text, { color: theme.colors.muted, children: ["[Pasted text #", p.id, " +", p.lines, " lines]"] }, p.id))), _jsx(TextInput, { value: input, onChange: (v) => { setInput(v); setCmdIndex(0); }, onSubmit: handleSubmit }, inputKey)] })) : (_jsx(Text, { dimColor: true, children: loading ? "waiting for response..." : "initializing..." }))] }), agent && (_jsx(Box, { paddingX: 2, children: _jsxs(Text, { dimColor: true, children: ["💬 ", agent.getContextLength(), " messages · ~", (() => {
                             const tokens = agent.estimateTokens();
                             return tokens >= 1000 ? `${(tokens / 1000).toFixed(1)}k` : String(tokens);
                         })(), " tokens", modelName ? ` · 🤖 ${modelName}` : ""] }) }))] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codemaxxing",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Open-source terminal coding agent. Connect any LLM. Max your code.",
   "main": "dist/index.js",
   "bin": {

package/src/index.tsx

@@ -131,6 +131,8 @@ function App() {
   const [inputKey, setInputKey] = useState(0);
   const [sessionPicker, setSessionPicker] = useState<Array<{ id: string; display: string }> | null>(null);
   const [sessionPickerIndex, setSessionPickerIndex] = useState(0);
+  const [themePicker, setThemePicker] = useState(false);
+  const [themePickerIndex, setThemePickerIndex] = useState(0);
   const [approval, setApproval] = useState<{
     tool: string;
     args: Record<string, unknown>;
@@ -376,10 +378,10 @@ function App() {
     if (trimmed.startsWith("/theme")) {
       const themeName = trimmed.replace("/theme", "").trim();
       if (!themeName) {
-        const available = Object.entries(THEMES)
-          .map(([key, t]) => `  ${key === theme.name.toLowerCase() ? "▸ " : "  "}${key} — ${t.description}`)
-          .join("\n");
-        addMsg("info", `Current theme: ${theme.name}\n\nAvailable themes:\n${available}\n\n  Usage: /theme <name>`);
+        const themeKeys = listThemes();
+        const currentIdx = themeKeys.indexOf(theme.name.toLowerCase());
+        setThemePicker(true);
+        setThemePickerIndex(currentIdx >= 0 ? currentIdx : 0);
         return;
       }
       if (!THEMES[themeName]) {
@@ -531,6 +533,31 @@ function App() {
       }
     }
 
+    // Theme picker navigation
+    if (themePicker) {
+      const themeKeys = listThemes();
+      if (key.upArrow) {
+        setThemePickerIndex((prev) => (prev - 1 + themeKeys.length) % themeKeys.length);
+        return;
+      }
+      if (key.downArrow) {
+        setThemePickerIndex((prev) => (prev + 1) % themeKeys.length);
+        return;
+      }
+      if (key.return) {
+        const selected = themeKeys[themePickerIndex];
+        setTheme(getTheme(selected));
+        setThemePicker(false);
+        addMsg("info", `✅ Switched to theme: ${THEMES[selected].name}`);
+        return;
+      }
+      if (key.escape) {
+        setThemePicker(false);
+        return;
+      }
+      return;
+    }
+
     // Session picker navigation
     if (sessionPicker) {
       if (key.upArrow) {
@@ -737,6 +764,22 @@ function App() {
         </Box>
       )}
 
+      {/* ═══ THEME PICKER ═══ */}
+      {themePicker && (
+        <Box flexDirection="column" borderStyle="single" borderColor={theme.colors.border} paddingX={1} marginBottom={0}>
+          <Text bold color={theme.colors.secondary}>Choose a theme:</Text>
+          {listThemes().map((key, i) => (
+            <Text key={key}>
+              {i === themePickerIndex ? <Text color={theme.colors.suggestion} bold>{"▸ "}</Text> : <Text>{"  "}</Text>}
+              <Text color={i === themePickerIndex ? theme.colors.suggestion : theme.colors.primary} bold>{key}</Text>
+              <Text color={theme.colors.muted}>{" — "}{THEMES[key].description}</Text>
+              {key === theme.name.toLowerCase() ? <Text color={theme.colors.muted}> (current)</Text> : null}
+            </Text>
+          ))}
+          <Text dimColor>{"  ↑↓ navigate · Enter select · Esc cancel"}</Text>
+        </Box>
+      )}
+
       {/* ═══ SESSION PICKER ═══ */}
       {sessionPicker && (
         <Box flexDirection="column" borderStyle="single" borderColor={theme.colors.secondary} paddingX={1} marginBottom={0}>