From 4c6e8e6053f0a3beea3a17a4a24f1d5482c4c351 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Fri, 20 Mar 2026 06:38:45 -0500
Subject: [PATCH] Move routine title into header row, remove Automation label

The editable title now sits in the header alongside Run Now and
the active/paused toggle, replacing the old "Automation" subheading.
This removes the redundant label and gives the title top-level
prominence in the routine detail view.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/pages/RoutineDetail.tsx | 124 ++++++++++++++-------------------
 1 file changed, 53 insertions(+), 71 deletions(-)

diff --git a/ui/src/pages/RoutineDetail.tsx b/ui/src/pages/RoutineDetail.tsx
index 3de5129e..48d55517 100644
--- a/ui/src/pages/RoutineDetail.tsx
+++ b/ui/src/pages/RoutineDetail.tsx
@@ -625,46 +625,60 @@ export function RoutineDetail() {
 
   return (
     <div className="max-w-2xl space-y-6">
-      {/* Header: status + actions */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div className="space-y-1">
-          {routine.activeIssue && (
-            <Link
-              to={`/issues/${routine.activeIssue.identifier ?? routine.activeIssue.id}`}
-              className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:underline"
-            >
-              <span>Current issue</span>
-              <span>{routine.activeIssue.identifier ?? routine.activeIssue.id.slice(0, 8)}</span>
-            </Link>
-          )}
-        </div>
-        <div className="flex flex-wrap items-center gap-3">
+      {/* Header: editable title + actions */}
+      <div className="flex items-start gap-4">
+        <textarea
+          ref={titleInputRef}
+          className="flex-1 min-w-0 resize-none overflow-hidden bg-transparent text-xl font-bold outline-none placeholder:text-muted-foreground/50"
+          placeholder="Routine title"
+          rows={1}
+          value={editDraft.title}
+          onChange={(event) => {
+            setEditDraft((current) => ({ ...current, title: event.target.value }));
+            autoResizeTextarea(event.target);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.metaKey && !event.ctrlKey && !event.nativeEvent.isComposing) {
+              event.preventDefault();
+              descriptionEditorRef.current?.focus();
+              return;
+            }
+            if (event.key === "Tab" && !event.shiftKey) {
+              event.preventDefault();
+              if (editDraft.assigneeAgentId) {
+                if (editDraft.projectId) {
+                  descriptionEditorRef.current?.focus();
+                } else {
+                  projectSelectorRef.current?.focus();
+                }
+              } else {
+                assigneeSelectorRef.current?.focus();
+              }
+            }
+          }}
+        />
+        <div className="flex shrink-0 items-center gap-3 pt-1">
           <RunButton onClick={() => runRoutine.mutate()} disabled={runRoutine.isPending} />
-          <div className="flex items-center gap-2">
-            <span className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">Automation</span>
-            <div className="flex items-center gap-3">
-              <button
-                type="button"
-                role="switch"
-                aria-checked={automationEnabled}
-                aria-label={automationEnabled ? "Pause automatic triggers" : "Enable automatic triggers"}
-                disabled={automationToggleDisabled}
-                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-                  automationEnabled ? "bg-emerald-500" : "bg-muted"
-                } ${automationToggleDisabled ? "cursor-not-allowed opacity-50" : ""}`}
-                onClick={() => updateRoutineStatus.mutate(automationEnabled ? "paused" : "active")}
-              >
-                <span
-                  className={`inline-block h-5 w-5 rounded-full bg-background shadow-sm transition-transform ${
-                    automationEnabled ? "translate-x-5" : "translate-x-0.5"
-                  }`}
-                />
-              </button>
-              <span className={`min-w-[3.75rem] text-sm font-medium ${automationLabelClassName}`}>
-                {automationLabel}
-              </span>
-            </div>
-          </div>
+          <button
+            type="button"
+            role="switch"
+            aria-checked={automationEnabled}
+            aria-label={automationEnabled ? "Pause automatic triggers" : "Enable automatic triggers"}
+            disabled={automationToggleDisabled}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+              automationEnabled ? "bg-emerald-500" : "bg-muted"
+            } ${automationToggleDisabled ? "cursor-not-allowed opacity-50" : ""}`}
+            onClick={() => updateRoutineStatus.mutate(automationEnabled ? "paused" : "active")}
+          >
+            <span
+              className={`inline-block h-5 w-5 rounded-full bg-background shadow-sm transition-transform ${
+                automationEnabled ? "translate-x-5" : "translate-x-0.5"
+              }`}
+            />
+          </button>
+          <span className={`min-w-[3.75rem] text-sm font-medium ${automationLabelClassName}`}>
+            {automationLabel}
+          </span>
         </div>
       </div>
 
@@ -694,38 +708,6 @@ export function RoutineDetail() {
         </div>
       )}
 
-      {/* Title */}
-      <textarea
-        ref={titleInputRef}
-        className="w-full resize-none overflow-hidden bg-transparent text-xl font-bold outline-none placeholder:text-muted-foreground/50"
-        placeholder="Routine title"
-        rows={1}
-        value={editDraft.title}
-        onChange={(event) => {
-          setEditDraft((current) => ({ ...current, title: event.target.value }));
-          autoResizeTextarea(event.target);
-        }}
-        onKeyDown={(event) => {
-          if (event.key === "Enter" && !event.metaKey && !event.ctrlKey && !event.nativeEvent.isComposing) {
-            event.preventDefault();
-            descriptionEditorRef.current?.focus();
-            return;
-          }
-          if (event.key === "Tab" && !event.shiftKey) {
-            event.preventDefault();
-            if (editDraft.assigneeAgentId) {
-              if (editDraft.projectId) {
-                descriptionEditorRef.current?.focus();
-              } else {
-                projectSelectorRef.current?.focus();
-              }
-            } else {
-              assigneeSelectorRef.current?.focus();
-            }
-          }
-        }}
-      />
-
       {/* Assignment row */}
       <div className="overflow-x-auto overscroll-x-contain">
         <div className="inline-flex min-w-full flex-wrap items-center gap-2 text-sm text-muted-foreground sm:min-w-max sm:flex-nowrap">