@tangle-network/ui 1.0.0

package/src/stores/active-sessions-store.ts

@@ -0,0 +1,455 @@
+import { useStore } from "@nanostores/react";
+import { atom } from "nanostores";
+import { useMemo } from "react";
+
+export type SessionProjectKey = string | number;
+export type ActiveSessionStatus = "idle" | "running" | "attention-needed" | "error";
+export type ActiveSessionReconnectState = "idle" | "reconnecting" | "failed";
+export type ActiveSessionConnectionState =
+  | "disconnected"
+  | "connecting"
+  | "connected"
+  | "reconnecting"
+  | "error";
+export type ActiveSessionTransportMode = "websocket" | "sse" | "polling" | "custom";
+
+export interface ActiveSessionRecord {
+  sessionId: string;
+  projectId: SessionProjectKey | null;
+  projectLabel?: string;
+  title?: string;
+  href?: string;
+  registeredAt: number;
+  lastActivityAt: number;
+  lastEventAt: number | null;
+  status: ActiveSessionStatus;
+  isRunning: boolean;
+  isForeground: boolean;
+  needsAttention: boolean;
+  connectionState: ActiveSessionConnectionState;
+  reconnectState: ActiveSessionReconnectState;
+  transportMode: ActiveSessionTransportMode | null;
+  lastError: string | null;
+  metadata?: Record<string, unknown>;
+}
+
+export interface ActiveSessionsState {
+  sessions: Record<string, ActiveSessionRecord>;
+  lastUpdatedAt: number;
+}
+
+export interface RegisterActiveSessionOptions {
+  sessionId: string;
+  projectId?: SessionProjectKey | null;
+  projectLabel?: string;
+  title?: string;
+  href?: string;
+  metadata?: Record<string, unknown>;
+}
+
+export interface ActiveSessionConnectionOptions {
+  connectionState: ActiveSessionConnectionState;
+  reconnectState?: ActiveSessionReconnectState;
+  transportMode?: ActiveSessionTransportMode | null;
+  lastError?: string | null;
+  lastEventAt?: number | null;
+}
+
+export interface ActiveSessionActivityOptions {
+  lastEventAt?: number | null;
+}
+
+export interface ActiveProjectActivity {
+  projectId: SessionProjectKey;
+  projectLabel?: string;
+  activeSessionCount: number;
+  runningSessionIds: string[];
+  lastActivityAt: number;
+}
+
+const INITIAL_STATE: ActiveSessionsState = {
+  sessions: {},
+  lastUpdatedAt: 0,
+};
+
+const STATUS_PRIORITY: Record<ActiveSessionStatus, number> = {
+  running: 0,
+  error: 1,
+  "attention-needed": 2,
+  idle: 3,
+};
+
+const DEFAULT_RECORD = {
+  status: "idle",
+  isRunning: false,
+  isForeground: false,
+  needsAttention: false,
+  connectionState: "disconnected",
+  reconnectState: "idle",
+  transportMode: null,
+  lastError: null,
+  lastEventAt: null,
+} satisfies Pick<
+  ActiveSessionRecord,
+  | "status"
+  | "isRunning"
+  | "isForeground"
+  | "needsAttention"
+  | "connectionState"
+  | "reconnectState"
+  | "transportMode"
+  | "lastError"
+  | "lastEventAt"
+>;
+
+export const activeSessionsAtom = atom<ActiveSessionsState>(INITIAL_STATE);
+
+let foregroundSessionId: string | null = null;
+
+function createRecord(
+  options: RegisterActiveSessionOptions,
+  now: number,
+): ActiveSessionRecord {
+  return {
+    sessionId: options.sessionId,
+    projectId: options.projectId ?? null,
+    projectLabel: options.projectLabel,
+    title: options.title,
+    href: options.href,
+    registeredAt: now,
+    lastActivityAt: now,
+    metadata: options.metadata,
+    ...DEFAULT_RECORD,
+    isForeground: options.sessionId === foregroundSessionId,
+  };
+}
+
+function resolveStatus(session: ActiveSessionRecord): ActiveSessionStatus {
+  if (session.isRunning) return "running";
+  if (session.lastError || session.reconnectState === "failed") return "error";
+  if (session.needsAttention) return "attention-needed";
+  return "idle";
+}
+
+function normalizeSession(session: ActiveSessionRecord): ActiveSessionRecord {
+  return {
+    ...session,
+    status: resolveStatus(session),
+  };
+}
+
+function updateSession(
+  sessionId: string,
+  updater: (record: ActiveSessionRecord, now: number) => ActiveSessionRecord,
+): void {
+  const current = activeSessionsAtom.get();
+  const existing = current.sessions[sessionId];
+  if (!existing) return;
+
+  const now = Date.now();
+  activeSessionsAtom.set({
+    sessions: {
+      ...current.sessions,
+      [sessionId]: normalizeSession(updater(existing, now)),
+    },
+    lastUpdatedAt: now,
+  });
+}
+
+export function registerActiveSession(options: RegisterActiveSessionOptions): void {
+  const now = Date.now();
+  const current = activeSessionsAtom.get();
+  const existing = current.sessions[options.sessionId];
+
+  activeSessionsAtom.set({
+    sessions: {
+      ...current.sessions,
+      [options.sessionId]: normalizeSession(
+        existing
+          ? {
+              ...existing,
+              projectId: existing.projectId ?? options.projectId ?? null,
+              projectLabel: options.projectLabel ?? existing.projectLabel,
+              title: options.title ?? existing.title,
+              href: options.href ?? existing.href,
+              metadata: options.metadata ?? existing.metadata,
+              lastActivityAt: now,
+              isForeground: options.sessionId === foregroundSessionId || existing.isForeground,
+            }
+          : createRecord(options, now),
+      ),
+    },
+    lastUpdatedAt: now,
+  });
+}
+
+export function unregisterActiveSession(sessionId: string): void {
+  const current = activeSessionsAtom.get();
+  if (!current.sessions[sessionId]) return;
+
+  const { [sessionId]: _removed, ...remaining } = current.sessions;
+  if (foregroundSessionId === sessionId) {
+    foregroundSessionId = null;
+  }
+
+  activeSessionsAtom.set({
+    sessions: remaining,
+    lastUpdatedAt: Date.now(),
+  });
+}
+
+export function setForegroundActiveSession(sessionId: string | null): void {
+  foregroundSessionId = sessionId;
+  const current = activeSessionsAtom.get();
+  const now = Date.now();
+  let changed = false;
+
+  const sessions = Object.fromEntries(
+    Object.entries(current.sessions).map(([id, session]) => {
+      const isForeground = id === sessionId;
+      if (session.isForeground !== isForeground) {
+        changed = true;
+      }
+
+      return [
+        id,
+        {
+          ...session,
+          isForeground,
+          lastActivityAt: isForeground ? now : session.lastActivityAt,
+        },
+      ];
+    }),
+  );
+
+  if (!changed) return;
+
+  activeSessionsAtom.set({
+    sessions,
+    lastUpdatedAt: now,
+  });
+}
+
+export function updateActiveSessionMeta(
+  sessionId: string,
+  meta: Partial<Pick<ActiveSessionRecord, "title" | "href" | "projectId" | "projectLabel" | "metadata">>,
+): void {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    ...meta,
+    lastActivityAt: now,
+  }));
+}
+
+export function setActiveSessionConnection(
+  sessionId: string,
+  options: ActiveSessionConnectionOptions,
+): void {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    connectionState: options.connectionState,
+    reconnectState: options.reconnectState ?? session.reconnectState,
+    transportMode: options.transportMode ?? session.transportMode,
+    lastError: options.lastError === undefined ? session.lastError : options.lastError,
+    lastEventAt: options.lastEventAt ?? session.lastEventAt,
+    lastActivityAt: now,
+  }));
+}
+
+export function setActiveSessionRunning(
+  sessionId: string,
+  isRunning: boolean,
+  options?: ActiveSessionActivityOptions,
+): void {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    isRunning,
+    needsAttention: isRunning ? false : session.needsAttention,
+    lastError: isRunning ? null : session.lastError,
+    lastEventAt: options?.lastEventAt ?? session.lastEventAt,
+    lastActivityAt: now,
+  }));
+}
+
+export function setActiveSessionAttention(
+  sessionId: string,
+  needsAttention: boolean,
+  options?: ActiveSessionActivityOptions,
+): void {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    needsAttention,
+    isRunning: needsAttention ? false : session.isRunning,
+    lastEventAt: options?.lastEventAt ?? session.lastEventAt,
+    lastActivityAt: now,
+  }));
+}
+
+export function setActiveSessionError(sessionId: string, error: string | null): void {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    isRunning: false,
+    needsAttention: false,
+    lastError: error,
+    reconnectState: error ? "failed" : "idle",
+    connectionState: error ? "error" : session.connectionState,
+    lastEventAt: now,
+    lastActivityAt: now,
+  }));
+}
+
+export function bumpActiveSessionActivity(
+  sessionId: string,
+  options?: ActiveSessionActivityOptions,
+): void {
+  updateSession(sessionId, (session, now) => ({
+    ...session,
+    lastEventAt: options?.lastEventAt ?? session.lastEventAt ?? now,
+    lastActivityAt: now,
+  }));
+}
+
+export function resetActiveSessions(): void {
+  foregroundSessionId = null;
+  activeSessionsAtom.set(INITIAL_STATE);
+}
+
+export function getAllActiveSessions(state: ActiveSessionsState): ActiveSessionRecord[] {
+  return Object.values(state.sessions);
+}
+
+export function getActiveSession(
+  state: ActiveSessionsState,
+  sessionId: string,
+): ActiveSessionRecord | null {
+  return state.sessions[sessionId] ?? null;
+}
+
+export function getSessionsForProject(
+  state: ActiveSessionsState,
+  projectId: SessionProjectKey,
+): ActiveSessionRecord[] {
+  return Object.values(state.sessions).filter((session) => session.projectId === projectId);
+}
+
+export function getSessionsForNavbar(
+  state: ActiveSessionsState,
+  projectId?: SessionProjectKey | null,
+): ActiveSessionRecord[] {
+  const sessions =
+    projectId == null ? Object.values(state.sessions) : getSessionsForProject(state, projectId);
+
+  return [...sessions].sort((left, right) => {
+    if (left.isForeground !== right.isForeground) {
+      return Number(right.isForeground) - Number(left.isForeground);
+    }
+
+    const statusDiff = STATUS_PRIORITY[left.status] - STATUS_PRIORITY[right.status];
+    if (statusDiff !== 0) {
+      return statusDiff;
+    }
+
+    return right.lastActivityAt - left.lastActivityAt;
+  });
+}
+
+export function getSessionsByActivity(state: ActiveSessionsState): ActiveSessionRecord[] {
+  return [...Object.values(state.sessions)].sort(
+    (left, right) => right.lastActivityAt - left.lastActivityAt,
+  );
+}
+
+export function getTotalRunningSessionCount(state: ActiveSessionsState): number {
+  return Object.values(state.sessions).filter((session) => session.isRunning).length;
+}
+
+export function hasBackgroundRunningSessions(state: ActiveSessionsState): boolean {
+  return Object.values(state.sessions).some(
+    (session) => session.isRunning && !session.isForeground,
+  );
+}
+
+export function getAllProjectActivity(state: ActiveSessionsState): ActiveProjectActivity[] {
+  const grouped = new Map<SessionProjectKey, ActiveProjectActivity>();
+
+  for (const session of Object.values(state.sessions)) {
+    if (session.projectId == null) continue;
+
+    const existing = grouped.get(session.projectId);
+    if (existing) {
+      existing.activeSessionCount += 1;
+      existing.lastActivityAt = Math.max(existing.lastActivityAt, session.lastActivityAt);
+      if (session.isRunning) {
+        existing.runningSessionIds.push(session.sessionId);
+      }
+      if (!existing.projectLabel && session.projectLabel) {
+        existing.projectLabel = session.projectLabel;
+      }
+      continue;
+    }
+
+    grouped.set(session.projectId, {
+      projectId: session.projectId,
+      projectLabel: session.projectLabel,
+      activeSessionCount: 1,
+      runningSessionIds: session.isRunning ? [session.sessionId] : [],
+      lastActivityAt: session.lastActivityAt,
+    });
+  }
+
+  return [...grouped.values()].sort((left, right) => right.lastActivityAt - left.lastActivityAt);
+}
+
+export function useActiveSessionsState(): ActiveSessionsState {
+  return useStore(activeSessionsAtom);
+}
+
+export function useActiveSessions(): ActiveSessionRecord[] {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getAllActiveSessions(state), [state]);
+}
+
+export function useActiveSession(sessionId: string | null): ActiveSessionRecord | null {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(
+    () => (sessionId ? getActiveSession(state, sessionId) : null),
+    [sessionId, state],
+  );
+}
+
+export function useProjectSessions(
+  projectId: SessionProjectKey | null,
+): ActiveSessionRecord[] {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(
+    () => (projectId == null ? [] : getSessionsForProject(state, projectId)),
+    [projectId, state],
+  );
+}
+
+export function useNavbarSessions(
+  projectId?: SessionProjectKey | null,
+): ActiveSessionRecord[] {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getSessionsForNavbar(state, projectId), [projectId, state]);
+}
+
+export function useSessionsByActivity(): ActiveSessionRecord[] {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getSessionsByActivity(state), [state]);
+}
+
+export function useProjectActivity(): ActiveProjectActivity[] {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getAllProjectActivity(state), [state]);
+}
+
+export function useTotalRunningSessions(): number {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => getTotalRunningSessionCount(state), [state]);
+}
+
+export function useHasBackgroundRunningSessions(): boolean {
+  const state = useStore(activeSessionsAtom);
+  return useMemo(() => hasBackgroundRunningSessions(state), [state]);
+}

package/src/stores/chat-store.ts

@@ -0,0 +1,43 @@
+import { atom, map } from 'nanostores';
+import type { SessionMessage } from '../types/message';
+import type { SessionPart } from '../types/parts';
+
+/** Ordered list of messages in the current chat session. */
+export const messagesAtom = atom<SessionMessage[]>([]);
+
+/** Map of message ID → parts for that message. */
+export const partMapAtom = map<Record<string, SessionPart[]>>({});
+
+/** Whether the assistant is currently streaming a response. */
+export const isStreamingAtom = atom(false);
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+let insertionCounter = 0;
+
+export function addMessage(msg: SessionMessage) {
+  const withIndex = { ...msg, _insertionIndex: insertionCounter++ };
+  messagesAtom.set([...messagesAtom.get(), withIndex]);
+}
+
+export function addParts(messageId: string, parts: SessionPart[]) {
+  const current = partMapAtom.get();
+  const existing = current[messageId] ?? [];
+  partMapAtom.setKey(messageId, [...existing, ...parts]);
+}
+
+export function updatePart(messageId: string, partIndex: number, part: SessionPart) {
+  const current = partMapAtom.get();
+  const existing = [...(current[messageId] ?? [])];
+  existing[partIndex] = part;
+  partMapAtom.setKey(messageId, existing);
+}
+
+export function clearChat() {
+  messagesAtom.set([]);
+  partMapAtom.set({});
+  isStreamingAtom.set(false);
+  insertionCounter = 0;
+}

package/src/stores/index.ts

@@ -0,0 +1,2 @@
+export * from "./active-sessions-store";
+export * from "./chat-store";

package/src/tool-previews/command-preview.tsx

@@ -0,0 +1,116 @@
+import { memo, useState } from "react";
+import {
+  Terminal,
+  ChevronDown,
+  ChevronRight,
+  Loader2,
+} from "lucide-react";
+import { cn } from "../lib/utils";
+import type { ToolPart } from "../types/parts";
+import { PreviewCard, PreviewError, PreviewLoading } from "./preview-primitives";
+
+export interface CommandPreviewProps {
+  part: ToolPart;
+}
+
+/** Extract stdout/stderr/exitCode from tool output. */
+function extractCommandOutput(output: unknown): {
+  stdout: string;
+  stderr: string;
+  exitCode: number;
+} {
+  if (!output) return { stdout: "", stderr: "", exitCode: 0 };
+
+  if (typeof output === "string") return { stdout: output, stderr: "", exitCode: 0 };
+
+  if (typeof output === "object" && output !== null) {
+    const obj = output as Record<string, unknown>;
+    return {
+      stdout: String(obj.stdout ?? obj.output ?? ""),
+      stderr: String(obj.stderr ?? ""),
+      exitCode: Number(obj.exitCode ?? obj.exit_code ?? obj.code ?? 0),
+    };
+  }
+
+  return { stdout: String(output), stderr: "", exitCode: 0 };
+}
+
+/**
+ * Terminal-style command output preview.
+ * Shows the command, exit code, and stdout/stderr with expand/collapse.
+ */
+export const CommandPreview = memo(({ part }: CommandPreviewProps) => {
+  const [expanded, setExpanded] = useState(true);
+  const input = part.state.input as Record<string, unknown> | undefined;
+  const command =
+    typeof input?.command === "string" ? input.command : String(input ?? "");
+
+  const output =
+    part.state.status === "completed"
+      ? extractCommandOutput(part.state.output)
+      : null;
+
+  const isError = output ? output.exitCode !== 0 : part.state.status === "error";
+  const errorText = part.state.error;
+  const lineCount = output?.stdout ? output.stdout.split("\n").length : 0;
+
+  return (
+    <PreviewCard
+      icon={<Terminal className="h-4 w-4" />}
+      title="Command"
+      description={command}
+      meta={
+        output ? (
+          <span
+            className={cn(
+              "inline-flex items-center rounded-full border px-2 py-0.5 font-mono",
+              isError
+                ? "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
+                : "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+            )}
+          >
+            exit {output.exitCode}
+          </span>
+        ) : null
+      }
+    >
+      <button
+        onClick={() => setExpanded((value) => !value)}
+        className="flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-border bg-muted px-3 py-2 text-left transition-colors hover:border-[var(--border-accent-hover)] hover:bg-accent/45"
+      >
+        <code className="min-w-0 flex-1 truncate text-xs font-mono text-foreground">
+          {command}
+        </code>
+        {lineCount > 0 ? (
+          <span className="shrink-0 text-xs text-muted-foreground">
+            {lineCount} line{lineCount === 1 ? "" : "s"}
+          </span>
+        ) : null}
+        {expanded ? (
+          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+        ) : (
+          <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+        )}
+      </button>
+
+      {part.state.status === "running" ? <PreviewLoading /> : null}
+      {errorText ? <PreviewError error={errorText} /> : null}
+
+      {expanded && output ? (
+        <div className="overflow-hidden rounded-[var(--radius-md)] border border-border bg-muted">
+          {output.stdout ? (
+            <pre className="max-h-80 overflow-auto px-3 py-3 text-xs font-mono whitespace-pre-wrap break-all text-foreground">
+              {output.stdout}
+            </pre>
+          ) : null}
+          {output.stderr ? (
+            <pre className="max-h-80 overflow-auto border-t border-border px-3 py-3 text-xs font-mono whitespace-pre-wrap break-all text-red-200">
+              {output.stderr}
+            </pre>
+          ) : null}
+        </div>
+      ) : null}
+    </PreviewCard>
+  );
+});
+CommandPreview.displayName = "CommandPreview";

package/src/tool-previews/diff-preview.tsx

@@ -0,0 +1,85 @@
+import { memo } from "react";
+import { GitCompareArrows } from "lucide-react";
+import type { ToolPart } from "../types/parts";
+import { CodeBlock } from "../markdown/code-block";
+import { PreviewCard, PreviewEmpty, PreviewError, PreviewLoading } from "./preview-primitives";
+
+function extractString(record: Record<string, unknown>, ...keys: string[]) {
+  for (const key of keys) {
+    const value = record[key];
+    if (typeof value === "string" && value.length > 0) {
+      return value;
+    }
+  }
+
+  return undefined;
+}
+
+function extractDiffPayload(part: ToolPart): {
+  path?: string;
+  diff?: string;
+  before?: string;
+  after?: string;
+} {
+  const sources = [part.state.input, part.state.output, part.state.metadata];
+
+  for (const source of sources) {
+    if (!source || typeof source !== "object") {
+      continue;
+    }
+
+    const record = source as Record<string, unknown>;
+    const diff = extractString(record, "diff", "patch", "unifiedDiff", "unified_diff");
+    const before = extractString(record, "oldString", "old_string", "before", "previous");
+    const after = extractString(record, "newString", "new_string", "after", "updated");
+    const path = extractString(record, "file_path", "filePath", "path");
+
+    if (diff || before || after) {
+      return { path, diff, before, after };
+    }
+  }
+
+  return {};
+}
+
+export interface DiffPreviewProps {
+  part: ToolPart;
+}
+
+export const DiffPreview = memo(({ part }: DiffPreviewProps) => {
+  const payload = extractDiffPayload(part);
+
+  return (
+    <PreviewCard
+      icon={<GitCompareArrows className="h-4 w-4" />}
+      title={payload.path ? `Changes for ${payload.path}` : "File changes"}
+    >
+      {part.state.status === "running" ? <PreviewLoading label="Computing changes…" /> : null}
+      {part.state.error ? <PreviewError error={part.state.error} /> : null}
+      {!payload.diff && !payload.before && !payload.after ? (
+        <PreviewEmpty label="No structured diff payload was provided." />
+      ) : null}
+      {payload.diff ? (
+        <CodeBlock code={payload.diff} language="diff" className="rounded-[var(--radius-md)]" />
+      ) : null}
+      {!payload.diff && payload.before ? (
+        <div className="space-y-2">
+          <div className="text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+            Before
+          </div>
+          <CodeBlock code={payload.before} language="text" className="rounded-[var(--radius-md)]" />
+        </div>
+      ) : null}
+      {!payload.diff && payload.after ? (
+        <div className="space-y-2">
+          <div className="text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+            After
+          </div>
+          <CodeBlock code={payload.after} language="text" className="rounded-[var(--radius-md)]" />
+        </div>
+      ) : null}
+    </PreviewCard>
+  );
+});
+
+DiffPreview.displayName = "DiffPreview";