@deck-ui/routines 0.2.0

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@deck-ui/routines",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": ["src"],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@deck-ui/core": "^0.1.0"
+  },
+  "dependencies": {
+    "lucide-react": "^0.577.0",
+    "framer-motion": "^12.38.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,34 @@
+// Types
+export type {
+  Routine,
+  RoutineRun,
+  RoutineFormState,
+  Skill,
+  TriggerType,
+  RoutineStatus,
+  ApprovalMode,
+  RunStatus,
+} from "./types"
+export { TRIGGER_LABELS } from "./types"
+
+// Components
+export { RoutinesGrid } from "./routines-grid"
+export type { RoutinesGridProps } from "./routines-grid"
+
+export { RoutineCard } from "./routine-card"
+export type { RoutineCardProps } from "./routine-card"
+
+export { RoutineDetailPage } from "./routine-detail-page"
+export type { RoutineDetailPageProps } from "./routine-detail-page"
+
+export { RoutineEditForm } from "./routine-edit-form"
+export type { RoutineEditFormProps } from "./routine-edit-form"
+
+export { RoutineDetailActions } from "./routine-detail-actions"
+export type { RoutineDetailActionsProps } from "./routine-detail-actions"
+
+export { RoutineRunPage } from "./routine-run-page"
+export type { RoutineRunPageProps } from "./routine-run-page"
+
+export { RunHistory } from "./routine-run-history"
+export type { RunHistoryProps } from "./routine-run-history"

package/src/routine-card.tsx

@@ -0,0 +1,87 @@
+import type { Routine } from "./types"
+import { TRIGGER_LABELS } from "./types"
+import { cn } from "@deck-ui/core"
+import { Clock } from "lucide-react"
+
+export interface RoutineCardProps {
+  routine: Routine
+  onClick: () => void
+}
+
+const STATUS_DOT: Record<string, string> = {
+  active: "bg-green-500",
+  paused: "bg-[#9b9b9b]",
+  needs_setup: "bg-yellow-500",
+  error: "bg-red-500",
+}
+
+const STATUS_LABEL: Record<string, string> = {
+  active: "Active",
+  paused: "Paused",
+  needs_setup: "Needs Setup",
+  error: "Error",
+}
+
+export function RoutineCard({ routine, onClick }: RoutineCardProps) {
+  const displayName = routine.name || routine.title || "Untitled"
+  const triggerLabel =
+    TRIGGER_LABELS[routine.trigger_type as keyof typeof TRIGGER_LABELS] ??
+    routine.trigger_type
+  const lastRun = routine.last_run_at
+    ? new Date(routine.last_run_at).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+      })
+    : null
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "w-full text-left rounded-2xl border border-black/[0.08] p-5",
+        "bg-white hover:border-black/[0.15] transition-all duration-150",
+        "hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)]",
+        "flex flex-col gap-3",
+      )}
+    >
+      {/* Top: name + status */}
+      <div className="flex items-start gap-2.5">
+        <h3 className="text-[15px] font-medium text-[#0d0d0d] leading-snug flex-1 min-w-0">
+          {displayName}
+        </h3>
+        <div className="flex items-center gap-1.5 shrink-0 mt-0.5">
+          <div
+            className={cn(
+              "size-1.5 rounded-full",
+              STATUS_DOT[routine.status] ?? "bg-[#9b9b9b]",
+            )}
+          />
+          <span className="text-xs text-[#9b9b9b]">
+            {STATUS_LABEL[routine.status] ?? routine.status}
+          </span>
+        </div>
+      </div>
+
+      {/* Description */}
+      {routine.description && (
+        <p className="text-sm text-[#5d5d5d] leading-relaxed line-clamp-2">
+          {routine.description}
+        </p>
+      )}
+
+      {/* Footer: trigger + last run + run count */}
+      <div className="flex items-center gap-3 text-xs text-[#9b9b9b] pt-1">
+        <span className="flex items-center gap-1">
+          <Clock className="size-3" />
+          {triggerLabel}
+        </span>
+        {routine.run_count > 0 && (
+          <span>
+            {routine.run_count} run{routine.run_count !== 1 ? "s" : ""}
+          </span>
+        )}
+        {lastRun && <span>Last: {lastRun}</span>}
+      </div>
+    </button>
+  )
+}

package/src/routine-detail-actions.tsx

@@ -0,0 +1,104 @@
+/**
+ * RoutineDetailActions — Action buttons for the routine detail page.
+ * Save, Run Now, Pause/Resume, Delete.
+ */
+import { useState } from "react"
+import { Pause, Play, RefreshCw, Save, Trash2 } from "lucide-react"
+import { cn } from "@deck-ui/core"
+
+export interface RoutineDetailActionsProps {
+  isActive: boolean
+  saving: boolean
+  onSave: () => void
+  onToggle: () => void
+  onRunNow: () => void
+  onDelete: () => void
+}
+
+export function RoutineDetailActions({
+  isActive,
+  saving,
+  onSave,
+  onToggle,
+  onRunNow,
+  onDelete,
+}: RoutineDetailActionsProps) {
+  const [confirmDelete, setConfirmDelete] = useState(false)
+
+  const handleDelete = () => {
+    if (!confirmDelete) {
+      setConfirmDelete(true)
+      return
+    }
+    onDelete()
+  }
+
+  const pillBtn = cn(
+    "h-9 px-4 text-sm font-medium rounded-full transition-colors",
+    "border border-black/[0.1]",
+  )
+
+  return (
+    <div className="flex items-center gap-2 pt-4 border-t border-black/[0.06]">
+      <button
+        onClick={onSave}
+        disabled={saving}
+        className={cn(
+          "h-9 px-4 text-sm font-medium rounded-full",
+          "bg-[#0d0d0d] text-white hover:bg-[#0d0d0d]/90 transition-colors",
+          "disabled:opacity-50",
+        )}
+      >
+        <span className="flex items-center gap-1.5">
+          <Save className="size-3.5" />
+          {saving ? "Saving..." : "Save"}
+        </span>
+      </button>
+
+      <button onClick={onRunNow} className={cn(pillBtn, "text-[#0d0d0d] hover:bg-[#f5f5f5]")}>
+        <span className="flex items-center gap-1.5">
+          <RefreshCw className="size-3.5" /> Run Now
+        </span>
+      </button>
+
+      <button onClick={onToggle} className={cn(pillBtn, "text-[#0d0d0d] hover:bg-[#f5f5f5]")}>
+        <span className="flex items-center gap-1.5">
+          {isActive ? (
+            <><Pause className="size-3.5" /> Pause</>
+          ) : (
+            <><Play className="size-3.5" /> Resume</>
+          )}
+        </span>
+      </button>
+
+      <div className="flex-1" />
+
+      {confirmDelete ? (
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-red-600">Delete?</span>
+          <button
+            onClick={handleDelete}
+            className="h-9 px-3 text-sm font-medium rounded-full bg-red-600 text-white hover:bg-red-700 transition-colors"
+          >
+            Confirm
+          </button>
+          <button
+            onClick={() => setConfirmDelete(false)}
+            className={cn(pillBtn, "text-[#0d0d0d] hover:bg-[#f5f5f5]")}
+          >
+            Cancel
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={handleDelete}
+          className={cn(pillBtn, "text-[#9b9b9b] hover:text-red-600 hover:border-red-200")}
+        >
+          <span className="flex items-center gap-1.5">
+            <Trash2 className="size-3.5" /> Delete
+          </span>
+        </button>
+      )}
+    </div>
+  )
+}

package/src/routine-detail-page.tsx

@@ -0,0 +1,112 @@
+/**
+ * RoutineDetailPage — Full-page detail view for a single routine.
+ * Shows editable fields, action buttons, and run history below.
+ * All data and actions provided via props (no Zustand, no Tauri).
+ */
+import { useCallback, useEffect, useState } from "react"
+import type { Routine, RoutineRun, Skill } from "./types"
+import type { RoutineFormState } from "./routine-edit-form"
+import { RoutineEditForm } from "./routine-edit-form"
+import { RoutineDetailActions } from "./routine-detail-actions"
+import { RunHistory } from "./routine-run-history"
+import { ArrowLeft } from "lucide-react"
+
+export interface RoutineDetailPageProps {
+  routine: Routine | undefined
+  runs: RoutineRun[]
+  skills: Skill[]
+  onBack: () => void
+  onSave: (form: RoutineFormState) => Promise<void>
+  onRunNow: () => Promise<void>
+  onToggle: () => Promise<void>
+  onDelete: () => Promise<void>
+  onSelectRun: (runId: string) => void
+}
+
+export function RoutineDetailPage({
+  routine,
+  runs,
+  skills,
+  onBack,
+  onSave,
+  onRunNow,
+  onToggle,
+  onDelete,
+  onSelectRun,
+}: RoutineDetailPageProps) {
+  const [saving, setSaving] = useState(false)
+  const [form, setForm] = useState<RoutineFormState | null>(null)
+
+  // Initialize form from routine
+  useEffect(() => {
+    if (routine) {
+      setForm({
+        name: routine.name || routine.title || "",
+        description: routine.description,
+        context: routine.context,
+        triggerType: routine.trigger_type as RoutineFormState["triggerType"],
+        approvalMode: routine.approval_mode as RoutineFormState["approvalMode"],
+        skillId: routine.skill_id,
+      })
+    }
+  }, [routine?.id]) // Only reset on routine change, not every re-render
+
+  const handleChange = useCallback((patch: Partial<RoutineFormState>) => {
+    setForm((prev) => (prev ? { ...prev, ...patch } : null))
+  }, [])
+
+  const handleSave = useCallback(async () => {
+    if (!form) return
+    setSaving(true)
+    try {
+      await onSave(form)
+    } finally {
+      setSaving(false)
+    }
+  }, [form, onSave])
+
+  if (!routine || !form) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <p className="text-sm text-[#9b9b9b]">Routine not found</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+      {/* Header */}
+      <div className="shrink-0 px-6 py-3 border-b border-black/[0.06]">
+        <div className="max-w-2xl mx-auto flex items-center gap-3">
+          <button
+            onClick={onBack}
+            className="size-8 flex items-center justify-center rounded-lg text-[#9b9b9b] hover:text-[#0d0d0d] hover:bg-black/[0.05] transition-colors"
+          >
+            <ArrowLeft className="size-4" />
+          </button>
+          <h1 className="text-sm font-medium text-[#0d0d0d] truncate flex-1">
+            {form.name || "Untitled"}
+          </h1>
+        </div>
+      </div>
+
+      {/* Scrollable body */}
+      <div className="flex-1 overflow-y-auto px-6 py-6">
+        <div className="max-w-2xl mx-auto space-y-8">
+          <RoutineEditForm form={form} skills={skills} onChange={handleChange} />
+
+          <RoutineDetailActions
+            isActive={routine.status === "active"}
+            saving={saving}
+            onSave={handleSave}
+            onToggle={onToggle}
+            onRunNow={onRunNow}
+            onDelete={onDelete}
+          />
+
+          <RunHistory runs={runs} onSelectRun={onSelectRun} />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/routine-edit-form.tsx

@@ -0,0 +1,135 @@
+/**
+ * RoutineEditForm — Editable fields for a routine's details.
+ * Pure presentational component: data and callbacks via props.
+ */
+import type { TriggerType, Skill } from "./types"
+import type { RoutineFormState } from "./types"
+import { cn } from "@deck-ui/core"
+
+export type { RoutineFormState }
+
+export interface RoutineEditFormProps {
+  form: RoutineFormState
+  skills: Skill[]
+  onChange: (patch: Partial<RoutineFormState>) => void
+}
+
+const TRIGGER_OPTIONS: { value: TriggerType; label: string }[] = [
+  { value: "manual", label: "Manual" },
+  { value: "scheduled", label: "Scheduled" },
+  { value: "periodic", label: "Periodic" },
+  { value: "on_approval", label: "On Approval" },
+]
+
+const inputClass = cn(
+  "w-full px-3 py-2 rounded-xl border border-black/[0.08] bg-white",
+  "text-sm text-[#0d0d0d] placeholder:text-[#b4b4b4]",
+  "focus:outline-none focus:border-black/20 transition-colors",
+)
+
+const labelClass = "text-xs font-medium text-[#8e8e8e] mb-1.5 block"
+
+export function RoutineEditForm({
+  form,
+  skills,
+  onChange,
+}: RoutineEditFormProps) {
+  return (
+    <div className="space-y-5">
+      {/* Name */}
+      <div>
+        <label className={labelClass}>Name</label>
+        <input
+          type="text"
+          value={form.name}
+          onChange={(e) => onChange({ name: e.target.value })}
+          placeholder="Routine name"
+          className={inputClass}
+        />
+      </div>
+
+      {/* Description */}
+      <div>
+        <label className={labelClass}>Description</label>
+        <textarea
+          value={form.description}
+          onChange={(e) => onChange({ description: e.target.value })}
+          placeholder="What does this routine do?"
+          rows={2}
+          className={cn(inputClass, "resize-none")}
+        />
+      </div>
+
+      {/* Prompt / Context */}
+      <div>
+        <label className={labelClass}>Prompt</label>
+        <textarea
+          value={form.context}
+          onChange={(e) => onChange({ context: e.target.value })}
+          placeholder="Instructions for the agent when running this routine..."
+          rows={4}
+          className={cn(inputClass, "resize-none")}
+        />
+      </div>
+
+      {/* Two-column: Trigger + Skill */}
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className={labelClass}>Trigger</label>
+          <select
+            value={form.triggerType}
+            onChange={(e) =>
+              onChange({ triggerType: e.target.value as TriggerType })
+            }
+            className={inputClass}
+          >
+            {TRIGGER_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className={labelClass}>Skill</label>
+          <select
+            value={form.skillId ?? ""}
+            onChange={(e) =>
+              onChange({ skillId: e.target.value || null })
+            }
+            className={inputClass}
+          >
+            <option value="">None</option>
+            {skills.map((s) => (
+              <option key={s.id} value={s.id}>
+                {s.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* Approval mode */}
+      <div>
+        <label className={labelClass}>Approval</label>
+        <div className="flex gap-2">
+          {(["manual", "auto_approve"] as RoutineFormState["approvalMode"][]).map((mode) => (
+            <button
+              key={mode}
+              onClick={() => onChange({ approvalMode: mode })}
+              className={cn(
+                "h-9 px-4 rounded-full text-sm font-medium transition-colors",
+                form.approvalMode === mode
+                  ? "bg-[#0d0d0d] text-white"
+                  : "border border-black/[0.1] text-[#5d5d5d] hover:bg-[#f5f5f5]",
+              )}
+            >
+              {mode === "manual" ? "Manual Review" : "Auto-approve"}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/routine-run-history.tsx

@@ -0,0 +1,87 @@
+import type { RoutineRun } from "./types"
+import {
+  Check,
+  AlertCircle,
+  Clock,
+  Loader2,
+} from "lucide-react"
+
+export interface RunHistoryProps {
+  runs: RoutineRun[]
+  onSelectRun: (id: string) => void
+}
+
+export function RunHistory({ runs, onSelectRun }: RunHistoryProps) {
+  if (runs.length === 0) {
+    return (
+      <div>
+        <p className="text-xs font-medium text-[#9b9b9b] uppercase tracking-wide mb-2">
+          Runs
+        </p>
+        <p className="text-sm text-[#9b9b9b]">No runs yet.</p>
+      </div>
+    )
+  }
+
+  const sorted = [...runs].sort(
+    (a, b) =>
+      new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
+  )
+
+  return (
+    <div>
+      <p className="text-xs font-medium text-[#9b9b9b] uppercase tracking-wide mb-2">
+        Run History
+      </p>
+      <div className="space-y-1">
+        {sorted.map((run) => (
+          <RunRow key={run.id} run={run} onClick={() => onSelectRun(run.id)} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function RunRow({ run, onClick }: { run: RoutineRun; onClick: () => void }) {
+  const date = new Date(run.created_at)
+  const dateStr = date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+  })
+  const timeStr = date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+  })
+
+  const icon = (() => {
+    switch (run.status) {
+      case "running":
+        return <Loader2 className="size-3.5 text-blue-500 animate-spin" />
+      case "needs_you":
+        return <Clock className="size-3.5 text-amber-500" />
+      case "done":
+      case "approved":
+        return <Check className="size-3.5 text-emerald-500" />
+      case "error":
+      case "failed":
+        return <AlertCircle className="size-3.5 text-red-500" />
+      default:
+        return <Clock className="size-3.5 text-[#9b9b9b]" />
+    }
+  })()
+
+  return (
+    <button
+      onClick={onClick}
+      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left hover:bg-black/[0.03] transition-colors"
+    >
+      {icon}
+      <span className="text-sm text-[#0d0d0d] truncate flex-1">
+        {run.output_title || `${dateStr} ${timeStr}`}
+      </span>
+      <span className="text-xs text-[#9b9b9b] shrink-0">
+        {dateStr} {timeStr}
+      </span>
+    </button>
+  )
+}

package/src/routine-run-page.tsx

@@ -0,0 +1,95 @@
+/**
+ * RoutineRunPage — Full-page view for a single routine run.
+ * Shows the agent conversation header and delegates chat rendering
+ * to a consumer-provided component via the `renderChat` prop.
+ */
+import type { Routine, RoutineRun } from "./types"
+import { ArrowLeft, Loader2 } from "lucide-react"
+import { cn } from "@deck-ui/core"
+
+export interface RoutineRunPageProps {
+  routine: Routine | undefined
+  run: RoutineRun | undefined
+  onBack: () => void
+  /** Render the chat feed area. Receives run status context. */
+  renderChat: (context: {
+    runId: string
+    isRunning: boolean
+    isNeedsYou: boolean
+  }) => React.ReactNode
+}
+
+const RUN_STATUS_LABEL: Record<string, string> = {
+  running: "Running",
+  needs_you: "Needs You",
+  done: "Done",
+  approved: "Approved",
+  completed: "Completed",
+  error: "Error",
+  failed: "Failed",
+}
+
+export function RoutineRunPage({
+  routine,
+  run,
+  onBack,
+  renderChat,
+}: RoutineRunPageProps) {
+  const isRunning = run?.status === "running"
+  const isNeedsYou = run?.status === "needs_you"
+
+  const displayName = routine?.name || routine?.title || "Routine"
+  const statusLabel = run ? (RUN_STATUS_LABEL[run.status] ?? run.status) : ""
+  const runDate = run
+    ? new Date(run.created_at).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+      })
+    : ""
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+      {/* Header */}
+      <div className="shrink-0 px-6 py-3 border-b border-black/[0.06]">
+        <div className="max-w-3xl mx-auto flex items-center gap-3">
+          <button
+            onClick={onBack}
+            className="size-7 flex items-center justify-center rounded-md text-[#8e8e8e] hover:text-[#0d0d0d] hover:bg-black/[0.04] transition-colors"
+          >
+            <ArrowLeft className="size-4" strokeWidth={1.75} />
+          </button>
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-medium text-[#0d0d0d] truncate">
+              {displayName}
+            </p>
+            <p className="text-[11px] text-[#8e8e8e]">
+              {runDate}
+              <span className="mx-1">&middot;</span>
+              <span className={cn(isRunning && "text-blue-500")}>
+                {statusLabel}
+              </span>
+            </p>
+          </div>
+          {isRunning && (
+            <Loader2 className="size-4 animate-spin text-blue-500 shrink-0" />
+          )}
+        </div>
+      </div>
+
+      {/* Chat feed — delegated to consumer */}
+      {run ? (
+        renderChat({
+          runId: run.id,
+          isRunning,
+          isNeedsYou,
+        })
+      ) : (
+        <div className="flex-1 flex items-center justify-center">
+          <p className="text-sm text-[#9b9b9b]">Run not found</p>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/routines-grid.tsx

@@ -0,0 +1,79 @@
+/**
+ * RoutinesGrid — Card grid view for routines.
+ * Accepts data and callbacks via props (no Zustand, no Tauri).
+ */
+import { useMemo } from "react"
+import type { Routine } from "./types"
+import { RoutineCard } from "./routine-card"
+
+export interface RoutinesGridProps {
+  routines: Routine[]
+  loading?: boolean
+  onSelectRoutine: (routineId: string) => void
+}
+
+const STATUS_ORDER: Record<string, number> = {
+  active: 0,
+  needs_setup: 1,
+  error: 2,
+  paused: 3,
+}
+
+export function RoutinesGrid({
+  routines,
+  loading,
+  onSelectRoutine,
+}: RoutinesGridProps) {
+  const sorted = useMemo(() => {
+    return [...routines].sort((a, b) => {
+      const sa = STATUS_ORDER[a.status] ?? 9
+      const sb = STATUS_ORDER[b.status] ?? 9
+      if (sa !== sb) return sa - sb
+      const nameA = (a.name || a.title || "").toLowerCase()
+      const nameB = (b.name || b.title || "").toLowerCase()
+      return nameA.localeCompare(nameB)
+    })
+  }, [routines])
+
+  if (loading && routines.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <p className="text-sm text-[#9b9b9b] animate-pulse">
+          Loading routines...
+        </p>
+      </div>
+    )
+  }
+
+  if (sorted.length === 0) {
+    return (
+      <div className="flex-1 flex flex-col items-center pt-[20vh] gap-4 px-8">
+        <div className="space-y-2 text-center max-w-md">
+          <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+            Automate recurring work
+          </h1>
+          <p className="text-sm text-[#5d5d5d]">
+            Routines run on a schedule so Houston can work for you
+            automatically — daily reports, weekly research, and more.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto">
+      <div className="max-w-4xl mx-auto px-6 py-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {sorted.map((routine) => (
+            <RoutineCard
+              key={routine.id}
+              routine={routine}
+              onClick={() => onSelectRoutine(routine.id)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/styles.css

@@ -0,0 +1 @@
+@source ".";

package/src/types.ts

@@ -0,0 +1,80 @@
+// Generic routine types — mirrors Houston's Routine model without Tauri/backend coupling.
+
+export type TriggerType = "on_approval" | "scheduled" | "periodic" | "manual"
+export type RoutineStatus = "active" | "paused" | "needs_setup" | "error"
+export type ApprovalMode = "manual" | "auto_approve"
+
+export type RunStatus =
+  | "running"
+  | "completed"
+  | "failed"
+  | "approved"
+  | "needs_you"
+  | "done"
+  | "error"
+
+export interface Routine {
+  id: string
+  project_id: string
+  goal_id: string | null
+  skill_id: string | null
+  name: string
+  description: string
+  trigger_type: TriggerType
+  trigger_config: string
+  status: RoutineStatus
+  approval_mode: ApprovalMode
+  context: string
+  run_count: number
+  approval_count: number
+  last_run_at: string | null
+  created_at: string
+  updated_at: string
+  /** v1 compat — may be present from older DBs */
+  title?: string
+  skill_name?: string | null
+  enabled?: boolean
+  is_system?: boolean
+}
+
+export interface RoutineRun {
+  id: string
+  routine_id: string
+  project_id: string
+  status: RunStatus
+  session_id: string | null
+  claude_session_id: string | null
+  output_files: string | null
+  cost_usd: number | null
+  duration_ms: number | null
+  output_title: string | null
+  output_summary: string | null
+  feedback_text: string | null
+  is_test_run: boolean
+  created_at: string
+  completed_at: string | null
+  approved_at: string | null
+}
+
+export interface Skill {
+  id: string
+  name: string
+  description: string
+}
+
+export const TRIGGER_LABELS: Record<TriggerType, string> = {
+  on_approval: "On approval",
+  scheduled: "Scheduled",
+  periodic: "Periodic",
+  manual: "Manual",
+}
+
+/** Form state for the routine edit form */
+export interface RoutineFormState {
+  name: string
+  description: string
+  context: string
+  triggerType: TriggerType
+  approvalMode: ApprovalMode
+  skillId: string | null
+}