@miphamai/cli 0.24.8 → 0.24.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miphamai/cli",
-  "version": "0.24.8",
+  "version": "0.24.10",
   "description": "Mipham Code — Multi-model open-core intelligent coding terminal by MiphamAI",
   "keywords": [
     "ai",

package/src/agent-view/dashboard.tsx

@@ -31,6 +31,13 @@ export function AgentViewDashboard({ manager, onAttach, onExit }: DashboardProps
   const [selectedIndex, setSelectedIndex] = useState(0)
   const [peekingSessionId, setPeekingSessionId] = useState<string | null>(null)
   const [_groupBy, setGroupBy] = useState<'status' | 'directory'>('status')
+  const [feedback, setFeedback] = useState<string | null>(null)
+
+  // Flash a brief feedback message that auto-clears
+  const showFeedback = useCallback((msg: string) => {
+    setFeedback(msg)
+    setTimeout(() => setFeedback(null), 1800)
+  }, [])
 
   // Build a flat list of sessions in group order, with group headers
   const flatList = useMemo(() => {
@@ -99,26 +106,39 @@ export function AgentViewDashboard({ manager, onAttach, onExit }: DashboardProps
     // Ctrl+S — toggle group by (status ↔ directory)
     if (input === '\x13') {
       setGroupBy((prev) => (prev === 'status' ? 'directory' : 'status'))
+      showFeedback(`Grouped by ${_groupBy === 'status' ? 'directory' : 'status'}`)
       return
     }
 
     // Ctrl+R — rename selected session
     if (input === '\x12') {
-      if (sessionsOnly.length === 0) return
+      if (sessionsOnly.length === 0) {
+        showFeedback('No sessions to rename')
+        return
+      }
       const current = sessionsOnly[selectedIndex]
       if (!current) return
       const newTitle = `session-${Date.now().toString(36)}`
       manager.rename(current.session.id, newTitle)
+      showFeedback(`Renamed to ${newTitle}`)
       return
     }
 
     if (input === 'j') {
+      if (sessionsOnly.length === 0) {
+        showFeedback('No sessions to navigate — spawn a background agent first')
+        return
+      }
       setSelectedIndex((prev) => Math.min(prev + 1, sessionsOnly.length - 1))
       setPeekingSessionId(null)
       return
     }
 
     if (input === 'k') {
+      if (sessionsOnly.length === 0) {
+        showFeedback('No sessions to navigate — spawn a background agent first')
+        return
+      }
       setSelectedIndex((prev) => Math.max(prev - 1, 0))
       setPeekingSessionId(null)
       return
@@ -126,7 +146,10 @@ export function AgentViewDashboard({ manager, onAttach, onExit }: DashboardProps
 
     // Space — toggle peek
     if (input === ' ') {
-      if (sessionsOnly.length === 0) return
+      if (sessionsOnly.length === 0) {
+        showFeedback('No sessions to peek')
+        return
+      }
       const current = sessionsOnly[selectedIndex]
       if (!current) return
       setPeekingSessionId(peekingSessionId === current.session.id ? null : current.session.id)
@@ -135,7 +158,10 @@ export function AgentViewDashboard({ manager, onAttach, onExit }: DashboardProps
 
     // Enter — attach to selected session
     if (key.return) {
-      if (sessionsOnly.length === 0) return
+      if (sessionsOnly.length === 0) {
+        showFeedback('No sessions to attach — spawn a background agent first')
+        return
+      }
       const current = sessionsOnly[selectedIndex]
       if (!current) return
       if (peekingSessionId) {
@@ -198,6 +224,13 @@ export function AgentViewDashboard({ manager, onAttach, onExit }: DashboardProps
           <Text dimColor>
             Use the Agent tool or type &quot;run this in background&quot; to spawn one.
           </Text>
+          {feedback && (
+            <Box marginTop={1}>
+              <Text color="yellow" dimColor>
+                ⚡ {feedback}
+              </Text>
+            </Box>
+          )}
         </Box>
       ) : (
         <Box flexDirection="column">
@@ -232,6 +265,15 @@ export function AgentViewDashboard({ manager, onAttach, onExit }: DashboardProps
       {peekData && (
         <SessionPeek session={peekData.session} recentMessages={peekData.recentMessages} />
       )}
+
+      {/* Feedback toast — flashes briefly on action */}
+      {feedback && (
+        <Box marginTop={1}>
+          <Text color="yellow" dimColor>
+            ⚡ {feedback}
+          </Text>
+        </Box>
+      )}
     </Box>
   )
 }

package/src/i18n-core/locales/en-US.json

@@ -703,7 +703,7 @@
     "status": {
       "esc_to_interrupt": "esc to interrupt",
       "shift_tab_cycle": "shift+tab to cycle",
-      "left_for_agents": "← for agents"
+      "left_for_agents": "ctrl+g agents to manage"
     }
   },
   "tools": {

package/src/i18n-core/locales/zh-CN.json

@@ -703,7 +703,7 @@
     "status": {
       "esc_to_interrupt": "Esc 中断",
       "shift_tab_cycle": "Shift+Tab 切换",
-      "left_for_agents": "← 代理"
+      "left_for_agents": "ctrl+g 管理代理"
     }
   },
   "tools": {

package/src/index.tsx

@@ -488,6 +488,7 @@ export async function runApp(options: RunOptions): Promise<void> {
         pluginManager,
         version: options.version,
         sessionId: sessionName,
+        agentViewManager,
       }),
     }),
   )

package/src/ui/app.tsx

@@ -12,6 +12,8 @@ import { ChatPanel } from './chat'
 import { InputBar } from './input'
 import { ModelPicker } from './picker'
 import { AgentFooter, type AgentEntry } from './agent-footer'
+import { AgentViewDashboard } from '../agent-view/dashboard'
+import type { AgentViewManager } from '../agent-view/agent-view-manager'
 import { WorkflowProgress } from './workflow-progress.js'
 import {
   getCommand,
@@ -33,6 +35,7 @@ interface AppProps {
   pluginManager?: PluginManager
   version?: string
   sessionId?: string
+  agentViewManager?: AgentViewManager
 }
 
 export interface ToolMeta {
@@ -121,6 +124,7 @@ export function App({
   pluginManager,
   version,
   sessionId,
+  agentViewManager,
 }: AppProps) {
   const { t } = useI18n()
   const PERMISSION_LABELS = useMemo<Record<PermissionMode, string>>(
@@ -139,6 +143,7 @@ export function App({
   const [providerId, setProviderId] = useState(initialProvider || config.defaultProvider)
   const [modelId, setModelId] = useState(initialModel || config.defaultModel)
   const [pickerOpen, setPickerOpen] = useState(false)
+  const [agentViewOpen, setAgentViewOpen] = useState(false)
   const [_sessionTitle, setSessionTitle] = useState('')
   const [_fastMode, setFastMode] = useState(false)
   const [_effort, setEffort] = useState('high')
@@ -580,99 +585,115 @@ export function App({
       {/* Workflow progress — auto-detects active workflows, renders nothing when idle */}
       <WorkflowProgress />
 
-      {/* Chat panel */}
-      <ChatPanel messages={messages} focusMode={focusMode} />
-
-      {/* Input with separator lines */}
-      {pickerOpen ? (
-        <ModelPicker
-          config={config}
-          currentProvider={providerId}
-          currentModel={modelId}
-          onSelect={(newProvider, newModel) => {
-            engine.switchProvider(newProvider, newModel)
-            setProviderId(newProvider)
-            setModelId(newModel)
-            setPickerOpen(false)
-            setMessages((prev) => [
-              ...prev,
-              { role: 'system', content: `✓ Switched to ${newProvider}/${newModel}` },
-            ])
-          }}
-          onClose={() => setPickerOpen(false)}
+      {/* Agent View Dashboard — Ctrl+G overlay (replaces chat + input) */}
+      {agentViewOpen && agentViewManager ? (
+        <AgentViewDashboard
+          manager={agentViewManager}
+          onAttach={() => {}}
+          onExit={() => setAgentViewOpen(false)}
         />
       ) : (
-        /* Input bar (hidden when picker is open) */
-        <Box flexDirection="column">
-          <Text dimColor>──────────────────────────────</Text>
-          <InputBar
-            onSubmit={handleSubmit}
-            isLoading={isLoading}
-            onTogglePicker={() => setPickerOpen((prev) => !prev)}
-            onToggleFocus={() => setFocusMode((prev) => !prev)}
-            onToggleExpand={() => {
-              setMessages((prev) => {
-                const msgs = [...prev]
-                for (let i = msgs.length - 1; i >= 0; i--) {
-                  if (msgs[i]?.toolMeta) {
-                    const meta = msgs[i]!.toolMeta!
-                    if (meta.collapsed) {
-                      msgs[i] = {
-                        ...msgs[i]!,
-                        content: `🔧 ${meta.name}: ${meta.input}\n📋 Result: ${meta.output || '(pending)'}`,
-                        toolMeta: { ...meta, collapsed: false },
-                      }
-                    } else {
-                      const short =
-                        meta.input.length > 50 ? meta.input.slice(0, 50) + '...' : meta.input
-                      msgs[i] = {
-                        ...msgs[i]!,
-                        content: `⏺ ${meta.name} · ${short} (Ctrl+O to expand)`,
-                        toolMeta: { ...meta, collapsed: true },
+        <>
+          {/* Chat panel */}
+          <ChatPanel messages={messages} focusMode={focusMode} />
+
+          {/* Input with separator lines */}
+          {pickerOpen ? (
+            <ModelPicker
+              config={config}
+              currentProvider={providerId}
+              currentModel={modelId}
+              onSelect={(newProvider, newModel) => {
+                engine.switchProvider(newProvider, newModel)
+                setProviderId(newProvider)
+                setModelId(newModel)
+                setPickerOpen(false)
+                setMessages((prev) => [
+                  ...prev,
+                  { role: 'system', content: `✓ Switched to ${newProvider}/${newModel}` },
+                ])
+              }}
+              onClose={() => setPickerOpen(false)}
+            />
+          ) : (
+            /* Input bar (hidden when picker is open) */
+            <Box flexDirection="column">
+              <Text dimColor>──────────────────────────────</Text>
+              <InputBar
+                onSubmit={handleSubmit}
+                isLoading={isLoading}
+                onTogglePicker={() => setPickerOpen((prev) => !prev)}
+                onToggleFocus={() => setFocusMode((prev) => !prev)}
+                onToggleExpand={() => {
+                  setMessages((prev) => {
+                    const msgs = [...prev]
+                    for (let i = msgs.length - 1; i >= 0; i--) {
+                      if (msgs[i]?.toolMeta) {
+                        const meta = msgs[i]!.toolMeta!
+                        if (meta.collapsed) {
+                          msgs[i] = {
+                            ...msgs[i]!,
+                            content: `🔧 ${meta.name}: ${meta.input}\n📋 Result: ${meta.output || '(pending)'}`,
+                            toolMeta: { ...meta, collapsed: false },
+                          }
+                        } else {
+                          const short =
+                            meta.input.length > 50 ? meta.input.slice(0, 50) + '...' : meta.input
+                          msgs[i] = {
+                            ...msgs[i]!,
+                            content: `⏺ ${meta.name} · ${short} (Ctrl+O to expand)`,
+                            toolMeta: { ...meta, collapsed: true },
+                          }
+                        }
+                        break
                       }
                     }
-                    break
+                    return msgs
+                  })
+                }}
+                onCyclePermission={() => {
+                  setPermissionMode((prev) => {
+                    const idx = PERMISSION_MODES.indexOf(prev)
+                    const next = PERMISSION_MODES[(idx + 1) % PERMISSION_MODES.length]!
+                    engine.getPermission().setMode(next)
+                    return next
+                  })
+                }}
+                onCancel={() => {
+                  if (abortRef.current) {
+                    abortRef.current.abort()
                   }
-                }
-                return msgs
-              })
-            }}
-            onCyclePermission={() => {
-              setPermissionMode((prev) => {
-                const idx = PERMISSION_MODES.indexOf(prev)
-                const next = PERMISSION_MODES[(idx + 1) % PERMISSION_MODES.length]!
-                engine.getPermission().setMode(next)
-                return next
-              })
-            }}
-            onCancel={() => {
-              if (abortRef.current) {
-                abortRef.current.abort()
-              }
-            }}
+                }}
+                onToggleAgentView={() => setAgentViewOpen((prev) => !prev)}
+              />
+              <Text dimColor>──────────────────────────────</Text>
+            </Box>
+          )}
+
+          {/* Agent status footer — shows running background agents */}
+          <AgentFooter
+            agents={Object.values(runningAgents)}
+            gitBranch={gitBranch}
+            tick={agentTick}
           />
-          <Text dimColor>──────────────────────────────</Text>
-        </Box>
-      )}
 
-      {/* Agent status footer — shows running background agents */}
-      <AgentFooter agents={Object.values(runningAgents)} gitBranch={gitBranch} tick={agentTick} />
-
-      {/* Status line — Claude Code style */}
-      <Box marginTop={1} flexDirection="column">
-        {goalText && (
-          <Box>
-            <Text color="green">🎯 Goal: {goalText}</Text>
+          {/* Status line — Claude Code style */}
+          <Box marginTop={1} flexDirection="column">
+            {goalText && (
+              <Box>
+                <Text color="green">🎯 Goal: {goalText}</Text>
+              </Box>
+            )}
+            <Box flexDirection="row">
+              <Text color={PERMISSION_COLORS[permissionMode]}>
+                ⏵⏵ {PERMISSION_LABELS[permissionMode]} ({t('ui.status.shift_tab_cycle')})
+              </Text>
+              <Text dimColor> · {t('ui.status.esc_to_interrupt')}</Text>
+              <Text dimColor> · {t('ui.status.left_for_agents')}</Text>
+            </Box>
           </Box>
-        )}
-        <Box flexDirection="row">
-          <Text color={PERMISSION_COLORS[permissionMode]}>
-            ⏵⏵ {PERMISSION_LABELS[permissionMode]} ({t('ui.status.shift_tab_cycle')})
-          </Text>
-          <Text dimColor> · {t('ui.status.esc_to_interrupt')}</Text>
-          <Text dimColor> · {t('ui.status.left_for_agents')}</Text>
-        </Box>
-      </Box>
+        </>
+      )}
     </Box>
   )
 }

package/src/ui/input.tsx

@@ -15,6 +15,8 @@ interface InputBarProps {
   onToggleFocus?: () => void
   /** Ctrl+O → expand last tool call */
   onToggleExpand?: () => void
+  /** Ctrl+G → toggle agent view dashboard */
+  onToggleAgentView?: () => void
   /** Shift+Tab → cycle permission mode */
   onCyclePermission?: () => void
   /** Escape → cancel loading (when input is empty) */
@@ -71,6 +73,7 @@ export function InputBar({
   onTogglePicker,
   onToggleFocus,
   onToggleExpand,
+  onToggleAgentView,
   onCyclePermission,
   onCancel,
 }: InputBarProps) {
@@ -185,6 +188,12 @@ export function InputBar({
       onToggleExpand?.()
       return
     }
+    // Ctrl+G → toggle agent view dashboard
+    if (key.ctrl && input === 'g') {
+      setValue(valueBeforeShortcut.current)
+      onToggleAgentView?.()
+      return
+    }
 
     if (vimEngine.current.mode !== 'normal') return