@raidou/pi-notify 0.3.1 → 0.5.0

package/src/dashboard/ui/columns.ts

@@ -0,0 +1,102 @@
+import type { Theme } from '@earendil-works/pi-coding-agent'
+import { truncateToWidth } from '@earendil-works/pi-tui'
+import { sumBy } from 'lodash-es'
+
+import type { SessionRecord } from '../state-store.js'
+
+interface Column {
+  name: string
+  width?: number
+  hiddenByDefault?: boolean
+  render: (session: SessionRecord, theme: Theme, width: number) => string
+}
+
+const COLUMNS: Column[] = [
+  {
+    name: 'SESSION_ID',
+    width: 10,
+    hiddenByDefault: true,
+    render: (session, theme, width) =>
+      theme.fg('dim', session.sessionId.slice(-6).padEnd(width)),
+  },
+  {
+    name: 'PID',
+    width: 8,
+    hiddenByDefault: true,
+    render: (session, theme, width) =>
+      theme.fg('dim', String(session.pid).padEnd(width)),
+  },
+  {
+    name: 'STATE',
+    width: 20,
+    render: (session, theme, width) => {
+      const color = session.state === 'running' ? 'success' : 'muted'
+      return theme.fg(
+        color,
+        truncateToWidth(session.state, width, '…', true).padEnd(width),
+      )
+    },
+  },
+  {
+    name: 'PROJECT',
+    render: (session, theme, width) =>
+      theme.fg('text', truncateToWidth(session.projectName, width, '…', true)),
+  },
+  {
+    name: 'RUNNING',
+    width: 10,
+    render: (session, theme, width) => {
+      const startedRunningAt = session.startedRunningAt
+      if (!startedRunningAt) return ''
+      const duration = Date.now() - startedRunningAt
+      return theme.fg('dim', formatDuration(duration).padEnd(width))
+    },
+  },
+  {
+    name: 'UPTIME',
+    width: 10,
+    render: (session, theme, width) =>
+      theme.fg(
+        'dim',
+        formatDuration(Date.now() - session.startedAt).padEnd(width),
+      ),
+  },
+]
+
+export const COLUMN_SEPARATOR = ' '
+const MIN_PROJECT_WIDTH = 10
+
+export interface ResolvedColumn {
+  col: Column
+  width: number
+}
+
+export function resolveColumns(
+  totalWidth: number,
+  includeHidden = true,
+): ResolvedColumn[] {
+  const columns = COLUMNS.filter((col) => includeHidden || !col.hiddenByDefault)
+  const fixedWidth = sumBy(columns, (col) => col.width ?? 0)
+  const separatorWidth = COLUMN_SEPARATOR.length * (columns.length - 1)
+  const flexibleWidth = Math.max(
+    MIN_PROJECT_WIDTH,
+    totalWidth - fixedWidth - separatorWidth,
+  )
+  return columns.map((col) => ({ col, width: col.width ?? flexibleWidth }))
+}
+
+function formatDuration(milliseconds: number): string {
+  const seconds = Math.floor(milliseconds / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+
+  if (hours > 0) {
+    const mins = minutes % 60
+    return `${hours}h${mins}m`
+  }
+  if (minutes > 0) {
+    const secs = seconds % 60
+    return `${minutes}m${secs}s`
+  }
+  return `${seconds}s`
+}

package/src/dashboard/ui/dashboard.test.ts

@@ -0,0 +1,118 @@
+import type { Theme, ThemeColor } from '@earendil-works/pi-coding-agent'
+import { visibleWidth } from '@earendil-works/pi-tui'
+import { describe, expect, it } from 'vitest'
+
+import type { SessionRecord } from '../state-store.js'
+import { Dashboard } from './dashboard.js'
+
+const theme = {
+  fg: (color: ThemeColor, text: string) => `\x1b[90m${text}\x1b[0m`,
+  bold: (text: string) => `\x1b[1m${text}\x1b[0m`,
+} as unknown as Theme
+
+const ANSI_RE =
+  // eslint-disable-next-line no-control-regex
+  /\[[0-9;?]*[ -/]*[@-~]/g
+const stripAnsi = (line: string): string => line.replace(ANSI_RE, '')
+
+function makeSession(overrides: Partial<SessionRecord>): SessionRecord {
+  return {
+    pid: 123,
+    sessionId: 'abc123',
+    cwd: '/tmp',
+    projectName: 'proj',
+    startedAt: Date.now(),
+    state: 'idle',
+    ...overrides,
+  }
+}
+
+function makeDashboard(sessions: SessionRecord[]) {
+  return new Dashboard({
+    tui: { requestRender: () => {} },
+    theme,
+    initialSessions: sessions,
+    onRefresh: async () => sessions,
+    onClose: () => {},
+  })
+}
+
+describe('Dashboard render clipping', () => {
+  const longNameSession = makeSession({
+    projectName: 'a-very-long-project-name-that-exceeds-any-narrow-width',
+  })
+
+  it('clips every line to the terminal width at narrow widths', () => {
+    const dashboard = makeDashboard([longNameSession])
+    for (const line of dashboard.render(40)) {
+      expect(visibleWidth(line)).toBeLessThanOrEqual(40)
+    }
+    dashboard.dispose()
+  })
+
+  it('does not add ellipsis or padding at wide widths', () => {
+    const dashboard = makeDashboard([longNameSession])
+    for (const line of dashboard.render(200)) {
+      expect(line).not.toContain('…')
+      expect(line.endsWith(' ')).toBe(false)
+    }
+    dashboard.dispose()
+  })
+
+  it('clips the header and footer hint lines at width 20', () => {
+    const dashboard = makeDashboard([makeSession({})])
+    const lines = dashboard.render(20)
+    const visible = lines.map(stripAnsi)
+    const header = visible.find((l) => l.includes('STATE'))
+    expect(header).toBeDefined()
+    const footer = visible.find((l) => l.startsWith('o ids'))
+    expect(footer).toBeDefined()
+    if (!header || !footer) throw new Error('unreachable')
+    expect(header.startsWith('STATE')).toBe(true)
+    expect(header.endsWith('…')).toBe(true)
+    expect(footer.startsWith('o ids • r refresh •…')).toBe(true)
+    for (const line of visible) {
+      expect(visibleWidth(line)).toBeLessThanOrEqual(20)
+    }
+    dashboard.dispose()
+  })
+
+  it('counts CJK project names by display width', () => {
+    const dashboard = makeDashboard([
+      makeSession({ projectName: '中文项目名' }),
+    ])
+    for (const line of dashboard.render(40)) {
+      expect(visibleWidth(line)).toBeLessThanOrEqual(40)
+    }
+    dashboard.dispose()
+  })
+})
+
+describe('hidden column toggle', () => {
+  it('hides hidden columns by default and toggles with o', () => {
+    const dashboard = makeDashboard([makeSession({})])
+    try {
+      const headerOf = () => {
+        const lines = dashboard.render(200).map(stripAnsi)
+        return lines.find((l) => l.includes('STATE') && l.includes('RUNNING'))
+      }
+
+      let header = headerOf()
+      expect(header).toContain('STATE')
+      expect(header).not.toContain('SESSION_ID')
+      expect(header).not.toContain('PID')
+
+      dashboard.handleInput('o')
+      header = headerOf()
+      expect(header).toContain('SESSION_ID')
+      expect(header).toContain('PID')
+
+      dashboard.handleInput('o')
+      header = headerOf()
+      expect(header).not.toContain('SESSION_ID')
+      expect(header).not.toContain('PID')
+    } finally {
+      dashboard.dispose()
+    }
+  })
+})

package/src/dashboard/ui/dashboard.ts

@@ -0,0 +1,122 @@
+import type { Theme } from '@earendil-works/pi-coding-agent'
+import type { Component } from '@earendil-works/pi-tui'
+import { Key, matchesKey, truncateToWidth } from '@earendil-works/pi-tui'
+
+import type { SessionRecord } from '../state-store.js'
+import {
+  COLUMN_SEPARATOR,
+  resolveColumns,
+  type ResolvedColumn,
+} from './columns.js'
+
+export interface DashboardProps {
+  tui: { requestRender: () => void }
+  theme: Theme
+  initialSessions: SessionRecord[]
+  onRefresh: () => Promise<SessionRecord[]>
+  onClose: () => void
+  onDispose?: () => void
+}
+
+export class Dashboard implements Component {
+  private readonly tui: DashboardProps['tui']
+  private readonly theme: Theme
+  private readonly onRefresh: DashboardProps['onRefresh']
+  private readonly onClose: DashboardProps['onClose']
+  private readonly onDispose: DashboardProps['onDispose']
+  private sessions: SessionRecord[]
+  private cachedWidth: number | null = null
+  private cachedLines: string[] = []
+  private disposed = false
+  private showHidden = false
+  private timer: NodeJS.Timeout
+
+  constructor({
+    tui,
+    theme,
+    initialSessions,
+    onRefresh,
+    onClose,
+    onDispose,
+  }: DashboardProps) {
+    this.tui = tui
+    this.theme = theme
+    this.onRefresh = onRefresh
+    this.onClose = onClose
+    this.onDispose = onDispose
+    this.sessions = [...initialSessions]
+
+    // FIXME: 改成用 fs.watch
+    this.timer = setInterval(() => {
+      if (!this.disposed) this.refresh()
+    }, 10000)
+  }
+
+  private forceRender(): void {
+    this.cachedWidth = null
+    this.tui.requestRender()
+  }
+
+  private refresh(): void {
+    this.onRefresh()
+      .then((newSessions) => {
+        this.sessions = [...newSessions]
+        this.forceRender()
+      })
+      .catch(() => {})
+  }
+
+  private headerLine(columns: ResolvedColumn[]): string {
+    return columns
+      .map(({ col, width }) => col.name.padEnd(width))
+      .join(COLUMN_SEPARATOR)
+  }
+
+  render(width: number): string[] {
+    if (this.cachedWidth === width) {
+      return this.cachedLines
+    }
+    this.cachedWidth = width
+    const columns = resolveColumns(width, this.showHidden)
+    const rows = [
+      this.theme.fg('borderAccent', this.headerLine(columns)),
+      this.theme.fg('borderAccent', '─'.repeat(Math.max(1, width))),
+      ...this.sessions.map((session) =>
+        columns
+          .map(({ col, width }) => col.render(session, this.theme, width))
+          .join(COLUMN_SEPARATOR),
+      ),
+      '',
+      this.theme.fg('dim', 'o ids • r refresh • q or esc close'),
+    ]
+    this.cachedLines = rows.map((line) => truncateToWidth(line, width, '…'))
+    return this.cachedLines
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, 'r')) {
+      this.refresh()
+      return
+    }
+
+    if (matchesKey(data, 'q') || matchesKey(data, Key.escape)) {
+      this.onClose()
+      return
+    }
+
+    if (matchesKey(data, 'o')) {
+      this.showHidden = !this.showHidden
+      this.forceRender()
+    }
+  }
+
+  invalidate(): void {
+    this.cachedWidth = null
+  }
+
+  dispose(): void {
+    this.disposed = true
+    clearInterval(this.timer)
+    this.onDispose?.()
+  }
+}

package/src/focus.ts

@@ -1,36 +1,39 @@
 import type { ExtensionAPI } from '@earendil-works/pi-coding-agent'
 
 import type { ResolvedNotifyConfig } from './config.js'
+import { Registrar } from './shared/registrar.js'
 import type { TmuxTitleTracker } from './tmux-title.js'
-import type { Unsubscribe } from './types.js'
 
-// xterm focus reporting (CSI ?1004): emitted by the terminal on focus gain/loss.
 const FOCUS_IN = '\x1b[I'
 const FOCUS_OUT = '\x1b[O'
 const ENABLE_FOCUS_REPORTING = '\x1b[?1004h'
 const DISABLE_FOCUS_REPORTING = '\x1b[?1004l'
 
-export class FocusTracker {
+export class FocusTracker extends Registrar {
+  private readonly titleTracker: TmuxTitleTracker
+  private readonly config: ResolvedNotifyConfig
   private _focused: boolean | undefined = undefined
   private _lastActivityAt = Date.now()
-  private unsubscribe: Unsubscribe | undefined
 
   constructor(
-    private readonly pi: ExtensionAPI,
-    private readonly titleTracker: TmuxTitleTracker,
-    private readonly config: ResolvedNotifyConfig,
-  ) {}
+    pi: ExtensionAPI,
+    titleTracker: TmuxTitleTracker,
+    config: ResolvedNotifyConfig,
+  ) {
+    super(pi)
+    this.titleTracker = titleTracker
+    this.config = config
+  }
 
   get isFocused(): boolean | undefined {
     return this._focused
   }
 
-  /** Timestamp of the last observed terminal input (fallback focus signal). */
   get lastActivityAt(): number {
     return this._lastActivityAt
   }
 
-  register(): void {
+  protected override setup(): void {
     this.pi.on('session_start', (_event, ctx) => {
       const activate =
         ctx.mode === 'tui' &&
@@ -38,24 +41,21 @@ export class FocusTracker {
       if (!activate) return
       this._lastActivityAt = Date.now()
       process.stdout.write(ENABLE_FOCUS_REPORTING)
-      this.unsubscribe = ctx.ui.onTerminalInput((data) => {
-        this._lastActivityAt = Date.now()
-        const result = this.consume(data)
-        if (result.gainedFocus) this.titleTracker.restore()
-        return result.data === data ? undefined : { data: result.data }
-      })
-    })
-    this.pi.on('session_shutdown', () => {
-      this.stop()
+      this.unsubscribes.push(
+        ctx.ui.onTerminalInput((data) => {
+          this._lastActivityAt = Date.now()
+          const result = this.consume(data)
+          if (result.gainedFocus) this.titleTracker.restore()
+          if (result.data !== data) return { consume: true }
+          return undefined
+        }),
+      )
     })
   }
 
-  stop(): void {
-    if (this.unsubscribe) {
-      process.stdout.write(DISABLE_FOCUS_REPORTING)
-      this.unsubscribe()
-      this.unsubscribe = undefined
-    }
+  override stop(): void {
+    process.stdout.write(DISABLE_FOCUS_REPORTING)
+    super.stop()
     this._focused = undefined
   }
 

package/src/index.ts

@@ -4,19 +4,18 @@ import type { ExtensionAPI } from '@earendil-works/pi-coding-agent'
 
 import { loadConfig } from './config.js'
 import { DashboardCommand } from './dashboard/command.js'
-import { StateTracker } from './dashboard/state-tracker.js'
-import { EventsNotifier } from './events.js'
+import { SessionStore } from './dashboard/session-store.js'
 import { FocusTracker } from './focus.js'
-import { IdleNotifier } from './idle.js'
 import { JobTracker } from './jobs.js'
 import { notify } from './notifier.js'
 import { NotifyTest } from './notify-test.js'
+import type { Registerable } from './shared/types.js'
+import { StateTracker } from './state-tracker.js'
 import { SessionState } from './states.js'
 import { TmuxTitleTracker } from './tmux-title.js'
-import { ToolCallNotifier } from './tool.js'
 
-export { PI_NOTIFY_EVENT } from './events.js'
 export { JOB_END_EVENT, JOB_START_EVENT } from './jobs.js'
+export { PI_NOTIFY_EVENT } from './state-tracker.js'
 
 export default function piNotifyExtension(pi: ExtensionAPI): void {
   const config = loadConfig()
@@ -25,13 +24,11 @@ export default function piNotifyExtension(pi: ExtensionAPI): void {
 
   const tmuxTitleTracker = new TmuxTitleTracker(pi, config)
   const focusTracker = new FocusTracker(pi, tmuxTitleTracker, config)
-  const eventsNotifier = new EventsNotifier(pi, config)
-  const toolNotifier = new ToolCallNotifier(pi, config)
   const jobTracker = new JobTracker(pi)
-  const idleNotifier = new IdleNotifier(pi, config, jobTracker)
+  const stateTracker = new StateTracker(pi, jobTracker, config)
   const notifyTest = new NotifyTest(pi, title, tmuxTitleTracker)
   const sessionState = new SessionState(pi)
-  const stateTracker = new StateTracker(pi)
+  const sessionStore = new SessionStore(pi, stateTracker)
   const dashboardCommand = new DashboardCommand(pi)
 
   function notifyReal(body: string): void {
@@ -48,13 +45,14 @@ export default function piNotifyExtension(pi: ExtensionAPI): void {
     notify(title, body)
   }
 
-  tmuxTitleTracker.register()
-  focusTracker.register()
-  jobTracker.register()
-  eventsNotifier.register(notifyReal)
-  toolNotifier.register(notifyReal)
-  idleNotifier.register(notifyReal)
-  notifyTest.register()
-  stateTracker.register()
-  dashboardCommand.register()
+  const registrables: Registerable[] = [
+    tmuxTitleTracker,
+    focusTracker,
+    jobTracker,
+    stateTracker,
+    sessionStore,
+    notifyTest,
+    dashboardCommand,
+  ]
+  for (const r of registrables) r.register(notifyReal)
 }

package/src/jobs.ts

@@ -1,18 +1,12 @@
-import type { ExtensionAPI } from '@earendil-works/pi-coding-agent'
-
-import type { Unsubscribe } from './types.js'
+import { Registrar } from './shared/registrar.js'
 
 export const JOB_START_EVENT = 'pi-notify:job:start'
 export const JOB_END_EVENT = 'pi-notify:job:end'
 
-export class JobTracker {
+export class JobTracker extends Registrar {
   private activeJobs = new Set<string>()
-  private unsubscribes: Unsubscribe[] = []
-  private registered = false
   private onEndListeners: Array<() => void> = []
 
-  constructor(private readonly pi: ExtensionAPI) {}
-
   get hasActiveJobs(): boolean {
     return this.activeJobs.size > 0
   }
@@ -25,10 +19,7 @@ export class JobTracker {
     }
   }
 
-  register(): void {
-    if (this.registered) return
-    this.registered = true
-
+  protected override setup(): void {
     const startUnsub = this.pi.events.on(JOB_START_EVENT, (params) => {
       if (
         typeof params === 'object' &&
@@ -53,18 +44,10 @@ export class JobTracker {
       }
     })
     this.unsubscribes.push(endUnsub)
-
-    this.pi.on('session_shutdown', () => {
-      this.stop()
-    })
   }
 
-  stop(): void {
-    this.unsubscribes.forEach((unsub) => {
-      unsub()
-    })
-    this.unsubscribes = []
+  override stop(): void {
+    super.stop()
     this.activeJobs.clear()
-    this.registered = false
   }
 }

package/src/notify-test.ts

@@ -1,17 +1,21 @@
 import type { ExtensionAPI } from '@earendil-works/pi-coding-agent'
 
-import { notify } from './notifier.js'
+import { notify as sendNotification } from './notifier.js'
+import { sleep } from './shared/utils.js'
 import type { TmuxTitleTracker } from './tmux-title.js'
-import { sleep } from './utils.js'
 
 const DEFAULT_BODY = 'This is a test notification.'
 
 export class NotifyTest {
-  constructor(
-    private readonly pi: ExtensionAPI,
-    private readonly title: string,
-    private readonly titleTracker: TmuxTitleTracker,
-  ) {}
+  private readonly pi: ExtensionAPI
+  private readonly title: string
+  private readonly titleTracker: TmuxTitleTracker
+
+  constructor(pi: ExtensionAPI, title: string, titleTracker: TmuxTitleTracker) {
+    this.pi = pi
+    this.title = title
+    this.titleTracker = titleTracker
+  }
 
   register(): void {
     this.pi.registerCommand('notify-test', {
@@ -19,7 +23,7 @@ export class NotifyTest {
       handler: async (args) => {
         await sleep(3000)
         this.titleTracker.mark()
-        notify(this.title, args.trim() || DEFAULT_BODY)
+        sendNotification(this.title, args.trim() || DEFAULT_BODY)
       },
     })
   }