@clawpump/claw-agent 0.1.4 → 0.1.6

package/agent/apps/desktop/src/app/cron/index.tsx

@@ -1,5 +1,6 @@
+import { useStore } from '@nanostores/react'
 import type * as React from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { PageLoader } from '@/components/page-loader'
 import { Button } from '@/components/ui/button'
@@ -13,77 +14,46 @@ import {
   DialogTitle
 } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
+import { SearchField } from '@/components/ui/search-field'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
 import {
   createCronJob,
   type CronJob,
   deleteCronJob,
+  getCronJobRuns,
   getCronJobs,
   pauseCronJob,
   resumeCronJob,
+  type SessionInfo,
   triggerCronJob,
   updateCronJob
 } from '@/hermes'
-import { AlertTriangle, Clock, Pause, Pencil, Play, Trash2, Zap } from '@/lib/icons'
+import { type Translations, useI18n } from '@/i18n'
+import { AlertTriangle, Clock } from '@/lib/icons'
 import { cn } from '@/lib/utils'
+import { $cronFocusJobId, $cronJobs, setCronFocusJobId, setCronJobs, updateCronJobs } from '@/store/cron'
 import { notify, notifyError } from '@/store/notifications'
 
-import { PageSearchShell } from '../page-search-shell'
+import { useRefreshHotkey } from '../hooks/use-refresh-hotkey'
+import { OverlayMain, OverlayNewButton, OverlaySidebar, OverlaySplitLayout } from '../overlays/overlay-split-layout'
+import { OverlayView } from '../overlays/overlay-view'
 import type { SetStatusbarItemGroup } from '../shell/statusbar-controls'
 
+import { jobState, jobTitle, STATE_DOT } from './job-state'
+
 const DEFAULT_DELIVER = 'local'
 
-const DELIVERY_OPTIONS: ReadonlyArray<{ label: string; value: string }> = [
-  { label: 'This desktop', value: 'local' },
-  { label: 'Telegram', value: 'telegram' },
-  { label: 'Discord', value: 'discord' },
-  { label: 'Slack', value: 'slack' },
-  { label: 'Email', value: 'email' }
-]
+const DELIVERY_VALUES: readonly string[] = ['local', 'telegram', 'discord', 'slack', 'email']
 
 const SCHEDULE_OPTIONS: ReadonlyArray<ScheduleOption> = [
-  {
-    expr: '0 9 * * *',
-    hint: 'Every day at 9:00 AM',
-    label: 'Daily',
-    value: 'daily'
-  },
-  {
-    expr: '0 9 * * 1-5',
-    hint: 'Monday through Friday at 9:00 AM',
-    label: 'Weekdays',
-    value: 'weekdays'
-  },
-  {
-    expr: '0 9 * * 1',
-    hint: 'Every Monday at 9:00 AM',
-    label: 'Weekly',
-    value: 'weekly'
-  },
-  {
-    expr: '0 9 1 * *',
-    hint: 'The first day of each month at 9:00 AM',
-    label: 'Monthly',
-    value: 'monthly'
-  },
-  {
-    expr: '0 * * * *',
-    hint: 'At the top of every hour',
-    label: 'Hourly',
-    value: 'hourly'
-  },
-  {
-    expr: '*/15 * * * *',
-    hint: 'Every 15 minutes',
-    label: 'Every 15 minutes',
-    value: 'every-15-minutes'
-  },
-  {
-    hint: 'Cron syntax or natural language',
-    label: 'Custom',
-    value: 'custom'
-  }
+  { expr: '0 9 * * *', value: 'daily' },
+  { expr: '0 9 * * 1-5', value: 'weekdays' },
+  { expr: '0 9 * * 1', value: 'weekly' },
+  { expr: '0 9 1 * *', value: 'monthly' },
+  { expr: '0 * * * *', value: 'hourly' },
+  { expr: '*/15 * * * *', value: 'every-15-minutes' },
+  { value: 'custom' }
 ]
 
 const STATE_TONE: Record<string, 'good' | 'muted' | 'warn' | 'bad'> = {
@@ -115,28 +85,6 @@ function jobPrompt(job: CronJob): string {
   return asText(job.prompt)
 }
 
-function jobTitle(job: CronJob): string {
-  const name = jobName(job)
-
-  if (name) {
-    return name
-  }
-
-  const prompt = jobPrompt(job)
-
-  if (prompt) {
-    return truncate(prompt, 60)
-  }
-
-  const script = asText(job.script)
-
-  if (script) {
-    return truncate(script, 60)
-  }
-
-  return job.id || 'Cron job'
-}
-
 function jobScheduleDisplay(job: CronJob): string {
   return asText(job.schedule_display) || asText(job.schedule?.display) || asText(job.schedule?.expr) || '—'
 }
@@ -145,10 +93,6 @@ function jobScheduleExpr(job: CronJob): string {
   return asText(job.schedule?.expr) || asText(job.schedule_display) || ''
 }
 
-function jobState(job: CronJob): string {
-  return asText(job.state) || (job.enabled === false ? 'disabled' : 'scheduled')
-}
-
 function jobDeliver(job: CronJob): string {
   return asText(job.deliver) || DEFAULT_DELIVER
 }
@@ -159,19 +103,8 @@ function cronParts(expr: string): null | string[] {
   return parts.length === 5 ? parts : null
 }
 
-function dayName(value: string): string {
-  const names: Record<string, string> = {
-    '0': 'Sunday',
-    '1': 'Monday',
-    '2': 'Tuesday',
-    '3': 'Wednesday',
-    '4': 'Thursday',
-    '5': 'Friday',
-    '6': 'Saturday',
-    '7': 'Sunday'
-  }
-
-  return names[value] ?? `day ${value}`
+function dayName(value: string, c: Translations['cron']): string {
+  return c.days[value] ?? c.dayFallback(value)
 }
 
 function formatCronTime(minute: string, hour: string): string {
@@ -247,36 +180,36 @@ function scheduleOptionForExpr(expr: string): ScheduleOption {
   return SCHEDULE_OPTIONS[SCHEDULE_OPTIONS.length - 1]
 }
 
-function scheduleSummary(option: ScheduleOption, expr: string): string {
+function scheduleSummary(option: ScheduleOption, expr: string, c: Translations['cron']): string {
   const parts = cronParts(expr)
 
   if (!parts) {
-    return option.hint
+    return c.scheduleHints[option.value] ?? ''
   }
 
   const [minute, hour, dayOfMonth, , dayOfWeek] = parts
 
   if (option.value === 'daily') {
-    return `Every day at ${formatCronTime(minute, hour)}`
+    return c.everyDayAt(formatCronTime(minute, hour))
   }
 
   if (option.value === 'weekdays') {
-    return `Weekdays at ${formatCronTime(minute, hour)}`
+    return c.weekdaysAt(formatCronTime(minute, hour))
   }
 
   if (option.value === 'weekly') {
-    return `Every ${dayName(dayOfWeek)} at ${formatCronTime(minute, hour)}`
+    return c.everyDayOfWeekAt(dayName(dayOfWeek, c), formatCronTime(minute, hour))
   }
 
   if (option.value === 'monthly') {
-    return `Monthly on day ${dayOfMonth} at ${formatCronTime(minute, hour)}`
+    return c.monthlyOnDayAt(dayOfMonth, formatCronTime(minute, hour))
   }
 
   if (option.value === 'hourly') {
-    return minute === '0' ? 'At the top of every hour' : `Every hour at :${minute.padStart(2, '0')}`
+    return minute === '0' ? c.topOfHour : c.everyHourAt(minute.padStart(2, '0'))
   }
 
-  return option.hint
+  return c.scheduleHints[option.value] ?? ''
 }
 
 function formatTime(iso?: null | string): string {
@@ -306,46 +239,89 @@ function matchesQuery(job: CronJob, q: string): boolean {
 }
 
 interface CronViewProps extends React.ComponentProps<'section'> {
+  onClose: () => void
+  onOpenSession?: (sessionId: string) => void
   setStatusbarItemGroup?: SetStatusbarItemGroup
 }
 
-export function CronView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...props }: CronViewProps) {
-  const [jobs, setJobs] = useState<CronJob[] | null>(null)
+export function CronView({ onClose, onOpenSession, setStatusbarItemGroup: _setStatusbarItemGroup }: CronViewProps) {
+  const { t } = useI18n()
+  const c = t.cron
+  // Source of truth is the shared atom (also fed by the controller poll), so the
+  // sidebar and this overlay never drift — a delete here clears the sidebar row
+  // immediately. `loading` only gates the first paint before the atom is filled.
+  const jobs = useStore($cronJobs)
+  const [loading, setLoading] = useState(jobs.length === 0)
   const [query, setQuery] = useState('')
-  const [refreshing, setRefreshing] = useState(false)
   const [busyJobId, setBusyJobId] = useState<null | string>(null)
+  // Master/detail: the job whose schedule + run history fill the right pane.
+  const [selectedJobId, setSelectedJobId] = useState<null | string>(null)
+  // Set when a job is opened from the sidebar so we scroll it into view once the
+  // row exists. Cleared after the scroll fires.
+  const pendingScrollRef = useRef<null | string>(null)
+  const focusJobId = useStore($cronFocusJobId)
 
   const [editor, setEditor] = useState<EditorState>({ mode: 'closed' })
   const [pendingDelete, setPendingDelete] = useState<CronJob | null>(null)
   const [deleting, setDeleting] = useState(false)
 
   const refresh = useCallback(async () => {
-    setRefreshing(true)
-
     try {
-      const result = await getCronJobs()
-      setJobs(result)
+      setCronJobs(await getCronJobs())
     } catch (err) {
-      notifyError(err, 'Failed to load cron jobs')
+      notifyError(err, c.failedLoad)
     } finally {
-      setRefreshing(false)
+      setLoading(false)
     }
-  }, [])
+  }, [c])
+
+  useRefreshHotkey(refresh)
 
   useEffect(() => {
     void refresh()
   }, [refresh])
 
-  const visibleJobs = useMemo(() => {
-    if (!jobs) {
-      return []
+  // Sidebar → "open this job": resolve the focus id (or name) to a job, select
+  // it, queue a scroll, then clear the one-shot focus so re-opening cron
+  // normally doesn't re-trigger it.
+  useEffect(() => {
+    if (!focusJobId) {return}
+
+    const match = jobs.find(job => job.id === focusJobId || jobName(job) === focusJobId)
+
+    if (match) {
+      setSelectedJobId(match.id)
+      pendingScrollRef.current = match.id
     }
 
-    return jobs.filter(job => matchesQuery(job, query.trim())).sort((a, b) => jobTitle(a).localeCompare(jobTitle(b)))
-  }, [jobs, query])
+    setCronFocusJobId(null)
+  }, [focusJobId, jobs])
+
+  const visibleJobs = useMemo(
+    () => jobs.filter(job => matchesQuery(job, query.trim())).sort((a, b) => jobTitle(a).localeCompare(jobTitle(b))),
+    [jobs, query]
+  )
+
+  // Detail always reflects a concrete job: the explicitly selected one, else the
+  // first visible row, so the right pane is never empty while jobs exist.
+  const selectedJob = useMemo(
+    () => visibleJobs.find(job => job.id === selectedJobId) ?? visibleJobs[0] ?? null,
+    [visibleJobs, selectedJobId]
+  )
+
+  // Scroll a sidebar-opened job into view once its list row is mounted.
+  useEffect(() => {
+    const target = pendingScrollRef.current
+
+    if (!target || selectedJob?.id !== target) {return}
+
+    pendingScrollRef.current = null
+    requestAnimationFrame(() => {
+      document.querySelector(`[data-cron-row="${CSS.escape(target)}"]`)?.scrollIntoView({ block: 'nearest' })
+    })
+  }, [selectedJob])
 
-  const enabledCount = jobs?.filter(job => job.enabled).length ?? 0
-  const totalCount = jobs?.length ?? 0
+  const totalCount = jobs.length
 
   async function handlePauseResume(job: CronJob) {
     setBusyJobId(job.id)
@@ -353,14 +329,14 @@ export function CronView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...pro
     try {
       const isPaused = jobState(job) === 'paused'
       const updated = isPaused ? await resumeCronJob(job.id) : await pauseCronJob(job.id)
-      setJobs(current => (current ? current.map(row => (row.id === job.id ? updated : row)) : current))
+      updateCronJobs(rows => rows.map(row => (row.id === job.id ? updated : row)))
       notify({
         kind: 'success',
-        title: isPaused ? 'Cron resumed' : 'Cron paused',
+        title: isPaused ? c.resumed : c.paused,
         message: truncate(jobTitle(job), 60)
       })
     } catch (err) {
-      notifyError(err, 'Failed to update cron job')
+      notifyError(err, c.failedUpdate)
     } finally {
       setBusyJobId(null)
     }
@@ -371,10 +347,10 @@ export function CronView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...pro
 
     try {
       const updated = await triggerCronJob(job.id)
-      setJobs(current => (current ? current.map(row => (row.id === job.id ? updated : row)) : current))
-      notify({ kind: 'success', title: 'Cron triggered', message: truncate(jobTitle(job), 60) })
+      updateCronJobs(rows => rows.map(row => (row.id === job.id ? updated : row)))
+      notify({ kind: 'success', title: c.triggered, message: truncate(jobTitle(job), 60) })
     } catch (err) {
-      notifyError(err, 'Failed to trigger cron job')
+      notifyError(err, c.failedTrigger)
     } finally {
       setBusyJobId(null)
     }
@@ -389,11 +365,11 @@ export function CronView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...pro
 
     try {
       await deleteCronJob(pendingDelete.id)
-      setJobs(current => (current ? current.filter(row => row.id !== pendingDelete.id) : current))
-      notify({ kind: 'success', title: 'Cron deleted', message: truncate(jobTitle(pendingDelete), 60) })
+      updateCronJobs(rows => rows.filter(row => row.id !== pendingDelete.id))
+      notify({ kind: 'success', title: c.deleted, message: truncate(jobTitle(pendingDelete), 60) })
       setPendingDelete(null)
     } catch (err) {
-      notifyError(err, 'Failed to delete cron job')
+      notifyError(err, c.failedDelete)
     } finally {
       setDeleting(false)
     }
@@ -408,8 +384,8 @@ export function CronView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...pro
         deliver: values.deliver || DEFAULT_DELIVER
       })
 
-      setJobs(current => (current ? [...current, created] : [created]))
-      notify({ kind: 'success', title: 'Cron created', message: truncate(jobTitle(created), 60) })
+      updateCronJobs(rows => [...rows, created])
+      notify({ kind: 'success', title: c.created, message: truncate(jobTitle(created), 60) })
     } else if (editor.mode === 'edit') {
       const updated = await updateCronJob(editor.job.id, {
         prompt: values.prompt,
@@ -418,192 +394,313 @@ export function CronView({ setStatusbarItemGroup: _setStatusbarItemGroup, ...pro
         deliver: values.deliver
       })
 
-      setJobs(current => (current ? current.map(row => (row.id === updated.id ? updated : row)) : current))
-      notify({ kind: 'success', title: 'Cron updated', message: truncate(jobTitle(updated), 60) })
+      updateCronJobs(rows => rows.map(row => (row.id === updated.id ? updated : row)))
+      notify({ kind: 'success', title: c.updated, message: truncate(jobTitle(updated), 60) })
     }
 
     setEditor({ mode: 'closed' })
   }
 
   return (
-    <PageSearchShell
-      {...props}
-      filters={
-        <div className="flex flex-wrap items-center justify-center gap-2">
-          <Button onClick={() => setEditor({ mode: 'create' })} size="sm">
-            <Codicon name="add" />
-            New cron
-          </Button>
-        </div>
-      }
-      onSearchChange={setQuery}
-      searchPlaceholder="Search cron jobs..."
-      searchTrailingAction={
-        <Button
-          aria-label={refreshing ? 'Refreshing cron jobs' : 'Refresh cron jobs'}
-          className="text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground"
-          disabled={refreshing}
-          onClick={() => void refresh()}
-          size="icon-xs"
-          title={refreshing ? 'Refreshing cron jobs' : 'Refresh cron jobs'}
-          type="button"
-          variant="ghost"
-        >
-          <Codicon name="refresh" size="0.875rem" spinning={refreshing} />
-        </Button>
-      }
-      searchValue={query}
-    >
-      {!jobs ? (
-        <PageLoader label="Loading cron jobs..." />
-      ) : visibleJobs.length === 0 ? (
-        <EmptyState
-          actionLabel={totalCount === 0 ? 'Create first cron' : undefined}
-          description={
-            totalCount === 0
-              ? 'Schedule a prompt to run on a cron expression. Hermes will run it and deliver results to the destination you pick.'
-              : 'Try a broader search query.'
-          }
-          onAction={totalCount === 0 ? () => setEditor({ mode: 'create' }) : undefined}
-          title={totalCount === 0 ? 'No scheduled jobs yet' : 'No matches'}
-        />
+    <OverlayView closeLabel={c.close} onClose={onClose}>
+      {loading && jobs.length === 0 ? (
+        <PageLoader label={c.loading} />
       ) : (
-        <div className="h-full overflow-y-auto px-4 py-3">
-          <div className="divide-y divide-border/40 rounded-lg border border-border/40 bg-background/70">
+        <OverlaySplitLayout>
+          <OverlaySidebar>
+            <OverlayNewButton label={c.newCron} onClick={() => setEditor({ mode: 'create' })} />
+            {totalCount > 0 && (
+              <SearchField
+                aria-label={c.search}
+                containerClassName="mb-1 w-full px-2"
+                onChange={setQuery}
+                placeholder={c.search}
+                value={query}
+              />
+            )}
             {visibleJobs.map(job => (
-              <CronJobRow
-                busy={busyJobId === job.id}
+              <CronJobListRow
+                active={selectedJob?.id === job.id}
+                c={c}
                 job={job}
                 key={job.id}
-                onDelete={() => setPendingDelete(job)}
-                onEdit={() => setEditor({ mode: 'edit', job })}
-                onPauseResume={() => void handlePauseResume(job)}
-                onTrigger={() => void handleTrigger(job)}
+                onSelect={() => setSelectedJobId(job.id)}
               />
             ))}
-          </div>
-        </div>
+            {visibleJobs.length === 0 && (
+              <p className="px-2 py-4 text-center text-xs text-muted-foreground">
+                {totalCount === 0 ? c.emptyTitleNew : c.emptyTitleSearch}
+              </p>
+            )}
+          </OverlaySidebar>
+
+          <OverlayMain className="px-0">
+            {selectedJob ? (
+              <CronJobDetail
+                busy={busyJobId === selectedJob.id}
+                c={c}
+                job={selectedJob}
+                onDelete={() => setPendingDelete(selectedJob)}
+                onEdit={() => setEditor({ mode: 'edit', job: selectedJob })}
+                onOpenSession={onOpenSession}
+                onPauseResume={() => void handlePauseResume(selectedJob)}
+                onTrigger={() => void handleTrigger(selectedJob)}
+              />
+            ) : (
+              <div className="grid h-full place-items-center px-6 py-12 text-center text-sm text-muted-foreground">
+                <div>
+                  <Clock className="mx-auto size-6 text-muted-foreground/60" />
+                  <p className="mt-3">{totalCount === 0 ? c.emptyDescNew : c.emptyDescSearch}</p>
+                </div>
+              </div>
+            )}
+          </OverlayMain>
+        </OverlaySplitLayout>
       )}
-      <div className="hidden">{totalCount === 0 ? 'No scheduled jobs' : `${enabledCount}/${totalCount} active`}</div>
 
       <CronEditorDialog editor={editor} onClose={() => setEditor({ mode: 'closed' })} onSave={handleEditorSave} />
 
-      <Dialog onOpenChange={open => !open && !deleting && setPendingDelete(null)} open={pendingDelete !== null}>
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>Delete cron job?</DialogTitle>
-            <DialogDescription>
-              {pendingDelete ? (
-                <>
-                  This will remove{' '}
-                  <span className="font-medium text-foreground">{truncate(jobTitle(pendingDelete), 60)}</span>{' '}
-                  permanently. It will stop firing immediately.
-                </>
-              ) : null}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button disabled={deleting} onClick={() => setPendingDelete(null)} variant="outline">
-              Cancel
-            </Button>
-            <Button disabled={deleting} onClick={() => void handleConfirmDelete()} variant="destructive">
-              {deleting ? 'Deleting...' : 'Delete'}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </PageSearchShell>
+        <Dialog onOpenChange={open => !open && !deleting && setPendingDelete(null)} open={pendingDelete !== null}>
+          <DialogContent className="max-w-md">
+            <DialogHeader>
+              <DialogTitle>{c.deleteTitle}</DialogTitle>
+              <DialogDescription>
+                {pendingDelete ? (
+                  <>
+                    {c.deleteDescPrefix}
+                    <span className="font-medium text-foreground">{truncate(jobTitle(pendingDelete), 60)}</span>
+                    {c.deleteDescSuffix}
+                  </>
+                ) : null}
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button disabled={deleting} onClick={() => setPendingDelete(null)} variant="outline">
+                {t.common.cancel}
+              </Button>
+              <Button disabled={deleting} onClick={() => void handleConfirmDelete()} variant="destructive">
+                {deleting ? c.deleting : t.common.delete}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+    </OverlayView>
+  )
+}
+
+function CronJobListRow({
+  active,
+  c,
+  job,
+  onSelect
+}: {
+  active: boolean
+  c: Translations['cron']
+  job: CronJob
+  onSelect: () => void
+}) {
+  const state = jobState(job)
+
+  return (
+    <button
+      className={cn(
+        'flex w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors',
+        active ? 'bg-accent text-foreground' : 'text-foreground/85 hover:bg-accent/60'
+      )}
+      data-cron-row={job.id}
+      onClick={onSelect}
+      type="button"
+    >
+      <span className="flex w-full items-center gap-2">
+        <span
+          aria-hidden="true"
+          className={cn('size-1.5 shrink-0 rounded-full', STATE_DOT[state] ?? 'bg-muted-foreground')}
+        />
+        <span className="min-w-0 flex-1 truncate text-sm font-medium">{jobTitle(job)}</span>
+      </span>
+      <span className="truncate pl-3.5 text-[0.66rem] text-muted-foreground">{jobScheduleDisplay(job)}</span>
+    </button>
   )
 }
 
-function CronJobRow({
+function CronJobDetail({
   busy,
+  c,
   job,
   onDelete,
   onEdit,
+  onOpenSession,
   onPauseResume,
   onTrigger
 }: {
   busy: boolean
+  c: Translations['cron']
   job: CronJob
   onDelete: () => void
   onEdit: () => void
+  onOpenSession?: (sessionId: string) => void
   onPauseResume: () => void
   onTrigger: () => void
 }) {
   const state = jobState(job)
   const isPaused = state === 'paused'
-  const hasName = Boolean(jobName(job))
-  const prompt = jobPrompt(job)
   const deliver = jobDeliver(job)
+  const prompt = jobPrompt(job)
 
   return (
-    <div className="grid gap-3 px-3 py-2.5 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start">
-      <button
-        className="min-w-0 cursor-pointer rounded-md text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
-        onClick={onEdit}
-        type="button"
-      >
-        <div className="flex flex-wrap items-center gap-2">
-          <span className="truncate text-sm font-medium">{jobTitle(job)}</span>
-          <StatePill tone={STATE_TONE[state] ?? 'muted'}>{state}</StatePill>
-          {deliver && deliver !== DEFAULT_DELIVER && <StatePill tone="muted">{deliver}</StatePill>}
-        </div>
-        {hasName && prompt && <p className="mt-1 truncate text-xs text-muted-foreground">{truncate(prompt, 120)}</p>}
-        <div className="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-[0.68rem] text-muted-foreground">
-          <span className="inline-flex items-center gap-1 font-mono">
-            <Clock className="size-3" />
-            {jobScheduleDisplay(job)}
-          </span>
-          <span>Last: {formatTime(job.last_run_at)}</span>
-          <span>Next: {formatTime(job.next_run_at)}</span>
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="mx-auto max-w-2xl space-y-6 px-6 py-6">
+          <header className="space-y-3">
+            <div className="flex flex-wrap items-start justify-between gap-3">
+              <div className="min-w-0 space-y-1">
+                <div className="flex flex-wrap items-center gap-2">
+                  <h3 className="text-xl font-semibold tracking-tight">{jobTitle(job)}</h3>
+                  <StatePill tone={STATE_TONE[state] ?? 'muted'}>{c.states[state] ?? state}</StatePill>
+                  {deliver && deliver !== DEFAULT_DELIVER && (
+                    <StatePill tone="muted">{c.deliveryLabels[deliver] ?? deliver}</StatePill>
+                  )}
+                </div>
+                <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-[0.7rem] text-muted-foreground">
+                  <span className="inline-flex items-center gap-1">
+                    <Clock className="size-3" />
+                    {jobScheduleDisplay(job)}
+                  </span>
+                  <span>
+                    {c.last} {formatTime(job.last_run_at)}
+                  </span>
+                  <span>
+                    {c.next} {formatTime(job.next_run_at)}
+                  </span>
+                </div>
+              </div>
+              <div className="flex shrink-0 items-center gap-1">
+                <Button disabled={busy} onClick={onPauseResume} size="sm" variant="outline">
+                  <Codicon name={isPaused ? 'play' : 'debug-pause'} size="0.875rem" />
+                  {isPaused ? c.resumeTitle : c.pauseTitle}
+                </Button>
+                <Button disabled={busy} onClick={onTrigger} size="sm" variant="outline">
+                  <Codicon name="zap" size="0.875rem" />
+                  {c.triggerNow}
+                </Button>
+                <Button onClick={onEdit} size="sm" variant="outline">
+                  <Codicon name="edit" size="0.875rem" />
+                  {c.edit}
+                </Button>
+                <Button
+                  className="text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+                  onClick={onDelete}
+                  size="sm"
+                  variant="ghost"
+                >
+                  <Codicon name="trash" size="0.875rem" />
+                </Button>
+              </div>
+            </div>
+
+            {prompt && <p className="line-clamp-3 text-xs text-muted-foreground">{prompt}</p>}
+            {job.last_error && (
+              <p className="inline-flex items-start gap-1 text-[0.7rem] text-destructive">
+                <AlertTriangle className="mt-px size-3 shrink-0" />
+                <span className="line-clamp-2">{job.last_error}</span>
+              </p>
+            )}
+          </header>
+
+          <CronJobRuns c={c} jobId={job.id} onOpenSession={onOpenSession} />
         </div>
-        {job.last_error && (
-          <p className="mt-1 inline-flex items-start gap-1 text-[0.68rem] text-destructive">
-            <AlertTriangle className="mt-px size-3 shrink-0" />
-            <span className="line-clamp-2">{job.last_error}</span>
-          </p>
-        )}
-      </button>
-
-      <div className="flex shrink-0 items-center gap-0.5">
-        <IconAction
-          aria-label={isPaused ? 'Resume cron' : 'Pause cron'}
-          disabled={busy}
-          onClick={onPauseResume}
-          title={isPaused ? 'Resume' : 'Pause'}
-        >
-          {isPaused ? <Play className="size-3.5" /> : <Pause className="size-3.5" />}
-        </IconAction>
-        <IconAction aria-label="Trigger now" disabled={busy} onClick={onTrigger} title="Trigger now">
-          <Zap className="size-3.5" />
-        </IconAction>
-        <IconAction aria-label="Edit cron" onClick={onEdit} title="Edit">
-          <Pencil className="size-3.5" />
-        </IconAction>
-        <IconAction
-          aria-label="Delete cron"
-          className="text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
-          onClick={onDelete}
-          title="Delete"
-        >
-          <Trash2 className="size-3.5" />
-        </IconAction>
       </div>
     </div>
   )
 }
 
-function IconAction({ children, className, ...props }: Omit<React.ComponentProps<typeof Button>, 'size' | 'variant'>) {
+function formatRunTime(seconds?: null | number): string {
+  if (!seconds) {
+    return '—'
+  }
+
+  const date = new Date(seconds * 1000)
+
+  return Number.isNaN(date.valueOf()) ? '—' : date.toLocaleString()
+}
+
+// Runs are produced by the background scheduler tick (no UI signal), so poll
+// while the panel is open + on tab re-focus so a fired run shows up within a few
+// seconds instead of waiting for a reload.
+const RUNS_POLL_INTERVAL_MS = 8000
+
+function CronJobRuns({
+  c,
+  jobId,
+  onOpenSession
+}: {
+  c: Translations['cron']
+  jobId: string
+  onOpenSession?: (sessionId: string) => void
+}) {
+  const [runs, setRuns] = useState<null | SessionInfo[]>(null)
+
+  useEffect(() => {
+    let cancelled = false
+
+    const load = () =>
+      getCronJobRuns(jobId)
+        .then(result => {
+          if (!cancelled) {setRuns(result)}
+        })
+        .catch(() => {
+          if (!cancelled) {setRuns(prev => prev ?? [])}
+        })
+
+    void load()
+
+    const intervalId = window.setInterval(() => {
+      if (document.visibilityState === 'visible') {void load()}
+    }, RUNS_POLL_INTERVAL_MS)
+
+    const onVisible = () => {
+      if (document.visibilityState === 'visible') {void load()}
+    }
+
+    document.addEventListener('visibilitychange', onVisible)
+
+    return () => {
+      cancelled = true
+      window.clearInterval(intervalId)
+      document.removeEventListener('visibilitychange', onVisible)
+    }
+  }, [jobId])
+
   return (
-    <Button
-      className={cn('size-7 text-muted-foreground hover:text-foreground', className)}
-      size="icon"
-      variant="ghost"
-      {...props}
-    >
-      {children}
-    </Button>
+    <div>
+      <div className="mb-1.5 text-[0.62rem] font-medium uppercase tracking-wide text-muted-foreground">
+        {c.runHistory}
+        {runs && runs.length > 0 ? ` · ${runs.length}` : ''}
+      </div>
+      {runs === null ? (
+        <div className="flex items-center gap-1.5 py-1 text-xs text-muted-foreground">
+          <Codicon name="loading" size="0.75rem" spinning />
+        </div>
+      ) : runs.length === 0 ? (
+        <div className="py-1 text-xs text-muted-foreground">{c.noRuns}</div>
+      ) : (
+        <div className="flex flex-col gap-px">
+          {runs.map(run => (
+            <button
+              className="flex items-center justify-between gap-3 rounded-md px-2 py-1 text-left text-xs hover:bg-(--chrome-action-hover) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+              key={run.id}
+              onClick={() => onOpenSession?.(run.id)}
+              type="button"
+            >
+              <span className="truncate text-foreground">{run.title?.trim() || run.preview?.trim() || run.id}</span>
+              <span className="shrink-0 text-[0.62rem] text-muted-foreground tabular-nums">
+                {formatRunTime(run.last_active || run.started_at)}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
   )
 }
 
@@ -617,33 +714,6 @@ function StatePill({ children, tone }: { children: string; tone: keyof typeof PI
   )
 }
 
-function EmptyState({
-  actionLabel,
-  description,
-  onAction,
-  title
-}: {
-  actionLabel?: string
-  description: string
-  onAction?: () => void
-  title: string
-}) {
-  return (
-    <div className="grid h-full place-items-center px-6 py-12 text-center">
-      <div className="max-w-sm space-y-2">
-        <div className="text-sm font-medium">{title}</div>
-        <p className="text-xs text-muted-foreground">{description}</p>
-        {actionLabel && onAction && (
-          <Button className="mt-2" onClick={onAction} size="sm">
-            <Codicon name="add" />
-            {actionLabel}
-          </Button>
-        )}
-      </div>
-    </div>
-  )
-}
-
 function CronEditorDialog({
   editor,
   onClose,
@@ -653,6 +723,8 @@ function CronEditorDialog({
   onClose: () => void
   onSave: (values: EditorValues) => Promise<void>
 }) {
+  const { t } = useI18n()
+  const c = t.cron
   const open = editor.mode !== 'closed'
   const isEdit = editor.mode === 'edit'
   const initial = isEdit ? editor.job : null
@@ -695,7 +767,7 @@ function CronEditorDialog({
     }
   }
 
-  const scheduleHint = scheduleSummary(selectedScheduleOption, schedule)
+  const scheduleHint = scheduleSummary(selectedScheduleOption, schedule, c)
 
   async function handleSubmit(event: React.FormEvent) {
     event.preventDefault()
@@ -703,7 +775,7 @@ function CronEditorDialog({
     const trimmedSchedule = schedule.trim()
 
     if (!trimmedPrompt || !trimmedSchedule) {
-      setError('Prompt and schedule are required.')
+      setError(c.promptScheduleRequired)
 
       return
     }
@@ -719,7 +791,7 @@ function CronEditorDialog({
         schedule: trimmedSchedule
       })
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to save cron job')
+      setError(err instanceof Error ? err.message : c.failedSave)
     } finally {
       setSaving(false)
     }
@@ -729,37 +801,33 @@ function CronEditorDialog({
     <Dialog onOpenChange={value => !value && !saving && onClose()} open={open}>
       <DialogContent className="max-w-lg">
         <DialogHeader>
-          <DialogTitle>{isEdit ? 'Edit cron job' : 'New cron job'}</DialogTitle>
-          <DialogDescription>
-            {isEdit
-              ? 'Update the schedule, prompt, or delivery target. Changes apply on next run.'
-              : 'Schedule a prompt to run automatically. Use cron syntax or a natural phrase like "every 15 minutes".'}
-          </DialogDescription>
+          <DialogTitle>{isEdit ? c.editTitle : c.createTitle}</DialogTitle>
+          <DialogDescription>{isEdit ? c.editDesc : c.createDesc}</DialogDescription>
         </DialogHeader>
 
         <form className="grid gap-4" onSubmit={handleSubmit}>
-          <Field htmlFor="cron-name" label="Name" optional>
+          <Field htmlFor="cron-name" label={c.nameLabel} optional optionalLabel={c.optional}>
             <Input
               autoFocus
               id="cron-name"
               onChange={event => setName(event.target.value)}
-              placeholder="Morning briefing"
+              placeholder={c.namePlaceholder}
               value={name}
             />
           </Field>
 
-          <Field htmlFor="cron-prompt" label="Prompt">
+          <Field htmlFor="cron-prompt" label={c.promptLabel}>
             <Textarea
               className="min-h-24 font-mono"
               id="cron-prompt"
               onChange={event => setPrompt(event.target.value)}
-              placeholder="Summarize my unread Slack threads and email me the top 5..."
+              placeholder={c.promptPlaceholder}
               value={prompt}
             />
           </Field>
 
           <div className="grid items-start gap-4 sm:grid-cols-2">
-            <Field htmlFor="cron-frequency" label="Frequency">
+            <Field htmlFor="cron-frequency" label={c.frequencyLabel}>
               <Select onValueChange={handleSchedulePresetChange} value={schedulePreset}>
                 <SelectTrigger className="h-9 rounded-md" id="cron-frequency">
                   <SelectValue />
@@ -767,22 +835,22 @@ function CronEditorDialog({
                 <SelectContent>
                   {SCHEDULE_OPTIONS.map(option => (
                     <SelectItem key={option.value} value={option.value}>
-                      {option.label}
+                      {c.scheduleLabels[option.value]}
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </Field>
 
-            <Field htmlFor="cron-deliver" label="Deliver to">
+            <Field htmlFor="cron-deliver" label={c.deliverLabel}>
               <Select onValueChange={setDeliver} value={deliver}>
                 <SelectTrigger className="h-9 rounded-md" id="cron-deliver">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  {DELIVERY_OPTIONS.map(option => (
-                    <SelectItem key={option.value} value={option.value}>
-                      {option.label}
+                  {DELIVERY_VALUES.map(value => (
+                    <SelectItem key={value} value={value}>
+                      {c.deliveryLabels[value]}
                     </SelectItem>
                   ))}
                 </SelectContent>
@@ -791,18 +859,18 @@ function CronEditorDialog({
           </div>
 
           {schedulePreset === 'custom' ? (
-            <Field htmlFor="cron-schedule" label="Custom schedule">
+            <Field htmlFor="cron-schedule" label={c.customScheduleLabel}>
               <Input
                 className="font-mono"
                 id="cron-schedule"
                 onChange={event => setSchedule(event.target.value)}
-                placeholder="0 9 * * * or weekdays at 9am"
+                placeholder={c.customPlaceholder}
                 value={schedule}
               />
-              <FieldHint>Cron expression, or phrases like "every hour" or "weekdays at 9am".</FieldHint>
+              <FieldHint>{c.customHint}</FieldHint>
             </Field>
           ) : (
-            <div className="rounded-md border border-border/60 bg-muted/30 px-3 py-2">
+            <div className="rounded-md bg-(--ui-bg-quinary) px-3 py-2">
               <div className="flex flex-wrap items-center justify-between gap-2 text-xs">
                 <span className="font-medium text-foreground">{scheduleHint}</span>
                 <span className="font-mono text-muted-foreground">{schedule}</span>
@@ -811,7 +879,7 @@ function CronEditorDialog({
           )}
 
           {error && (
-            <div className="flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
+            <div className="flex items-start gap-2 rounded-md bg-destructive/10 px-3 py-2 text-xs text-destructive">
               <AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
               <span>{error}</span>
             </div>
@@ -819,10 +887,10 @@ function CronEditorDialog({
 
           <DialogFooter>
             <Button disabled={saving} onClick={onClose} type="button" variant="outline">
-              Cancel
+              {t.common.cancel}
             </Button>
             <Button disabled={saving} type="submit">
-              {saving ? 'Saving...' : isEdit ? 'Save changes' : 'Create cron'}
+              {saving ? t.common.saving : isEdit ? c.saveChanges : c.createAction}
             </Button>
           </DialogFooter>
         </form>
@@ -835,18 +903,20 @@ function Field({
   children,
   htmlFor,
   label,
-  optional
+  optional,
+  optionalLabel
 }: {
   children: React.ReactNode
   htmlFor: string
   label: string
   optional?: boolean
+  optionalLabel?: string
 }) {
   return (
     <div className="grid gap-1.5">
       <label className="flex items-baseline gap-2 text-xs font-medium text-foreground" htmlFor={htmlFor}>
         {label}
-        {optional && <span className="text-[0.65rem] font-normal text-muted-foreground">Optional</span>}
+        {optional && <span className="text-[0.65rem] font-normal text-muted-foreground">{optionalLabel}</span>}
       </label>
       {children}
     </div>
@@ -868,7 +938,5 @@ interface EditorValues {
 
 interface ScheduleOption {
   expr?: string
-  hint: string
-  label: string
   value: string
 }