vibe-pomo 0.1.0

package/src/tui/components/TaskBar.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+
+interface TaskBarProps {
+  task: string
+  width: number
+}
+
+export function TaskBar({ task, width }: TaskBarProps) {
+  if (!task) return null
+
+  const maxLen = Math.max(width - 10, 20)
+  const display = task.length > maxLen
+    ? task.slice(0, maxLen - 1) + '…'
+    : task
+
+  return (
+    <Box marginBottom={1}>
+      <Text color="cyan" bold>Task  </Text>
+      <Text>{display}</Text>
+    </Box>
+  )
+}

package/src/tui/components/Timer.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { STATE } from '../../shared/protocol.mjs'
+
+interface TimerProps {
+  state: string
+  remaining: number   // ms
+  overtime: number    // ms
+}
+
+function formatMs(ms: number): string {
+  const totalSec = Math.floor(Math.abs(ms) / 1000)
+  const m = Math.floor(totalSec / 60)
+  const s = totalSec % 60
+  return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
+}
+
+export function Timer({ state, remaining, overtime }: TimerProps) {
+  const isOvertime = state === STATE.OVERTIME
+  const isEnded = state === STATE.ENDED
+
+  const timeDisplay = isOvertime
+    ? `+${formatMs(overtime)}`
+    : formatMs(remaining)
+
+  const statusLabel = isEnded
+    ? 'ENDED'
+    : isOvertime
+      ? 'OVERTIME'
+      : 'RUNNING'
+
+  const timeColor = isEnded ? 'gray' : isOvertime ? 'yellow' : 'green'
+  const statusColor = isEnded ? 'gray' : isOvertime ? 'yellow' : 'greenBright'
+
+  return (
+    <Box flexDirection="column" alignItems="center" marginY={1}>
+      <Text color={timeColor} bold>
+        {timeDisplay.split('').map((ch, i) => (
+          <Text key={i} color={timeColor}>{ch}</Text>
+        ))}
+      </Text>
+      <Text color={statusColor} dimColor={isEnded}>
+        {statusLabel}
+      </Text>
+    </Box>
+  )
+}

package/src/tui/dashboard/ActiveSessions.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { STATE } from '../../shared/protocol.mjs'
+
+interface Session {
+  sessionId: string
+  projectDir: string
+  task: string
+  state: string
+  remaining: number
+  overtime: number
+  queuedNotifications: number
+  plannedMs: number
+}
+
+function fmtMs(ms: number): string {
+  const s = Math.floor(Math.abs(ms) / 1000)
+  const m = Math.floor(s / 60)
+  const sec = s % 60
+  return `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`
+}
+
+function projectName(dir: string): string {
+  return dir.split('/').filter(Boolean).pop() ?? dir
+}
+
+interface ActiveSessionsProps {
+  sessions: Session[]
+  width: number
+}
+
+export function ActiveSessions({ sessions, width }: ActiveSessionsProps) {
+  if (sessions.length === 0) {
+    return (
+      <Box marginBottom={1}>
+        <Text color="gray" dimColor>  No active sessions</Text>
+      </Box>
+    )
+  }
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text bold color="white"> Active Sessions</Text>
+      {sessions.map((s) => {
+        const isOvertime = s.state === STATE.OVERTIME
+        const timeDisplay = isOvertime ? `+${fmtMs(s.overtime)}` : fmtMs(s.remaining)
+        const timeColor = isOvertime ? 'yellow' : 'green'
+        const proj = projectName(s.projectDir)
+        const taskTrunc = s.task
+          ? s.task.slice(0, width - 28)
+          : '(no task)'
+        const queued = s.queuedNotifications > 0
+          ? ` [${s.queuedNotifications} queued]`
+          : ''
+
+        return (
+          <Box key={s.sessionId} paddingLeft={1} marginTop={0}>
+            <Text color={timeColor} bold>{timeDisplay}  </Text>
+            <Text color="cyan">{proj.slice(0, 14).padEnd(14)}  </Text>
+            <Text>{taskTrunc}</Text>
+            {queued ? <Text color="yellow">{queued}</Text> : null}
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}

package/src/tui/dashboard/DashboardApp.tsx

@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from 'react'
+import { Box, Text, useInput, useStdout } from 'ink'
+import { subscribe } from '../../shared/ipcClient.mjs'
+import { EVT, STATE } from '../../shared/protocol.mjs'
+import { getStats } from '../../daemon/db.mjs'
+import { ActiveSessions } from './ActiveSessions.js'
+import { ProjectChart } from './ProjectChart.js'
+import { RecentSessions } from './RecentSessions.js'
+
+interface SessionSnapshot {
+  sessionId: string
+  projectDir: string
+  task: string
+  state: string
+  remaining: number
+  overtime: number
+  queuedNotifications: number
+  startedAt: number
+  plannedMs: number
+}
+
+export function DashboardApp() {
+  const { stdout } = useStdout()
+  const width = stdout?.columns ?? 80
+
+  const [sessions, setSessions] = useState<SessionSnapshot[]>([])
+  const [stats, setStats] = useState<any[]>([])
+  const [recent, setRecent] = useState<any[]>([])
+  const [tick, setTick] = useState(0)
+
+  // Load stats from DB on mount and after session ends
+  const refreshStats = () => {
+    try {
+      const s = getStats()
+      setStats(s.projects)
+      setRecent(s.recent)
+    } catch {}
+  }
+
+  useEffect(() => {
+    refreshStats()
+
+    const conn = subscribe(
+      (event) => {
+        if (event.type === EVT.SNAPSHOT) {
+          setSessions(event.sessions ?? [])
+        }
+        if (event.type === EVT.TICK) {
+          // Update the specific session
+          setSessions((prev) => prev.map((s) =>
+            s.sessionId === event.sessionId
+              ? { ...s, state: event.state, remaining: event.remaining, overtime: event.overtime, queuedNotifications: event.queuedNotifications }
+              : s
+          ))
+          setTick((t) => t + 1)
+        }
+        if (event.type === EVT.SESSION_ENDED) {
+          setSessions((prev) => prev.filter((s) => s.sessionId !== event.sessionId))
+          refreshStats()
+        }
+      },
+      () => {} // ignore disconnect errors — daemon is in-process
+    )
+
+    return () => conn.close()
+  }, [])
+
+  useInput((input, key) => {
+    if (input === 'q' || key.escape) {
+      process.exit(0)
+    }
+  })
+
+  const activeSessions = sessions.filter(
+    (s) => s.state === STATE.RUNNING || s.state === STATE.OVERTIME
+  )
+
+  return (
+    <Box flexDirection="column" width={width} paddingX={1} paddingY={0}>
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text bold color="red">🍅 Pomodoro</Text>
+        <Text color="gray">  daemon running · </Text>
+        <Text color="green">{activeSessions.length} active session{activeSessions.length !== 1 ? 's' : ''}</Text>
+        <Text color="gray">  [Q] Quit daemon</Text>
+      </Box>
+
+      {/* Active sessions */}
+      <ActiveSessions sessions={activeSessions} width={width} />
+
+      {/* Project stats bar chart */}
+      {stats.length > 0 && (
+        <ProjectChart projects={stats} width={width} />
+      )}
+
+      {/* Recent sessions */}
+      {recent.length > 0 && (
+        <RecentSessions sessions={recent} width={width} />
+      )}
+
+      {activeSessions.length === 0 && stats.length === 0 && (
+        <Box marginTop={1}>
+          <Text color="gray" dimColor>
+            No sessions yet. Start one with: /pomodoro &lt;task&gt;
+          </Text>
+        </Box>
+      )}
+    </Box>
+  )
+}

package/src/tui/dashboard/ProjectChart.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+
+interface Project {
+  project_path: string
+  total_sessions: number
+  total_minutes: number
+  total_cycles: number
+  last_active: number
+}
+
+interface ProjectChartProps {
+  projects: Project[]
+  width: number
+}
+
+const BAR_CHARS = '▏▎▍▌▋▊▉█'
+
+function bar(value: number, max: number, width: number): string {
+  if (max === 0) return '░'.repeat(width)
+  const filled = Math.round((value / max) * width)
+  const empty = width - filled
+  return '█'.repeat(filled) + '░'.repeat(empty)
+}
+
+function projectName(dir: string): string {
+  return dir.split('/').filter(Boolean).pop() ?? dir
+}
+
+function fmtMinutes(min: number): string {
+  if (min < 60) return `${min}m`
+  const h = Math.floor(min / 60)
+  const m = min % 60
+  return m > 0 ? `${h}h ${m}m` : `${h}h`
+}
+
+export function ProjectChart({ projects, width }: ProjectChartProps) {
+  const BAR_WIDTH = Math.min(30, width - 36)
+  const maxMinutes = Math.max(...projects.map((p) => p.total_minutes ?? 0), 1)
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text bold color="white"> Project Focus Time</Text>
+      {projects.slice(0, 8).map((p) => {
+        const name = projectName(p.project_path).slice(0, 16).padEnd(16)
+        const mins = p.total_minutes ?? 0
+        const b = bar(mins, maxMinutes, BAR_WIDTH)
+        const label = fmtMinutes(mins).padStart(7)
+
+        return (
+          <Box key={p.project_path} paddingLeft={1}>
+            <Text color="cyan">{name}  </Text>
+            <Text color="green">{b}</Text>
+            <Text color="white">{label}</Text>
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}

package/src/tui/dashboard/RecentSessions.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+
+interface RecentSession {
+  task: string
+  actual_ms: number
+  status: string
+  started_at: number
+  project_path: string
+  agent_summary?: string
+  user_activity?: string
+}
+
+function fmtMins(ms: number): string {
+  if (!ms) return '—'
+  const m = Math.round(ms / 60000)
+  return `${m}m`
+}
+
+function projectName(dir: string): string {
+  return (dir.split('/').filter(Boolean).pop() ?? dir).slice(0, 12)
+}
+
+function fmtDate(ts: number): string {
+  return new Date(ts).toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' })
+}
+
+function statusColor(s: string): string {
+  return s === 'completed' ? 'green' : s === 'broken' ? 'red' : 'yellow'
+}
+
+interface RecentSessionsProps {
+  sessions: RecentSession[]
+  width: number
+}
+
+export function RecentSessions({ sessions, width }: RecentSessionsProps) {
+  return (
+    <Box flexDirection="column">
+      <Text bold color="white"> Recent Sessions</Text>
+
+      {sessions.map((s, i) => {
+        const proj = projectName(s.project_path)
+        const task = s.task ?? '—'
+        const time = fmtMins(s.actual_ms)
+        const date = fmtDate(s.started_at)
+
+        return (
+          <Box key={i} flexDirection="column" paddingLeft={1} marginBottom={0}>
+            {/* Session header line */}
+            <Box>
+              <Text color="gray">{date}  </Text>
+              <Text color="cyan">{proj.padEnd(12)}  </Text>
+              <Text color="white" bold>{task.slice(0, width - 38)}</Text>
+              <Text color="gray">  {time}  </Text>
+              <Text color={statusColor(s.status)}>{s.status}</Text>
+            </Box>
+
+            {/* Agent summary */}
+            {s.agent_summary && (
+              <Box paddingLeft={8}>
+                <Text color="gray">🤖 </Text>
+                <Text color="gray" dimColor>{s.agent_summary.split('\n')[0].slice(0, width - 16)}</Text>
+              </Box>
+            )}
+
+            {/* User activity */}
+            {s.user_activity && (
+              <Box paddingLeft={8}>
+                <Text color="blue">👤 </Text>
+                <Text color="blueBright">{s.user_activity.slice(0, width - 16)}</Text>
+              </Box>
+            )}
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}

package/src/tui/dashboard/index.tsx

@@ -0,0 +1,31 @@
+#!/usr/bin/env tsx
+/**
+ * Dashboard TUI entry point.
+ * Starts the global daemon then renders the live dashboard in current terminal.
+ *
+ * Usage: pomodoro daemon
+ */
+import React from 'react'
+import { render } from 'ink'
+import { startDaemon } from '../../daemon/index.mjs'
+import { DashboardApp } from './DashboardApp.js'
+import { readLock } from '../../shared/lockfile.mjs'
+
+async function main() {
+  const existing = readLock()
+  if (existing) {
+    console.error('Pomodoro daemon is already running (PID ' + existing.pid + ').')
+    console.error('Run `pomodoro stop-daemon` to stop it first.')
+    process.exit(1)
+  }
+
+  // Start the daemon in-process (not detached — this terminal IS the daemon)
+  await startDaemon()
+
+  render(<DashboardApp />, { exitOnCtrlC: false })
+}
+
+main().catch((err) => {
+  console.error('Dashboard error:', err)
+  process.exit(1)
+})

package/src/tui/index.tsx

@@ -0,0 +1,56 @@
+#!/usr/bin/env tsx
+/**
+ * TUI entry point — launched in a separate terminal window by `pomodoro start`.
+ *
+ * Usage: tsx src/tui/index.tsx <projectDir>
+ */
+import React from 'react'
+import { render } from 'ink'
+import { App } from './App.js'
+import { readLock } from '../shared/lockfile.mjs'
+import { sendAndReceive } from '../shared/ipcClient.mjs'
+
+const projectDir = process.argv[2] ?? process.env.CLAUDE_PROJECT_DIR ?? process.cwd()
+
+async function main() {
+  // Wait for daemon to be ready (in case TUI starts slightly before daemon writes lock)
+  const lock = await waitForLock(projectDir, 5000)
+  if (!lock) {
+    console.error('Could not connect to Pomodoro daemon. Is it running?')
+    console.error(`Project: ${projectDir}`)
+    process.exit(1)
+  }
+
+  // Fetch initial state
+  let initialState: any = {}
+  try {
+    initialState = await sendAndReceive(lock.socketPath, { type: 'query' })
+  } catch {}
+
+  render(
+    <App
+      socketPath={lock.socketPath}
+      task={initialState.task ?? lock.task ?? ''}
+      plannedMs={initialState.plannedMs ?? lock.durationMs ?? 25 * 60 * 1000}
+    />,
+    { exitOnCtrlC: false }
+  )
+}
+
+function waitForLock(projectDir: string, timeoutMs: number): Promise<any> {
+  return new Promise((resolve) => {
+    const start = Date.now()
+    const check = () => {
+      const lock = readLock(projectDir)
+      if (lock) return resolve(lock)
+      if (Date.now() - start > timeoutMs) return resolve(null)
+      setTimeout(check, 100)
+    }
+    check()
+  })
+}
+
+main().catch((err) => {
+  console.error('TUI error:', err)
+  process.exit(1)
+})

package/src/tui/ipcClient.mjs

@@ -0,0 +1,52 @@
+import { subscribe, sendAndReceive } from '../shared/ipcClient.mjs'
+import { EVT } from '../shared/protocol.mjs'
+
+/**
+ * TUI-specific IPC client.
+ * Connects to daemon, subscribes to push events, and emits them via callbacks.
+ */
+export class TuiIpcClient {
+  #conn = null
+  #socketPath
+
+  constructor(socketPath) {
+    this.#socketPath = socketPath
+  }
+
+  connect({ onTick, onNotification, onEnded, onError }) {
+    this.#conn = subscribe(
+      this.#socketPath,
+      (event) => {
+        switch (event.type) {
+          case EVT.TICK:
+          case EVT.STATE:
+            onTick?.(event)
+            break
+          case EVT.NOTIFICATION:
+            onNotification?.(event)
+            break
+          case EVT.ENDED:
+            onEnded?.(event)
+            break
+        }
+      },
+      onError,
+    )
+  }
+
+  async sendEnd() {
+    try {
+      await sendAndReceive(this.#socketPath, { type: 'end' })
+    } catch {}
+  }
+
+  async sendBreak() {
+    try {
+      await sendAndReceive(this.#socketPath, { type: 'break' })
+    } catch {}
+  }
+
+  close() {
+    this.#conn?.close()
+  }
+}

package/src/tui/timer/TimerApp.tsx

@@ -0,0 +1,164 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { Box, Text, useInput, useStdout } from 'ink'
+import TextInput from 'ink-text-input'
+import { subscribe, sendAndReceive } from '../../shared/ipcClient.mjs'
+import { EVT, MSG, STATE } from '../../shared/protocol.mjs'
+import { Timer } from '../components/Timer.js'
+import { TaskBar } from '../components/TaskBar.js'
+import { NotificationLog } from '../components/NotificationLog.js'
+
+interface TimerAppProps {
+  sessionId: string
+  task: string
+  plannedMs: number
+  initialState: string
+  initialRemaining: number
+  initialOvertime: number
+}
+
+interface NotificationEntry {
+  notification: Record<string, unknown>
+  receivedAt: number
+  releasedAt: number
+}
+
+type Phase = 'timer' | 'activity-input' | 'done'
+
+export function TimerApp({
+  sessionId,
+  task,
+  plannedMs,
+  initialState,
+  initialRemaining,
+  initialOvertime,
+}: TimerAppProps) {
+  const { stdout } = useStdout()
+  const width = stdout?.columns ?? 60
+
+  const [timerState, setTimerState] = useState(initialState)
+  const [remaining, setRemaining] = useState(initialRemaining)
+  const [overtime, setOvertime] = useState(initialOvertime)
+  const [queued, setQueued] = useState(0)
+  const [notifications, setNotifications] = useState<NotificationEntry[]>([])
+  const [phase, setPhase] = useState<Phase>('timer')
+  const [userActivity, setUserActivity] = useState('')
+  const [activitySaved, setActivitySaved] = useState(false)
+
+  useEffect(() => {
+    const conn = subscribe(
+      (event) => {
+        if (event.sessionId !== sessionId) return
+
+        if (event.type === EVT.TICK) {
+          setTimerState(event.state)
+          setRemaining(event.remaining ?? 0)
+          setOvertime(event.overtime ?? 0)
+          setQueued(event.queuedNotifications ?? 0)
+        }
+        if (event.type === EVT.NOTIFICATION) {
+          setNotifications((prev) => [...prev, {
+            notification: event.notification,
+            receivedAt: event.receivedAt,
+            releasedAt: event.releasedAt,
+          }])
+        }
+        if (event.type === EVT.SESSION_ENDED) {
+          setTimerState(STATE.ENDED)
+          setPhase('activity-input')
+        }
+      },
+      () => {}
+    )
+    return () => conn.close()
+  }, [sessionId])
+
+  const saveAndExit = useCallback(async (activity: string) => {
+    if (activity.trim()) {
+      try {
+        await sendAndReceive({
+          type: MSG.SESSION_UPDATE_ACTIVITY,
+          sessionId,
+          userActivity: activity.trim(),
+        })
+      } catch {}
+    }
+    setActivitySaved(true)
+    setTimeout(() => process.exit(0), 600)
+  }, [sessionId])
+
+  const sendEnd = useCallback(async () => {
+    try { await sendAndReceive({ type: MSG.SESSION_END, sessionId }) } catch {}
+  }, [sessionId])
+
+  const sendBreak = useCallback(async () => {
+    try { await sendAndReceive({ type: MSG.SESSION_BREAK, sessionId }) } catch {}
+  }, [sessionId])
+
+  useInput((input, key) => {
+    if (phase === 'activity-input') return // TextInput handles keys in this phase
+    if (phase === 'done') {
+      if (input === 'q' || key.escape) process.exit(0)
+      return
+    }
+    if (timerState === STATE.ENDED) return
+    if (input === 'e' || input === 'E') sendEnd()
+    if (input === 'b' || input === 'B') sendBreak()
+    if (input === 'q' || key.escape) process.exit(0)
+  })
+
+  const isOvertime = timerState === STATE.OVERTIME
+  const isEnded = timerState === STATE.ENDED
+
+  // ── Activity input phase ──────────────────────────────────────────────────
+  if (phase === 'activity-input') {
+    return (
+      <Box flexDirection="column" width={width} paddingX={2} paddingY={1}>
+        <Box marginBottom={1}>
+          <Text bold color="green">🍅 Session ended</Text>
+          {task ? <Text color="gray">  {task.slice(0, width - 24)}</Text> : null}
+        </Box>
+
+        <Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={2} paddingY={1} marginBottom={1}>
+          <Text bold color="cyan">你在这个番茄钟里做了什么？</Text>
+          <Text color="gray" dimColor>（可不填，直接 Enter 跳过）</Text>
+          <Box marginTop={1}>
+            <Text color="white">› </Text>
+            <TextInput
+              value={userActivity}
+              onChange={setUserActivity}
+              onSubmit={saveAndExit}
+              placeholder="简要描述你的专注内容..."
+            />
+          </Box>
+        </Box>
+
+        {activitySaved && (
+          <Text color="green">已保存，正在退出…</Text>
+        )}
+      </Box>
+    )
+  }
+
+  // ── Timer phase ───────────────────────────────────────────────────────────
+  const keybindings = isEnded
+    ? '[Q] Quit'
+    : isOvertime
+      ? '[E] End Session    [B] Break    [Q] Quit'
+      : '[B] Break    [Q] Quit'
+
+  return (
+    <Box flexDirection="column" width={width} paddingX={2} paddingY={1}>
+      <Box marginBottom={1}>
+        <Text bold color={isOvertime ? 'yellow' : isEnded ? 'gray' : 'red'}>🍅 Pomodoro</Text>
+      </Box>
+
+      <Timer state={timerState} remaining={remaining} overtime={overtime} />
+      <TaskBar task={task} width={width} />
+      <NotificationLog notifications={notifications} queued={queued} width={width - 4} />
+
+      <Box marginTop={1}>
+        <Text color="gray" dimColor>{keybindings}</Text>
+      </Box>
+    </Box>
+  )
+}