@punkcode/cli 0.1.17 → 0.1.18

package/dist/{App-K3LI5C6C.js → App-GTPBJCS2.js}

@@ -10,10 +10,10 @@ import {
   signIn,
   usePunkStore,
   version
-} from "./chunk-5W6T4TEF.js";
+} from "./chunk-NW32U73H.js";
 
 // src/ui/App.tsx
-import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 
 // src/ui/LoginDialog.tsx
 import { useState, useEffect, useCallback } from "react";
@@ -208,7 +208,7 @@ function PasswordInput({ onSubmit }) {
 }
 
 // src/ui/Dashboard.tsx
-import { useState as useState2, useEffect as useEffect2 } from "react";
+import { useState as useState2, useEffect as useEffect2, useRef } from "react";
 import { Box as Box2, Text as Text2, useApp, useInput as useInput2, useStdout } from "ink";
 import { Badge } from "@inkjs/ui";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -238,18 +238,44 @@ function Dashboard({ store, connection, overlay }) {
   const server = usePunkStore(store, (s) => s.server);
   const connectedAt = usePunkStore(store, (s) => s.connectedAt);
   const auth = usePunkStore(store, (s) => s.auth);
+  const sessionProjects = usePunkStore(store, (s) => s.sessionProjects);
+  const [focusMode, setFocusMode] = useState2(false);
+  const [focusedSessionIdx, setFocusedSessionIdx] = useState2(0);
+  const knownSessionIds = Object.keys(sessionProjects);
+  const focusedSessionId = focusMode ? knownSessionIds[focusedSessionIdx] : null;
+  const hasMultipleSessions = knownSessionIds.length > 1;
+  const filteredActivity = focusedSessionId ? activityLog.filter((e) => e.sessionId === focusedSessionId) : activityLog;
   const [now, setNow] = useState2(Date.now());
   useEffect2(() => {
     const timer = setInterval(() => setNow(Date.now()), 1e3);
     return () => clearInterval(timer);
   }, []);
+  const [selectedIdx, setSelectedIdx] = useState2(-1);
+  const [userScrolled, setUserScrolled] = useState2(false);
+  const prevLogLength = useRef(filteredActivity.length);
+  useEffect2(() => {
+    if (filteredActivity.length > prevLogLength.current && !userScrolled) {
+      setSelectedIdx(filteredActivity.length - 1);
+    }
+    prevLogLength.current = filteredActivity.length;
+  }, [filteredActivity.length, userScrolled]);
+  useEffect2(() => {
+    setSelectedIdx(filteredActivity.length - 1);
+    setUserScrolled(false);
+  }, [focusedSessionId]);
+  const [detailEntry, setDetailEntry] = useState2(null);
+  const effectiveIdx = selectedIdx === -1 ? filteredActivity.length - 1 : selectedIdx;
   useInput2((input, key) => {
     if (input === "q" || input === "c" && key.ctrl) {
       connection?.disconnect();
       exit();
     }
     if (input === "r") connection?.reconnect();
-    if (input === "c" && !key.ctrl) store.getState().clearActivity();
+    if (input === "c" && !key.ctrl) {
+      store.getState().clearActivity();
+      setSelectedIdx(-1);
+      setUserScrolled(false);
+    }
     if (input === "l") {
       connection?.disconnect();
       clearAuth();
@@ -258,6 +284,35 @@ function Dashboard({ store, connection, overlay }) {
       store.getState().addActivity({ icon: "\u25CF", message: "Logged out" });
       store.getState().setScreen("login");
     }
+    if (input === "g" && knownSessionIds.length > 0) {
+      setFocusMode((f) => !f);
+      setFocusedSessionIdx(0);
+    }
+    if (focusMode && key.leftArrow) {
+      setFocusedSessionIdx((i) => (i - 1 + knownSessionIds.length) % knownSessionIds.length);
+    }
+    if (focusMode && key.rightArrow) {
+      setFocusedSessionIdx((i) => (i + 1) % knownSessionIds.length);
+    }
+    if (key.return && !detailEntry && effectiveIdx >= 0 && effectiveIdx < filteredActivity.length) {
+      setDetailEntry(filteredActivity[effectiveIdx]);
+    }
+    if ((key.escape || key.return) && detailEntry) {
+      setDetailEntry(null);
+    }
+    if (!detailEntry && key.upArrow && filteredActivity.length > 0) {
+      setUserScrolled(true);
+      setSelectedIdx((prev) => Math.max(0, (prev === -1 ? filteredActivity.length - 1 : prev) - 1));
+    }
+    if (!detailEntry && key.downArrow && filteredActivity.length > 0) {
+      const next = selectedIdx + 1;
+      if (next >= filteredActivity.length - 1) {
+        setUserScrolled(false);
+        setSelectedIdx(filteredActivity.length - 1);
+      } else {
+        setSelectedIdx(next);
+      }
+    }
   });
   const sessionList = Object.values(sessions);
   const uptime = connectedAt ? formatDuration(now - connectedAt) : "-";
@@ -266,8 +321,14 @@ function Dashboard({ store, connection, overlay }) {
   const headerHeight = 8;
   const sessionHeight = Math.max(sessionList.length, 1) + 5;
   const footerHeight = 1;
-  const activityHeight = Math.max(termHeight - headerHeight - sessionHeight - footerHeight - 4, 4);
-  const visibleActivity = activityLog.slice(-activityHeight);
+  const visibleCount = Math.max(termHeight - headerHeight - sessionHeight - footerHeight - 4, 4);
+  const tabBarHeight = focusMode ? 1 : 0;
+  const adjustedVisibleCount = visibleCount - tabBarHeight;
+  let viewStart = Math.max(0, filteredActivity.length - adjustedVisibleCount);
+  if (effectiveIdx < viewStart) viewStart = effectiveIdx;
+  if (effectiveIdx >= viewStart + adjustedVisibleCount) viewStart = effectiveIdx - adjustedVisibleCount + 1;
+  viewStart = Math.max(0, viewStart);
+  const visibleActivity = filteredActivity.slice(viewStart, viewStart + adjustedVisibleCount);
   return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", width: termWidth, height: termHeight, children: [
     /* @__PURE__ */ jsxs2(Box2, { flexDirection: "row", justifyContent: "space-between", width: termWidth - 2, paddingX: 1, children: [
       /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
@@ -330,15 +391,19 @@ function Dashboard({ store, connection, overlay }) {
         ] }),
         /* @__PURE__ */ jsxs2(Box2, { children: [
           /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "<c>     ".padEnd(10) }),
-          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Clear Log" })
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Clear Activity" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "<g>     ".padEnd(10) }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Group Activity" })
         ] }),
         /* @__PURE__ */ jsxs2(Box2, { children: [
           /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "<l>     ".padEnd(10) }),
           /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Logout" })
         ] }),
         /* @__PURE__ */ jsxs2(Box2, { children: [
-          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "<ctrl-c>".padEnd(10) }),
-          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Force Quit" })
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "<enter> ".padEnd(10) }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Activity Details" })
         ] })
       ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
         /* @__PURE__ */ jsxs2(Text2, { children: [
@@ -350,8 +415,14 @@ function Dashboard({ store, connection, overlay }) {
         /* @__PURE__ */ jsxs2(Text2, { children: [
           /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "c" }),
           /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " clear " }),
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "g" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " group" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
           /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "l" }),
-          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " logout" })
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " logout " }),
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "enter" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " details" })
         ] })
       ] }) }),
       termWidth >= 120 && /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", alignItems: "flex-end", justifyContent: "center", children: LOGO.map((line, i) => /* @__PURE__ */ jsx2(Text2, { color: theme.logo, children: line }, i)) })
@@ -384,7 +455,10 @@ function Dashboard({ store, connection, overlay }) {
       )
     ] }),
     /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", marginX: 1, flexGrow: 1, children: [
-      buildTopBorderJsx(overlay ? "Login" : "Activity", boxWidth),
+      buildTopBorderJsx(
+        overlay ? "Login" : focusMode && focusedSessionId ? `Activity: ${sessionProjects[focusedSessionId]?.project ?? focusedSessionId.slice(0, 8)}` : filteredActivity.length > adjustedVisibleCount ? `Activity (${effectiveIdx + 1}/${filteredActivity.length})` : "Activity",
+        boxWidth
+      ),
       /* @__PURE__ */ jsx2(
         Box2,
         {
@@ -396,23 +470,117 @@ function Dashboard({ store, connection, overlay }) {
           flexGrow: 1,
           alignItems: overlay ? "center" : void 0,
           justifyContent: overlay ? "center" : void 0,
-          children: overlay ?? (visibleActivity.length === 0 ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Waiting for events..." }) : visibleActivity.map((entry, i) => /* @__PURE__ */ jsx2(ActivityRow, { entry, termWidth }, `${entry.timestamp}-${i}`)))
+          children: overlay ?? (detailEntry ? (
+            /* Detail view */
+            /* @__PURE__ */ jsx2(DetailView, { entry: detailEntry, sessionProjects })
+          ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+            focusMode && knownSessionIds.length > 0 && /* @__PURE__ */ jsxs2(Box2, { marginBottom: 1, gap: 1, children: [
+              knownSessionIds.map((sid, i) => {
+                const sp = sessionProjects[sid];
+                const isFocused = i === focusedSessionIdx;
+                return /* @__PURE__ */ jsx2(Text2, { children: isFocused ? /* @__PURE__ */ jsxs2(Text2, { bold: true, children: [
+                  "[",
+                  sp?.project ?? sid.slice(0, 8),
+                  ":",
+                  sid.slice(0, 8),
+                  "]"
+                ] }) : /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+                  " ",
+                  sp?.project ?? sid.slice(0, 8),
+                  ":",
+                  sid.slice(0, 8),
+                  " "
+                ] }) }, sid);
+              }),
+              /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+                "  ",
+                "\u2190",
+                "/",
+                "\u2192",
+                " switch  g all"
+              ] })
+            ] }),
+            visibleActivity.length === 0 ? /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Waiting for events..." }) : visibleActivity.map((entry, i) => /* @__PURE__ */ jsx2(
+              ActivityRow,
+              {
+                entry,
+                termWidth,
+                isSelected: viewStart + i === effectiveIdx,
+                sessionProjects: hasMultipleSessions && !focusMode ? sessionProjects : void 0
+              },
+              `${entry.timestamp}-${i}`
+            ))
+          ] }))
         }
       )
     ] }),
     /* @__PURE__ */ jsxs2(Box2, { paddingX: 1, justifyContent: "space-between", width: termWidth - 2, children: [
+      /* @__PURE__ */ jsx2(Box2, { gap: 2, children: detailEntry ? /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsxs2(Text2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "esc" }),
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " close" })
+      ] }) }) : overlay ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "e" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " email" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "q" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " quit" })
+        ] })
+      ] }) : focusMode ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "\u2190\u2192" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " switch" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "g" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " all" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "\u2191\u2193" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " scroll" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "enter" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " details" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "q" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " quit" })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "\u2191\u2193" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " scroll" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "enter" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " details" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "g" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " group" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "c" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " clear" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "r" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " reconnect" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "l" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " logout" })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { color: theme.accent, bold: true, children: "q" }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " quit" })
+        ] })
+      ] }) }),
       /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
         "punk v",
         version
-      ] }),
-      /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
-        sessionList.length,
-        " session",
-        sessionList.length !== 1 ? "s" : "",
-        " ",
-        "\xB7",
-        " ",
-        stripProtocol(server)
       ] })
     ] })
   ] });
@@ -457,7 +625,54 @@ function SessionRow({ session, now, col }) {
     col.showExtras && /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: session.effort ?? "" })
   ] });
 }
-function ActivityRow({ entry, termWidth }) {
+function DetailView({ entry, sessionProjects }) {
+  const time = new Date(entry.timestamp).toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+  const date = new Date(entry.timestamp).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+  const sp = entry.sessionId ? sessionProjects[entry.sessionId] : null;
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingY: 1, children: [
+    /* @__PURE__ */ jsx2(Box2, { gap: 1, children: /* @__PURE__ */ jsxs2(Text2, { bold: true, children: [
+      entry.icon,
+      " ",
+      entry.message
+    ] }) }),
+    /* @__PURE__ */ jsx2(Text2, { children: " " }),
+    /* @__PURE__ */ jsxs2(Box2, { children: [
+      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Time:     ".padEnd(12) }),
+      /* @__PURE__ */ jsxs2(Text2, { children: [
+        date,
+        " ",
+        time
+      ] })
+    ] }),
+    entry.sessionId && /* @__PURE__ */ jsxs2(Box2, { children: [
+      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Session:  ".padEnd(12) }),
+      /* @__PURE__ */ jsx2(Text2, { children: entry.sessionId })
+    ] }),
+    sp && /* @__PURE__ */ jsxs2(Box2, { children: [
+      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "Project:  ".padEnd(12) }),
+      /* @__PURE__ */ jsx2(Text2, { children: sp.project })
+    ] }),
+    entry.data && Object.entries(entry.data).map(([key, value]) => {
+      if (value == null) return null;
+      const strValue = typeof value === "string" ? value : JSON.stringify(value);
+      if (!strValue) return null;
+      return /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: (key + ":").padEnd(12) }),
+        /* @__PURE__ */ jsx2(Text2, { children: strValue })
+      ] }, key);
+    })
+  ] });
+}
+function ActivityRow({ entry, termWidth, isSelected, sessionProjects }) {
   const time = new Date(entry.timestamp).toLocaleTimeString("en-US", {
     hour12: false,
     hour: "2-digit",
@@ -467,21 +682,25 @@ function ActivityRow({ entry, termWidth }) {
   const iconColor = entry.icon === "\u2713" ? theme.success : entry.icon === "\u2717" ? theme.error : entry.icon === "\u25B6" ? theme.primary : entry.icon === "\u27F3" ? theme.warning : "white";
   const sessionStr = entry.sessionId ? entry.sessionId.slice(0, 8) : "";
   const detailStr = entry.detail ?? "";
+  const marker = isSelected ? "\u25B8 " : "  ";
+  const sp = sessionProjects && entry.sessionId ? sessionProjects[entry.sessionId] : null;
   return /* @__PURE__ */ jsxs2(Box2, { children: [
-    /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+    /* @__PURE__ */ jsx2(Text2, { color: isSelected ? theme.primary : void 0, bold: isSelected, children: marker }),
+    /* @__PURE__ */ jsxs2(Text2, { dimColor: !isSelected, children: [
       time,
       "  "
     ] }),
+    sp && /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: `${sp.project.slice(0, 8)}:${sessionStr}`.padEnd(18) }),
     /* @__PURE__ */ jsxs2(Text2, { color: iconColor, bold: true, children: [
       entry.icon,
       " "
     ] }),
-    /* @__PURE__ */ jsx2(Text2, { children: entry.message }),
-    termWidth >= 80 && sessionStr && /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+    /* @__PURE__ */ jsx2(Text2, { bold: isSelected, children: entry.message }),
+    !sp && termWidth >= 80 && sessionStr && /* @__PURE__ */ jsxs2(Text2, { dimColor: !isSelected, children: [
       "  ",
       sessionStr
     ] }),
-    termWidth >= 80 && detailStr && /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+    termWidth >= 80 && detailStr && /* @__PURE__ */ jsxs2(Text2, { dimColor: !isSelected, children: [
       "  ",
       detailStr
     ] })
@@ -528,7 +747,7 @@ function App({ server, idToken, options }) {
     }
     return s;
   });
-  const connectionRef = useRef(null);
+  const connectionRef = useRef2(null);
   const screen = usePunkStore(store, (s) => s.screen);
   useEffect3(() => {
     if (screen !== "connecting") return;

package/dist/{chunk-5W6T4TEF.js → chunk-NW32U73H.js}

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 // src/version.ts
-var version = "0.1.17";
+var version = "0.1.18";
 
 // src/lib/auth.ts
 import fs from "fs";
@@ -1292,6 +1292,8 @@ var PunkConnection = class {
   handlePrompt(msg) {
     const { id, prompt, sessionId, workingDirectory, images, options } = msg;
     const { store } = this;
+    const projectName = workingDirectory ? path3.basename(workingDirectory) : id.slice(0, 8);
+    store.getState().registerSession(id, projectName);
     store.getState().addSession(id, {
       requestId: id,
       prompt,
@@ -1305,7 +1307,8 @@ var PunkConnection = class {
       icon: "\u25B6",
       message: "Session started",
       sessionId: id,
-      detail: workingDirectory ? path3.basename(workingDirectory) : void 0
+      detail: workingDirectory ? path3.basename(workingDirectory) : void 0,
+      data: { prompt: prompt.slice(0, 500), workingDirectory, model: options?.model, effort: options?.effort }
     });
     const handle = runClaude(
       { prompt, sessionId, workingDirectory, images, options },
@@ -1324,10 +1327,12 @@ var PunkConnection = class {
         },
         onToolUse: (toolId, name, input, parentToolUseId) => {
           this.send("response", { type: "tool_use", id: toolId, name, input, requestId: id, parent_tool_use_id: parentToolUseId ?? null });
+          const inputStr = typeof input === "string" ? input : JSON.stringify(input);
           store.getState().addActivity({
             icon: "\u25B6",
             message: `Tool: ${name}`,
-            sessionId: id
+            sessionId: id,
+            data: { toolName: name, input: inputStr?.slice(0, 500) }
           });
         },
         onToolResult: (toolUseId, content, isError) => {
@@ -1343,13 +1348,14 @@ var PunkConnection = class {
           this.send("response", { type: "error", message, requestId: id });
           this.activeSessions.delete(id);
           store.getState().updateSession(id, { status: "error" });
-          store.getState().addActivity({ icon: "\u2717", message: `Error: ${message}`, sessionId: id });
+          store.getState().addActivity({ icon: "\u2717", message: `Error: ${message}`, sessionId: id, data: { error: message } });
         },
         onPermissionRequest: (req) => {
           store.getState().addActivity({
             icon: "\u25CF",
             message: `Permission: ${req.toolName}`,
-            sessionId: id
+            sessionId: id,
+            data: { toolName: req.toolName, input: JSON.stringify(req.input).slice(0, 500), reason: req.reason, blockedPath: req.blockedPath }
           });
           this.socket.emit("permission-request", {
             requestId: id,
@@ -1557,7 +1563,8 @@ function fitToPayloadLimit(messages) {
 
 // src/ui/store.ts
 import { createStore, useStore } from "zustand";
-var MAX_ACTIVITY_ENTRIES = 100;
+var MAX_ACTIVITY_ENTRIES = 500;
+var SESSION_COLORS = ["magenta", "blue", "magentaBright", "blueBright", "white", "gray"];
 var createPunkStore = (server) => createStore((set) => ({
   // Initial state
   screen: "login",
@@ -1569,6 +1576,7 @@ var createPunkStore = (server) => createStore((set) => ({
   connectedAt: null,
   sessions: {},
   activityLog: [],
+  sessionProjects: {},
   // Actions
   setScreen: (screen) => set({ screen }),
   setAuth: (auth) => set({ auth }),
@@ -1594,7 +1602,17 @@ var createPunkStore = (server) => createStore((set) => ({
       { ...entry, timestamp: Date.now() }
     ]
   })),
-  clearActivity: () => set({ activityLog: [] })
+  clearActivity: () => set({ activityLog: [] }),
+  registerSession: (id, project) => set((s) => {
+    if (s.sessionProjects[id]) return s;
+    const colorIdx = Object.keys(s.sessionProjects).length % SESSION_COLORS.length;
+    return {
+      sessionProjects: {
+        ...s.sessionProjects,
+        [id]: { project, color: SESSION_COLORS[colorIdx] }
+      }
+    };
+  })
 }));
 function usePunkStore(store, selector) {
   return useStore(store, selector);

package/dist/cli.js

@@ -8,7 +8,7 @@ import {
   refreshIdToken,
   signIn,
   version
-} from "./chunk-5W6T4TEF.js";
+} from "./chunk-NW32U73H.js";
 
 // src/cli.ts
 import { program } from "commander";
@@ -135,7 +135,7 @@ async function runHeadless(server, idToken, options) {
 async function runTui(server, options) {
   const { render } = await import("ink");
   const { createElement } = await import("react");
-  const { App } = await import("./App-K3LI5C6C.js");
+  const { App } = await import("./App-GTPBJCS2.js");
   const idToken = options.token ? options.token : void 0;
   process.stdout.write("\x1B[?1049h");
   process.stdout.write("\x1B[H");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@punkcode/cli",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "Control Claude Code from your phone",
   "type": "module",
   "bin": {