@jxtools/promptline 1.3.19 → 1.3.20

package/bin/install-hooks.mjs

@@ -0,0 +1,99 @@
+import { chmodSync, copyFileSync, existsSync, mkdirSync, readFileSync, renameSync, unlinkSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { spawnSync } from 'node:child_process'
+
+export function toErrorMessage(error, fallback = 'Unknown error') {
+  return error instanceof Error && error.message ? error.message : fallback
+}
+
+export function hasCommand(command, spawnSyncImpl = spawnSync) {
+  const result = spawnSyncImpl(command, ['--version'], { stdio: 'ignore' })
+  return !result.error && result.status === 0
+}
+
+export function loadSettings(settingsPath) {
+  if (!existsSync(settingsPath)) {
+    return {}
+  }
+
+  try {
+    return JSON.parse(readFileSync(settingsPath, 'utf-8'))
+  } catch (error) {
+    throw new Error(`Claude settings file is corrupted: ${toErrorMessage(error)}`)
+  }
+}
+
+export function writeJsonAtomic(settingsPath, data) {
+  const tmpPath = `${settingsPath}.tmp`
+  const backupPath = `${settingsPath}.bak`
+
+  if (existsSync(settingsPath)) {
+    copyFileSync(settingsPath, backupPath)
+  }
+
+  try {
+    writeFileSync(tmpPath, JSON.stringify(data, null, 2) + '\n')
+    renameSync(tmpPath, settingsPath)
+  } catch (error) {
+    try {
+      unlinkSync(tmpPath)
+    } catch {
+      // ignore cleanup errors
+    }
+    throw error
+  }
+}
+
+export function installHooks({ claudeDir, hooksDir, pkgDir, hookFiles, commandAvailable = hasCommand }) {
+  if (!commandAvailable('python3')) {
+    throw new Error('python3 is required to install PromptLine hooks')
+  }
+
+  mkdirSync(hooksDir, { recursive: true })
+
+  for (const file of hookFiles) {
+    const src = join(pkgDir, file)
+    const dest = join(hooksDir, file)
+    copyFileSync(src, dest)
+    chmodSync(dest, 0o755)
+  }
+
+  const settingsPath = join(claudeDir, 'settings.json')
+  const settings = loadSettings(settingsPath)
+
+  if (!settings.hooks) {
+    settings.hooks = {}
+  }
+
+  const hookConfig = {
+    SessionStart: { file: 'promptline-session-register.sh' },
+    Stop: { file: 'promptline-prompt-queue.sh' },
+    SessionEnd: { file: 'promptline-session-end.sh' },
+  }
+
+  let changed = false
+
+  for (const [event, config] of Object.entries(hookConfig)) {
+    const command = `~/.claude/hooks/${config.file}`
+
+    if (!settings.hooks[event]) {
+      settings.hooks[event] = []
+      changed = true
+    }
+
+    const alreadyExists = settings.hooks[event].some((entry) =>
+      entry.hooks?.some((hook) => hook.command === command),
+    )
+
+    if (!alreadyExists) {
+      settings.hooks[event].push({
+        hooks: [{ type: 'command', command }],
+      })
+      changed = true
+    }
+  }
+
+  if (changed) {
+    writeJsonAtomic(settingsPath, settings)
+  }
+}

package/bin/promptline.mjs

@@ -1,10 +1,11 @@
 #!/usr/bin/env node
 
-import { existsSync, readFileSync, writeFileSync, copyFileSync, chmodSync, readdirSync, mkdirSync, renameSync, unlinkSync } from 'fs'
+import { existsSync, readFileSync, writeFileSync, readdirSync, renameSync } from 'fs'
 import { resolve, dirname, join } from 'path'
 import { fileURLToPath } from 'url'
 import { spawn, execSync } from 'child_process'
 import { homedir } from 'os'
+import { installHooks as installPromptlineHooks, toErrorMessage } from './install-hooks.mjs'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 const pkgDir = resolve(__dirname, '..')
@@ -36,7 +37,7 @@ if (process.argv[2] === 'update') {
     execSync('npm install -g @jxtools/promptline@latest', { stdio: 'inherit' })
     console.log(`\n\x1b[32m✓\x1b[0m Updated to v${latest}`)
   } catch (err) {
-    console.error(`\x1b[31m✗\x1b[0m Update failed: ${err.message}`)
+    console.error(`\x1b[31m✗\x1b[0m Update failed: ${toErrorMessage(err)}`)
     process.exit(1)
   }
 
@@ -150,57 +151,15 @@ function cancelAllPendingPrompts() {
 // --- Helpers ---
 
 function installHooks() {
-  // Copy hook scripts
-  execSync(`mkdir -p "${hooksDir}"`)
-
-  for (const file of hookFiles) {
-    const src = join(pkgDir, file)
-    const dest = join(hooksDir, file)
-    copyFileSync(src, dest)
-    chmodSync(dest, 0o755)
-  }
-
-  // Merge into settings.json
-  const settingsPath = join(claudeDir, 'settings.json')
-  let settings = {}
-
-  if (existsSync(settingsPath)) {
-    try {
-      settings = JSON.parse(readFileSync(settingsPath, 'utf-8'))
-    } catch {
-      // corrupted settings, start fresh
-    }
-  }
-
-  if (!settings.hooks) settings.hooks = {}
-
-  const hookConfig = {
-    SessionStart: {
-      file: 'promptline-session-register.sh',
-    },
-    Stop: {
-      file: 'promptline-prompt-queue.sh',
-    },
-    SessionEnd: {
-      file: 'promptline-session-end.sh',
-    },
-  }
-
-  for (const [event, config] of Object.entries(hookConfig)) {
-    const command = `~/.claude/hooks/${config.file}`
-
-    if (!settings.hooks[event]) settings.hooks[event] = []
-
-    const alreadyExists = settings.hooks[event].some(entry =>
-      entry.hooks?.some(h => h.command === command)
-    )
-
-    if (!alreadyExists) {
-      settings.hooks[event].push({
-        hooks: [{ type: 'command', command }],
-      })
-    }
+  try {
+    installPromptlineHooks({
+      claudeDir,
+      hooksDir,
+      pkgDir,
+      hookFiles,
+    })
+  } catch (error) {
+    console.error(`\x1b[31m✗\x1b[0m ${toErrorMessage(error)}`)
+    process.exit(1)
   }
-
-  writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + '\n')
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxtools/promptline",
-  "version": "1.3.19",
+  "version": "1.3.20",
   "type": "module",
   "license": "ISC",
   "bin": {
@@ -29,31 +29,30 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview",
-    "test": "vitest run",
-    "test:watch": "vitest"
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.2.1",
-    "@vitejs/plugin-react": "^5.1.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "tailwindcss": "^4.2.1",
-    "typescript": "~5.9.3",
     "uuid": "^13.0.0",
     "vite": "^7.3.1"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.2.1",
     "@eslint/js": "^9.39.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-react": "^5.1.1",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
-    "typescript-eslint": "^8.48.0",
-    "vitest": "^4.0.18"
+    "tailwindcss": "^4.2.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0"
+  },
+  "overrides": {
+    "flatted": "^3.4.2"
   }
 }

package/src/App.tsx

@@ -5,8 +5,11 @@ import { StatusBar } from './components/StatusBar';
 import { ProjectDetail } from './components/ProjectDetail';
 
 function App() {
-  const { projects, loading, error } = useProjects();
+  const { projects, loading, error, refresh } = useProjects();
   const [selectedProject, setSelectedProject] = useState<string | null>(null);
+  const hasProjects = projects.length > 0;
+  const showBlockingError = Boolean(error) && !hasProjects;
+  const showBlockingLoading = loading && !hasProjects && !error;
 
   function handleProjectDeleted() {
     setSelectedProject(null);
@@ -24,19 +27,38 @@ function App() {
 
         {/* Main content */}
         <main className="flex-1 overflow-hidden bg-[var(--color-bg)]">
-          {loading && (
-            <div className="flex items-center justify-center h-full">
-              <p className="text-sm text-[var(--color-muted)] animate-pulse">Loading...</p>
+          {showBlockingError && (
+            <div className="flex items-center justify-center h-full px-6">
+              <div
+                className="flex flex-col items-center gap-3 text-center"
+                role="alert"
+                aria-live="assertive"
+              >
+                <p className="text-sm text-red-400">Error: {error}</p>
+                <button
+                  type="button"
+                  onClick={() => void refresh()}
+                  className="text-xs px-3 py-1.5 rounded border border-red-500/30 text-red-300 hover:bg-red-500/10 focus:outline-none"
+                >
+                  Retry
+                </button>
+              </div>
             </div>
           )}
 
-          {!loading && error && (
+          {showBlockingLoading && (
             <div className="flex items-center justify-center h-full">
-              <p className="text-sm text-red-400">Error: {error}</p>
+              <p
+                className="text-sm text-[var(--color-muted)] animate-pulse"
+                role="status"
+                aria-live="polite"
+              >
+                Loading...
+              </p>
             </div>
           )}
 
-          {!loading && !error && !selectedProject && (
+          {!showBlockingError && !showBlockingLoading && !selectedProject && (
             <div className="flex flex-col items-center justify-center h-full gap-3 select-none opacity-40">
               <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" className="text-[var(--color-muted)]">
                 <rect x="3" y="3" width="7" height="7" rx="1" />
@@ -51,11 +73,12 @@ function App() {
             </div>
           )}
 
-          {!loading && !error && selectedProject && (
+          {!showBlockingError && !showBlockingLoading && selectedProject && (
             <ProjectDetail
               project={selectedProject}
               projects={projects}
               onProjectDeleted={handleProjectDeleted}
+              onMutate={refresh}
             />
           )}
         </main>

package/src/api/client.ts

@@ -7,7 +7,10 @@ async function request<T>(url: string, options?: RequestInit): Promise<T> {
     headers: { 'Content-Type': 'application/json' },
     ...options,
   });
-  if (!res.ok) throw new Error(`API error: ${res.status}`);
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({})) as { error?: string };
+    throw new Error(body.error ?? `API error: ${res.status}`);
+  }
   return res.json();
 }
 

package/src/backend/queue-store.ts

@@ -5,6 +5,8 @@ import type { SessionQueue, Prompt, PromptStatus, SessionStatus, QueueStatus, Pr
 export const SESSION_ACTIVE_TIMEOUT_MS = 60_000;
 export const SESSION_ABANDONED_TIMEOUT_MS = 24 * 60 * 60_000;
 const LOCK_STALE_MS = 10_000;
+const LOCK_RETRY_MS = 10;
+const LOCK_WAIT_BUFFER = new Int32Array(new SharedArrayBuffer(4));
 
 function acquireLockSync(lockPath: string): void {
   for (let i = 0; i < 100; i++) {
@@ -20,8 +22,7 @@ function acquireLockSync(lockPath: string): void {
           continue;
         }
       } catch { continue; }
-      const end = Date.now() + 10;
-      while (Date.now() < end) { /* spin */ }
+      Atomics.wait(LOCK_WAIT_BUFFER, 0, 0, LOCK_RETRY_MS);
     }
   }
   try { unlinkSync(lockPath); } catch { /* ignore */ }

package/src/components/AddPromptForm.tsx

@@ -1,16 +1,19 @@
 import { useState, useRef, useEffect } from 'react';
 import { api } from '../api/client';
+import { InlineAlert } from './InlineAlert';
+import { toErrorMessage } from '../utils/errors';
 
 interface AddPromptFormProps {
   project: string;
   sessionId: string;
-  onAdded: () => void;
+  onAdded: () => void | Promise<void>;
 }
 
 export function AddPromptForm({ project, sessionId, onAdded }: AddPromptFormProps) {
   const [expanded, setExpanded] = useState(false);
   const [text, setText] = useState('');
   const [submitting, setSubmitting] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -30,19 +33,21 @@ export function AddPromptForm({ project, sessionId, onAdded }: AddPromptFormProp
   function handleCancel() {
     setText('');
     setExpanded(false);
+    setActionError(null);
   }
 
   async function handleSubmit() {
     const trimmed = text.trim();
     if (!trimmed || submitting) return;
     setSubmitting(true);
+    setActionError(null);
     try {
       await api.addPrompt(project, sessionId, trimmed);
       setText('');
       setExpanded(false);
-      onAdded();
-    } catch {
-      // Keep form open so user can retry
+      await onAdded();
+    } catch (error) {
+      setActionError(toErrorMessage(error));
     } finally {
       setSubmitting(false);
     }
@@ -97,6 +102,7 @@ export function AddPromptForm({ project, sessionId, onAdded }: AddPromptFormProp
         aria-label="Prompt text"
         disabled={submitting}
       />
+      {actionError && <InlineAlert message={actionError} className="px-4 pt-2" />}
       <div className="flex items-center justify-end gap-2 px-4 pb-3">
         <button
           type="button"

package/src/components/InlineAlert.tsx

@@ -0,0 +1,16 @@
+interface InlineAlertProps {
+  message: string;
+  className?: string;
+}
+
+export function InlineAlert({ message, className = '' }: InlineAlertProps) {
+  return (
+    <p
+      role="alert"
+      aria-live="assertive"
+      className={['text-xs text-red-400', className].join(' ').trim()}
+    >
+      {message}
+    </p>
+  );
+}

package/src/components/ProjectDetail.tsx

@@ -1,42 +1,39 @@
 import { useState } from 'react';
 import { selectProject } from '../hooks/useQueue';
 import { api } from '../api/client';
-import type { ProjectView, SessionWithStatus } from '../types/queue';
+import type { ProjectView } from '../types/queue';
 import { SessionSection } from './SessionSection';
+import { InlineAlert } from './InlineAlert';
+import { toErrorMessage } from '../utils/errors';
 
 interface ProjectDetailProps {
   project: string;
   projects: ProjectView[];
   onProjectDeleted: () => void;
+  onMutate: () => void | Promise<void>;
 }
 
-function isVisible(session: SessionWithStatus): boolean {
-  if (session.status === 'active') return true;
-  return session.prompts.some(p => p.status === 'pending' || p.status === 'running');
-}
-
-export function ProjectDetail({ project, projects, onProjectDeleted }: ProjectDetailProps) {
+export function ProjectDetail({ project, projects, onProjectDeleted, onMutate }: ProjectDetailProps) {
   const projectView = selectProject(project, projects);
-  const [historyOpen, setHistoryOpen] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
 
   async function handleDeleteProject() {
     const confirmed = window.confirm(
       `Delete project "${project}"? This removes all sessions and prompts.`
     );
     if (!confirmed) return;
+    setActionError(null);
     try {
       await api.deleteProject(project);
       onProjectDeleted();
-    } catch {
-      // Silent fail
+      await onMutate();
+    } catch (error) {
+      setActionError(toErrorMessage(error));
     }
   }
 
   if (!projectView) return null;
 
-  const visibleSessions = projectView.sessions.filter(isVisible);
-  const historySessions = projectView.sessions.filter(s => !isVisible(s));
-
   return (
     <div className="flex flex-col h-full overflow-hidden">
       {/* Header */}
@@ -65,11 +62,12 @@ export function ProjectDetail({ project, projects, onProjectDeleted }: ProjectDe
             Delete Project
           </button>
         </div>
+        {actionError && <InlineAlert message={actionError} className="mt-3" />}
       </div>
 
       {/* Scrollable content */}
       <div className="flex-1 overflow-y-auto px-6 py-4 space-y-3">
-        {visibleSessions.length === 0 && historySessions.length === 0 && (
+        {projectView.sessions.length === 0 && (
           <div className="flex flex-col items-center gap-3 py-12 select-none opacity-40">
             <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" className="text-[var(--color-muted)]">
               <path d="M12 20h9" />
@@ -82,53 +80,16 @@ export function ProjectDetail({ project, projects, onProjectDeleted }: ProjectDe
           </div>
         )}
 
-        {visibleSessions.map(session => (
+        {projectView.sessions.map(session => (
           <SessionSection
             key={session.sessionId}
             session={session}
             project={project}
-            onMutate={() => {}}
+            onMutate={onMutate}
             defaultExpanded
           />
         ))}
 
-        {historySessions.length > 0 && (
-          <div className="pt-2">
-            <button
-              type="button"
-              onClick={() => setHistoryOpen(v => !v)}
-              className={[
-                'flex items-center gap-2 text-xs text-[var(--color-muted)] uppercase tracking-wider py-1 cursor-pointer',
-                'hover:text-[var(--color-text)] transition-colors duration-150 focus:outline-none',
-              ].join(' ')}
-              aria-expanded={historyOpen}
-            >
-              <span
-                className="inline-block transition-transform duration-200"
-                style={{ transform: historyOpen ? 'rotate(90deg)' : 'rotate(0deg)' }}
-                aria-hidden="true"
-              >
-                ▶
-              </span>
-              History ({historySessions.length} {historySessions.length === 1 ? 'session' : 'sessions'})
-            </button>
-
-            {historyOpen && (
-              <div className="mt-2 space-y-3">
-                {historySessions.map(session => (
-                  <SessionSection
-                    key={session.sessionId}
-                    session={session}
-                    project={project}
-                    onMutate={() => {}}
-                    defaultExpanded={false}
-                  />
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-
         <div className="h-4" aria-hidden="true" />
       </div>
     </div>

package/src/components/PromptCard.tsx

@@ -2,12 +2,14 @@ import { useState, useRef, useEffect } from 'react';
 import type { Prompt } from '../types/queue';
 import { api } from '../api/client';
 import { TrashIcon } from './TrashIcon';
+import { InlineAlert } from './InlineAlert';
+import { toErrorMessage } from '../utils/errors';
 
 interface PromptCardProps {
   prompt: Prompt;
   project: string;
   sessionId: string;
-  onMutate: () => void;
+  onMutate: () => void | Promise<void>;
   onDragStart?: (id: string) => void;
   onDragOver?: (id: string, position: 'before' | 'after') => void;
   onDragEnd?: () => void;
@@ -54,6 +56,7 @@ export function PromptCard({
   const [editing, setEditing] = useState(false);
   const [editText, setEditText] = useState(prompt.text);
   const [saving, setSaving] = useState(false);
+  const [actionError, setActionError] = useState<string | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const styles = STATUS_STYLES[prompt.status];
@@ -84,18 +87,20 @@ export function PromptCard({
   function handleEditCancel() {
     setEditText(prompt.text);
     setEditing(false);
+    setActionError(null);
   }
 
   async function handleEditSave() {
     const trimmed = editText.trim();
     if (!trimmed || saving) return;
     setSaving(true);
+    setActionError(null);
     try {
       await api.updatePrompt(project, sessionId, prompt.id, { text: trimmed });
       setEditing(false);
-      onMutate();
-    } catch {
-      // Keep edit open on error
+      await onMutate();
+    } catch (error) {
+      setActionError(toErrorMessage(error));
     } finally {
       setSaving(false);
     }
@@ -115,11 +120,12 @@ export function PromptCard({
     e.stopPropagation();
     const confirmed = window.confirm('Delete this prompt?');
     if (!confirmed) return;
+    setActionError(null);
     try {
       await api.deletePrompt(project, sessionId, prompt.id);
-      onMutate();
-    } catch {
-      // Silent fail
+      await onMutate();
+    } catch (error) {
+      setActionError(toErrorMessage(error));
     }
   }
 
@@ -278,6 +284,8 @@ export function PromptCard({
               {prompt.text}
             </p>
           )}
+
+          {actionError && <InlineAlert message={actionError} className="mt-2" />}
         </div>
       </div>
     </div>

package/src/components/SessionSection.tsx

@@ -1,48 +1,36 @@
 import { useState, useRef } from 'react';
 import { api } from '../api/client';
-import type { SessionWithStatus, SessionStatus, Prompt } from '../types/queue';
+import type { SessionWithStatus, Prompt } from '../types/queue';
 import { TrashIcon } from './TrashIcon';
 import { PromptCard } from './PromptCard';
 import { AddPromptForm } from './AddPromptForm';
+import { InlineAlert } from './InlineAlert';
+import { StatusDot } from './StatusDot';
+import { toErrorMessage } from '../utils/errors';
 
 interface SessionSectionProps {
   session: SessionWithStatus;
   project: string;
-  onMutate: () => void;
+  onMutate: () => void | Promise<void>;
   defaultExpanded?: boolean;
 }
 
-function StatusDot({ status }: { status: SessionStatus }) {
-  if (status === 'active') {
-    return (
-      <span
-        className="animate-pulse-dot inline-block w-2 h-2 rounded-full bg-[var(--color-active)] shrink-0"
-        aria-label="Active session"
-      />
-    );
-  }
-  return (
-    <span
-      className="inline-block w-2 h-2 rounded-full bg-[var(--color-idle)] shrink-0"
-      aria-label="Idle session"
-    />
-  );
-}
-
 export function SessionSection({ session, project, onMutate, defaultExpanded = true }: SessionSectionProps) {
   const [expanded, setExpanded] = useState(defaultExpanded);
   const [dragOver, setDragOver] = useState<{ id: string; position: 'before' | 'after' } | null>(null);
   const [draggingId, setDraggingId] = useState<string | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
   const dragSourceRef = useRef<string | null>(null);
 
   async function handleClearPrompts(e: React.MouseEvent) {
     e.stopPropagation();
     if (!window.confirm('Clear all prompts?')) return;
+    setActionError(null);
     try {
       await api.clearPrompts(project, session.sessionId);
-      onMutate();
-    } catch {
-      // Silent fail
+      await onMutate();
+    } catch (error) {
+      setActionError(toErrorMessage(error));
     }
   }
 
@@ -71,7 +59,7 @@ export function SessionSection({ session, project, onMutate, defaultExpanded = t
     dragSourceRef.current = null;
   }
 
-  function handleDrop(targetId: string) {
+  async function handleDrop(targetId: string) {
     const sourceId = dragSourceRef.current;
     const position = dragOver?.position ?? 'before';
     if (!sourceId || sourceId === targetId) {
@@ -95,7 +83,13 @@ export function SessionSection({ session, project, onMutate, defaultExpanded = t
 
     const newOrder = reordered.map(p => p.id);
     handleDragEnd();
-    api.reorderPrompts(project, session.sessionId, newOrder).then(onMutate).catch(() => {});
+    setActionError(null);
+    try {
+      await api.reorderPrompts(project, session.sessionId, newOrder);
+      await onMutate();
+    } catch (error) {
+      setActionError(toErrorMessage(error));
+    }
   }
 
   function renderPromptList(prompts: Prompt[], reorderable: boolean) {
@@ -168,6 +162,8 @@ export function SessionSection({ session, project, onMutate, defaultExpanded = t
       {/* Session content */}
       {expanded && (
         <div className="px-4 pb-4 space-y-2">
+          {actionError && <InlineAlert message={actionError} className="pt-2" />}
+
           {activePrompts.length === 0 && donePrompts.length === 0 && (
             <p className="text-xs text-[var(--color-muted)] py-2">No prompts yet</p>
           )}

package/src/components/Sidebar.tsx

@@ -1,4 +1,6 @@
+import { useMemo } from 'react';
 import type { ProjectView } from '../types/queue';
+import { StatusDot } from './StatusDot';
 
 interface SidebarProps {
   projects: ProjectView[];
@@ -18,32 +20,27 @@ function getPendingCount(project: ProjectView): number {
   );
 }
 
-function StatusDot({ status }: { status: 'active' | 'idle' | 'none' }) {
-  if (status === 'active') {
-    return (
-      <span
-        className="animate-pulse-dot inline-block w-2 h-2 rounded-full bg-[var(--color-active)] shrink-0"
-        aria-label="Active session"
-      />
-    );
-  }
-  if (status === 'idle') {
-    return (
-      <span
-        className="inline-block w-2 h-2 rounded-full bg-[var(--color-idle)] shrink-0"
-        aria-label="Idle session"
-      />
-    );
-  }
-  return (
-    <span
-      className="inline-block w-2 h-2 rounded-full bg-[var(--color-muted)] shrink-0"
-      aria-label="No session"
-    />
-  );
+function getProjectRank(project: ProjectView, pendingCount: number): number {
+  if (pendingCount > 0) return 0;
+  if (getSessionStatus(project) === 'active') return 1;
+  return 2;
 }
 
 export function Sidebar({ projects, selectedProject, onSelectProject }: SidebarProps) {
+  const pendingCounts = useMemo(
+    () => new Map(projects.map((project) => [project.project, getPendingCount(project)])),
+    [projects],
+  );
+
+  const sortedProjects = useMemo(
+    () => [...projects].sort((a, b) => {
+      const aPending = pendingCounts.get(a.project) ?? 0;
+      const bPending = pendingCounts.get(b.project) ?? 0;
+      return getProjectRank(a, aPending) - getProjectRank(b, bPending);
+    }),
+    [pendingCounts, projects],
+  );
+
   return (
     <aside
       className="flex flex-col w-[280px] shrink-0 h-full bg-[var(--color-surface)] border-r border-[var(--color-border)]"
@@ -65,16 +62,9 @@ export function Sidebar({ projects, selectedProject, onSelectProject }: SidebarP
           <p className="px-5 py-4 text-xs text-[var(--color-muted)]">No projects found.</p>
         )}
         <ul role="list">
-          {[...projects].sort((a, b) => {
-            const rank = (p: ProjectView) => {
-              if (getPendingCount(p) > 0) return 0;
-              if (getSessionStatus(p) === 'active') return 1;
-              return 2;
-            };
-            return rank(a) - rank(b);
-          }).map((project) => {
+          {sortedProjects.map((project) => {
             const status = getSessionStatus(project);
-            const pending = getPendingCount(project);
+            const pending = pendingCounts.get(project.project) ?? 0;
             const isSelected = project.project === selectedProject;
             const sessionCount = project.sessions.length;
 

package/src/components/StatusDot.tsx

@@ -0,0 +1,29 @@
+interface StatusDotProps {
+  status: 'active' | 'idle' | 'none';
+}
+
+const STATUS_PROPS: Record<StatusDotProps['status'], { className: string; label: string }> = {
+  active: {
+    className: 'animate-pulse-dot bg-[var(--color-active)]',
+    label: 'Active session',
+  },
+  idle: {
+    className: 'bg-[var(--color-idle)]',
+    label: 'Idle session',
+  },
+  none: {
+    className: 'bg-[var(--color-muted)]',
+    label: 'No session',
+  },
+};
+
+export function StatusDot({ status }: StatusDotProps) {
+  const dot = STATUS_PROPS[status];
+
+  return (
+    <span
+      className={['inline-block w-2 h-2 rounded-full shrink-0', dot.className].join(' ')}
+      aria-label={dot.label}
+    />
+  );
+}

package/src/hooks/useQueues.ts

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import type { ProjectView } from '../types/queue';
 import { api } from '../api/client';
 import { useSSE } from './useSSE';
+import { toErrorMessage } from '../utils/errors';
 
 const FALLBACK_POLL_MS = 2000;
 
@@ -25,7 +26,7 @@ export function useProjects() {
       setProjects(data);
       setError(null);
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Unknown error');
+      setError(toErrorMessage(err));
     } finally {
       setLoading(false);
     }
@@ -40,6 +41,7 @@ export function useProjects() {
       }
       return;
     }
+    void refresh();
     fallbackRef.current = setInterval(refresh, FALLBACK_POLL_MS);
     return () => {
       if (fallbackRef.current) {

package/src/hooks/useSSE.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
+import { useEffect, useEffectEvent, useState } from 'react';
 import type { ProjectView } from '../types/queue';
 
 interface UseSSEOptions {
@@ -7,16 +7,15 @@ interface UseSSEOptions {
 
 export function useSSE({ onProjects }: UseSSEOptions) {
   const [connected, setConnected] = useState(false);
-  const callbackRef = useRef(onProjects);
-  callbackRef.current = onProjects;
+  const handleProjects = useEffectEvent(onProjects);
 
-  const connect = useCallback(() => {
+  useEffect(() => {
     const es = new EventSource('/api/events');
 
     es.addEventListener('projects', (event: MessageEvent) => {
       try {
         const data = JSON.parse(event.data) as ProjectView[];
-        callbackRef.current(data);
+        handleProjects(data);
       } catch {
         // Ignore malformed events
       }
@@ -24,14 +23,8 @@ export function useSSE({ onProjects }: UseSSEOptions) {
 
     es.onopen = () => setConnected(true);
     es.onerror = () => setConnected(false);
-
-    return es;
-  }, []);
-
-  useEffect(() => {
-    const es = connect();
     return () => es.close();
-  }, [connect]);
+  }, []);
 
   return { connected };
 }

package/src/utils/errors.ts

@@ -0,0 +1,3 @@
+export function toErrorMessage(error: unknown, fallback = 'Something went wrong'): string {
+  return error instanceof Error && error.message ? error.message : fallback;
+}