@jxtools/promptline 1.0.0

package/src/hooks/useQueues.ts

@@ -0,0 +1,53 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { ProjectView } from '../types/queue';
+import { api } from '../api/client';
+import { useSSE } from './useSSE';
+
+const FALLBACK_POLL_MS = 2000;
+
+export function useProjects() {
+  const [projects, setProjects] = useState<ProjectView[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const fallbackRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const handleProjects = useCallback((data: ProjectView[]) => {
+    setProjects(data);
+    setError(null);
+    setLoading(false);
+  }, []);
+
+  const { connected } = useSSE({ onProjects: handleProjects });
+
+  const refresh = useCallback(async () => {
+    try {
+      const data = await api.listProjects();
+      setProjects(data);
+      setError(null);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Fallback polling when SSE is disconnected (also handles initial load if SSE is slow)
+  useEffect(() => {
+    if (connected) {
+      if (fallbackRef.current) {
+        clearInterval(fallbackRef.current);
+        fallbackRef.current = null;
+      }
+      return;
+    }
+    fallbackRef.current = setInterval(refresh, FALLBACK_POLL_MS);
+    return () => {
+      if (fallbackRef.current) {
+        clearInterval(fallbackRef.current);
+        fallbackRef.current = null;
+      }
+    };
+  }, [connected, refresh]);
+
+  return { projects, loading, error, refresh };
+}

package/src/hooks/useSSE.ts

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

package/src/index.css

@@ -0,0 +1,34 @@
+@import "tailwindcss";
+
+@theme {
+  --color-bg: #0a0a0f;
+  --color-surface: #111118;
+  --color-border: #1e1e2e;
+  --color-text: #e2e8f0;
+  --color-muted: #64748b;
+  --color-active: #4ade80;
+  --color-running: #a78bfa;
+  --color-pending: #60a5fa;
+  --color-idle: #f472b6;
+  --color-completed: #34d399;
+}
+
+html {
+  font-family: 'JetBrains Mono', monospace;
+}
+
+body {
+  margin: 0;
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+
+/* Pulsing animation for active status dots */
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.animate-pulse-dot {
+  animation: pulse-dot 2s ease-in-out infinite;
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/types/queue.ts

@@ -0,0 +1,33 @@
+export type PromptStatus = 'pending' | 'running' | 'completed';
+export type SessionStatus = 'active' | 'idle';
+export type QueueStatus = 'active' | 'completed' | 'empty';
+
+export interface Prompt {
+  id: string;
+  text: string;
+  status: PromptStatus;
+  createdAt: string;
+  completedAt: string | null;
+}
+
+export interface SessionQueue {
+  sessionId: string;
+  project: string;
+  directory: string;
+  sessionName: string | null;
+  prompts: Prompt[];
+  startedAt: string;
+  lastActivity: string;
+  currentPromptId: string | null;
+  completedAt: string | null;
+  closedAt: string | null;
+}
+
+export type SessionWithStatus = SessionQueue & { status: SessionStatus };
+
+export interface ProjectView {
+  project: string;
+  directory: string;
+  sessions: SessionWithStatus[];
+  queueStatus: QueueStatus;
+}

package/tsconfig.app.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"],
+  "exclude": ["src/backend"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts", "vite-plugin-api.ts", "src/backend/**/*.ts", "src/types/**/*.ts"]
+}

package/vite-plugin-api.ts

@@ -0,0 +1,307 @@
+import type { Plugin, Connect } from 'vite';
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import { mkdirSync, watch } from 'node:fs';
+import type { FSWatcher } from 'node:fs';
+import { join } from 'node:path';
+import { homedir } from 'node:os';
+import { v4 as uuidv4 } from 'uuid';
+import type { PromptStatus } from './src/types/queue.ts';
+import {
+  listProjects,
+  getProject,
+  deleteProject,
+  readSession,
+  writeSession,
+  withComputedStatus,
+  deleteSession,
+  addPrompt,
+  updatePrompt,
+  deletePrompt,
+  reorderPrompts,
+} from './src/backend/queue-store.ts';
+
+const QUEUES_DIR = join(homedir(), '.promptline', 'queues');
+
+function parseBody(req: IncomingMessage): Promise<Record<string, unknown>> {
+  return new Promise((resolve, reject) => {
+    let body = '';
+    req.on('data', (chunk: Buffer) => {
+      body += chunk.toString();
+    });
+    req.on('end', () => {
+      try {
+        resolve(body ? (JSON.parse(body) as Record<string, unknown>) : {});
+      } catch {
+        reject(new Error('Invalid JSON body'));
+      }
+    });
+    req.on('error', reject);
+  });
+}
+
+function json(res: ServerResponse, status: number, data: unknown): void {
+  res.writeHead(status, { 'Content-Type': 'application/json' });
+  res.end(JSON.stringify(data));
+}
+
+function jsonError(res: ServerResponse, status: number, message: string): void {
+  json(res, status, { error: message });
+}
+
+// --- SSE connection manager ---
+const sseClients = new Set<ServerResponse>();
+let fsWatcher: FSWatcher | null = null;
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+const DEBOUNCE_MS = 200;
+
+function broadcastProjects(): void {
+  const data = JSON.stringify(listProjects(QUEUES_DIR));
+  const message = `event: projects\ndata: ${data}\n\n`;
+  for (const client of sseClients) {
+    client.write(message);
+  }
+}
+
+function startWatcher(): void {
+  if (fsWatcher) return;
+  mkdirSync(QUEUES_DIR, { recursive: true });
+  try {
+    fsWatcher = watch(QUEUES_DIR, { recursive: true }, (_event, filename) => {
+      if (!filename || !filename.endsWith('.json')) return;
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(broadcastProjects, DEBOUNCE_MS);
+    });
+  } catch {
+    // fs.watch not supported — SSE will work but without auto-push
+  }
+}
+
+function stopWatcher(): void {
+  if (fsWatcher) {
+    fsWatcher.close();
+    fsWatcher = null;
+  }
+  if (debounceTimer) {
+    clearTimeout(debounceTimer);
+    debounceTimer = null;
+  }
+}
+
+const HEARTBEAT_MS = 25_000;
+
+function handleSSE(_req: IncomingMessage, res: ServerResponse): void {
+  res.writeHead(200, {
+    'Content-Type': 'text/event-stream',
+    'Cache-Control': 'no-cache',
+    'Connection': 'keep-alive',
+  });
+
+  // Send initial state
+  const data = JSON.stringify(listProjects(QUEUES_DIR));
+  res.write(`event: projects\ndata: ${data}\n\n`);
+
+  const heartbeat = setInterval(() => {
+    res.write(': heartbeat\n\n');
+  }, HEARTBEAT_MS);
+
+  sseClients.add(res);
+
+  res.on('close', () => {
+    clearInterval(heartbeat);
+    sseClients.delete(res);
+  });
+}
+
+export default function apiPlugin(): Plugin {
+  return {
+    name: 'promptline-api',
+    configureServer(server) {
+      startWatcher();
+
+      server.httpServer?.on('close', () => {
+        stopWatcher();
+        for (const client of sseClients) {
+          client.end();
+        }
+        sseClients.clear();
+      });
+
+      server.middlewares.use(((req: IncomingMessage, res: ServerResponse, next: Connect.NextFunction) => {
+        const url = req.url ?? '';
+        const method = req.method ?? 'GET';
+
+        if (!url.startsWith('/api/')) {
+          next();
+          return;
+        }
+
+        // SSE endpoint
+        if (url === '/api/events' && method === 'GET') {
+          handleSSE(req, res);
+          return;
+        }
+
+        handleApi(url, method, req, res).catch((err: unknown) => {
+          const message = err instanceof Error ? err.message : 'Internal server error';
+          jsonError(res, 500, message);
+        });
+      }) as Connect.NextHandleFunction);
+    },
+  };
+}
+
+async function handleApi(
+  url: string,
+  method: string,
+  req: IncomingMessage,
+  res: ServerResponse,
+): Promise<void> {
+  // Parse URL segments: /api/projects/:project/sessions/:sessionId/prompts/:promptId
+  const segments = url.replace(/^\/api\//, '').split('/').map(decodeURIComponent);
+
+  // GET /api/projects
+  if (segments[0] === 'projects' && segments.length === 1 && method === 'GET') {
+    return json(res, 200, listProjects(QUEUES_DIR));
+  }
+
+  // /api/projects/:project
+  if (segments[0] === 'projects' && segments.length === 2) {
+    const project = segments[1];
+
+    if (method === 'GET') {
+      const pv = getProject(QUEUES_DIR, project);
+      if (!pv) return jsonError(res, 404, `Project "${project}" not found`);
+      return json(res, 200, pv);
+    }
+
+    if (method === 'DELETE') {
+      try {
+        deleteProject(QUEUES_DIR, project);
+      } catch (err: unknown) {
+        if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+          return jsonError(res, 404, `Project "${project}" not found`);
+        }
+        throw err;
+      }
+      return json(res, 200, { deleted: project });
+    }
+
+    return jsonError(res, 405, `Method ${method} not allowed`);
+  }
+
+  // /api/projects/:project/sessions/:sessionId
+  if (segments[0] === 'projects' && segments[2] === 'sessions' && segments.length === 4) {
+    const project = segments[1];
+    const sessionId = segments[3];
+
+    if (method === 'GET') {
+      const session = readSession(QUEUES_DIR, project, sessionId);
+      if (!session) return jsonError(res, 404, 'Session not found');
+      return json(res, 200, withComputedStatus(session));
+    }
+
+    if (method === 'DELETE') {
+      try {
+        deleteSession(QUEUES_DIR, project, sessionId);
+      } catch (err: unknown) {
+        if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+          return jsonError(res, 404, 'Session not found');
+        }
+        throw err;
+      }
+      return json(res, 200, { deleted: sessionId });
+    }
+
+    return jsonError(res, 405, `Method ${method} not allowed`);
+  }
+
+  // /api/projects/:project/sessions/:sessionId/prompts/reorder
+  if (
+    segments[0] === 'projects' && segments[2] === 'sessions' &&
+    segments[4] === 'prompts' && segments[5] === 'reorder' &&
+    segments.length === 6 && method === 'PUT'
+  ) {
+    const project = segments[1];
+    const sessionId = segments[3];
+    const session = readSession(QUEUES_DIR, project, sessionId);
+    if (!session) return jsonError(res, 404, 'Session not found');
+
+    const body = await parseBody(req);
+    const order = body.order as string[] | undefined;
+    if (!Array.isArray(order)) {
+      return jsonError(res, 400, 'Field "order" (string[]) is required');
+    }
+
+    const error = reorderPrompts(session, order);
+    if (error) return jsonError(res, 400, error);
+
+    writeSession(QUEUES_DIR, project, session);
+    return json(res, 200, session);
+  }
+
+  // /api/projects/:project/sessions/:sessionId/prompts/:promptId
+  if (
+    segments[0] === 'projects' && segments[2] === 'sessions' &&
+    segments[4] === 'prompts' && segments.length === 6
+  ) {
+    const project = segments[1];
+    const sessionId = segments[3];
+    const promptId = segments[5];
+    const session = readSession(QUEUES_DIR, project, sessionId);
+    if (!session) return jsonError(res, 404, 'Session not found');
+
+    if (method === 'PATCH') {
+      const body = await parseBody(req);
+      const updates: { text?: string; status?: PromptStatus } = {};
+
+      if (body.text !== undefined) {
+        updates.text = body.text as string;
+      }
+      if (body.status !== undefined) {
+        const validStatuses: PromptStatus[] = ['pending', 'running', 'completed'];
+        if (!validStatuses.includes(body.status as PromptStatus)) {
+          return jsonError(res, 400, `Invalid status. Must be one of: ${validStatuses.join(', ')}`);
+        }
+        updates.status = body.status as PromptStatus;
+      }
+
+      const updated = updatePrompt(session, promptId, updates);
+      if (!updated) return jsonError(res, 404, `Prompt "${promptId}" not found`);
+
+      writeSession(QUEUES_DIR, project, session);
+      return json(res, 200, updated);
+    }
+
+    if (method === 'DELETE') {
+      const removed = deletePrompt(session, promptId);
+      if (!removed) return jsonError(res, 404, `Prompt "${promptId}" not found`);
+
+      writeSession(QUEUES_DIR, project, session);
+      return json(res, 200, removed);
+    }
+
+    return jsonError(res, 405, `Method ${method} not allowed`);
+  }
+
+  // /api/projects/:project/sessions/:sessionId/prompts
+  if (
+    segments[0] === 'projects' && segments[2] === 'sessions' &&
+    segments[4] === 'prompts' && segments.length === 5 && method === 'POST'
+  ) {
+    const project = segments[1];
+    const sessionId = segments[3];
+    const session = readSession(QUEUES_DIR, project, sessionId);
+    if (!session) return jsonError(res, 404, 'Session not found');
+
+    const body = await parseBody(req);
+    if (!body.text || typeof body.text !== 'string') {
+      return jsonError(res, 400, 'Field "text" (string) is required');
+    }
+
+    const prompt = addPrompt(session, uuidv4(), body.text as string);
+    writeSession(QUEUES_DIR, project, session);
+    return json(res, 201, prompt);
+  }
+
+  return jsonError(res, 404, 'Not found');
+}

package/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import apiPlugin from './vite-plugin-api.ts'
+
+const randomPort = 3000 + Math.floor(Math.random() * 7000);
+
+export default defineConfig({
+  plugins: [react(), tailwindcss(), apiPlugin()],
+  server: {
+    port: randomPort,
+    open: true,
+  },
+})