@houston-ai/routines 0.2.0

package/src/routine-edit-form.tsx

@@ -0,0 +1,158 @@
+/**
+ * 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 "@houston-ai/core"
+import { ScheduleBuilder } from "./schedule-builder"
+
+export type { RoutineFormState }
+
+export interface RoutineEditFormProps {
+  form: RoutineFormState
+  skills: Skill[]
+  onChange: (patch: Partial<RoutineFormState>) => void
+  /** Current trigger config (cron expression) for schedule builder */
+  triggerConfig?: string
+  /** Called when schedule builder changes the cron expression */
+  onTriggerConfigChange?: (cronExpression: string) => 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-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 SCHEDULE_TRIGGERS: TriggerType[] = ["scheduled", "periodic"]
+
+export function RoutineEditForm({
+  form,
+  skills,
+  onChange,
+  triggerConfig,
+  onTriggerConfigChange,
+}: RoutineEditFormProps) {
+  const showScheduleBuilder =
+    SCHEDULE_TRIGGERS.includes(form.triggerType) &&
+    onTriggerConfigChange !== undefined
+  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>
+
+      {/* Schedule builder (shown for scheduled/periodic triggers) */}
+      {showScheduleBuilder && (
+        <div>
+          <label className={labelClass}>Schedule</label>
+          <ScheduleBuilder
+            value={triggerConfig ?? "0 9 * * *"}
+            onChange={onTriggerConfigChange!}
+          />
+        </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-primary text-primary-foreground"
+                  : "border border-border text-muted-foreground hover:bg-secondary",
+              )}
+            >
+              {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-muted-foreground uppercase tracking-wide mb-2">
+          Runs
+        </p>
+        <p className="text-sm text-muted-foreground">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-muted-foreground 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-destructive" />
+      default:
+        return <Clock className="size-3.5 text-muted-foreground" />
+    }
+  })()
+
+  return (
+    <button
+      onClick={onClick}
+      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left hover:bg-accent/30 transition-colors"
+    >
+      {icon}
+      <span className="text-sm text-foreground truncate flex-1">
+        {run.output_title || `${dateStr} ${timeStr}`}
+      </span>
+      <span className="text-xs text-muted-foreground 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 "@houston-ai/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"
+  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-border">
+        <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-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
+          >
+            <ArrowLeft className="size-4" strokeWidth={1.75} />
+          </button>
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-medium text-foreground truncate">
+              {displayName}
+            </p>
+            <p className="text-[11px] text-muted-foreground">
+              {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-muted-foreground">Run not found</p>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/routines-grid.tsx

@@ -0,0 +1,80 @@
+/**
+ * RoutinesGrid — Card grid view for routines.
+ * Accepts data and callbacks via props (no Zustand, no Tauri).
+ */
+import { useMemo } from "react"
+import {
+  Empty, EmptyHeader, EmptyTitle, EmptyDescription,
+} from "@houston-ai/core"
+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.toLowerCase()
+      const nameB = b.name.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-muted-foreground animate-pulse">
+          Loading routines...
+        </p>
+      </div>
+    )
+  }
+
+  if (sorted.length === 0) {
+    return (
+      <Empty className="flex-1 border-0">
+        <EmptyHeader>
+          <EmptyTitle>Automate recurring work</EmptyTitle>
+          <EmptyDescription>
+            Routines run on a schedule — daily reports, weekly research, and
+            more.
+          </EmptyDescription>
+        </EmptyHeader>
+      </Empty>
+    )
+  }
+
+  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/schedule-builder.tsx

@@ -0,0 +1,144 @@
+/**
+ * ScheduleBuilder — Visual cron schedule builder with preset buttons.
+ * Supports presets (daily, weekly, etc.) and custom cron expressions.
+ */
+import { useState, useEffect, useRef } from "react"
+import { cn } from "@houston-ai/core"
+import type { SchedulePreset } from "./types"
+import { SCHEDULE_PRESET_LABELS } from "./types"
+import { TimePicker, DayOfWeekPicker, DayOfMonthPicker, CronInput } from "./schedule-picker-fields"
+import {
+  presetToCron,
+  presetSummary,
+  cronToPreset,
+  cronToOptions,
+  type ScheduleOptions,
+} from "./schedule-cron-utils"
+
+export interface ScheduleBuilderProps {
+  value: string
+  onChange: (cronExpression: string) => void
+  presets?: SchedulePreset[]
+}
+
+const DEFAULT_PRESETS: SchedulePreset[] = [
+  "every_30min", "hourly", "daily", "weekdays", "weekly", "monthly", "custom",
+]
+
+const DEFAULT_OPTIONS: ScheduleOptions = {
+  time: "09:00",
+  dayOfWeek: 1,
+  dayOfMonth: 1,
+}
+
+const NEEDS_TIME: SchedulePreset[] = ["daily", "weekdays", "weekly", "monthly"]
+
+export function ScheduleBuilder({
+  value,
+  onChange,
+  presets = DEFAULT_PRESETS,
+}: ScheduleBuilderProps) {
+  // Detect initial preset from incoming cron
+  const detectedPreset = cronToPreset(value)
+  const detectedOptions = cronToOptions(value)
+
+  const [activePreset, setActivePreset] = useState<SchedulePreset>(
+    detectedPreset ?? "daily",
+  )
+  const [options, setOptions] = useState<ScheduleOptions>({
+    ...DEFAULT_OPTIONS,
+    ...detectedOptions,
+  })
+  const [customCron, setCustomCron] = useState(
+    detectedPreset === null ? value : "",
+  )
+
+  // Stable ref for onChange to avoid infinite effect loops
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+
+  // Emit cron when preset or options change
+  useEffect(() => {
+    if (activePreset === "custom") {
+      if (customCron.trim()) onChangeRef.current(customCron.trim())
+      return
+    }
+    const cron = presetToCron(activePreset, options)
+    onChangeRef.current(cron)
+  }, [activePreset, options, customCron])
+
+  const updateOption = (patch: Partial<ScheduleOptions>) => {
+    setOptions((prev) => ({ ...prev, ...patch }))
+  }
+
+  const showTime = NEEDS_TIME.includes(activePreset)
+  const summary = activePreset === "custom"
+    ? (customCron.trim() ? "Custom cron schedule" : "Enter a cron expression")
+    : presetSummary(activePreset, options)
+  const cronDisplay = activePreset === "custom"
+    ? customCron
+    : presetToCron(activePreset, options)
+
+  return (
+    <div className="space-y-4">
+      {/* Preset buttons */}
+      <div className="flex flex-wrap gap-1.5">
+        {presets.map((preset) => (
+          <button
+            key={preset}
+            onClick={() => setActivePreset(preset)}
+            className={cn(
+              "h-8 px-3 rounded-full text-xs font-medium transition-colors",
+              activePreset === preset
+                ? "bg-primary text-primary-foreground"
+                : "border border-border text-muted-foreground hover:bg-secondary",
+            )}
+          >
+            {SCHEDULE_PRESET_LABELS[preset]}
+          </button>
+        ))}
+      </div>
+
+      {/* Summary */}
+      <p className="text-sm text-foreground">{summary}</p>
+
+      {/* Preset-specific fields */}
+      <div className="space-y-3">
+        {showTime && (
+          <TimePicker
+            value={options.time}
+            onChange={(time) => updateOption({ time })}
+          />
+        )}
+
+        {activePreset === "weekly" && (
+          <DayOfWeekPicker
+            value={options.dayOfWeek}
+            onChange={(dayOfWeek) => updateOption({ dayOfWeek })}
+          />
+        )}
+
+        {activePreset === "monthly" && (
+          <DayOfMonthPicker
+            value={options.dayOfMonth}
+            onChange={(dayOfMonth) => updateOption({ dayOfMonth })}
+          />
+        )}
+
+        {activePreset === "custom" && (
+          <CronInput
+            value={customCron}
+            onChange={setCustomCron}
+          />
+        )}
+      </div>
+
+      {/* Cron expression display */}
+      {cronDisplay && (
+        <p className="text-[11px] text-muted-foreground font-mono">
+          cron: {cronDisplay}
+        </p>
+      )}
+    </div>
+  )
+}

package/src/schedule-cron-utils.ts

@@ -0,0 +1,122 @@
+/**
+ * Cron expression utilities for ScheduleBuilder.
+ * Converts preset + options into cron expressions and generates summaries.
+ */
+import type { SchedulePreset } from "./types"
+
+const DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
+
+export interface ScheduleOptions {
+  time: string       // "09:00"
+  dayOfWeek: number  // 0-6
+  dayOfMonth: number // 1-31
+}
+
+/** Parse "HH:MM" into { hour, minute } */
+function parseTime(time: string): { hour: number; minute: number } {
+  const [h, m] = time.split(":").map(Number)
+  return { hour: h ?? 9, minute: m ?? 0 }
+}
+
+/** Format hour:minute into human-readable time */
+function formatTime(time: string): string {
+  const { hour, minute } = parseTime(time)
+  const ampm = hour >= 12 ? "PM" : "AM"
+  const h12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour
+  const mm = String(minute).padStart(2, "0")
+  return `${h12}:${mm} ${ampm}`
+}
+
+/** Build a cron expression from preset and options */
+export function presetToCron(
+  preset: SchedulePreset,
+  options: ScheduleOptions,
+): string {
+  const { hour, minute } = parseTime(options.time)
+
+  switch (preset) {
+    case "every_30min":
+      return "*/30 * * * *"
+    case "hourly":
+      return "0 * * * *"
+    case "daily":
+      return `${minute} ${hour} * * *`
+    case "weekdays":
+      return `${minute} ${hour} * * 1-5`
+    case "weekly":
+      return `${minute} ${hour} * * ${options.dayOfWeek}`
+    case "monthly":
+      return `${minute} ${hour} ${options.dayOfMonth} * *`
+    case "custom":
+      return "" // caller provides raw cron
+  }
+}
+
+/** Generate a human-readable summary of a schedule preset */
+export function presetSummary(
+  preset: SchedulePreset,
+  options: ScheduleOptions,
+): string {
+  const t = formatTime(options.time)
+
+  switch (preset) {
+    case "every_30min":
+      return "Runs every 30 minutes"
+    case "hourly":
+      return "Runs at the start of every hour"
+    case "daily":
+      return `Runs every day at ${t}`
+    case "weekdays":
+      return `Runs Monday through Friday at ${t}`
+    case "weekly":
+      return `Runs every ${DAY_NAMES[options.dayOfWeek]} at ${t}`
+    case "monthly":
+      return `Runs on the ${ordinal(options.dayOfMonth)} of every month at ${t}`
+    case "custom":
+      return "Custom cron schedule"
+  }
+}
+
+function ordinal(n: number): string {
+  const s = ["th", "st", "nd", "rd"]
+  const v = n % 100
+  return n + (s[(v - 20) % 10] || s[v] || s[0])
+}
+
+/** Detect a preset from a cron expression (best-effort) */
+export function cronToPreset(cron: string): SchedulePreset | null {
+  const trimmed = cron.trim()
+  if (trimmed === "*/30 * * * *") return "every_30min"
+  if (trimmed === "0 * * * *") return "hourly"
+  if (/^\d+ \d+ \* \* \*$/.test(trimmed)) return "daily"
+  if (/^\d+ \d+ \* \* 1-5$/.test(trimmed)) return "weekdays"
+  if (/^\d+ \d+ \* \* [0-6]$/.test(trimmed)) return "weekly"
+  if (/^\d+ \d+ \d+ \* \*$/.test(trimmed)) return "monthly"
+  return null
+}
+
+/** Extract time/day options from a cron expression (best-effort) */
+export function cronToOptions(cron: string): Partial<ScheduleOptions> {
+  const parts = cron.trim().split(/\s+/)
+  if (parts.length !== 5) return {}
+  const [min, hr, dom, , dow] = parts
+  const result: Partial<ScheduleOptions> = {}
+
+  const minute = Number(min)
+  const hour = Number(hr)
+  if (!isNaN(minute) && !isNaN(hour)) {
+    result.time = `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`
+  }
+
+  const dayOfWeek = Number(dow)
+  if (!isNaN(dayOfWeek) && dayOfWeek >= 0 && dayOfWeek <= 6) {
+    result.dayOfWeek = dayOfWeek
+  }
+
+  const dayOfMonth = Number(dom)
+  if (!isNaN(dayOfMonth) && dayOfMonth >= 1 && dayOfMonth <= 31) {
+    result.dayOfMonth = dayOfMonth
+  }
+
+  return result
+}