@miphamai/cli 0.3.0 → 0.5.0

package/src/agent-view/dashboard.tsx

@@ -0,0 +1,218 @@
+/**
+ * AgentViewDashboard — Ink TUI for background agent session management.
+ *
+ * Displays sessions grouped by status (needs-input / working / completed / failed),
+ * with j/k navigation, Space peek, Enter attach, and Esc exit.
+ *
+ * Usage:
+ *   mipham agents          (from CLI)
+ *   /agents                (from slash command within a running session)
+ */
+import React, { useState, useCallback, useMemo } from 'react'
+import { Box, Text, useInput } from 'ink'
+import { AgentViewManager, type AgentSession, type SessionStatus } from './agent-view-manager'
+import { SessionRow } from './session-row'
+import { SessionPeek } from './session-peek'
+
+interface DashboardProps {
+  manager: AgentViewManager
+  onAttach?: (session: AgentSession) => void
+  onExit: () => void
+}
+
+const STATUS_HEADERS: Record<string, { label: string; color: string }> = {
+  'needs-input': { label: 'Needs Input', color: 'yellow' },
+  working: { label: 'Working', color: 'cyan' },
+  completed: { label: 'Completed', color: 'green' },
+  failed: { label: 'Failed', color: 'red' },
+}
+
+export function AgentViewDashboard({ manager, onAttach, onExit }: DashboardProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [peekingSessionId, setPeekingSessionId] = useState<string | null>(null)
+
+  // Build a flat list of sessions in group order, with group headers
+  const flatList = useMemo(() => {
+    const groups = manager.groupByStatus()
+    const result: Array<
+      | { type: 'header'; status: string; label: string; color: string; count: number }
+      | { type: 'session'; session: AgentSession }
+    > = []
+
+    const statusOrder: Array<keyof typeof STATUS_HEADERS> = [
+      'working',
+      'needs-input',
+      'completed',
+      'failed',
+    ]
+
+    for (const _status of statusOrder) {
+      const status = _status as SessionStatus
+      const sessions = groups[status] ?? []
+      result.push({
+        type: 'header',
+        status,
+        label: STATUS_HEADERS[status]!.label,
+        color: STATUS_HEADERS[status]!.color,
+        count: sessions.length,
+      })
+
+      for (const session of sessions) {
+        result.push({ type: 'session', session })
+      }
+    }
+
+    return result
+  }, [manager])
+
+  // Flatten sessions only for navigation (skip headers)
+  const sessionsOnly = useMemo(
+    () =>
+      flatList.filter((item) => item.type === 'session') as Array<{
+        type: 'session'
+        session: AgentSession
+      }>,
+    [flatList],
+  )
+
+  const handleAttach = useCallback(
+    (sessionId: string) => {
+      const session = manager.attach(sessionId)
+      if (session && onAttach) {
+        onAttach(session)
+      }
+    },
+    [manager, onAttach],
+  )
+
+  useInput((input, key) => {
+    if (key.escape) {
+      if (peekingSessionId) {
+        setPeekingSessionId(null)
+        return
+      }
+      onExit()
+      return
+    }
+
+    if (input === 'j') {
+      setSelectedIndex((prev) => Math.min(prev + 1, sessionsOnly.length - 1))
+      setPeekingSessionId(null)
+      return
+    }
+
+    if (input === 'k') {
+      setSelectedIndex((prev) => Math.max(prev - 1, 0))
+      setPeekingSessionId(null)
+      return
+    }
+
+    // Space — toggle peek
+    if (input === ' ') {
+      if (sessionsOnly.length === 0) return
+      const current = sessionsOnly[selectedIndex]
+      if (!current) return
+      setPeekingSessionId(peekingSessionId === current.session.id ? null : current.session.id)
+      return
+    }
+
+    // Enter — attach to selected session
+    if (key.return) {
+      if (sessionsOnly.length === 0) return
+      const current = sessionsOnly[selectedIndex]
+      if (!current) return
+      if (peekingSessionId) {
+        handleAttach(current.session.id)
+      } else {
+        handleAttach(current.session.id)
+      }
+      return
+    }
+  })
+
+  // Compute the peek data for the currently peeking session
+  const peekData = useMemo(() => {
+    if (!peekingSessionId) return null
+    return manager.peek(peekingSessionId) ?? null
+  }, [manager, peekingSessionId])
+
+  const totalSessions = sessionsOnly.length
+  const counts = manager.countByStatus()
+
+  return (
+    <Box flexDirection="column" padding={1} height="100%">
+      {/* Header */}
+      <Box marginBottom={1} flexDirection="column">
+        <Box>
+          <Text bold color="cyan">
+            Agent View
+          </Text>
+          <Text dimColor> — Background Agent Dashboard</Text>
+        </Box>
+        <Box>
+          <Text dimColor>
+            {totalSessions} session{totalSessions !== 1 ? 's' : ''}
+            {' · '}
+            <Text color="cyan">{counts.working} working</Text>
+            {' · '}
+            <Text color="yellow">{counts['needs-input']} input</Text>
+            {' · '}
+            <Text color="green">{counts.completed} done</Text>
+            {' · '}
+            <Text color="red">{counts.failed} failed</Text>
+          </Text>
+        </Box>
+        <Box>
+          <Text dimColor>j/k navigate · Space peek · Enter attach · Esc back</Text>
+        </Box>
+      </Box>
+
+      {/* Divider */}
+      <Box marginBottom={1}>
+        <Text dimColor>{'─'.repeat(70)}</Text>
+      </Box>
+
+      {/* Empty state */}
+      {totalSessions === 0 ? (
+        <Box flexDirection="column" paddingY={2} paddingLeft={2}>
+          <Text dimColor>No background agents.</Text>
+          <Text dimColor>
+            Use the Agent tool or type &quot;run this in background&quot; to spawn one.
+          </Text>
+        </Box>
+      ) : (
+        <Box flexDirection="column">
+          {/* Session list with group headers */}
+          {flatList.map((item, flatIdx) => {
+            if (item.type === 'header') {
+              return (
+                <Box key={`h-${item.status}`} marginY={1}>
+                  <Text bold color={item.color}>
+                    {' '}
+                    {item.label} ({item.count})
+                  </Text>
+                </Box>
+              )
+            }
+
+            // Map this session's position in sessionsOnly to selectedIndex
+            const sessionIdx = sessionsOnly.findIndex((s) => s.session.id === item.session.id)
+
+            return (
+              <SessionRow
+                key={item.session.id}
+                session={item.session}
+                isSelected={sessionIdx === selectedIndex}
+              />
+            )
+          })}
+        </Box>
+      )}
+
+      {/* Peek panel (shown below the list when peeking) */}
+      {peekData && (
+        <SessionPeek session={peekData.session} recentMessages={peekData.recentMessages} />
+      )}
+    </Box>
+  )
+}

package/src/agent-view/session-peek.tsx

@@ -0,0 +1,72 @@
+/**
+ * SessionPeek — a popup panel that shows the last few messages of
+ * a selected agent session. Invoked by pressing Space on a session row.
+ */
+import React from 'react'
+import { Box, Text } from 'ink'
+import type { AgentSession, SessionMessage } from './agent-view-manager'
+
+interface SessionPeekProps {
+  session: AgentSession
+  recentMessages: SessionMessage[]
+}
+
+const ROLE_COLORS: Record<string, string> = {
+  user: 'green',
+  assistant: 'cyan',
+  system: 'yellow',
+}
+
+export function SessionPeek({ session, recentMessages }: SessionPeekProps) {
+  return (
+    <Box flexDirection="column" borderStyle="single" borderColor="blue" padding={1} marginY={1}>
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text bold color="blue">
+          {' '}
+          Peek: {session.id}{' '}
+        </Text>
+        <Text dimColor>
+          — {session.title} · {session.provider}/{session.model}
+        </Text>
+      </Box>
+
+      {/* Divider */}
+      <Box marginBottom={1}>
+        <Text dimColor>{'─'.repeat(60)}</Text>
+      </Box>
+
+      {/* Messages */}
+      {recentMessages.length === 0 ? (
+        <Box paddingLeft={2}>
+          <Text dimColor>(no messages yet)</Text>
+        </Box>
+      ) : (
+        recentMessages.map((msg, i) => (
+          <Box key={i} flexDirection="column" marginBottom={1}>
+            <Text color={ROLE_COLORS[msg.role] || 'white'} bold>
+              [{msg.role}]
+            </Text>
+            <Box paddingLeft={4}>
+              <Text dimColor>
+                {msg.content.length > 120 ? msg.content.slice(0, 120) + '...' : msg.content}
+              </Text>
+            </Box>
+          </Box>
+        ))
+      )}
+
+      {/* Footer */}
+      <Box marginTop={1}>
+        <Text dimColor>{'─'.repeat(60)}</Text>
+      </Box>
+      <Box>
+        <Text dimColor>
+          {' '}
+          {recentMessages.length} message(s) · Total: {session.messages.length} · Status:{' '}
+          {session.status}
+        </Text>
+      </Box>
+    </Box>
+  )
+}

package/src/agent-view/session-row.tsx

@@ -0,0 +1,70 @@
+/**
+ * SessionRow — a single row in the Agent View dashboard.
+ * Shows provider, model, task, and elapsed time for one background agent session.
+ */
+import React from 'react'
+import { Box, Text } from 'ink'
+import type { AgentSession } from './agent-view-manager'
+
+interface SessionRowProps {
+  session: AgentSession
+  isSelected: boolean
+}
+
+function formatElapsed(ms: number): string {
+  if (ms < 1000) return '<1s'
+  const seconds = Math.floor(ms / 1000)
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  const remainingSecs = seconds % 60
+  if (minutes < 60) return `${minutes}m ${remainingSecs}s`
+  const hours = Math.floor(minutes / 60)
+  const remainingMin = minutes % 60
+  return `${hours}h ${remainingMin}m`
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  'needs-input': 'yellow',
+  working: 'cyan',
+  completed: 'green',
+  failed: 'red',
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  'needs-input': '[INPUT]',
+  working: '[WORK] ',
+  completed: '[DONE] ',
+  failed: '[FAIL] ',
+}
+
+export function SessionRow({ session, isSelected }: SessionRowProps) {
+  const color = STATUS_COLORS[session.status] || 'white'
+  const label = STATUS_LABELS[session.status] || ''
+  const prefix = isSelected ? '❯' : ' '
+
+  const taskPreview = session.task.length > 60 ? session.task.slice(0, 60) + '...' : session.task
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text color={isSelected ? 'blue' : undefined} bold={isSelected}>
+          {prefix}{' '}
+        </Text>
+        <Text color={color}>{label}</Text>
+        <Text> </Text>
+        <Text bold={isSelected}>{session.id}</Text>
+        <Text dimColor>
+          {' '}
+          · {session.provider}/{session.model}
+        </Text>
+        <Text dimColor> · {formatElapsed(session.elapsedMs)}</Text>
+      </Box>
+      <Box paddingLeft={isSelected ? 4 : 3}>
+        <Text dimColor={!isSelected} color={isSelected ? 'white' : undefined}>
+          {taskPreview}
+        </Text>
+        {session.title !== session.task.slice(0, 60) && <Text dimColor> — {session.title}</Text>}
+      </Box>
+    </Box>
+  )
+}

package/src/artifacts/manifest.ts

@@ -0,0 +1,101 @@
+import {
+  readFileSync,
+  writeFileSync,
+  existsSync,
+  mkdirSync,
+  renameSync,
+  copyFileSync,
+  unlinkSync,
+} from 'node:fs'
+import { join } from 'node:path'
+import type { ArtifactManifest, ArtifactEntry } from '../shared/types'
+
+/**
+ * Read the artifact manifest from disk, or return an empty one if it doesn't exist.
+ */
+export function readManifest(dir: string): ArtifactManifest {
+  const path = join(dir, 'index.json')
+  if (!existsSync(path)) {
+    return { version: 1, artifacts: [] }
+  }
+  try {
+    return JSON.parse(readFileSync(path, 'utf-8'))
+  } catch {
+    return { version: 1, artifacts: [] }
+  }
+}
+
+/**
+ * Write the manifest to disk, creating parent directories as needed.
+ */
+export function writeManifest(dir: string, manifest: ArtifactManifest): void {
+  mkdirSync(dir, { recursive: true })
+  writeFileSync(join(dir, 'index.json'), JSON.stringify(manifest, null, 2), 'utf-8')
+}
+
+/**
+ * Add an entry to the manifest and persist it.
+ * If an entry with the same name already exists, it is replaced.
+ */
+export function addToManifest(dir: string, entry: ArtifactEntry, port?: number): ArtifactManifest {
+  const manifest = readManifest(dir)
+  if (port !== undefined) manifest.port = port
+
+  const idx = manifest.artifacts.findIndex((a) => a.name === entry.name)
+  if (idx >= 0) {
+    manifest.artifacts[idx] = entry
+  } else {
+    manifest.artifacts.push(entry)
+  }
+
+  writeManifest(dir, manifest)
+  return manifest
+}
+
+/**
+ * Get all artifacts for a specific session.
+ */
+export function getSessionArtifacts(dir: string, sessionId: string): ArtifactEntry[] {
+  const manifest = readManifest(dir)
+  return manifest.artifacts.filter((a) => a.sessionId === sessionId)
+}
+
+/**
+ * Archive an existing artifact file by renaming it with a version tag.
+ * e.g. dashboard.html → dashboard.v1.html, dashboard.v1.html → dashboard.v2.html.
+ *
+ * Returns the version tag assigned to the archived file.
+ */
+export function archiveVersion(dir: string, entry: ArtifactEntry): string {
+  const manifest = readManifest(dir)
+  const versionCount = (entry.versionCount || 1) + 1
+  const ext = entry.type === 'svg' ? '.svg' : '.html'
+  const versionTag = `v${versionCount}`
+
+  // Rename the current file to a versioned copy
+  const baseName = entry.name
+  const currentPath = join(dir, entry.sessionId, `${baseName}${ext}`)
+  const archivedPath = join(dir, entry.sessionId, `${baseName}.${versionTag}${ext}`)
+
+  if (existsSync(currentPath)) {
+    try {
+      renameSync(currentPath, archivedPath)
+    } catch {
+      // If rename fails (e.g. cross-device), copy instead
+      copyFileSync(currentPath, archivedPath)
+      unlinkSync(currentPath)
+    }
+  }
+
+  // Update manifest entry
+  const artifact = manifest.artifacts.find((a) => a.name === entry.name)
+  if (artifact) {
+    const versions = artifact.versions || ['v1']
+    versions.push(versionTag)
+    artifact.versions = versions
+    artifact.versionCount = versionCount
+  }
+
+  writeManifest(dir, manifest)
+  return versionTag
+}