@rsktash/beads-ui 0.1.0

package/client/src/components/SearchDialog.tsx

@@ -0,0 +1,137 @@
+import { useState, useEffect, useRef } from "react";
+import { useSubscription } from "../hooks/use-subscription";
+import { useSearch } from "../hooks/use-search";
+import { StatusBadge } from "./StatusBadge";
+import { PriorityBadge } from "./PriorityBadge";
+
+export function SearchDialog() {
+  const [open, setOpen] = useState(false);
+  const { issues } = useSubscription("all-issues");
+  const { query, setQuery, results } = useSearch(issues);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Cmd+K to open, Escape to close
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (e.key === "k" && (e.metaKey || e.ctrlKey) && tag !== "TEXTAREA") {
+        e.preventDefault();
+        setOpen(true);
+      }
+      if (e.key === "Escape" && open) {
+        e.preventDefault();
+        setOpen(false);
+        setQuery("");
+        setSelectedIndex(0);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, setQuery]);
+
+  // Focus input when opened
+  useEffect(() => {
+    if (open) setTimeout(() => inputRef.current?.focus(), 0);
+  }, [open]);
+
+  // Reset selection when results change
+  useEffect(() => setSelectedIndex(0), [results]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    const shown = results.slice(0, 20);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIndex((i) => Math.min(i + 1, shown.length - 1));
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIndex((i) => Math.max(i - 1, 0));
+    }
+    if (e.key === "Enter" && shown[selectedIndex]) {
+      window.location.hash = `#/detail/${shown[selectedIndex].id}`;
+      setOpen(false);
+      setQuery("");
+    }
+  };
+
+  if (!open) return null;
+
+  const shown = results.slice(0, 20);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]"
+      onClick={() => {
+        setOpen(false);
+        setQuery("");
+      }}
+    >
+      <div className="absolute inset-0" style={{ background: "var(--bg-overlay)" }} />
+      <div
+        className="relative w-full max-w-lg overflow-hidden"
+        style={{
+          background: "var(--bg-elevated)",
+          borderRadius: "var(--radius-lg)",
+          border: "1px solid var(--border-subtle)",
+          boxShadow: "0 25px 50px -12px rgba(0,0,0,0.15)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Search issues..."
+          className="w-full px-4 py-3 text-sm outline-none"
+          style={{
+            borderBottom: "1px solid var(--border-subtle)",
+            background: "transparent",
+            color: "var(--text-primary)",
+          }}
+        />
+        <div className="max-h-80 overflow-y-auto">
+          {shown.length === 0 && query && (
+            <div className="px-4 py-6 text-sm text-center" style={{ color: "var(--text-tertiary)" }}>
+              No results
+            </div>
+          )}
+          {shown.map((issue, i) => (
+            <button
+              key={issue.id}
+              onClick={() => {
+                window.location.hash = `#/detail/${issue.id}`;
+                setOpen(false);
+                setQuery("");
+              }}
+              className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-left transition-colors"
+              style={{
+                background: i === selectedIndex ? "var(--bg-hover)" : "transparent",
+              }}
+              onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}
+              onMouseLeave={(e) => { e.currentTarget.style.background = i === selectedIndex ? "var(--bg-hover)" : "transparent"; }}
+            >
+              <span className="font-mono text-xs w-28 shrink-0" style={{ color: "var(--text-tertiary)" }}>
+                {issue.id}
+              </span>
+              <StatusBadge status={issue.status} />
+              <span className="flex-1 truncate" style={{ color: "var(--text-primary)" }}>{issue.title}</span>
+              <PriorityBadge priority={issue.priority} />
+            </button>
+          ))}
+        </div>
+        <div
+          className="px-4 py-2 text-xs"
+          style={{
+            color: "var(--text-tertiary)",
+            borderTop: "1px solid var(--border-subtle)",
+          }}
+        >
+          &uarr;&darr; navigate &middot; &crarr; open &middot; esc close
+        </div>
+      </div>
+    </div>
+  );
+}

package/client/src/components/SectionEditor.tsx

@@ -0,0 +1,212 @@
+import { useState, useCallback, useEffect } from "react";
+import { Markdown } from "./Markdown";
+
+interface SectionEditorProps {
+  label: string;
+  value: string;
+  placeholder?: string;
+  onSave: (value: string) => Promise<unknown>;
+}
+
+export function SectionEditor({
+  label,
+  value,
+  placeholder,
+  onSave,
+}: SectionEditorProps) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const [tab, setTab] = useState<"edit" | "preview">("edit");
+  const [saving, setSaving] = useState(false);
+
+  // Sync draft with external value when not editing
+  useEffect(() => {
+    if (!editing) setDraft(value);
+  }, [value, editing]);
+
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    try {
+      await onSave(draft);
+      setEditing(false);
+      setTab("edit");
+    } finally {
+      setSaving(false);
+    }
+  }, [draft, onSave]);
+
+  const handleCancel = useCallback(() => {
+    setDraft(value);
+    setEditing(false);
+    setTab("edit");
+  }, [value]);
+
+  const handleEditorKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        handleSave();
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleCancel();
+      }
+    },
+    [handleSave, handleCancel],
+  );
+
+  if (!editing) {
+    return (
+      <div
+        className="group rounded-lg p-4"
+        style={{
+          background: "var(--bg-elevated)",
+          border: "1px solid var(--border-subtle)",
+          boxShadow: "var(--shadow-card)",
+        }}
+      >
+        <div className="flex items-center justify-between mb-2">
+          <h3
+            className="font-semibold uppercase tracking-wider"
+            style={{ fontSize: "11px", color: "var(--text-tertiary)" }}
+          >
+            {label}
+          </h3>
+          <button
+            onClick={() => setEditing(true)}
+            className="opacity-0 group-hover:opacity-100 transition-opacity"
+            style={{ color: "var(--text-tertiary)" }}
+            onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent)"; }}
+            onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-tertiary)"; }}
+            title={`Edit ${label}`}
+          >
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+              />
+            </svg>
+          </button>
+        </div>
+        {value ? (
+          <Markdown content={value} />
+        ) : (
+          <p className="text-sm italic" style={{ color: "var(--text-tertiary)" }}>
+            {placeholder || `Add ${label.toLowerCase()}...`}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="rounded-lg p-4"
+      style={{
+        background: "var(--bg-elevated)",
+        border: "1px solid var(--accent)",
+        boxShadow: "var(--shadow-card)",
+      }}
+      onKeyDown={handleEditorKeyDown}
+    >
+      <div className="flex items-center justify-between mb-2">
+        <h3
+          className="font-semibold uppercase tracking-wider"
+          style={{ fontSize: "11px", color: "var(--text-tertiary)" }}
+        >
+          {label}
+        </h3>
+        <div
+          className="flex overflow-hidden text-xs rounded-md"
+          style={{ border: "1px solid var(--border-default)" }}
+        >
+          <button
+            onClick={() => setTab("edit")}
+            className="px-2.5 py-1 font-medium"
+            style={{
+              background: tab === "edit" ? "var(--bg-hover)" : "var(--bg-elevated)",
+              color: tab === "edit" ? "var(--text-primary)" : "var(--text-secondary)",
+            }}
+          >
+            Edit
+          </button>
+          <button
+            onClick={() => setTab("preview")}
+            className="px-2.5 py-1 font-medium"
+            style={{
+              background: tab === "preview" ? "var(--bg-hover)" : "var(--bg-elevated)",
+              color: tab === "preview" ? "var(--text-primary)" : "var(--text-secondary)",
+              borderLeft: "1px solid var(--border-default)",
+            }}
+          >
+            Preview
+          </button>
+        </div>
+      </div>
+      {tab === "edit" ? (
+        <textarea
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          rows={10}
+          className="w-full p-3 text-sm font-mono rounded-md resize-y outline-none"
+          style={{
+            border: "1px solid var(--border-default)",
+            background: "var(--bg-base)",
+            color: "var(--text-primary)",
+          }}
+          onFocus={(e) => { e.currentTarget.style.borderColor = "var(--accent)"; }}
+          onBlur={(e) => { e.currentTarget.style.borderColor = "var(--border-default)"; }}
+          autoFocus
+        />
+      ) : (
+        <div
+          className="p-3 rounded-md min-h-[160px]"
+          style={{
+            border: "1px solid var(--border-default)",
+            background: "var(--bg-base)",
+          }}
+        >
+          <Markdown content={draft} />
+        </div>
+      )}
+      <div className="flex items-center justify-end gap-2 mt-3">
+        <span className="text-xs mr-auto" style={{ color: "var(--text-tertiary)" }}>
+          Cmd+S to save, Esc to cancel
+        </span>
+        <button
+          onClick={handleCancel}
+          className="px-3 py-1.5 text-sm rounded-md transition-colors"
+          style={{
+            color: "var(--text-secondary)",
+            border: "1px solid var(--border-default)",
+            background: "var(--bg-elevated)",
+          }}
+          onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}
+          onMouseLeave={(e) => { e.currentTarget.style.background = "var(--bg-elevated)"; }}
+        >
+          Cancel
+        </button>
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          className="px-3 py-1.5 text-sm rounded-md font-medium disabled:opacity-50 transition-colors"
+          style={{
+            background: "var(--accent)",
+            color: "white",
+          }}
+          onMouseEnter={(e) => { e.currentTarget.style.opacity = "0.9"; }}
+          onMouseLeave={(e) => { e.currentTarget.style.opacity = "1"; }}
+        >
+          {saving ? "Saving..." : "Save"}
+        </button>
+      </div>
+    </div>
+  );
+}

package/client/src/components/StatusBadge.tsx

@@ -0,0 +1,64 @@
+const STATUS_CONFIG: Record<string, { dot: string; bg: string; text: string; border: string; label: string }> = {
+  open: {
+    dot: "var(--status-open)",
+    bg: "rgba(59,130,246,0.08)",
+    text: "#2563EB",
+    border: "rgba(59,130,246,0.2)",
+    label: "Open",
+  },
+  in_progress: {
+    dot: "var(--status-in-progress)",
+    bg: "rgba(245,158,11,0.08)",
+    text: "#D97706",
+    border: "rgba(245,158,11,0.2)",
+    label: "In Progress",
+  },
+  blocked: {
+    dot: "var(--status-blocked)",
+    bg: "rgba(239,68,68,0.08)",
+    text: "#DC2626",
+    border: "rgba(239,68,68,0.2)",
+    label: "Blocked",
+  },
+  closed: {
+    dot: "var(--status-closed)",
+    bg: "rgba(34,197,94,0.08)",
+    text: "#16A34A",
+    border: "rgba(34,197,94,0.2)",
+    label: "Closed",
+  },
+};
+
+const DEFAULT_CONFIG = {
+  dot: "#9CA3AF",
+  bg: "rgba(156,163,175,0.08)",
+  text: "#6B7280",
+  border: "rgba(156,163,175,0.2)",
+  label: "",
+};
+
+export function StatusBadge({ status }: { status: string }) {
+  const config = STATUS_CONFIG[status] || DEFAULT_CONFIG;
+  return (
+    <span
+      className="inline-flex items-center gap-1.5 px-2 py-0.5 font-semibold"
+      style={{
+        fontSize: "11px",
+        borderRadius: "20px",
+        backgroundColor: config.bg,
+        color: config.text,
+        border: `1px solid ${config.border}`,
+      }}
+    >
+      <span
+        className="rounded-full shrink-0"
+        style={{
+          width: "6px",
+          height: "6px",
+          backgroundColor: config.dot,
+        }}
+      />
+      {config.label || status}
+    </span>
+  );
+}

package/client/src/components/TypeBadge.tsx

@@ -0,0 +1,26 @@
+const TYPE_CONFIG: Record<string, { bg: string; text: string }> = {
+  epic: { bg: "rgba(124,58,237,0.1)", text: "#7C3AED" },
+  feature: { bg: "rgba(99,102,241,0.1)", text: "#6366F1" },
+  bug: { bg: "rgba(239,68,68,0.1)", text: "#DC2626" },
+  task: { bg: "rgba(22,163,74,0.1)", text: "#16A34A" },
+  chore: { bg: "rgba(120,113,108,0.1)", text: "#78716C" },
+};
+
+const DEFAULT = { bg: "rgba(120,113,108,0.1)", text: "#78716C" };
+
+export function TypeBadge({ type }: { type: string }) {
+  const config = TYPE_CONFIG[type] || DEFAULT;
+  return (
+    <span
+      className="inline-flex items-center px-2 py-0.5 font-semibold capitalize"
+      style={{
+        fontSize: "11px",
+        borderRadius: "var(--radius-sm)",
+        backgroundColor: config.bg,
+        color: config.text,
+      }}
+    >
+      {type}
+    </span>
+  );
+}

package/client/src/hooks/use-mutation.ts

@@ -0,0 +1,55 @@
+import { useCallback } from "react";
+import { useWs } from "../lib/ws-context";
+import type {
+  EditTextPayload,
+  CreateIssuePayload,
+} from "../lib/types";
+
+export function useMutation() {
+  const ws = useWs();
+
+  return {
+    updateStatus: useCallback(
+      (id: string, status: "open" | "in_progress" | "closed") =>
+        ws.updateStatus({ id, status }),
+      [ws],
+    ),
+    editText: useCallback(
+      (payload: EditTextPayload) => ws.editText(payload),
+      [ws],
+    ),
+    createIssue: useCallback(
+      (payload: CreateIssuePayload) => ws.createIssue(payload),
+      [ws],
+    ),
+    updatePriority: useCallback(
+      (id: string, priority: number) => ws.updatePriority(id, priority),
+      [ws],
+    ),
+    updateAssignee: useCallback(
+      (id: string, assignee: string) => ws.updateAssignee(id, assignee),
+      [ws],
+    ),
+    addLabel: useCallback(
+      (id: string, label: string) => ws.addLabel(id, label),
+      [ws],
+    ),
+    removeLabel: useCallback(
+      (id: string, label: string) => ws.removeLabel(id, label),
+      [ws],
+    ),
+    deleteIssue: useCallback((id: string) => ws.deleteIssue(id), [ws]),
+    addComment: useCallback(
+      (id: string, text: string) => ws.addComment(id, text),
+      [ws],
+    ),
+    addDep: useCallback(
+      (a: string, b: string) => ws.addDep(a, b),
+      [ws],
+    ),
+    removeDep: useCallback(
+      (a: string, b: string) => ws.removeDep(a, b),
+      [ws],
+    ),
+  };
+}

package/client/src/hooks/use-search.ts

@@ -0,0 +1,19 @@
+import { useState, useMemo } from "react";
+import type { Issue } from "../lib/types";
+
+export function useSearch(issues: Issue[]) {
+  const [query, setQuery] = useState("");
+
+  const results = useMemo(() => {
+    if (!query.trim()) return issues;
+    const q = query.toLowerCase();
+    return issues.filter(
+      (i) =>
+        i.id.toLowerCase().includes(q) ||
+        i.title.toLowerCase().includes(q) ||
+        (i.description || "").toLowerCase().includes(q),
+    );
+  }, [issues, query]);
+
+  return { query, setQuery, results };
+}

package/client/src/hooks/use-subscription.ts

@@ -0,0 +1,187 @@
+import { useEffect, useState, useRef } from "react";
+import { useWs } from "../lib/ws-context";
+import type { Issue, SubscriptionType, PushEvent } from "../lib/types";
+import { WsClient } from "../lib/ws-client";
+
+/**
+ * Shared subscription cache. Multiple useSubscription() calls with the same
+ * type+params share a single server-side subscription. The cache lives on
+ * the WsClient instance (via WeakMap) so it's scoped to the connection.
+ */
+
+interface SharedSub {
+  refCount: number;
+  subId: string;
+  items: Map<string, Issue>;
+  listeners: Set<() => void>;
+  loading: boolean;
+  total: number;
+  cleanupPush: (() => void) | null;
+}
+
+const clientCaches = new WeakMap<WsClient, Map<string, SharedSub>>();
+
+function getCache(ws: WsClient): Map<string, SharedSub> {
+  let cache = clientCaches.get(ws);
+  if (!cache) {
+    cache = new Map();
+    clientCaches.set(ws, cache);
+  }
+  return cache;
+}
+
+function cacheKey(
+  type: SubscriptionType,
+  params?: Record<string, string | number | boolean>,
+): string {
+  return params ? `${type}:${JSON.stringify(params)}` : type;
+}
+
+function acquireSubscription(
+  ws: WsClient,
+  type: SubscriptionType,
+  params?: Record<string, string | number | boolean>,
+): SharedSub {
+  const cache = getCache(ws);
+  const key = cacheKey(type, params);
+
+  let shared = cache.get(key);
+  if (shared) {
+    shared.refCount++;
+    return shared;
+  }
+
+  const subId = `sub-${type}-${Date.now()}`;
+  shared = {
+    refCount: 1,
+    subId,
+    items: new Map(),
+    listeners: new Set(),
+    loading: true,
+    total: 0,
+    cleanupPush: null,
+  };
+
+  const notify = () => {
+    for (const listener of shared!.listeners) listener();
+  };
+
+  shared.cleanupPush = ws.onPush((event: PushEvent) => {
+    if (event.id !== subId) return;
+
+    if (event.type === "snapshot") {
+      shared!.items = new Map();
+      for (const issue of event.issues) shared!.items.set(issue.id, issue);
+      shared!.loading = false;
+      if (typeof event.total === "number") {
+        shared!.total = event.total;
+      } else {
+        shared!.total = event.issues.length;
+      }
+      notify();
+    } else if (event.type === "upsert") {
+      shared!.items.set(event.issue.id, event.issue);
+      notify();
+    } else if (event.type === "delete") {
+      shared!.items.delete(event.issue_id);
+      notify();
+    }
+  });
+
+  ws.subscribe({ id: subId, type, params });
+  cache.set(key, shared);
+  return shared;
+}
+
+function releaseSubscription(
+  ws: WsClient,
+  type: SubscriptionType,
+  params?: Record<string, string | number | boolean>,
+): void {
+  const cache = getCache(ws);
+  const key = cacheKey(type, params);
+  const shared = cache.get(key);
+  if (!shared) return;
+
+  shared.refCount--;
+  if (shared.refCount <= 0) {
+    shared.cleanupPush?.();
+    ws.unsubscribe(shared.subId);
+    cache.delete(key);
+  }
+}
+
+export function useSubscription(
+  type: SubscriptionType,
+  params?: Record<string, string | number | boolean>,
+): { issues: Issue[]; loading: boolean; refreshing: boolean; total: number } {
+  const ws = useWs();
+  const paramsKey = params ? JSON.stringify(params) : "";
+  const sharedRef = useRef<SharedSub | null>(null);
+
+  // Track whether we've ever received data (initial load vs refresh)
+  const hasLoadedOnceRef = useRef(false);
+  const [staleIssues, setStaleIssues] = useState<Issue[]>([]);
+  const [staleTotal, setStaleTotal] = useState(0);
+
+  // Acquire/release shared subscription on mount/unmount
+  useEffect(() => {
+    const shared = acquireSubscription(ws, type, params);
+    sharedRef.current = shared;
+    return () => {
+      releaseSubscription(ws, type, params);
+      sharedRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ws, type, paramsKey]);
+
+  // Subscribe to changes
+  const [issues, setIssues] = useState<Issue[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [total, setTotal] = useState(0);
+
+  useEffect(() => {
+    const shared = sharedRef.current;
+    if (!shared) return;
+
+    const currentIssues = Array.from(shared.items.values());
+    setIssues(currentIssues);
+    setLoading(shared.loading);
+    setTotal(shared.total);
+
+    // When new data arrives, save it as stale for next transition
+    if (!shared.loading && currentIssues.length > 0) {
+      hasLoadedOnceRef.current = true;
+      setStaleIssues(currentIssues);
+      setStaleTotal(shared.total);
+    }
+
+    const listener = () => {
+      const items = Array.from(shared.items.values());
+      setIssues(items);
+      setLoading(shared.loading);
+      setTotal(shared.total);
+
+      if (!shared.loading && items.length > 0) {
+        hasLoadedOnceRef.current = true;
+        setStaleIssues(items);
+        setStaleTotal(shared.total);
+      }
+    };
+    shared.listeners.add(listener);
+    return () => {
+      shared.listeners.delete(listener);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ws, type, paramsKey]);
+
+  const isInitialLoad = loading && !hasLoadedOnceRef.current;
+  const isRefreshing = loading && hasLoadedOnceRef.current;
+
+  return {
+    issues: isRefreshing ? staleIssues : issues,
+    loading: isInitialLoad,
+    refreshing: isRefreshing,
+    total: isRefreshing ? staleTotal : total,
+  };
+}