@jxtools/promptline 1.0.0

package/src/App.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { useProjects } from './hooks/useQueues';
+import { Sidebar } from './components/Sidebar';
+import { StatusBar } from './components/StatusBar';
+import { ProjectDetail } from './components/ProjectDetail';
+
+function App() {
+  const { projects, loading, error } = useProjects();
+  const [selectedProject, setSelectedProject] = useState<string | null>(null);
+
+  function handleProjectDeleted() {
+    setSelectedProject(null);
+  }
+
+  return (
+    <div className="flex flex-col h-screen overflow-hidden bg-[var(--color-bg)] text-[var(--color-text)] font-mono">
+      {/* Main area: sidebar + content */}
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar
+          projects={projects}
+          selectedProject={selectedProject}
+          onSelectProject={setSelectedProject}
+        />
+
+        {/* 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>
+            </div>
+          )}
+
+          {!loading && error && (
+            <div className="flex items-center justify-center h-full">
+              <p className="text-sm text-red-400">Error: {error}</p>
+            </div>
+          )}
+
+          {!loading && !error && !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" />
+                <rect x="14" y="3" width="7" height="7" rx="1" />
+                <rect x="3" y="14" width="7" height="7" rx="1" />
+                <rect x="14" y="14" width="7" height="7" rx="1" />
+              </svg>
+              <div className="text-center">
+                <p className="text-sm text-[var(--color-muted)] font-medium">No project selected</p>
+                <p className="text-xs text-[var(--color-muted)] mt-1">Pick one from the sidebar to view its prompt queue</p>
+              </div>
+            </div>
+          )}
+
+          {!loading && !error && selectedProject && (
+            <ProjectDetail
+              project={selectedProject}
+              projects={projects}
+              onProjectDeleted={handleProjectDeleted}
+            />
+          )}
+        </main>
+      </div>
+
+      {/* Status bar pinned at bottom */}
+      <StatusBar projects={projects} />
+    </div>
+  );
+}
+
+export default App;

package/src/api/client.ts

@@ -0,0 +1,55 @@
+import type { ProjectView, Prompt } from '../types/queue';
+
+const BASE = '/api';
+
+async function request<T>(url: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE}${url}`, {
+    headers: { 'Content-Type': 'application/json' },
+    ...options,
+  });
+  if (!res.ok) throw new Error(`API error: ${res.status}`);
+  return res.json();
+}
+
+function projectUrl(project: string): string {
+  return `/projects/${encodeURIComponent(project)}`;
+}
+
+function sessionUrl(project: string, sessionId: string): string {
+  return `${projectUrl(project)}/sessions/${encodeURIComponent(sessionId)}`;
+}
+
+export const api = {
+  listProjects: () => request<ProjectView[]>('/projects'),
+
+  getProject: (project: string) => request<ProjectView>(projectUrl(project)),
+
+  deleteProject: (project: string) =>
+    request<{ deleted: string }>(projectUrl(project), { method: 'DELETE' }),
+
+  deleteSession: (project: string, sessionId: string) =>
+    request<{ deleted: string }>(sessionUrl(project, sessionId), { method: 'DELETE' }),
+
+  addPrompt: (project: string, sessionId: string, text: string) =>
+    request<Prompt>(`${sessionUrl(project, sessionId)}/prompts`, {
+      method: 'POST',
+      body: JSON.stringify({ text }),
+    }),
+
+  updatePrompt: (project: string, sessionId: string, promptId: string, data: { text?: string }) =>
+    request<Prompt>(`${sessionUrl(project, sessionId)}/prompts/${encodeURIComponent(promptId)}`, {
+      method: 'PATCH',
+      body: JSON.stringify(data),
+    }),
+
+  deletePrompt: (project: string, sessionId: string, promptId: string) =>
+    request<Prompt>(`${sessionUrl(project, sessionId)}/prompts/${encodeURIComponent(promptId)}`, {
+      method: 'DELETE',
+    }),
+
+  reorderPrompts: (project: string, sessionId: string, order: string[]) =>
+    request<void>(`${sessionUrl(project, sessionId)}/prompts/reorder`, {
+      method: 'PUT',
+      body: JSON.stringify({ order }),
+    }),
+};

package/src/backend/queue-store.ts

@@ -0,0 +1,172 @@
+import { mkdirSync, readFileSync, writeFileSync, readdirSync, unlinkSync, renameSync, rmSync } from 'node:fs';
+import { join } from 'node:path';
+import type { SessionQueue, Prompt, PromptStatus, SessionStatus, QueueStatus, ProjectView, SessionWithStatus } from '../types/queue.ts';
+
+export const SESSION_ACTIVE_TIMEOUT_MS = 60_000;
+export const SESSION_VISIBLE_TIMEOUT_MS = 5 * SESSION_ACTIVE_TIMEOUT_MS;
+
+export function ensureProjectDir(queuesDir: string, project: string): void {
+  mkdirSync(join(queuesDir, project), { recursive: true });
+}
+
+export function sessionPath(queuesDir: string, project: string, sessionId: string): string {
+  return join(queuesDir, project, `${sessionId}.json`);
+}
+
+export function readSession(queuesDir: string, project: string, sessionId: string): SessionQueue | null {
+  try {
+    return JSON.parse(readFileSync(sessionPath(queuesDir, project, sessionId), 'utf-8')) as SessionQueue;
+  } catch {
+    return null;
+  }
+}
+
+export function writeSession(queuesDir: string, project: string, session: SessionQueue): void {
+  ensureProjectDir(queuesDir, project);
+  const filePath = sessionPath(queuesDir, project, session.sessionId);
+  const tmpPath = `${filePath}.tmp.${process.pid}`;
+  try {
+    writeFileSync(tmpPath, JSON.stringify(session, null, 2));
+    renameSync(tmpPath, filePath);
+  } catch (err) {
+    try { unlinkSync(tmpPath); } catch { /* ignore cleanup error */ }
+    throw err;
+  }
+}
+
+function msSinceLastActivity(session: SessionQueue, now: number = Date.now()): number {
+  return now - new Date(session.lastActivity).getTime();
+}
+
+function hasPendingWork(session: SessionQueue): boolean {
+  return session.prompts.some(p => p.status === 'pending' || p.status === 'running');
+}
+
+export function withComputedStatus(session: SessionQueue): SessionQueue & { status: SessionStatus } {
+  const hasRunningPrompt = session.prompts.some(p => p.status === 'running');
+  const isStale = msSinceLastActivity(session) > SESSION_ACTIVE_TIMEOUT_MS;
+  const status: SessionStatus = (hasRunningPrompt || !isStale) ? 'active' : 'idle';
+  return { ...session, status };
+}
+
+export function isSessionVisible(session: SessionQueue, now: number = Date.now()): boolean {
+  if (hasPendingWork(session)) return true;
+  if (session.closedAt != null) return false;
+  return msSinceLastActivity(session, now) <= SESSION_VISIBLE_TIMEOUT_MS;
+}
+
+export function loadProjectView(queuesDir: string, project: string): ProjectView | null {
+  const dirPath = join(queuesDir, project);
+  let files: string[];
+  try {
+    files = readdirSync(dirPath).filter(f => f.endsWith('.json'));
+  } catch {
+    return null;
+  }
+
+  const now = Date.now();
+
+  const sessions = files
+    .map(f => {
+      const sessionId = f.replace(/\.json$/, '');
+      const raw = readSession(queuesDir, project, sessionId);
+      return raw ? withComputedStatus(raw) : null;
+    })
+    .filter((s): s is NonNullable<typeof s> => s !== null)
+    .filter((s: SessionWithStatus) => isSessionVisible(s, now));
+
+  if (sessions.length === 0) return null;
+
+  const hasPrompts = sessions.some(s => s.prompts.length > 0);
+  const allCompleted = hasPrompts && sessions.every(s =>
+    s.prompts.length > 0 && s.prompts.every(p => p.status === 'completed')
+  );
+  const queueStatus: QueueStatus = allCompleted ? 'completed' : hasPrompts ? 'active' : 'empty';
+
+  return { project, directory: sessions[0].directory, sessions, queueStatus };
+}
+
+export function listProjects(queuesDir: string): ProjectView[] {
+  try {
+    return readdirSync(queuesDir, { withFileTypes: true })
+      .filter(d => d.isDirectory())
+      .map(dir => loadProjectView(queuesDir, dir.name))
+      .filter((p): p is NonNullable<typeof p> => p !== null);
+  } catch {
+    return [];
+  }
+}
+
+export function getProject(queuesDir: string, project: string): ProjectView | null {
+  return loadProjectView(queuesDir, project);
+}
+
+export function deleteProject(queuesDir: string, project: string): void {
+  rmSync(join(queuesDir, project), { recursive: true });
+}
+
+export function deleteSession(queuesDir: string, project: string, sessionId: string): void {
+  unlinkSync(sessionPath(queuesDir, project, sessionId));
+}
+
+export function addPrompt(session: SessionQueue, id: string, text: string): Prompt {
+  const prompt: Prompt = {
+    id,
+    text,
+    status: 'pending',
+    createdAt: new Date().toISOString(),
+    completedAt: null,
+  };
+  session.prompts.push(prompt);
+  return prompt;
+}
+
+export function updatePrompt(
+  session: SessionQueue,
+  promptId: string,
+  updates: { text?: string; status?: PromptStatus },
+): Prompt | null {
+  const idx = session.prompts.findIndex(p => p.id === promptId);
+  if (idx === -1) return null;
+
+  if (updates.text !== undefined) {
+    session.prompts[idx].text = updates.text;
+  }
+  if (updates.status !== undefined) {
+    session.prompts[idx].status = updates.status;
+    if (updates.status === 'completed') {
+      session.prompts[idx].completedAt = new Date().toISOString();
+    }
+  }
+
+  return session.prompts[idx];
+}
+
+export function deletePrompt(session: SessionQueue, promptId: string): Prompt | null {
+  const idx = session.prompts.findIndex(p => p.id === promptId);
+  if (idx === -1) return null;
+  return session.prompts.splice(idx, 1)[0];
+}
+
+export function reorderPrompts(session: SessionQueue, order: string[]): string | null {
+  const promptMap = new Map(session.prompts.map(p => [p.id, p]));
+  for (const id of order) {
+    if (!promptMap.has(id)) {
+      return `Prompt "${id}" not found`;
+    }
+  }
+
+  const reordered: Prompt[] = [];
+  for (const id of order) {
+    reordered.push(promptMap.get(id)!);
+  }
+  const orderSet = new Set(order);
+  for (const p of session.prompts) {
+    if (!orderSet.has(p.id)) {
+      reordered.push(p);
+    }
+  }
+
+  session.prompts = reordered;
+  return null;
+}

package/src/components/AddPromptForm.tsx

@@ -0,0 +1,131 @@
+import { useState, useRef, useEffect } from 'react';
+import { api } from '../api/client';
+
+interface AddPromptFormProps {
+  project: string;
+  sessionId: string;
+  onAdded: () => void;
+}
+
+export function AddPromptForm({ project, sessionId, onAdded }: AddPromptFormProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [text, setText] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (expanded && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [expanded]);
+
+  // Auto-expand textarea height
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, [text]);
+
+  function handleCancel() {
+    setText('');
+    setExpanded(false);
+  }
+
+  async function handleSubmit() {
+    const trimmed = text.trim();
+    if (!trimmed || submitting) return;
+    setSubmitting(true);
+    try {
+      await api.addPrompt(project, sessionId, trimmed);
+      setText('');
+      setExpanded(false);
+      onAdded();
+    } catch {
+      // Keep form open so user can retry
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+    if (e.key === 'Escape') {
+      handleCancel();
+    }
+  }
+
+  if (!expanded) {
+    return (
+      <button
+        type="button"
+        onClick={() => setExpanded(true)}
+        className={[
+          'w-full text-left text-xs text-[var(--color-muted)] px-4 py-2.5 cursor-pointer',
+          'border border-dashed border-[var(--color-border)] rounded-lg',
+          'hover:border-[var(--color-active)]/40 hover:text-[var(--color-active)] hover:bg-[var(--color-active)]/5',
+          'transition-all duration-150 focus:outline-none focus:ring-1 focus:ring-[var(--color-active)]/30',
+        ].join(' ')}
+        aria-label="Add a new prompt"
+      >
+        + Add Prompt
+      </button>
+    );
+  }
+
+  return (
+    <div
+      className="border border-[var(--color-active)]/30 rounded-lg bg-[var(--color-active)]/5 overflow-hidden"
+      role="form"
+      aria-label="Add prompt form"
+    >
+      <textarea
+        ref={textareaRef}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        rows={2}
+        placeholder="Type your prompt... (Enter to submit, Shift+Enter for newline)"
+        className={[
+          'w-full bg-transparent text-sm text-[var(--color-text)] placeholder:text-[var(--color-muted)]/60',
+          'px-4 pt-3 pb-2 resize-none outline-none leading-relaxed',
+          'min-h-[3.5rem]',
+        ].join(' ')}
+        aria-label="Prompt text"
+        disabled={submitting}
+      />
+      <div className="flex items-center justify-end gap-2 px-4 pb-3">
+        <button
+          type="button"
+          onClick={handleCancel}
+          disabled={submitting}
+          className={[
+            'text-xs px-3 py-1.5 rounded border border-[var(--color-border)] text-[var(--color-muted)] cursor-pointer',
+            'hover:border-white/20 hover:text-[var(--color-text)] transition-all duration-150',
+            'focus:outline-none focus:ring-1 focus:ring-white/20',
+            'disabled:opacity-40 disabled:cursor-not-allowed',
+          ].join(' ')}
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={handleSubmit}
+          disabled={!text.trim() || submitting}
+          className={[
+            'text-xs px-3 py-1.5 rounded font-medium transition-all duration-150 cursor-pointer',
+            'bg-[var(--color-active)]/15 text-[var(--color-active)] border border-[var(--color-active)]/30',
+            'hover:bg-[var(--color-active)]/25 hover:border-[var(--color-active)]/50',
+            'focus:outline-none focus:ring-1 focus:ring-[var(--color-active)]/50',
+            'disabled:opacity-40 disabled:cursor-not-allowed',
+          ].join(' ')}
+        >
+          {submitting ? 'Adding...' : 'Add'}
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/ProjectDetail.tsx

@@ -0,0 +1,136 @@
+import { useState } from 'react';
+import { selectProject } from '../hooks/useQueue';
+import { api } from '../api/client';
+import type { ProjectView, SessionWithStatus } from '../types/queue';
+import { SessionSection } from './SessionSection';
+
+interface ProjectDetailProps {
+  project: string;
+  projects: ProjectView[];
+  onProjectDeleted: () => 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) {
+  const projectView = selectProject(project, projects);
+  const [historyOpen, setHistoryOpen] = useState(false);
+
+  async function handleDeleteProject() {
+    const confirmed = window.confirm(
+      `Delete project "${project}"? This removes all sessions and prompts.`
+    );
+    if (!confirmed) return;
+    try {
+      await api.deleteProject(project);
+      onProjectDeleted();
+    } catch {
+      // Silent fail
+    }
+  }
+
+  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 */}
+      <div className="shrink-0 px-6 pt-6 pb-4 border-b border-[var(--color-border)] bg-[var(--color-surface)]">
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0">
+            <h2 className="text-lg font-bold text-[var(--color-text)] truncate leading-tight">
+              {projectView.project}
+            </h2>
+            <p className="text-xs text-[var(--color-muted)] mt-0.5 truncate font-mono">
+              {projectView.directory}
+            </p>
+          </div>
+
+          <button
+            type="button"
+            onClick={handleDeleteProject}
+            className={[
+              'shrink-0 text-xs px-3 py-1.5 rounded border transition-all duration-150 cursor-pointer',
+              'border-red-900/40 text-red-500/60',
+              'hover:border-red-500/60 hover:text-red-400 hover:bg-red-500/5',
+              'focus:outline-none focus:ring-1 focus:ring-red-500/30',
+            ].join(' ')}
+            aria-label={`Delete project ${projectView.project}`}
+          >
+            Delete Project
+          </button>
+        </div>
+      </div>
+
+      {/* Scrollable content */}
+      <div className="flex-1 overflow-y-auto px-6 py-4 space-y-3">
+        {visibleSessions.length === 0 && historySessions.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" />
+              <path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+            </svg>
+            <div className="text-center">
+              <p className="text-sm text-[var(--color-muted)] font-medium">No sessions yet</p>
+              <p className="text-xs text-[var(--color-muted)] mt-1">Start a Claude Code session in this project to begin</p>
+            </div>
+          </div>
+        )}
+
+        {visibleSessions.map(session => (
+          <SessionSection
+            key={session.sessionId}
+            session={session}
+            project={project}
+            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>
+  );
+}