@rsktash/beads-ui 0.1.0

package/client/src/index.css

@@ -0,0 +1,133 @@
+@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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,115 @@
+// 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

@@ -0,0 +1,214 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,10 @@
+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>
+);