fix(renderer): auto-save flush, a11y IDs, UX polish

- WorkflowEditor: flush pending save on tab close (REL-5)
- useProjects: check all 3 collections in skip guard (CQ-2)
- toggleSidebar: read state after set() via get() (CQ-3)
- ConfirmDialog: unique aria IDs via useId() (CQ-4)
- AgentSelector: show display names not raw IDs (CQ-7)
- TemplateEditor: confirm before Delete key (CQ-8)
- HomeScreen: remove stale greeting memoization (CQ-6)

Co-Authored-By: Rooty

Author: Wintersta7e

src/renderer/components/HomeScreen/HomeScreen.tsx

@@ -153,8 +153,8 @@ export function HomeScreen({
   } | null>(null)
   const cardMenuRef = useRef<HTMLDivElement>(null)
 
-  const dateStr = useMemo(() => formatDate(), [])
-  const greeting = useMemo(() => getGreeting(), [])
+  const dateStr = formatDate()
+  const greeting = getGreeting()
 
   const pinned = useMemo(() => projects.filter((p) => p.pinned), [projects])
 

src/renderer/components/TemplateEditor/TemplateEditor.tsx

@@ -241,12 +241,16 @@ export function TemplateEditor(): React.JSX.Element {
         const tag = (e.target as HTMLElement)?.tagName
         if (tag === 'INPUT' || tag === 'TEXTAREA') return
         e.preventDefault()
-        void handleDelete()
+        // CQ-8: Confirm before deleting to prevent accidental loss
+        const tplName = templates.find((t) => t.id === selectedId)?.name ?? 'this template'
+        if (window.confirm(`Delete "${tplName}"? This cannot be undone.`)) {
+          void handleDelete()
+        }
       }
     }
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [handleSave, handleDelete, selectedId])
+  }, [handleSave, handleDelete, selectedId, templates])
 
   return (
     <div className="template-editor">

src/renderer/components/shared/AgentSelector.tsx

@@ -6,7 +6,7 @@ import './AgentSelector.css'
 const KNOWN_AGENTS = AGENTS.map((a) => ({
   type: a.id,
   icon: a.icon,
-  name: a.id,
+  name: a.name,
   desc: a.description,
 }))
 

src/renderer/components/shared/ConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useCallback } from 'react'
+import { useEffect, useCallback, useId } from 'react'
 import { useFocusTrap } from '../../hooks/useFocusTrap'
 import './ConfirmDialog.css'
 
@@ -23,6 +23,9 @@ export function ConfirmDialog({
   extraAction,
 }: ConfirmDialogProps): React.JSX.Element | null {
   const trapRef = useFocusTrap<HTMLDivElement>()
+  const uniqueId = useId()
+  const titleId = `${uniqueId}-title`
+  const messageId = `${uniqueId}-message`
 
   // Close on Escape
   useEffect(() => {
@@ -56,15 +59,15 @@ export function ConfirmDialog({
       onClick={handleBackdropClick}
       role="alertdialog"
       aria-modal="true"
-      aria-labelledby="confirm-dialog-title"
-      aria-describedby="confirm-dialog-message"
+      aria-labelledby={titleId}
+      aria-describedby={messageId}
     >
       <div className="confirm-dialog">
         <div className="confirm-dialog-body">
-          <h3 id="confirm-dialog-title" className="confirm-dialog-title">
+          <h3 id={titleId} className="confirm-dialog-title">
             {title}
           </h3>
-          <p id="confirm-dialog-message" className="confirm-dialog-message">
+          <p id={messageId} className="confirm-dialog-message">
             {message}
           </p>
         </div>

src/renderer/hooks/useProjects.ts

@@ -31,7 +31,12 @@ export function useProjects(): UseProjectsReturn {
   useEffect(() => {
     let cancelled = false
     async function load(): Promise<void> {
-      if (useAppStore.getState().projects.length > 0 || loadingInFlight) return
+      const state = useAppStore.getState()
+      if (
+        (state.projects.length > 0 && state.templates.length > 0 && state.roles.length > 0) ||
+        loadingInFlight
+      )
+        return
       loadingInFlight = true
       try {
         const [p, t, r] = await Promise.all([

src/renderer/screens/WorkflowEditor/WorkflowEditor.tsx

@@ -94,7 +94,18 @@ export default function WorkflowEditor({ workflowId }: WorkflowEditorProps): Rea
 
   useEffect(() => {
     return () => {
-      if (saveTimerRef.current) clearTimeout(saveTimerRef.current)
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current)
+        saveTimerRef.current = null
+        // Flush pending save on unmount (fire-and-forget)
+        if (latestWorkflowRef.current) {
+          window.agentDeck.workflows.save(latestWorkflowRef.current).catch((err: unknown) => {
+            window.agentDeck.log.send('error', 'workflow-editor', 'Unmount flush failed', {
+              err: String(err),
+            })
+          })
+        }
+      }
     }
   }, [])
 

src/renderer/store/slices/ui.ts

@@ -73,7 +73,7 @@ export interface UiSlice {
   clearWorktreePath: (sessionId: string) => void
 }
 
-export const createUiSlice: StateCreator<AppState, [], [], UiSlice> = (set) => ({
+export const createUiSlice: StateCreator<AppState, [], [], UiSlice> = (set, get) => ({
   currentView: 'home',
   setCurrentView: (view) => set({ currentView: view }),
 
@@ -177,11 +177,8 @@ export const createUiSlice: StateCreator<AppState, [], [], UiSlice> = (set) => (
   wfLogPanelWidth: 320,
 
   toggleSidebar: () => {
-    let next = false
-    set((state) => {
-      next = !state.sidebarOpen
-      return { sidebarOpen: next }
-    })
+    set((state) => ({ sidebarOpen: !state.sidebarOpen }))
+    const next = get().sidebarOpen
     window.agentDeck.layout.set({ sidebarOpen: next }).catch((err: unknown) => {
       window.agentDeck.log.send('debug', 'layout', 'Layout persist failed', { err: String(err) })
     })
@@ -195,15 +192,13 @@ export const createUiSlice: StateCreator<AppState, [], [], UiSlice> = (set) => (
   },
 
   toggleSidebarSection: (key) => {
-    let sections: UiSlice['sidebarSections'] | undefined
-    set((state) => {
-      sections = { ...state.sidebarSections, [key]: !state.sidebarSections[key] }
-      return { sidebarSections: sections }
+    set((state) => ({
+      sidebarSections: { ...state.sidebarSections, [key]: !state.sidebarSections[key] },
+    }))
+    const sections = get().sidebarSections
+    window.agentDeck.layout.set({ sidebarSections: sections }).catch((err: unknown) => {
+      window.agentDeck.log.send('debug', 'layout', 'Layout persist failed', { err: String(err) })
     })
-    if (sections)
-      window.agentDeck.layout.set({ sidebarSections: sections }).catch((err: unknown) => {
-        window.agentDeck.log.send('debug', 'layout', 'Layout persist failed', { err: String(err) })
-      })
   },
 
   setRightPanelWidth: (w) => {