feat: runnersok

frontend/src/app/recollections/layout/RecollectionEditViewMenus.tsx

@@ -14,7 +14,8 @@ import {
 } from '@/components/ui/menubar'
 import { Kbd, KbdGroup } from '@/components/ui/kbd'
 import { useRecollectionActions } from './RecollectionActionsContext'
-import { ClipboardPaste, Copy, CopyPlus, Redo2, Undo2 } from 'lucide-react'
+import { ClipboardPaste, Copy, CopyPlus, Redo2, Undo2, Play, Square } from 'lucide-react'
+import { useRunStore } from '@/lib/graph/runStore'
 
 const UNDO_KEYS = { key: 'z', shiftKey: false }
 const REDO_KEYS = { key: 'z', shiftKey: true }
@@ -26,8 +27,28 @@ function matchKey(ev: KeyboardEvent, want: { key: string; shiftKey: boolean }) {
 
 export function RecollectionEditViewMenus() {
   const { activeSlot, flux, isFluxActive } = useRecollectionActions()
+  const runStatus = useRunStore((s) => s.status)
+  const resetRun = useRunStore((s) => s.reset)
+  const isDirty = useRunStore((s) => s.dirty)
 
   const fluxSlot = isFluxActive ? flux : null
+  const isRunning = runStatus === 'running' || runStatus === 'pending'
+  const hasFinished = runStatus === 'completed' || runStatus === 'failed'
+
+  // Keyboard shortcut: Cmd+Enter to run
+  useEffect(() => {
+    if (!fluxSlot?.onRun) return
+    const onKeyDown = (ev: KeyboardEvent) => {
+      const mod = ev.ctrlKey || ev.metaKey
+      if (mod && ev.key === 'Enter' && !isRunning) {
+        ev.preventDefault()
+        ev.stopPropagation()
+        fluxSlot.onRun?.()
+      }
+    }
+    window.addEventListener('keydown', onKeyDown, true)
+    return () => window.removeEventListener('keydown', onKeyDown, true)
+  }, [fluxSlot?.onRun, isRunning])
 
   useEffect(() => {
     if (!activeSlot) return
@@ -150,5 +171,40 @@ export function RecollectionEditViewMenus() {
     [activeSlot, fluxSlot, hasFluxOnly]
   )
 
-  return menus
+  return (
+    <div className="flex items-center gap-1">
+      {menus}
+      {fluxSlot?.onRun && (
+        <button
+          type="button"
+          onClick={fluxSlot.onRun}
+          disabled={isRunning}
+          className={`relative flex h-7 items-center gap-1.5 rounded-md border px-2.5 text-xs font-medium shadow-sm transition-colors disabled:cursor-not-allowed ${
+            isRunning
+              ? 'border-blue-500/40 bg-blue-500/10 text-blue-600 dark:text-blue-400'
+              : isDirty
+                ? 'border-primary/50 bg-primary/10 text-primary hover:bg-primary/20'
+                : 'border-border/60 bg-card text-foreground hover:bg-accent'
+          }`}
+          aria-label={isRunning ? 'Run in progress' : isDirty ? 'Changes pending — run graph (⌘↵)' : 'Run graph (⌘↵)'}
+          title="⌘↵"
+        >
+          {isRunning ? (
+            <>
+              <Square className="size-3 fill-current" />
+              <span>Running</span>
+            </>
+          ) : (
+            <>
+              <Play className="size-3 fill-current" />
+              <span>Run</span>
+            </>
+          )}
+          {isDirty && !isRunning && (
+            <span className="absolute -top-1 -right-1 size-2 rounded-full bg-primary" />
+          )}
+        </button>
+      )}
+    </div>
+  )
 }