codemaxxing 0.4.15 → 0.4.16

package/dist/index.js

@@ -156,6 +156,8 @@ function App() {
     const [ollamaDeletePickerIndex, setOllamaDeletePickerIndex] = useState(0);
     const [ollamaPullPicker, setOllamaPullPicker] = useState(false);
     const [ollamaPullPickerIndex, setOllamaPullPickerIndex] = useState(0);
+    const [modelPicker, setModelPicker] = useState(null);
+    const [modelPickerIndex, setModelPickerIndex] = useState(0);
     const [wizardScreen, setWizardScreen] = useState(null);
     const [wizardIndex, setWizardIndex] = useState(0);
     const [wizardHardware, setWizardHardware] = useState(null);
@@ -901,10 +903,34 @@ function App() {
             }
             return;
         }
-        if (trimmed.startsWith("/model")) {
-            const newModel = trimmed.replace("/model", "").trim();
+        if (trimmed === "/model" || trimmed === "/models") {
+            // Show picker of available models
+            try {
+                const ollamaModels = await listInstalledModelsDetailed();
+                if (ollamaModels.length > 0) {
+                    setModelPicker(ollamaModels.map(m => m.name));
+                    setModelPickerIndex(0);
+                    return;
+                }
+            }
+            catch { }
+            // Fallback: try provider's model list
+            try {
+                const providerModels = await listModels(providerRef.current?.baseUrl || "", providerRef.current?.apiKey || "");
+                if (providerModels.length > 0) {
+                    setModelPicker(providerModels.map((m) => m.id || m));
+                    setModelPickerIndex(0);
+                    return;
+                }
+            }
+            catch { }
+            addMsg("info", `Current model: ${modelName}\n  Usage: /model <model-name>`);
+            return;
+        }
+        if (trimmed.startsWith("/model ")) {
+            const newModel = trimmed.replace("/model ", "").trim();
             if (!newModel) {
-                addMsg("info", `Current model: ${agent.getModel()}\n  Usage: /model <model-name>`);
+                addMsg("info", `Current model: ${modelName}\n  Usage: /model <model-name>`);
                 return;
             }
             agent.switchModel(newModel);
@@ -1370,6 +1396,33 @@ function App() {
             }
             return;
         }
+        // ── Model picker ──
+        if (modelPicker) {
+            if (key.upArrow) {
+                setModelPickerIndex((prev) => (prev - 1 + modelPicker.length) % modelPicker.length);
+                return;
+            }
+            if (key.downArrow) {
+                setModelPickerIndex((prev) => (prev + 1) % modelPicker.length);
+                return;
+            }
+            if (key.escape) {
+                setModelPicker(null);
+                return;
+            }
+            if (key.return) {
+                const selected = modelPicker[modelPickerIndex];
+                if (selected && agent) {
+                    agent.switchModel(selected);
+                    setModelName(selected);
+                    addMsg("info", `✅ Switched to: ${selected}`);
+                    refreshConnectionBanner();
+                }
+                setModelPicker(null);
+                return;
+            }
+            return;
+        }
         // ── Ollama delete picker ──
         if (ollamaDeletePicker) {
             if (key.upArrow) {
@@ -1960,7 +2013,7 @@ function App() {
             })(), skillsPicker === "remove" && (() => {
                 const installed = listInstalledSkills();
                 return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.error, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.error, children: "Remove a skill:" }), installed.map((s, i) => (_jsxs(Text, { children: [i === skillsPickerIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsxs(Text, { color: i === skillsPickerIndex ? theme.colors.suggestion : theme.colors.muted, children: [s.name, " \u2014 ", s.description] })] }, s.name))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter remove · Esc back" })] }));
-            })(), 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" })] })), deleteSessionPicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.error, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.error, children: "Delete a session:" }), deleteSessionPicker.map((s, i) => (_jsxs(Text, { children: [i === deleteSessionPickerIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === deleteSessionPickerIndex ? theme.colors.suggestion : theme.colors.muted, children: s.display })] }, s.id))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter select · Esc cancel" })] })), deleteSessionConfirm && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.warning, paddingX: 1, marginBottom: 0, children: [_jsxs(Text, { bold: true, color: theme.colors.warning, children: ["Delete session ", deleteSessionConfirm.id, "?"] }), _jsxs(Text, { color: theme.colors.muted, children: ["  ", deleteSessionConfirm.display] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.error, bold: true, children: " [y]" }), _jsx(Text, { children: "es  " }), _jsx(Text, { color: theme.colors.success, bold: true, children: "[n]" }), _jsx(Text, { children: "o" })] })] })), ollamaDeletePicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.border, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "Delete which model?" }), _jsx(Text, { children: "" }), ollamaDeletePicker.models.map((m, i) => (_jsxs(Text, { children: ["  ", i === ollamaDeletePickerIndex ? _jsx(Text, { color: theme.colors.primary, bold: true, children: "▸ " }) : "  ", _jsx(Text, { color: i === ollamaDeletePickerIndex ? theme.colors.primary : undefined, children: m.name }), _jsxs(Text, { color: theme.colors.muted, children: [" (", (m.size / (1024 * 1024 * 1024)).toFixed(1), " GB)"] })] }, m.name))), _jsx(Text, { children: "" }), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter to delete · Esc cancel" })] })), ollamaPullPicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.border, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "Download which model?" }), _jsx(Text, { children: "" }), [
+            })(), 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" })] })), deleteSessionPicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.error, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.error, children: "Delete a session:" }), deleteSessionPicker.map((s, i) => (_jsxs(Text, { children: [i === deleteSessionPickerIndex ? _jsx(Text, { color: theme.colors.suggestion, bold: true, children: "▸ " }) : _jsx(Text, { children: "  " }), _jsx(Text, { color: i === deleteSessionPickerIndex ? theme.colors.suggestion : theme.colors.muted, children: s.display })] }, s.id))), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter select · Esc cancel" })] })), deleteSessionConfirm && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.warning, paddingX: 1, marginBottom: 0, children: [_jsxs(Text, { bold: true, color: theme.colors.warning, children: ["Delete session ", deleteSessionConfirm.id, "?"] }), _jsxs(Text, { color: theme.colors.muted, children: ["  ", deleteSessionConfirm.display] }), _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.error, bold: true, children: " [y]" }), _jsx(Text, { children: "es  " }), _jsx(Text, { color: theme.colors.success, bold: true, children: "[n]" }), _jsx(Text, { children: "o" })] })] })), modelPicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.border, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "Switch model:" }), _jsx(Text, { children: "" }), modelPicker.map((m, i) => (_jsxs(Text, { children: ["  ", i === modelPickerIndex ? _jsx(Text, { color: theme.colors.primary, bold: true, children: "▸ " }) : "  ", _jsx(Text, { color: i === modelPickerIndex ? theme.colors.primary : undefined, children: m }), m === modelName ? _jsx(Text, { color: theme.colors.success, children: " (active)" }) : null] }, m))), _jsx(Text, { children: "" }), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter to switch · Esc cancel" })] })), ollamaDeletePicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.border, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "Delete which model?" }), _jsx(Text, { children: "" }), ollamaDeletePicker.models.map((m, i) => (_jsxs(Text, { children: ["  ", i === ollamaDeletePickerIndex ? _jsx(Text, { color: theme.colors.primary, bold: true, children: "▸ " }) : "  ", _jsx(Text, { color: i === ollamaDeletePickerIndex ? theme.colors.primary : undefined, children: m.name }), _jsxs(Text, { color: theme.colors.muted, children: [" (", (m.size / (1024 * 1024 * 1024)).toFixed(1), " GB)"] })] }, m.name))), _jsx(Text, { children: "" }), _jsx(Text, { dimColor: true, children: "  ↑↓ navigate · Enter to delete · Esc cancel" })] })), ollamaPullPicker && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.border, paddingX: 1, marginBottom: 0, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "Download which model?" }), _jsx(Text, { children: "" }), [
                         { id: "qwen2.5-coder:7b", name: "Qwen 2.5 Coder 7B", size: "5 GB", desc: "Best balance of speed & quality" },
                         { id: "qwen2.5-coder:14b", name: "Qwen 2.5 Coder 14B", size: "9 GB", desc: "Higher quality, needs 16GB+ RAM" },
                         { id: "qwen2.5-coder:3b", name: "Qwen 2.5 Coder 3B", size: "2 GB", desc: "\u26A0\uFE0F Basic \u2014 may struggle with tool calls" },

package/package.json

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

package/src/index.tsx

@@ -191,6 +191,8 @@ function App() {
   const [ollamaDeletePickerIndex, setOllamaDeletePickerIndex] = useState(0);
   const [ollamaPullPicker, setOllamaPullPicker] = useState(false);
   const [ollamaPullPickerIndex, setOllamaPullPickerIndex] = useState(0);
+  const [modelPicker, setModelPicker] = useState<string[] | null>(null);
+  const [modelPickerIndex, setModelPickerIndex] = useState(0);
 
   // ── Setup Wizard State ──
   type WizardScreen = "connection" | "models" | "install-ollama" | "pulling" | null;
@@ -939,10 +941,32 @@ function App() {
       }
       return;
     }
-    if (trimmed.startsWith("/model")) {
-      const newModel = trimmed.replace("/model", "").trim();
+    if (trimmed === "/model" || trimmed === "/models") {
+      // Show picker of available models
+      try {
+        const ollamaModels = await listInstalledModelsDetailed();
+        if (ollamaModels.length > 0) {
+          setModelPicker(ollamaModels.map(m => m.name));
+          setModelPickerIndex(0);
+          return;
+        }
+      } catch {}
+      // Fallback: try provider's model list
+      try {
+        const providerModels = await listModels(providerRef.current?.baseUrl || "", providerRef.current?.apiKey || "");
+        if (providerModels.length > 0) {
+          setModelPicker(providerModels.map((m: any) => m.id || m));
+          setModelPickerIndex(0);
+          return;
+        }
+      } catch {}
+      addMsg("info", `Current model: ${modelName}\n  Usage: /model <model-name>`);
+      return;
+    }
+    if (trimmed.startsWith("/model ")) {
+      const newModel = trimmed.replace("/model ", "").trim();
       if (!newModel) {
-        addMsg("info", `Current model: ${agent.getModel()}\n  Usage: /model <model-name>`);
+        addMsg("info", `Current model: ${modelName}\n  Usage: /model <model-name>`);
         return;
       }
       agent.switchModel(newModel);
@@ -1390,6 +1414,34 @@ function App() {
       return;
     }
 
+    // ── Model picker ──
+    if (modelPicker) {
+      if (key.upArrow) {
+        setModelPickerIndex((prev) => (prev - 1 + modelPicker.length) % modelPicker.length);
+        return;
+      }
+      if (key.downArrow) {
+        setModelPickerIndex((prev) => (prev + 1) % modelPicker.length);
+        return;
+      }
+      if (key.escape) {
+        setModelPicker(null);
+        return;
+      }
+      if (key.return) {
+        const selected = modelPicker[modelPickerIndex];
+        if (selected && agent) {
+          agent.switchModel(selected);
+          setModelName(selected);
+          addMsg("info", `✅ Switched to: ${selected}`);
+          refreshConnectionBanner();
+        }
+        setModelPicker(null);
+        return;
+      }
+      return;
+    }
+
     // ── Ollama delete picker ──
     if (ollamaDeletePicker) {
       if (key.upArrow) {
@@ -2212,6 +2264,23 @@ function App() {
         </Box>
       )}
 
+      {/* ═══ MODEL PICKER ═══ */}
+      {modelPicker && (
+        <Box flexDirection="column" borderStyle="single" borderColor={theme.colors.border} paddingX={1} marginBottom={0}>
+          <Text bold color={theme.colors.secondary}>Switch model:</Text>
+          <Text>{""}</Text>
+          {modelPicker.map((m, i) => (
+            <Text key={m}>
+              {"  "}{i === modelPickerIndex ? <Text color={theme.colors.primary} bold>{"▸ "}</Text> : "  "}
+              <Text color={i === modelPickerIndex ? theme.colors.primary : undefined}>{m}</Text>
+              {m === modelName ? <Text color={theme.colors.success}>{" (active)"}</Text> : null}
+            </Text>
+          ))}
+          <Text>{""}</Text>
+          <Text dimColor>{"  ↑↓ navigate · Enter to switch · Esc cancel"}</Text>
+        </Box>
+      )}
+
       {/* ═══ OLLAMA DELETE PICKER ═══ */}
       {ollamaDeletePicker && (
         <Box flexDirection="column" borderStyle="single" borderColor={theme.colors.border} paddingX={1} marginBottom={0}>