@jxtools/promptline 1.0.0

package/src/components/PromptCard.tsx

@@ -0,0 +1,279 @@
+import { useState, useRef, useEffect } from 'react';
+import type { Prompt } from '../types/queue';
+import { api } from '../api/client';
+
+interface PromptCardProps {
+  prompt: Prompt;
+  project: string;
+  sessionId: string;
+  onMutate: () => void;
+  onDragStart?: (id: string) => void;
+  onDragOver?: (id: string, position: 'before' | 'after') => void;
+  onDragEnd?: () => void;
+  onDrop?: (targetId: string) => void;
+  dropPosition?: 'before' | 'after' | null;
+  isDragging?: boolean;
+}
+
+const STATUS_STYLES: Record<Prompt['status'], { color: string; badge: string; label: string }> = {
+  running: {
+    color: 'var(--color-running)',
+    badge: 'bg-[var(--color-running)]/15 text-[var(--color-running)]',
+    label: 'running',
+  },
+  pending: {
+    color: 'var(--color-pending)',
+    badge: 'bg-[var(--color-pending)]/15 text-[var(--color-pending)]',
+    label: 'pending',
+  },
+  completed: {
+    color: 'var(--color-completed)',
+    badge: 'bg-[var(--color-completed)]/15 text-[var(--color-completed)]',
+    label: 'completed',
+  },
+};
+
+export function PromptCard({
+  prompt,
+  project,
+  sessionId,
+  onMutate,
+  onDragStart,
+  onDragOver,
+  onDragEnd,
+  onDrop,
+  dropPosition = null,
+  isDragging = false,
+}: PromptCardProps) {
+  const [editing, setEditing] = useState(false);
+  const [editText, setEditText] = useState(prompt.text);
+  const [saving, setSaving] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const styles = STATUS_STYLES[prompt.status];
+  const isCompleted = prompt.status === 'completed';
+  const isPending = prompt.status === 'pending';
+  const isRunning = prompt.status === 'running';
+
+  useEffect(() => {
+    if (editing && textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.select();
+    }
+  }, [editing]);
+
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, [editText]);
+
+  function handleEditStart() {
+    if (!isPending || editing) return;
+    setEditText(prompt.text);
+    setEditing(true);
+  }
+
+  function handleEditCancel() {
+    setEditText(prompt.text);
+    setEditing(false);
+  }
+
+  async function handleEditSave() {
+    const trimmed = editText.trim();
+    if (!trimmed || saving) return;
+    setSaving(true);
+    try {
+      await api.updatePrompt(project, sessionId, prompt.id, { text: trimmed });
+      setEditing(false);
+      onMutate();
+    } catch {
+      // Keep edit open on error
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function handleEditKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleEditSave();
+    }
+    if (e.key === 'Escape') {
+      handleEditCancel();
+    }
+  }
+
+  async function handleDelete(e: React.MouseEvent) {
+    e.stopPropagation();
+    const confirmed = window.confirm('Delete this prompt?');
+    if (!confirmed) return;
+    try {
+      await api.deletePrompt(project, sessionId, prompt.id);
+      onMutate();
+    } catch {
+      // Silent fail
+    }
+  }
+
+  function handleCardClick() {
+    if (!editing && isPending) {
+      handleEditStart();
+    }
+  }
+
+  return (
+    <div
+      className="relative group transition-all duration-150"
+      draggable={isPending && !editing}
+      onDragStart={isPending && !editing ? (e) => {
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', prompt.id);
+        onDragStart?.(prompt.id);
+      } : undefined}
+      onDragOver={isPending ? (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        const rect = e.currentTarget.getBoundingClientRect();
+        const midY = rect.top + rect.height / 2;
+        onDragOver?.(prompt.id, e.clientY < midY ? 'before' : 'after');
+      } : undefined}
+      onDrop={isPending ? (e) => {
+        e.preventDefault();
+        onDrop?.(prompt.id);
+      } : undefined}
+      onDragEnd={onDragEnd}
+      aria-label={`Prompt: ${prompt.text.slice(0, 50)}`}
+    >
+      {/* Drop indicator — top */}
+      {dropPosition === 'before' && (
+        <div
+          className="absolute top-0 left-2 right-2 h-0.5 rounded-full bg-[var(--color-active)] shadow-[0_0_6px_var(--color-active)]"
+          aria-hidden="true"
+        />
+      )}
+      {/* Drop indicator — bottom */}
+      {dropPosition === 'after' && (
+        <div
+          className="absolute bottom-0 left-2 right-2 h-0.5 rounded-full bg-[var(--color-active)] shadow-[0_0_6px_var(--color-active)]"
+          aria-hidden="true"
+        />
+      )}
+
+      <div
+        onClick={handleCardClick}
+        className={[
+          'flex gap-0 bg-white/5 backdrop-blur-sm border border-white/10 rounded-lg overflow-hidden',
+          'transition-all duration-150',
+          isCompleted ? 'opacity-60' : '',
+          isPending && !editing ? 'cursor-pointer hover:border-white/20 hover:bg-white/8' : '',
+          isRunning ? 'border-l-0' : '',
+          isDragging ? 'opacity-40 scale-[0.98]' : '',
+        ].join(' ')}
+      >
+        {/* Left color border */}
+        <div
+          className={['w-1 shrink-0', isRunning ? 'animate-pulse-dot' : ''].join(' ')}
+          style={{ background: styles.color }}
+          aria-hidden="true"
+        />
+
+        {/* Drag handle — only for pending */}
+        {isPending && !editing && (
+          <div className="flex items-center px-2 shrink-0 cursor-grab active:cursor-grabbing">
+            <span
+              className="text-[var(--color-muted)]/50 text-sm select-none"
+              aria-hidden="true"
+              title="Drag to reorder"
+            >
+              ⠿
+            </span>
+          </div>
+        )}
+
+        {/* Card body */}
+        <div className="flex-1 px-3 py-3 min-w-0">
+          {/* Top row: status badge + actions */}
+          <div className="flex items-start justify-between gap-2 mb-2">
+            <span
+              className={[
+                'inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium leading-none',
+                styles.badge,
+              ].join(' ')}
+              aria-label={`Status: ${styles.label}`}
+            >
+              {styles.label}
+            </span>
+
+            {/* Action buttons */}
+            {!editing && !isRunning && (
+              <button
+                type="button"
+                onClick={handleDelete}
+                className={[
+                  'text-xs px-1.5 py-0.5 rounded text-[var(--color-muted)] cursor-pointer opacity-0 group-hover:opacity-100',
+                  'hover:text-red-400 hover:bg-red-400/10',
+                  'transition-all duration-100 focus:outline-none',
+                ].join(' ')}
+                aria-label="Delete prompt"
+              >
+                ✕
+              </button>
+            )}
+          </div>
+
+          {/* Prompt text or edit textarea */}
+          {editing ? (
+            <div className="space-y-2" onClick={(e) => e.stopPropagation()}>
+              <textarea
+                ref={textareaRef}
+                value={editText}
+                onChange={(e) => setEditText(e.target.value)}
+                onKeyDown={handleEditKeyDown}
+                className={[
+                  'w-full bg-transparent text-sm text-[var(--color-text)] leading-relaxed resize-none',
+                  'outline-none border-b border-[var(--color-active)]/30 pb-1',
+                  'placeholder:text-[var(--color-muted)]/60',
+                ].join(' ')}
+                aria-label="Edit prompt text"
+                disabled={saving}
+              />
+              <div className="flex items-center justify-end gap-2">
+                <button
+                  type="button"
+                  onClick={handleEditCancel}
+                  disabled={saving}
+                  className={[
+                    'text-xs px-2.5 py-1 rounded border border-[var(--color-border)] text-[var(--color-muted)] cursor-pointer',
+                    'hover:text-[var(--color-text)] hover:border-white/20 transition-all duration-150',
+                    'focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed',
+                  ].join(' ')}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  onClick={handleEditSave}
+                  disabled={!editText.trim() || saving}
+                  className={[
+                    'text-xs px-2.5 py-1 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 focus:outline-none',
+                    'disabled:opacity-40 disabled:cursor-not-allowed',
+                  ].join(' ')}
+                >
+                  {saving ? 'Saving...' : 'Save'}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <p className="text-sm text-[var(--color-text)] leading-relaxed whitespace-pre-wrap break-words">
+              {prompt.text}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/SessionSection.tsx

@@ -0,0 +1,164 @@
+import { useState, useRef } from 'react';
+import { api } from '../api/client';
+import type { SessionWithStatus, SessionStatus, Prompt } from '../types/queue';
+import { PromptCard } from './PromptCard';
+import { AddPromptForm } from './AddPromptForm';
+
+interface SessionSectionProps {
+  session: SessionWithStatus;
+  project: string;
+  onMutate: () => 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 dragSourceRef = useRef<string | null>(null);
+
+  const activePrompts = session.prompts.filter(p => p.status !== 'completed');
+  const completedPrompts = session.prompts.filter(p => p.status === 'completed').reverse();
+  const pendingCount = session.prompts.filter(p => p.status === 'pending').length;
+
+  const displayName = session.sessionName || '(session)';
+
+  function handleDragStart(id: string) {
+    dragSourceRef.current = id;
+    setDraggingId(id);
+  }
+
+  function handleDragOver(id: string, position: 'before' | 'after') {
+    if (!dragSourceRef.current || dragSourceRef.current === id) return;
+    setDragOver(prev => {
+      if (prev?.id === id && prev?.position === position) return prev;
+      return { id, position };
+    });
+  }
+
+  function handleDragEnd() {
+    setDragOver(null);
+    setDraggingId(null);
+    dragSourceRef.current = null;
+  }
+
+  function handleDrop(targetId: string) {
+    const sourceId = dragSourceRef.current;
+    const position = dragOver?.position ?? 'before';
+    if (!sourceId || sourceId === targetId) {
+      handleDragEnd();
+      return;
+    }
+
+    const pendingPrompts = session.prompts.filter(p => p.status === 'pending');
+    const sourceIndex = pendingPrompts.findIndex(p => p.id === sourceId);
+    const targetIndex = pendingPrompts.findIndex(p => p.id === targetId);
+    if (sourceIndex === -1 || targetIndex === -1) {
+      handleDragEnd();
+      return;
+    }
+
+    const reordered = [...pendingPrompts];
+    const [moved] = reordered.splice(sourceIndex, 1);
+    const adjustedTarget = sourceIndex < targetIndex ? targetIndex - 1 : targetIndex;
+    const insertAt = position === 'after' ? adjustedTarget + 1 : adjustedTarget;
+    reordered.splice(insertAt, 0, moved);
+
+    const newOrder = reordered.map(p => p.id);
+    handleDragEnd();
+    api.reorderPrompts(project, session.sessionId, newOrder).then(onMutate).catch(() => {});
+  }
+
+  function renderPromptList(prompts: Prompt[], reorderable: boolean) {
+    return prompts.map(prompt => (
+      <PromptCard
+        key={prompt.id}
+        prompt={prompt}
+        project={project}
+        sessionId={session.sessionId}
+        onMutate={onMutate}
+        onDragStart={reorderable ? handleDragStart : undefined}
+        onDragOver={reorderable ? handleDragOver : undefined}
+        onDragEnd={reorderable ? handleDragEnd : undefined}
+        onDrop={reorderable ? handleDrop : undefined}
+        dropPosition={dragOver?.id === prompt.id ? dragOver.position : null}
+        isDragging={draggingId === prompt.id}
+      />
+    ));
+  }
+
+  return (
+    <div className="border border-[var(--color-border)] rounded-lg overflow-hidden bg-white/[0.02]">
+      {/* Session header */}
+      <button
+        type="button"
+        onClick={() => setExpanded(v => !v)}
+        className={[
+          'w-full flex items-center gap-3 px-4 py-3 text-left cursor-pointer',
+          'hover:bg-white/5 transition-colors duration-150 focus:outline-none',
+        ].join(' ')}
+        aria-expanded={expanded}
+      >
+        <StatusDot status={session.status} />
+        <span className={[
+          'flex-1 text-sm truncate leading-tight',
+          session.sessionName ? 'text-[var(--color-text)]' : 'text-[var(--color-muted)] italic',
+        ].join(' ')}>
+          {displayName}
+        </span>
+        {pendingCount > 0 && (
+          <span className="text-[10px] px-1.5 py-0.5 rounded font-medium bg-[var(--color-pending)]/15 text-[var(--color-pending)] leading-none">
+            {pendingCount} queued
+          </span>
+        )}
+        <span
+          className="text-[var(--color-muted)] text-xs transition-transform duration-200"
+          style={{ transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)' }}
+          aria-hidden="true"
+        >
+          ▶
+        </span>
+      </button>
+
+      {/* Session content */}
+      {expanded && (
+        <div className="px-4 pb-4 space-y-2">
+          {activePrompts.length === 0 && completedPrompts.length === 0 && (
+            <p className="text-xs text-[var(--color-muted)] py-2">No prompts yet</p>
+          )}
+
+          {activePrompts.length > 0 && (
+            <div className="space-y-2" role="list" aria-label="Active prompts">
+              {renderPromptList(activePrompts, true)}
+            </div>
+          )}
+
+          <AddPromptForm project={project} sessionId={session.sessionId} onAdded={onMutate} />
+
+          {completedPrompts.length > 0 && (
+            <div className="pt-1 space-y-2 opacity-60" role="list" aria-label="Completed prompts">
+              {renderPromptList(completedPrompts, false)}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/Sidebar.tsx

@@ -0,0 +1,127 @@
+import type { ProjectView } from '../types/queue';
+
+interface SidebarProps {
+  projects: ProjectView[];
+  selectedProject: string | null;
+  onSelectProject: (name: string) => void;
+}
+
+function getSessionStatus(project: ProjectView): 'active' | 'idle' | 'none' {
+  if (project.sessions.length === 0) return 'none';
+  return project.sessions.some(s => s.status === 'active') ? 'active' : 'idle';
+}
+
+function getPendingCount(project: ProjectView): number {
+  return project.sessions.reduce(
+    (sum, s) => sum + s.prompts.filter(p => p.status === 'pending').length,
+    0,
+  );
+}
+
+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"
+    />
+  );
+}
+
+export function Sidebar({ projects, selectedProject, onSelectProject }: SidebarProps) {
+  return (
+    <aside
+      className="flex flex-col w-[280px] shrink-0 h-full bg-[var(--color-surface)] border-r border-[var(--color-border)]"
+      aria-label="Project navigation"
+    >
+      {/* Header */}
+      <div className="px-5 py-4 border-b border-[var(--color-border)]">
+        <h1
+          className="text-base font-bold tracking-widest uppercase text-[var(--color-active)]"
+          style={{ textShadow: '0 0 12px rgba(74, 222, 128, 0.4)' }}
+        >
+          PromptLine
+        </h1>
+      </div>
+
+      {/* Project list */}
+      <nav className="flex-1 overflow-y-auto py-2" aria-label="Projects">
+        {projects.length === 0 && (
+          <p className="px-5 py-4 text-xs text-[var(--color-muted)]">No projects found.</p>
+        )}
+        <ul role="list">
+          {projects.map((project) => {
+            const status = getSessionStatus(project);
+            const pending = getPendingCount(project);
+            const isSelected = project.project === selectedProject;
+            const sessionCount = project.sessions.length;
+
+            return (
+              <li key={project.project} role="listitem">
+                <button
+                  type="button"
+                  onClick={() => onSelectProject(project.project)}
+                  aria-current={isSelected ? 'page' : undefined}
+                  className={[
+                    'w-full text-left px-5 py-3 flex items-start gap-3 transition-colors duration-150 cursor-pointer',
+                    'border-l-2',
+                    isSelected
+                      ? 'border-[var(--color-running)] bg-[var(--color-border)]'
+                      : 'border-transparent hover:bg-white/5',
+                  ].join(' ')}
+                >
+                  <span className="mt-[3px]">
+                    <StatusDot status={status} />
+                  </span>
+
+                  <span className="flex flex-col gap-0.5 min-w-0">
+                    <span className="text-sm font-bold leading-tight truncate text-[var(--color-text)]">
+                      {project.project}
+                    </span>
+
+                    <span className="text-xs text-[var(--color-muted)] truncate leading-tight">
+                      {project.directory}
+                    </span>
+
+                    <span className="flex items-center gap-2 mt-1">
+                      {project.queueStatus === 'completed' && (
+                        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-[var(--color-active)]/15 text-[var(--color-active)] leading-none">
+                          completed
+                        </span>
+                      )}
+                      {pending > 0 && (
+                        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-[var(--color-pending)]/15 text-[var(--color-pending)] leading-none">
+                          {pending} queued
+                        </span>
+                      )}
+                      {sessionCount > 1 && (
+                        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-white/10 text-[var(--color-muted)] leading-none">
+                          {sessionCount} sessions
+                        </span>
+                      )}
+                    </span>
+                  </span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+    </aside>
+  );
+}

package/src/components/StatusBar.tsx

@@ -0,0 +1,71 @@
+import type { ProjectView } from '../types/queue';
+
+interface StatusBarProps {
+  projects: ProjectView[];
+}
+
+interface AggregateStats {
+  activeSessions: number;
+  queued: number;
+  completed: number;
+}
+
+function computeStats(projects: ProjectView[]): AggregateStats {
+  let activeSessions = 0;
+  let queued = 0;
+  let completed = 0;
+
+  for (const project of projects) {
+    for (const session of project.sessions) {
+      if (session.status === 'active') activeSessions += 1;
+      for (const prompt of session.prompts) {
+        if (prompt.status === 'pending') queued += 1;
+        if (prompt.status === 'completed') completed += 1;
+      }
+    }
+  }
+
+  return { activeSessions, queued, completed };
+}
+
+interface StatSegmentProps {
+  value: number;
+  label: string;
+  color: string;
+}
+
+function StatSegment({ value, label, color }: StatSegmentProps) {
+  return (
+    <span className="flex items-center gap-1.5">
+      <span className="font-bold" style={{ color }}>
+        {value}
+      </span>
+      <span className="text-[var(--color-muted)]">{label}</span>
+    </span>
+  );
+}
+
+export function StatusBar({ projects }: StatusBarProps) {
+  const { activeSessions, queued, completed } = computeStats(projects);
+
+  return (
+    <footer
+      className="flex items-center gap-4 px-5 h-8 shrink-0 bg-[var(--color-surface)] border-t border-[var(--color-border)]"
+      aria-label="Status bar"
+    >
+      <StatSegment value={activeSessions} label="active" color="var(--color-active)" />
+
+      <span className="text-[var(--color-border)] select-none" aria-hidden="true">
+        ·
+      </span>
+
+      <StatSegment value={queued} label="queued" color="var(--color-pending)" />
+
+      <span className="text-[var(--color-border)] select-none" aria-hidden="true">
+        ·
+      </span>
+
+      <StatSegment value={completed} label="completed" color="var(--color-completed)" />
+    </footer>
+  );
+}

package/src/hooks/useQueue.ts

@@ -0,0 +1,6 @@
+import type { ProjectView } from '../types/queue';
+
+export function selectProject(project: string | null, projects: ProjectView[]): ProjectView | null {
+  if (!project) return null;
+  return projects.find(p => p.project === project) ?? null;
+}