@rsktash/beads-ui 0.1.1 → 0.1.3

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

@@ -1,187 +0,0 @@
-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,
-  };
-}

package/client/src/index.css

@@ -1,133 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    /* Background layers */
-    --bg-base: #FDFBF7;
-    --bg-surface: #F8F5EF;
-    --bg-elevated: #FFFFFF;
-    --bg-hover: #F5F0E8;
-    --bg-overlay: rgba(0,0,0,0.4);
-
-    /* Text */
-    --text-primary: #1A1A1A;
-    --text-secondary: #6B6B6B;
-    --text-tertiary: #9CA3AF;
-    --text-inverse: #FAFAF9;
-
-    /* Borders */
-    --border-subtle: rgba(0,0,0,0.06);
-    --border-default: rgba(0,0,0,0.1);
-
-    /* Accent */
-    --accent: #16A34A;
-    --accent-soft: rgba(22,163,74,0.1);
-
-    /* Status */
-    --status-open: #3B82F6;
-    --status-in-progress: #F59E0B;
-    --status-blocked: #EF4444;
-    --status-closed: #22C55E;
-
-    /* Priority */
-    --priority-0: #EF4444;
-    --priority-1: #F97316;
-    --priority-2: #3B82F6;
-    --priority-3: #22C55E;
-    --priority-4: #D1D5DB;
-
-    /* Type */
-    --type-task: #16A34A;
-    --type-bug: #EF4444;
-    --type-feature: #6366F1;
-    --type-epic: #7C3AED;
-    --type-chore: #78716C;
-
-    /* Spacing (4px grid) */
-    --space-1: 4px;
-    --space-2: 8px;
-    --space-3: 12px;
-    --space-4: 16px;
-    --space-5: 20px;
-    --space-6: 24px;
-    --space-8: 32px;
-    --space-10: 40px;
-    --space-12: 48px;
-    --space-16: 64px;
-
-    /* Radius */
-    --radius-sm: 6px;
-    --radius-md: 10px;
-    --radius-lg: 14px;
-
-    /* Shadows */
-    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
-    --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
-    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
-
-    /* Transitions */
-    --transition-fast: 120ms ease;
-    --transition-medium: 200ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  body {
-    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
-    background: var(--bg-base);
-    color: var(--text-primary);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-}
-
-/* IssueCard styles */
-.issue-card {
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-card);
-  transition: box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.issue-card:hover {
-  box-shadow: var(--shadow-md);
-  transform: translateY(-1px);
-}
-
-.issue-card--dimmed {
-  opacity: 0.6;
-}
-
-/* Skeleton shimmer */
-.skeleton-shimmer {
-  background: linear-gradient(
-    90deg,
-    var(--bg-hover) 25%,
-    var(--bg-elevated) 50%,
-    var(--bg-hover) 75%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 1.5s ease-in-out infinite;
-}
-
-@keyframes shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.issue-card__handle {
-  opacity: 0;
-  transition: opacity 120ms ease;
-}
-
-.issue-card:hover .issue-card__handle {
-  opacity: 0.6;
-}

package/client/src/lib/avatar.ts

@@ -1,17 +0,0 @@
-const AVATAR_COLORS = [
-  "#E57373", "#F06292", "#BA68C8", "#9575CD",
-  "#7986CB", "#64B5F6", "#4FC3F7", "#4DD0E1",
-  "#4DB6AC", "#81C784", "#AED581", "#FFB74D",
-];
-
-export function getInitials(name: string): string {
-  const parts = name.trim().split(/\s+/);
-  if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-  return name.slice(0, 2).toUpperCase();
-}
-
-export function getAvatarColor(name: string): string {
-  let hash = 0;
-  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
-  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
-}

package/client/src/lib/types.ts

@@ -1,115 +0,0 @@
-// Issue shape from server
-export interface Issue {
-  id: string;
-  title: string;
-  description?: string;
-  status: "open" | "in_progress" | "blocked" | "closed";
-  priority: number;
-  issue_type: string;
-  assignee?: string;
-  owner?: string;
-  created_at: string | number;
-  updated_at: string | number;
-  closed_at?: string | number | null;
-  labels?: string[];
-  // Epic fields
-  total_children?: number;
-  closed_children?: number;
-  eligible_for_close?: boolean;
-  // Detail fields
-  acceptance?: string;
-  notes?: string;
-  design?: string;
-  dependencies?: Array<{ id: string; title: string; status: string }>;
-  dependents?: Array<{ id: string; title: string; status: string }>;
-  comments?: Comment[];
-  parent_id?: string;
-  parent_title?: string;
-  parent_status?: string;
-  parent_type?: string;
-}
-
-export interface Comment {
-  id: string;
-  issue_id: string;
-  author: string;
-  text: string;
-  created_at: number;
-  updated_at: number;
-}
-
-// Subscription types
-export type SubscriptionType =
-  | "all-issues"
-  | "epics"
-  | "blocked-issues"
-  | "ready-issues"
-  | "in-progress-issues"
-  | "closed-issues"
-  | "search-issues"
-  | "issue-detail";
-
-export interface SubscriptionSpec {
-  id: string;
-  type: SubscriptionType;
-  params?: Record<string, string | number | boolean>;
-}
-
-// Message envelopes
-export interface RequestEnvelope {
-  id: string;
-  type: string;
-  payload?: unknown;
-}
-
-export interface ReplyEnvelope {
-  id: string;
-  ok: boolean;
-  type: string;
-  payload?: unknown;
-  error?: { code: string; message: string; details?: unknown };
-}
-
-// Push event payloads
-export interface SnapshotPayload {
-  type: "snapshot";
-  id: string;
-  revision: number;
-  issues: Issue[];
-  total?: number;
-}
-
-export interface UpsertPayload {
-  type: "upsert";
-  id: string;
-  revision: number;
-  issue: Issue;
-}
-
-export interface DeletePayload {
-  type: "delete";
-  id: string;
-  revision: number;
-  issue_id: string;
-}
-
-export type PushEvent = SnapshotPayload | UpsertPayload | DeletePayload;
-
-// Mutation payloads
-export interface UpdateStatusPayload {
-  id: string;
-  status: "open" | "in_progress" | "closed";
-}
-
-export interface EditTextPayload {
-  id: string;
-  field: "title" | "description" | "acceptance" | "notes" | "design";
-  value: string;
-}
-
-export interface CreateIssuePayload {
-  title: string;
-  type?: string;
-  priority?: number;
-  description?: string;
-}

package/client/src/lib/ws-client.ts

@@ -1,214 +0,0 @@
-import type {
-  ReplyEnvelope,
-  RequestEnvelope,
-  SubscriptionSpec,
-  PushEvent,
-  UpdateStatusPayload,
-  EditTextPayload,
-  CreateIssuePayload,
-  Issue,
-  Comment,
-} from "./types";
-
-type PushHandler = (event: PushEvent) => void;
-type ConnectionHandler = (connected: boolean) => void;
-
-let counter = 0;
-function nextId(): string {
-  return `req-${Date.now()}-${++counter}`;
-}
-
-export class WsClient {
-  private ws: WebSocket | null = null;
-  private pending = new Map<
-    string,
-    { resolve: (v: unknown) => void; reject: (e: Error) => void }
-  >();
-  private sendQueue: string[] = [];
-  private pushHandlers = new Set<PushHandler>();
-  private connectionHandlers = new Set<ConnectionHandler>();
-  private activeSubscriptions = new Map<string, SubscriptionSpec>();
-  private reconnectDelay = 500;
-  private url: string;
-  private disposed = false;
-
-  constructor() {
-    const proto = location.protocol === "https:" ? "wss:" : "ws:";
-    this.url = `${proto}//${location.host}/ws`;
-  }
-
-  connect(): void {
-    if (this.disposed) return;
-    this.ws = new WebSocket(this.url);
-    this.ws.onopen = () => {
-      this.reconnectDelay = 500;
-      // Flush queued messages
-      for (const msg of this.sendQueue) {
-        this.ws?.send(msg);
-      }
-      this.sendQueue = [];
-      // Resubscribe all active subscriptions
-      for (const [, spec] of this.activeSubscriptions) {
-        this.rawSend("subscribe-list", spec);
-      }
-      for (const h of this.connectionHandlers) h(true);
-    };
-    this.ws.onclose = () => {
-      for (const h of this.connectionHandlers) h(false);
-      this.scheduleReconnect();
-    };
-    this.ws.onmessage = (e) => {
-      this.handleMessage(JSON.parse(e.data));
-    };
-  }
-
-  dispose(): void {
-    this.disposed = true;
-    this.ws?.close();
-    this.ws = null;
-    for (const [, p] of this.pending) {
-      p.reject(new Error("disposed"));
-    }
-    this.pending.clear();
-    this.sendQueue = [];
-  }
-
-  private scheduleReconnect(): void {
-    if (this.disposed) return;
-    setTimeout(() => this.connect(), this.reconnectDelay);
-    this.reconnectDelay = Math.min(this.reconnectDelay * 2, 10000);
-    for (const [id, p] of this.pending) {
-      p.reject(new Error("disconnected"));
-      this.pending.delete(id);
-    }
-  }
-
-  private handleMessage(msg: ReplyEnvelope): void {
-    if (
-      msg.type === "snapshot" ||
-      msg.type === "upsert" ||
-      msg.type === "delete"
-    ) {
-      const event = msg.payload as PushEvent;
-      for (const handler of this.pushHandlers) handler(event);
-      return;
-    }
-    const pending = this.pending.get(msg.id);
-    if (pending) {
-      this.pending.delete(msg.id);
-      if (msg.ok) pending.resolve(msg.payload);
-      else pending.reject(new Error(msg.error?.message || "unknown error"));
-    }
-  }
-
-  /** Send without promise tracking (used for resubscribe on reconnect) */
-  private rawSend(type: string, payload?: unknown): void {
-    const id = nextId();
-    const envelope: RequestEnvelope = { id, type, payload };
-    const msg = JSON.stringify(envelope);
-    if (this.ws?.readyState === WebSocket.OPEN) {
-      this.ws.send(msg);
-    } else {
-      this.sendQueue.push(msg);
-    }
-  }
-
-  private send<T = unknown>(type: string, payload?: unknown): Promise<T> {
-    return new Promise((resolve, reject) => {
-      const id = nextId();
-      this.pending.set(id, {
-        resolve: resolve as (v: unknown) => void,
-        reject,
-      });
-      const envelope: RequestEnvelope = { id, type, payload };
-      const msg = JSON.stringify(envelope);
-      if (this.ws?.readyState === WebSocket.OPEN) {
-        this.ws.send(msg);
-      } else {
-        this.sendQueue.push(msg);
-      }
-    });
-  }
-
-  onConnection(handler: ConnectionHandler): () => void {
-    this.connectionHandlers.add(handler);
-    return () => this.connectionHandlers.delete(handler);
-  }
-
-  onPush(handler: PushHandler): () => void {
-    this.pushHandlers.add(handler);
-    return () => this.pushHandlers.delete(handler);
-  }
-
-  // Subscriptions — tracked for auto-resubscribe on reconnect
-  subscribe(spec: SubscriptionSpec): Promise<{ id: string; key: string }> {
-    this.activeSubscriptions.set(spec.id, spec);
-    return this.send("subscribe-list", spec);
-  }
-
-  unsubscribe(id: string): Promise<void> {
-    this.activeSubscriptions.delete(id);
-    return this.send("unsubscribe-list", { id });
-  }
-
-  // Mutations
-  updateStatus(payload: UpdateStatusPayload): Promise<Issue> {
-    return this.send("update-status", payload);
-  }
-
-  editText(payload: EditTextPayload): Promise<Issue> {
-    return this.send("edit-text", payload);
-  }
-
-  createIssue(payload: CreateIssuePayload): Promise<{ created: boolean }> {
-    return this.send("create-issue", payload);
-  }
-
-  updatePriority(id: string, priority: number): Promise<Issue> {
-    return this.send("update-priority", { id, priority });
-  }
-
-  updateAssignee(id: string, assignee: string): Promise<Issue> {
-    return this.send("update-assignee", { id, assignee });
-  }
-
-  addLabel(id: string, label: string): Promise<Issue> {
-    return this.send("label-add", { id, label });
-  }
-
-  removeLabel(id: string, label: string): Promise<Issue> {
-    return this.send("label-remove", { id, label });
-  }
-
-  deleteIssue(id: string): Promise<{ deleted: boolean; id: string }> {
-    return this.send("delete-issue", { id });
-  }
-
-  getComments(id: string): Promise<Comment[]> {
-    return this.send("get-comments", { id });
-  }
-
-  addComment(id: string, text: string): Promise<Comment[]> {
-    return this.send("add-comment", { id, text });
-  }
-
-  addDep(a: string, b: string): Promise<Issue> {
-    return this.send("dep-add", { a, b });
-  }
-
-  removeDep(a: string, b: string): Promise<Issue> {
-    return this.send("dep-remove", { a, b });
-  }
-
-  listWorkspaces(): Promise<unknown> {
-    return this.send("list-workspaces");
-  }
-
-  getWorkspace(): Promise<unknown> {
-    return this.send("get-workspace");
-  }
-
-  setWorkspace(path: string, database: string): Promise<unknown> {
-    return this.send("set-workspace", { path, database });
-  }
-}

package/client/src/lib/ws-context.tsx

@@ -1,28 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useRef,
-  type ReactNode,
-} from "react";
-import { WsClient } from "./ws-client";
-
-const WsContext = createContext<WsClient | null>(null);
-
-export function WsProvider({ children }: { children: ReactNode }) {
-  const clientRef = useRef<WsClient | null>(null);
-  if (!clientRef.current) {
-    clientRef.current = new WsClient();
-    clientRef.current.connect();
-  }
-  return (
-    <WsContext.Provider value={clientRef.current}>
-      {children}
-    </WsContext.Provider>
-  );
-}
-
-export function useWs(): WsClient {
-  const client = useContext(WsContext);
-  if (!client) throw new Error("useWs must be inside WsProvider");
-  return client;
-}

package/client/src/main.tsx

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