Redesign routines UI to match issue page design language

- Remove Card wrappers and gray backgrounds from routine detail
- Use max-w-2xl container layout like issue detail page
- Add icons to tabs (Clock, Play, ListTree, Activity) matching issue tabs
- Make activity tab compact (single-line items with space-y-1.5)
- Create shared RunButton and PauseResumeButton components
- Build user-friendly ScheduleEditor with presets (hourly, daily, weekdays, weekly, monthly)
- Auto-detect timezone via Intl API instead of manual timezone input
- Use shared action buttons in both AgentDetail and RoutineDetail
- Replace bordered run history cards with compact divided list

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/AgentActionButtons.tsx

@@ -0,0 +1,51 @@
+import { Pause, Play } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function RunButton({
+  onClick,
+  disabled,
+  label = "Run now",
+  size = "sm",
+}: {
+  onClick: () => void;
+  disabled?: boolean;
+  label?: string;
+  size?: "sm" | "default";
+}) {
+  return (
+    <Button variant="outline" size={size} onClick={onClick} disabled={disabled}>
+      <Play className="h-3.5 w-3.5 sm:mr-1" />
+      <span className="hidden sm:inline">{label}</span>
+    </Button>
+  );
+}
+
+export function PauseResumeButton({
+  isPaused,
+  onPause,
+  onResume,
+  disabled,
+  size = "sm",
+}: {
+  isPaused: boolean;
+  onPause: () => void;
+  onResume: () => void;
+  disabled?: boolean;
+  size?: "sm" | "default";
+}) {
+  if (isPaused) {
+    return (
+      <Button variant="outline" size={size} onClick={onResume} disabled={disabled}>
+        <Play className="h-3.5 w-3.5 sm:mr-1" />
+        <span className="hidden sm:inline">Resume</span>
+      </Button>
+    );
+  }
+
+  return (
+    <Button variant="outline" size={size} onClick={onPause} disabled={disabled}>
+      <Pause className="h-3.5 w-3.5 sm:mr-1" />
+      <span className="hidden sm:inline">Pause</span>
+    </Button>
+  );
+}

ui/src/components/ScheduleEditor.tsx

@@ -0,0 +1,333 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { ChevronDown, ChevronRight } from "lucide-react";
+
+type SchedulePreset = "every_hour" | "every_day" | "weekdays" | "weekly" | "monthly" | "custom";
+
+const PRESETS: { value: SchedulePreset; label: string }[] = [
+  { value: "every_hour", label: "Every hour" },
+  { value: "every_day", label: "Every day" },
+  { value: "weekdays", label: "Weekdays" },
+  { value: "weekly", label: "Weekly" },
+  { value: "monthly", label: "Monthly" },
+  { value: "custom", label: "Custom (cron)" },
+];
+
+const HOURS = Array.from({ length: 24 }, (_, i) => ({
+  value: String(i),
+  label: i === 0 ? "12:00 AM" : i < 12 ? `${i}:00 AM` : i === 12 ? "12:00 PM" : `${i - 12}:00 PM`,
+}));
+
+const MINUTES = Array.from({ length: 12 }, (_, i) => ({
+  value: String(i * 5),
+  label: String(i * 5).padStart(2, "0"),
+}));
+
+const DAYS_OF_WEEK = [
+  { value: "1", label: "Mon" },
+  { value: "2", label: "Tue" },
+  { value: "3", label: "Wed" },
+  { value: "4", label: "Thu" },
+  { value: "5", label: "Fri" },
+  { value: "6", label: "Sat" },
+  { value: "0", label: "Sun" },
+];
+
+const DAYS_OF_MONTH = Array.from({ length: 31 }, (_, i) => ({
+  value: String(i + 1),
+  label: String(i + 1),
+}));
+
+function parseCronToPreset(cron: string): {
+  preset: SchedulePreset;
+  hour: string;
+  minute: string;
+  dayOfWeek: string;
+  dayOfMonth: string;
+} {
+  const defaults = { hour: "10", minute: "0", dayOfWeek: "1", dayOfMonth: "1" };
+
+  if (!cron || !cron.trim()) {
+    return { preset: "every_day", ...defaults };
+  }
+
+  const parts = cron.trim().split(/\s+/);
+  if (parts.length !== 5) {
+    return { preset: "custom", ...defaults };
+  }
+
+  const [min, hr, dom, , dow] = parts;
+
+  // Every hour: "0 * * * *"
+  if (hr === "*" && dom === "*" && dow === "*") {
+    return { preset: "every_hour", ...defaults, minute: min === "*" ? "0" : min };
+  }
+
+  // Every day: "M H * * *"
+  if (dom === "*" && dow === "*" && hr !== "*") {
+    return { preset: "every_day", ...defaults, hour: hr, minute: min === "*" ? "0" : min };
+  }
+
+  // Weekdays: "M H * * 1-5"
+  if (dom === "*" && dow === "1-5" && hr !== "*") {
+    return { preset: "weekdays", ...defaults, hour: hr, minute: min === "*" ? "0" : min };
+  }
+
+  // Weekly: "M H * * D" (single day)
+  if (dom === "*" && /^\d$/.test(dow) && hr !== "*") {
+    return { preset: "weekly", ...defaults, hour: hr, minute: min === "*" ? "0" : min, dayOfWeek: dow };
+  }
+
+  // Monthly: "M H D * *"
+  if (/^\d{1,2}$/.test(dom) && dow === "*" && hr !== "*") {
+    return { preset: "monthly", ...defaults, hour: hr, minute: min === "*" ? "0" : min, dayOfMonth: dom };
+  }
+
+  return { preset: "custom", ...defaults };
+}
+
+function buildCron(preset: SchedulePreset, hour: string, minute: string, dayOfWeek: string, dayOfMonth: string): string {
+  switch (preset) {
+    case "every_hour":
+      return `${minute} * * * *`;
+    case "every_day":
+      return `${minute} ${hour} * * *`;
+    case "weekdays":
+      return `${minute} ${hour} * * 1-5`;
+    case "weekly":
+      return `${minute} ${hour} * * ${dayOfWeek}`;
+    case "monthly":
+      return `${minute} ${hour} ${dayOfMonth} * *`;
+    case "custom":
+      return "";
+  }
+}
+
+function describeSchedule(cron: string): string {
+  const { preset, hour, minute, dayOfWeek, dayOfMonth } = parseCronToPreset(cron);
+  const timeStr = HOURS.find((h) => h.value === hour)?.label?.replace(":00", `:${minute.padStart(2, "0")}`) ?? `${hour}:${minute.padStart(2, "0")}`;
+
+  switch (preset) {
+    case "every_hour":
+      return `Every hour at :${minute.padStart(2, "0")}`;
+    case "every_day":
+      return `Every day at ${timeStr}`;
+    case "weekdays":
+      return `Weekdays at ${timeStr}`;
+    case "weekly": {
+      const day = DAYS_OF_WEEK.find((d) => d.value === dayOfWeek)?.label ?? dayOfWeek;
+      return `Every ${day} at ${timeStr}`;
+    }
+    case "monthly":
+      return `Monthly on the ${dayOfMonth}${ordinalSuffix(Number(dayOfMonth))} at ${timeStr}`;
+    case "custom":
+      return cron || "No schedule set";
+  }
+}
+
+function ordinalSuffix(n: number): string {
+  const s = ["th", "st", "nd", "rd"];
+  const v = n % 100;
+  return s[(v - 20) % 10] || s[v] || s[0];
+}
+
+export { describeSchedule };
+
+export function ScheduleEditor({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (cron: string) => void;
+}) {
+  const parsed = useMemo(() => parseCronToPreset(value), [value]);
+  const [preset, setPreset] = useState<SchedulePreset>(parsed.preset);
+  const [hour, setHour] = useState(parsed.hour);
+  const [minute, setMinute] = useState(parsed.minute);
+  const [dayOfWeek, setDayOfWeek] = useState(parsed.dayOfWeek);
+  const [dayOfMonth, setDayOfMonth] = useState(parsed.dayOfMonth);
+  const [customCron, setCustomCron] = useState(preset === "custom" ? value : "");
+
+  // Sync from external value changes
+  useEffect(() => {
+    const p = parseCronToPreset(value);
+    setPreset(p.preset);
+    setHour(p.hour);
+    setMinute(p.minute);
+    setDayOfWeek(p.dayOfWeek);
+    setDayOfMonth(p.dayOfMonth);
+    if (p.preset === "custom") setCustomCron(value);
+  }, [value]);
+
+  const emitChange = useCallback(
+    (p: SchedulePreset, h: string, m: string, dow: string, dom: string, custom: string) => {
+      if (p === "custom") {
+        onChange(custom);
+      } else {
+        onChange(buildCron(p, h, m, dow, dom));
+      }
+    },
+    [onChange],
+  );
+
+  const handlePresetChange = (newPreset: SchedulePreset) => {
+    setPreset(newPreset);
+    if (newPreset === "custom") {
+      setCustomCron(value);
+    } else {
+      emitChange(newPreset, hour, minute, dayOfWeek, dayOfMonth, customCron);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <Select value={preset} onValueChange={(v) => handlePresetChange(v as SchedulePreset)}>
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder="Choose frequency..." />
+        </SelectTrigger>
+        <SelectContent>
+          {PRESETS.map((p) => (
+            <SelectItem key={p.value} value={p.value}>
+              {p.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      {preset === "custom" ? (
+        <div className="space-y-1.5">
+          <Input
+            value={customCron}
+            onChange={(e) => {
+              setCustomCron(e.target.value);
+              emitChange("custom", hour, minute, dayOfWeek, dayOfMonth, e.target.value);
+            }}
+            placeholder="0 10 * * *"
+            className="font-mono text-sm"
+          />
+          <p className="text-xs text-muted-foreground">
+            Five fields: minute hour day-of-month month day-of-week
+          </p>
+        </div>
+      ) : (
+        <div className="flex flex-wrap items-center gap-2">
+          {preset !== "every_hour" && (
+            <>
+              <span className="text-sm text-muted-foreground">at</span>
+              <Select
+                value={hour}
+                onValueChange={(h) => {
+                  setHour(h);
+                  emitChange(preset, h, minute, dayOfWeek, dayOfMonth, customCron);
+                }}
+              >
+                <SelectTrigger className="w-[120px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {HOURS.map((h) => (
+                    <SelectItem key={h.value} value={h.value}>
+                      {h.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <span className="text-sm text-muted-foreground">:</span>
+              <Select
+                value={minute}
+                onValueChange={(m) => {
+                  setMinute(m);
+                  emitChange(preset, hour, m, dayOfWeek, dayOfMonth, customCron);
+                }}
+              >
+                <SelectTrigger className="w-[80px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {MINUTES.map((m) => (
+                    <SelectItem key={m.value} value={m.value}>
+                      {m.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </>
+          )}
+
+          {preset === "every_hour" && (
+            <>
+              <span className="text-sm text-muted-foreground">at minute</span>
+              <Select
+                value={minute}
+                onValueChange={(m) => {
+                  setMinute(m);
+                  emitChange(preset, hour, m, dayOfWeek, dayOfMonth, customCron);
+                }}
+              >
+                <SelectTrigger className="w-[80px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {MINUTES.map((m) => (
+                    <SelectItem key={m.value} value={m.value}>
+                      :{m.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </>
+          )}
+
+          {preset === "weekly" && (
+            <>
+              <span className="text-sm text-muted-foreground">on</span>
+              <div className="flex gap-1">
+                {DAYS_OF_WEEK.map((d) => (
+                  <Button
+                    key={d.value}
+                    type="button"
+                    variant={dayOfWeek === d.value ? "default" : "outline"}
+                    size="sm"
+                    className="h-7 px-2 text-xs"
+                    onClick={() => {
+                      setDayOfWeek(d.value);
+                      emitChange(preset, hour, minute, d.value, dayOfMonth, customCron);
+                    }}
+                  >
+                    {d.label}
+                  </Button>
+                ))}
+              </div>
+            </>
+          )}
+
+          {preset === "monthly" && (
+            <>
+              <span className="text-sm text-muted-foreground">on day</span>
+              <Select
+                value={dayOfMonth}
+                onValueChange={(dom) => {
+                  setDayOfMonth(dom);
+                  emitChange(preset, hour, minute, dayOfWeek, dom, customCron);
+                }}
+              >
+                <SelectTrigger className="w-[80px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {DAYS_OF_MONTH.map((d) => (
+                    <SelectItem key={d.value} value={d.value}>
+                      {d.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

ui/src/pages/AgentDetail.tsx

@@ -28,6 +28,7 @@ import { CopyText } from "../components/CopyText";
 import { EntityRow } from "../components/EntityRow";
 import { Identity } from "../components/Identity";
 import { PageSkeleton } from "../components/PageSkeleton";
+import { RunButton, PauseResumeButton } from "../components/AgentActionButtons";
 import { BudgetPolicyCard } from "../components/BudgetPolicyCard";
 import { PackageFileTree, buildFileTree } from "../components/PackageFileTree";
 import { ScrollToBottom } from "../components/ScrollToBottom";
@@ -44,8 +45,6 @@ import {
 } from "@/components/ui/popover";
 import {
   MoreHorizontal,
-  Play,
-  Pause,
   CheckCircle2,
   XCircle,
   Clock,
@@ -801,36 +800,17 @@ export function AgentDetail() {
             <Plus className="h-3.5 w-3.5 sm:mr-1" />
             <span className="hidden sm:inline">Assign Task</span>
           </Button>
-          <Button
+          <RunButton
-            variant="outline"
-            size="sm"
             onClick={() => agentAction.mutate("invoke")}
             disabled={agentAction.isPending || isPendingApproval}
-          >
+            label="Run Heartbeat"
-            <Play className="h-3.5 w-3.5 sm:mr-1" />
+          />
-            <span className="hidden sm:inline">Run Heartbeat</span>
+          <PauseResumeButton
-          </Button>
+            isPaused={agent.status === "paused"}
-          {agent.status === "paused" ? (
+            onPause={() => agentAction.mutate("pause")}
-            <Button
+            onResume={() => agentAction.mutate("resume")}
-              variant="outline"
+            disabled={agentAction.isPending || isPendingApproval}
-              size="sm"
+          />
-              onClick={() => agentAction.mutate("resume")}
-              disabled={agentAction.isPending || isPendingApproval}
-            >
-              <Play className="h-3.5 w-3.5 sm:mr-1" />
-              <span className="hidden sm:inline">Resume</span>
-            </Button>
-          ) : (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => agentAction.mutate("pause")}
-              disabled={agentAction.isPending || isPendingApproval}
-            >
-              <Pause className="h-3.5 w-3.5 sm:mr-1" />
-              <span className="hidden sm:inline">Pause</span>
-            </Button>
-          )}
           <span className="hidden sm:inline"><StatusBadge status={agent.status} /></span>
           {mobileLiveRun && (
             <Link