agdi 3.3.4 → 3.3.5

package/dist/index.js

@@ -4260,7 +4260,7 @@ import { render } from "ink";
 
 // src/ui/tui.tsx
 import { useState, useEffect } from "react";
-import { Box, Text, useApp } from "ink";
+import { Box, Text, useApp, Spacer } from "ink";
 import TextInput from "ink-text-input";
 import fs7 from "fs";
 import path7 from "path";
@@ -4268,11 +4268,22 @@ import os from "os";
 import { jsx, jsxs } from "react/jsx-runtime";
 var THEME2 = {
   bg: "black",
-  border: "gray",
-  accent: "blue",
-  text: "white",
-  dim: "gray",
-  success: "green"
+  // Main background
+  text: "#E5E5E5",
+  // Primary text
+  dim: "#6B7280",
+  // Secondary/Dim text
+  accent: "#3B82F6",
+  // Brand Blue
+  border: "#374151",
+  // Dark gray border
+  success: "#10B981",
+  warning: "#F59E0B",
+  error: "#EF4444",
+  cardBg: "#111827",
+  // Slightly lighter bg for cards
+  highlight: "#1F2937"
+  // Hover/Selection state
 };
 var BootScreen = ({ onComplete }) => {
   const [progress, setProgress] = useState(0);
@@ -4298,60 +4309,114 @@ var BootScreen = ({ onComplete }) => {
     ] })
   ] });
 };
+var Header = () => {
+  return /* @__PURE__ */ jsxs(Box, { borderStyle: "single", borderColor: THEME2.border, paddingX: 1, flexDirection: "row", justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Text, { color: THEME2.warning, children: "\u26A1 " }),
+      /* @__PURE__ */ jsx(Text, { bold: true, color: THEME2.text, children: "Starter " }),
+      /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: os.homedir() })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "Agdi v3.3.4" }) })
+  ] });
+};
+var Footer = ({ status }) => {
+  return /* @__PURE__ */ jsxs(Box, { borderStyle: "single", borderColor: THEME2.border, borderTop: false, paddingX: 1, flexDirection: "row", justifyContent: "space-between", children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Text, { color: status === "IDLE" ? THEME2.success : THEME2.warning, children: "\u25CF " }),
+      /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: status })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "CONNECT TELEGRAM / WHATSAPP (ALPHA)" }) }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: THEME2.error, children: "Stop & Disconnect" }) })
+  ] });
+};
 var Sidebar = ({ history }) => {
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: 25, borderStyle: "single", borderColor: THEME2.border, paddingX: 1, children: [
-    /* @__PURE__ */ jsx(Box, { marginBottom: 1, borderStyle: "single", borderColor: THEME2.accent, justifyContent: "center", children: /* @__PURE__ */ jsx(Text, { bold: true, children: "+ New task" }) }),
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: 32, borderStyle: "single", borderColor: THEME2.border, borderRight: false, borderTop: false, borderBottom: false, paddingX: 1, children: [
+    /* @__PURE__ */ jsx(Box, { marginBottom: 1, borderStyle: "round", borderColor: THEME2.text, justifyContent: "center", paddingX: 1, children: /* @__PURE__ */ jsx(Text, { bold: true, color: THEME2.text, children: "+ New task" }) }),
     /* @__PURE__ */ jsx(Text, { color: THEME2.dim, bold: true, children: "RECENTS" }),
-    /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginTop: 0, children: history.length === 0 ? /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "No recent sessions" }) : history.map((h, i) => /* @__PURE__ */ jsx(Text, { color: THEME2.text, children: h }, i)) })
+    /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginTop: 0, children: history.length === 0 ? /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "No recent sessions" }) : history.map((h, i) => /* @__PURE__ */ jsxs(Box, { flexDirection: "row", justifyContent: "space-between", marginBottom: 0, children: [
+      /* @__PURE__ */ jsx(Text, { color: THEME2.text, children: h.length > 18 ? h.substring(0, 15) + "..." : h }),
+      /* @__PURE__ */ jsx(Box, { borderStyle: "single", borderColor: THEME2.dim, paddingX: 1, marginLeft: 1, children: /* @__PURE__ */ jsx(Text, { color: THEME2.dim, dimColor: true, children: "STARTER" }) })
+    ] }, i)) })
   ] });
 };
 var ContextPanel = ({ files, agentStatus }) => {
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: 30, borderStyle: "single", borderColor: THEME2.border, paddingX: 1, children: [
-    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
-      /* @__PURE__ */ jsx(Text, { bold: true, children: "Context" }),
-      /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "WORKING FILES" }),
-      files.length === 0 ? /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "None yet." }) : files.slice(0, 5).map((f, i) => /* @__PURE__ */ jsxs(Text, { color: THEME2.accent, children: [
-        "\u{1F4C4} ",
-        f
-      ] }, i))
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: 35, borderStyle: "single", borderColor: THEME2.border, borderLeft: false, borderTop: false, borderBottom: false, paddingX: 1, children: [
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, borderStyle: "single", borderColor: THEME2.border, padding: 0, children: [
+      /* @__PURE__ */ jsx(Text, { bold: true, color: THEME2.text, children: " Context" }),
+      /* @__PURE__ */ jsxs(Box, { marginLeft: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx(Text, { color: THEME2.dim, bold: true, children: "WORKING FILES" }),
+        files.length === 0 ? /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "None yet." }) : files.slice(0, 5).map((f, i) => (
+          // @ts-expect-error: Ink type definition mismatch for key prop
+          /* @__PURE__ */ jsxs(Text, { color: THEME2.accent, children: [
+            "\u{1F4C4} ",
+            f
+          ] }, i)
+        ))
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, borderStyle: "single", borderColor: THEME2.dim, padding: 0, children: [
-      /* @__PURE__ */ jsx(Text, { bold: true, children: " Plugins" }),
-      /* @__PURE__ */ jsx(Text, { color: THEME2.success, children: "\u2022 Scheduler" }),
-      /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "  Run scheduled jobs" })
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, borderStyle: "single", borderColor: THEME2.border, padding: 0, children: [
+      /* @__PURE__ */ jsx(Text, { bold: true, color: THEME2.text, children: " Plugins" }),
+      /* @__PURE__ */ jsxs(Box, { marginLeft: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx(Text, { color: THEME2.success, children: "\u2022 Scheduler" }),
+        /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "  Run scheduled jobs" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, borderStyle: "single", borderColor: THEME2.border, padding: 0, children: [
+      /* @__PURE__ */ jsx(Text, { bold: true, color: THEME2.text, children: " MCP" }),
+      /* @__PURE__ */ jsxs(Box, { marginLeft: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx(Text, { color: THEME2.success, children: "\u2022 chrome-devtools" }),
+        /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "  Connected - npx -y chrome..." })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx(Text, { bold: true, children: "Status" }),
-      /* @__PURE__ */ jsxs(Text, { color: agentStatus === "IDLE" ? THEME2.dim : THEME2.success, children: [
-        "\u2022 ",
-        agentStatus
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: THEME2.border, padding: 0, children: [
+      /* @__PURE__ */ jsx(Text, { bold: true, color: THEME2.text, children: " Skills" }),
+      /* @__PURE__ */ jsxs(Box, { marginLeft: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "\u2394 Agent Creator" }),
+        /* @__PURE__ */ jsx(Text, { color: THEME2.dim, dimColor: true, children: "  bash" }),
+        /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "\u2394 Command Creator" }),
+        /* @__PURE__ */ jsx(Text, { color: THEME2.dim, dimColor: true, children: "  bash" })
       ] })
     ] })
   ] });
 };
 var ChatArea = ({ history, onSend, placeholder }) => {
   const [query, setQuery] = useState("");
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "single", borderColor: THEME2.border, marginLeft: 0, marginRight: 0, children: [
-    /* @__PURE__ */ jsx(Box, { justifyContent: "center", borderStyle: "single", borderBottomColor: THEME2.border, borderTop: false, borderLeft: false, borderRight: false, paddingBottom: 0, children: /* @__PURE__ */ jsx(Text, { bold: true, children: "Start a conversation" }) }),
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "single", borderColor: THEME2.border, borderTop: false, borderBottom: false, marginLeft: 0, marginRight: 0, children: [
     /* @__PURE__ */ jsx(Box, { flexDirection: "column", flexGrow: 1, padding: 1, justifyContent: "flex-end", children: history.length === 0 ? /* @__PURE__ */ jsxs(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", height: 10, children: [
-      /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "Describe what you want to do," }),
-      /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "and Agdi will take it from there." })
-    ] }) : history.slice(-8).map((msg, i) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
-      /* @__PURE__ */ jsx(Text, { bold: true, color: msg.role === "user" ? THEME2.text : THEME2.accent, children: msg.role === "user" ? "You" : "Agdi" }),
+      /* @__PURE__ */ jsx(Box, { borderStyle: "round", borderColor: THEME2.border, padding: 1, marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "\u26A1" }) }),
+      /* @__PURE__ */ jsx(Text, { bold: true, color: THEME2.text, children: "Start a conversation" }),
+      /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "Describe what you want to do, and Agdi will take it" }),
+      /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "from there." })
+    ] }) : history.slice(-10).map((msg, i) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, borderStyle: "single", borderColor: THEME2.border, padding: 1, children: [
+      /* @__PURE__ */ jsxs(Box, { flexDirection: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx(Text, { bold: true, color: msg.role === "user" ? THEME2.text : THEME2.accent, children: msg.role === "user" ? "You" : "Agdi" }),
+        /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: msg.role === "system" ? "System" : "Unknown Model" })
+      ] }),
       /* @__PURE__ */ jsx(Text, { color: THEME2.text, children: msg.text })
     ] }, i)) }),
-    /* @__PURE__ */ jsx(Box, { borderStyle: "round", borderColor: THEME2.dim, paddingX: 1, marginX: 1, marginBottom: 1, children: /* @__PURE__ */ jsx(
-      TextInput,
-      {
-        value: query,
-        onChange: setQuery,
-        onSubmit: (val) => {
-          onSend(val);
-          setQuery("");
-        },
-        placeholder
-      }
-    ) })
+    /* @__PURE__ */ jsxs(Box, { borderStyle: "round", borderColor: THEME2.dim, paddingX: 1, marginX: 2, marginBottom: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { color: THEME2.dim, italic: true, children: "OpenCode Zen \u2022 Big Pickle \u2022 Variant X-High" }) }),
+      /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
+        /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "> " }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: query,
+            onChange: setQuery,
+            onSubmit: (val) => {
+              onSend(val);
+              setQuery("");
+            },
+            placeholder
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { marginTop: 0, justifyContent: "flex-end", flexDirection: "row", children: [
+        /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "@ Default agent" }),
+        /* @__PURE__ */ jsx(Spacer, {}),
+        /* @__PURE__ */ jsx(Text, { color: THEME2.dim, children: "\u{1F4CE} \u2794" })
+      ] })
+    ] })
   ] });
 };
 var Dashboard = () => {
@@ -4451,17 +4516,21 @@ var Dashboard = () => {
       });
     }
   };
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "row", height: 30, padding: 1, children: [
-    /* @__PURE__ */ jsx(Sidebar, { history: ["New session - " + (/* @__PURE__ */ new Date()).toLocaleDateString()] }),
-    /* @__PURE__ */ jsx(
-      ChatArea,
-      {
-        history: chatHistory,
-        onSend: handleCommand,
-        placeholder: step === "prompt" ? "Ask Agdi..." : "Reply..."
-      }
-    ),
-    /* @__PURE__ */ jsx(ContextPanel, { files: activeFiles, agentStatus })
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", height: 35, width: 120, children: [
+    /* @__PURE__ */ jsx(Header, {}),
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx(Sidebar, { history: ["New session - " + (/* @__PURE__ */ new Date()).toLocaleDateString()] }),
+      /* @__PURE__ */ jsx(
+        ChatArea,
+        {
+          history: chatHistory,
+          onSend: handleCommand,
+          placeholder: step === "prompt" ? "Ask Agdi..." : "Reply..."
+        }
+      ),
+      /* @__PURE__ */ jsx(ContextPanel, { files: activeFiles, agentStatus })
+    ] }),
+    /* @__PURE__ */ jsx(Footer, { status: agentStatus })
   ] });
 };
 var App = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "agdi",
-    "version": "3.3.4",
+    "version": "3.3.5",
     "description": "AI-powered app generator - build full-stack apps from natural language in your terminal",
     "type": "module",
     "bin": {
@@ -90,4 +90,4 @@
         "ts-node": "^10.9.2",
         "uuid": "^13.0.0"
     }
-}
+}