@houston-ai/routines 0.4.6

package/README.md

@@ -0,0 +1,42 @@
+# @deck-ui/routines
+
+Automated routine management. Create, edit, run, and review recurring agent tasks with trigger scheduling and approval controls.
+
+## Install
+
+```bash
+pnpm add @deck-ui/routines
+```
+
+## Usage
+
+```tsx
+import { RoutinesGrid, RoutineDetailPage } from "@deck-ui/routines"
+
+<RoutinesGrid
+  routines={routines}
+  loading={false}
+  onRoutineClick={(r) => navigate(`/routines/${r.id}`)}
+  onCreateRoutine={() => openCreateDialog()}
+/>
+```
+
+## Exports
+
+- `RoutinesGrid` -- card grid of all routines
+- `RoutineCard` -- single routine card with status indicator
+- `RoutineDetailPage` -- full detail with description, triggers, run history
+- `RoutineEditForm` -- create/edit form for routine configuration
+- `RoutineDetailActions` -- action buttons (run, edit, delete)
+- `RoutineRunPage` -- live view of a running routine
+- `RunHistory` -- past run list with status and duration
+- Types: `Routine`, `RoutineRun`, `RoutineFormState`, `TriggerType`, `RoutineStatus`, `ApprovalMode`, `RunStatus`
+
+## Peer Dependencies
+
+- React 19+
+- @deck-ui/core
+
+---
+
+Part of [Keel & Deck](../../README.md).

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@houston-ai/routines",
+  "version": "0.4.6",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@houston-ai/core": "workspace:*"
+  },
+  "dependencies": {
+    "lucide-react": "^0.577.0",
+    "framer-motion": "^12.38.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/heartbeat-config.tsx

@@ -0,0 +1,184 @@
+/**
+ * HeartbeatConfig — Form for configuring agent heartbeat check-ins.
+ * Toggle, interval, prompt, active hours, and suppression token.
+ */
+import { useState } from "react"
+import { ChevronDown, ChevronRight } from "lucide-react"
+import { cn } from "@houston-ai/core"
+import type { HeartbeatConfig as HeartbeatConfigType } from "./types"
+
+export interface HeartbeatConfigProps {
+  config: HeartbeatConfigType
+  onChange: (config: HeartbeatConfigType) => void
+  loading?: boolean
+}
+
+const inputClass = cn(
+  "w-full px-3 py-2 rounded-xl border border-border bg-background",
+  "text-sm text-foreground placeholder:text-muted-foreground/60",
+  "focus:outline-none focus:border-border/80 transition-colors",
+)
+
+const labelClass = "text-xs font-medium text-muted-foreground mb-1.5 block"
+
+const INTERVAL_OPTIONS = [
+  { value: 15, label: "Every 15 minutes" },
+  { value: 30, label: "Every 30 minutes" },
+  { value: 60, label: "Every hour" },
+  { value: 120, label: "Every 2 hours" },
+  { value: 240, label: "Every 4 hours" },
+]
+
+export function HeartbeatConfig({
+  config,
+  onChange,
+  loading,
+}: HeartbeatConfigProps) {
+  const [showActiveHours, setShowActiveHours] = useState(
+    Boolean(config.activeHoursStart || config.activeHoursEnd),
+  )
+  const [showAdvanced, setShowAdvanced] = useState(false)
+
+  const update = (patch: Partial<HeartbeatConfigType>) => {
+    onChange({ ...config, ...patch })
+  }
+
+  return (
+    <div className={cn("space-y-5", loading && "opacity-60 pointer-events-none")}>
+      {/* Enable toggle */}
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium text-foreground">Heartbeat</p>
+          <p className="text-[11px] text-muted-foreground mt-0.5">
+            The agent will check in at this interval. If nothing needs
+            attention, the check-in is silently suppressed.
+          </p>
+        </div>
+        <button
+          onClick={() => update({ enabled: !config.enabled })}
+          className={cn(
+            "relative inline-flex h-5 w-9 shrink-0 rounded-full transition-colors",
+            "border-2 border-transparent cursor-pointer",
+            config.enabled ? "bg-primary" : "bg-muted-foreground/20",
+          )}
+        >
+          <span
+            className={cn(
+              "pointer-events-none inline-block size-4 rounded-full bg-white shadow-sm",
+              "transition-transform",
+              config.enabled ? "translate-x-4" : "translate-x-0",
+            )}
+          />
+        </button>
+      </div>
+
+      {config.enabled && (
+        <>
+          {/* Interval */}
+          <div>
+            <label className={labelClass}>Check-in Interval</label>
+            <select
+              value={config.intervalMinutes}
+              onChange={(e) => update({ intervalMinutes: Number(e.target.value) })}
+              className={inputClass}
+            >
+              {INTERVAL_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Prompt */}
+          <div>
+            <label className={labelClass}>Heartbeat Prompt</label>
+            <textarea
+              value={config.prompt}
+              onChange={(e) => update({ prompt: e.target.value })}
+              placeholder="Check if there's anything that needs attention..."
+              rows={3}
+              className={cn(inputClass, "resize-none")}
+            />
+          </div>
+
+          {/* Active hours (collapsible) */}
+          <CollapsibleSection
+            label="Active Hours"
+            open={showActiveHours}
+            onToggle={() => setShowActiveHours((v) => !v)}
+          >
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className={labelClass}>Start</label>
+                <input
+                  type="time"
+                  value={config.activeHoursStart ?? "09:00"}
+                  onChange={(e) => update({ activeHoursStart: e.target.value })}
+                  className={inputClass}
+                />
+              </div>
+              <div>
+                <label className={labelClass}>End</label>
+                <input
+                  type="time"
+                  value={config.activeHoursEnd ?? "22:00"}
+                  onChange={(e) => update({ activeHoursEnd: e.target.value })}
+                  className={inputClass}
+                />
+              </div>
+            </div>
+          </CollapsibleSection>
+
+          {/* Advanced (collapsible) */}
+          <CollapsibleSection
+            label="Advanced"
+            open={showAdvanced}
+            onToggle={() => setShowAdvanced((v) => !v)}
+          >
+            <div>
+              <label className={labelClass}>Suppression Token</label>
+              <input
+                type="text"
+                value={config.suppressionToken}
+                onChange={(e) => update({ suppressionToken: e.target.value })}
+                placeholder="heartbeat_ok"
+                className={inputClass}
+              />
+              <p className="text-[11px] text-muted-foreground mt-1">
+                When the agent responds with this token, the check-in
+                is silently suppressed.
+              </p>
+            </div>
+          </CollapsibleSection>
+        </>
+      )}
+    </div>
+  )
+}
+
+function CollapsibleSection({
+  label,
+  open,
+  onToggle,
+  children,
+}: {
+  label: string
+  open: boolean
+  onToggle: () => void
+  children: React.ReactNode
+}) {
+  const Arrow = open ? ChevronDown : ChevronRight
+  return (
+    <div>
+      <button
+        onClick={onToggle}
+        className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors mb-2"
+      >
+        <Arrow className="size-3" />
+        {label}
+      </button>
+      {open && <div className="pl-4.5">{children}</div>}
+    </div>
+  )
+}

package/src/index.ts

@@ -0,0 +1,42 @@
+// Types
+export type {
+  Routine,
+  RoutineRun,
+  RoutineFormState,
+  Skill,
+  TriggerType,
+  RoutineStatus,
+  ApprovalMode,
+  RunStatus,
+  HeartbeatConfig,
+  SchedulePreset,
+} from "./types"
+export { TRIGGER_LABELS, SCHEDULE_PRESET_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"
+
+export { HeartbeatConfig as HeartbeatConfigPanel } from "./heartbeat-config"
+export type { HeartbeatConfigProps } from "./heartbeat-config"
+
+export { ScheduleBuilder } from "./schedule-builder"
+export type { ScheduleBuilderProps } from "./schedule-builder"

package/src/routine-card.tsx

@@ -0,0 +1,87 @@
+import type { Routine } from "./types"
+import { TRIGGER_LABELS } from "./types"
+import { cn } from "@houston-ai/core"
+import { Clock } from "lucide-react"
+
+export interface RoutineCardProps {
+  routine: Routine
+  onClick: () => void
+}
+
+const STATUS_DOT: Record<string, string> = {
+  active: "bg-success",
+  paused: "bg-muted-foreground",
+  needs_setup: "bg-yellow-500",
+  error: "bg-destructive",
+}
+
+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 || "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-border p-5",
+        "bg-background hover:border-border/80 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-foreground 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-muted-foreground",
+            )}
+          />
+          <span className="text-xs text-muted-foreground">
+            {STATUS_LABEL[routine.status] ?? routine.status}
+          </span>
+        </div>
+      </div>
+
+      {/* Description */}
+      {routine.description && (
+        <p className="text-sm text-muted-foreground leading-relaxed line-clamp-2">
+          {routine.description}
+        </p>
+      )}
+
+      {/* Footer: trigger + last run + run count */}
+      <div className="flex items-center gap-3 text-xs text-muted-foreground 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 "@houston-ai/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-border",
+  )
+
+  return (
+    <div className="flex items-center gap-2 pt-4 border-t border-border">
+      <button
+        onClick={onSave}
+        disabled={saving}
+        className={cn(
+          "h-9 px-4 text-sm font-medium rounded-full",
+          "bg-primary text-primary-foreground hover:bg-primary/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-foreground hover:bg-secondary")}>
+        <span className="flex items-center gap-1.5">
+          <RefreshCw className="size-3.5" /> Run Now
+        </span>
+      </button>
+
+      <button onClick={onToggle} className={cn(pillBtn, "text-foreground hover:bg-secondary")}>
+        <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-destructive">Delete?</span>
+          <button
+            onClick={handleDelete}
+            className="h-9 px-3 text-sm font-medium rounded-full bg-destructive text-destructive-foreground hover:bg-destructive/90 transition-colors"
+          >
+            Confirm
+          </button>
+          <button
+            onClick={() => setConfirmDelete(false)}
+            className={cn(pillBtn, "text-foreground hover:bg-secondary")}
+          >
+            Cancel
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={handleDelete}
+          className={cn(pillBtn, "text-muted-foreground hover:text-destructive hover:border-destructive/20")}
+        >
+          <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,
+        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-muted-foreground">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-border">
+        <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-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+          >
+            <ArrowLeft className="size-4" />
+          </button>
+          <h1 className="text-sm font-medium text-foreground 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>
+  )
+}