From e0d0d8c600dc7d7c64b0bafbc00f29c1f55030ba Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 17 Aug 2026 15:51:00 -0700
Subject: [PATCH] [eric] canvas: workflow hub nav rows count as controls, so
 Home/Calendar/New Workflow stop yanking the camera to a fixed frame (ENG-336)

---
 frontend/src/app/pages/Workflows/app/HomeView.tsx |  4 ++--
 frontend/src/app/pages/Workflows/app/LeftRail.tsx | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/pages/Workflows/app/HomeView.tsx b/frontend/src/app/pages/Workflows/app/HomeView.tsx
index 3f63ef76..84f413ed 100644
--- a/frontend/src/app/pages/Workflows/app/HomeView.tsx
+++ b/frontend/src/app/pages/Workflows/app/HomeView.tsx
@@ -184,7 +184,7 @@ const HomeView: React.FC<{ nav: AppNav }> = ({ nav }) => {
               </div>
               <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                 {(expandedDays.has(g.key) ? g.runs : g.runs.slice(0, COMING_CAP)).map((r, i) => (
-                  <div key={`${r.wfId}-${i}`} onClick={() => nav.selectWorkflow(r.wfId)} onContextMenu={menuFor(r.wfId)} style={{ display: 'flex', alignItems: 'center', gap: 13, background: WC.raised, border: `1px solid rgba(${WC.inkRGB},0.08)`, borderRadius: WC.radius.md, padding: '12px 15px', cursor: 'pointer' }}>
+                  <div key={`${r.wfId}-${i}`} role="button" onClick={() => nav.selectWorkflow(r.wfId)} onContextMenu={menuFor(r.wfId)} style={{ display: 'flex', alignItems: 'center', gap: 13, background: WC.raised, border: `1px solid rgba(${WC.inkRGB},0.08)`, borderRadius: WC.radius.md, padding: '12px 15px', cursor: 'pointer' }}>
                     <div style={{ width: 3, height: 30, borderRadius: 3, background: r.color, flex: 'none' }} />
                     <WorkflowTitle value={r.title} animate={animateOf(r.wfId)}>
                       {(t) => <span style={{ fontSize: 14, fontWeight: 600, color: WC.ink, flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t}</span>}
@@ -211,7 +211,7 @@ const HomeView: React.FC<{ nav: AppNav }> = ({ nav }) => {
           {recents.length === 0 && <div style={{ fontSize: 13, color: WC.muted }}>No runs yet.</div>}
           <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
             {recents.map((r) => (
-              <div key={r.id} onClick={() => nav.selectWorkflow(r.wfId)} onContextMenu={menuFor(r.wfId)} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '11px 4px', borderBottom: `1px solid rgba(${WC.inkRGB},0.05)`, cursor: 'pointer' }}>
+              <div key={r.id} role="button" onClick={() => nav.selectWorkflow(r.wfId)} onContextMenu={menuFor(r.wfId)} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '11px 4px', borderBottom: `1px solid rgba(${WC.inkRGB},0.05)`, cursor: 'pointer' }}>
                 <div style={statusDot(r.status, WC)} />
                 <div style={{ flex: 1, minWidth: 0 }}>
                   <WorkflowTitle value={r.title} animate={animateOf(r.wfId)}>
diff --git a/frontend/src/app/pages/Workflows/app/LeftRail.tsx b/frontend/src/app/pages/Workflows/app/LeftRail.tsx
index 8c4179d3..4351b954 100644
--- a/frontend/src/app/pages/Workflows/app/LeftRail.tsx
+++ b/frontend/src/app/pages/Workflows/app/LeftRail.tsx
@@ -68,15 +68,16 @@ const LeftRail: React.FC<{ nav: AppNav }> = ({ nav }) => {
       </div>
 
       <div style={{ padding: '4px 8px', flex: 'none', display: 'flex', flexDirection: 'column', gap: 1 }}>
-        <div onClick={nav.goHome} style={homeStyle}>
+        {/* role="button" keeps pressLandedOnControl true, so hub nav never re-fits the canvas camera (ENG-336) */}
+        <div role="button" onClick={nav.goHome} style={homeStyle}>
           <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9"><path d="M3 11l9-7 9 7M5 10v9h5v-6h4v6h5v-9" /></svg>
           <span>Home</span>
         </div>
-        <div onClick={nav.goCalendar} style={calStyle}>
+        <div role="button" onClick={nav.goCalendar} style={calStyle}>
           <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9"><rect x="3" y="4.5" width="18" height="16" rx="2.5" /><path d="M3 9h18M8 2.5v4M16 2.5v4" /></svg>
           <span>Calendar</span>
         </div>
-        <div onClick={nav.goNew} style={newStyle}>
+        <div role="button" onClick={nav.goNew} style={newStyle}>
           <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14" /></svg>
           <span>New Workflow</span>
         </div>
@@ -95,6 +96,7 @@ const LeftRail: React.FC<{ nav: AppNav }> = ({ nav }) => {
           return (
             <div
               key={w.id}
+              role="button"
               onClick={() => nav.selectWorkflow(w.id)}
               onContextMenu={(e) => openWorkflowMenu(e, w, {
                 onEdit: () => nav.selectWorkflow(w.id),
@@ -148,7 +150,7 @@ const LeftRail: React.FC<{ nav: AppNav }> = ({ nav }) => {
       </div>
 
       <div style={{ flex: 'none', borderTop: `1px solid ${WC.line}`, padding: '8px' }}>
-        <div onClick={nav.goTrash} style={trashStyle}>
+        <div role="button" onClick={nav.goTrash} style={trashStyle}>
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13" /></svg>
           <span>Trash</span>
           {trashCount > 0 && (