npm - vibepulse - Versions diffs - 0.2.0 → 0.2.1 - Mend

vibepulse 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (420) hide show

package/.next/standalone/src/app/favicon.ico ADDED Viewed

Binary file

package/.next/standalone/src/app/globals.css ADDED Viewed

@@ -0,0 +1,66 @@
+@import "tailwindcss";
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans), Arial, Helvetica, sans-serif;
+}
+/* Custom scrollbar styling */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.5);
+  border-radius: 20px;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.7);
+}
+/* Firefox scrollbar */
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+}
+/* Dark mode scrollbar */
+@media (prefers-color-scheme: dark) {
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: rgba(75, 85, 99, 0.5);
+  }
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(75, 85, 99, 0.7);
+  }
+  .scrollbar-thin {
+    scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
+  }
+}

package/.next/standalone/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { QueryProvider } from "@/components/QueryProvider";
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+export const metadata: Metadata = {
+  title: "VibePulse",
+  description: "Real-time dashboard for monitoring OpenCode sessions",
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <QueryProvider>
+          {children}
+        </QueryProvider>
+      </body>
+    </html>
+  );
+}

package/.next/standalone/src/app/page.test.tsx ADDED Viewed

@@ -0,0 +1,134 @@
+import type { ReactNode } from 'react';
+import * as tlReact from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+type RenderFn = (ui: ReactNode) => unknown;
+type WaitForFn = (callback: () => void | Promise<void>) => Promise<void>;
+type RoleQueryOptions = { name?: string | RegExp };
+type ScreenLike = {
+  getByRole: (role: string, options?: RoleQueryOptions) => HTMLElement;
+  queryByRole: (role: string, options?: RoleQueryOptions) => HTMLElement | null;
+};
+const tlReactCompat = tlReact as unknown as {
+  render: RenderFn;
+  screen: ScreenLike;
+  waitFor: WaitForFn;
+};
+const render = tlReactCompat.render;
+const screen = tlReactCompat.screen;
+const waitFor = tlReactCompat.waitFor;
+const mockFetch = vi.fn();
+const mockUseOpencodeSync = vi.fn();
+const mockSetActiveFilter = vi.fn();
+vi.mock('@/hooks/useOpencodeSync', () => ({
+  useOpencodeSync: () => mockUseOpencodeSync(),
+}));
+vi.mock('@/hooks/useHostSources', () => ({
+  useHostSources: () => ({
+    enabledSources: [{ hostId: 'local', hostLabel: 'Local', hostKind: 'local' }],
+    activeFilter: 'all',
+    setActiveFilter: mockSetActiveFilter,
+  }),
+}));
+vi.mock('@/components/KanbanBoard', () => ({
+  KanbanBoard: () => <div data-testid="kanban-board" />,
+}));
+vi.mock('@/components/ErrorBoundary', () => ({
+  ErrorBoundary: ({ children }: { children: ReactNode }) => <>{children}</>,
+}));
+vi.mock('@/components/opencode-config/ConfigButton', () => ({
+  ConfigButton: ({ onClick }: { onClick: () => void }) => <button type="button" onClick={onClick}>Config</button>,
+}));
+vi.mock('@/components/opencode-config/FullscreenConfigPanel', () => ({
+  FullscreenConfigPanel: () => null,
+}));
+vi.mock('@/components/host-config/HostManagerDialog', () => ({
+  HostManagerDialog: () => null,
+}));
+vi.mock('@/lib/notificationSound', () => ({
+  isMuted: vi.fn(() => false),
+  subscribeMuted: vi.fn(() => () => {}),
+  playToggleFeedbackSound: vi.fn(),
+  setMuted: vi.fn(),
+  unlockAudio: vi.fn(),
+}));
+import Home from './page';
+function createResponse(status: number, body?: unknown) {
+  return {
+    status,
+    json: async () => body,
+  };
+}
+describe('src/app/page.tsx - Runtime Role Detection', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.stubGlobal('fetch', mockFetch);
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+  it('detects node mode when /api/nodes returns 404 with node mode error', async () => {
+    mockFetch.mockResolvedValue(createResponse(404, { error: 'Route unavailable in node mode' }));
+    render(<Home />);
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: /VibePulse \(Node\)/i })).toBeTruthy();
+    });
+    expect(screen.queryByRole('button', { name: 'Nodes' })).toBeNull();
+    expect(mockFetch).toHaveBeenCalledWith('/api/nodes');
+  });
+  it('detects hub mode when /api/nodes returns 200', async () => {
+    mockFetch.mockResolvedValue(createResponse(200, { nodes: [] }));
+    render(<Home />);
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: /VibePulse$/i })).toBeTruthy();
+    });
+    expect(screen.getByRole('button', { name: 'Nodes' })).toBeTruthy();
+    expect(mockFetch).toHaveBeenCalledWith('/api/nodes');
+  });
+  it('detects hub mode when /api/nodes returns non-404 status', async () => {
+    mockFetch.mockResolvedValue(createResponse(500, { error: 'Server error' }));
+    render(<Home />);
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: /VibePulse$/i })).toBeTruthy();
+    });
+    expect(screen.getByRole('button', { name: 'Nodes' })).toBeTruthy();
+  });
+  it('defaults to hub mode on network error', async () => {
+    mockFetch.mockRejectedValue(new Error('Network error'));
+    render(<Home />);
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: /VibePulse$/i })).toBeTruthy();
+    });
+    expect(screen.getByRole('button', { name: 'Nodes' })).toBeTruthy();
+  });
+});

package/.next/standalone/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,358 @@
+'use client';
+import { useState, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { KanbanBoard, type SessionHostStatus } from "@/components/KanbanBoard";
+import { ErrorBoundary } from "@/components/ErrorBoundary";
+import { useOpencodeSync } from "@/hooks/useOpencodeSync";
+import { isMuted, playToggleFeedbackSound, setMuted, subscribeMuted, unlockAudio } from "@/lib/notificationSound";
+import { Info, Server } from 'lucide-react';
+import { ConfigButton } from "@/components/opencode-config/ConfigButton";
+import { FullscreenConfigPanel } from "@/components/opencode-config/FullscreenConfigPanel";
+import { HostManagerDialog } from "@/components/host-config/HostManagerDialog";
+import { useHostSources } from "@/hooks/useHostSources";
+import { getHostAccentTextClass } from '@/lib/hostAccent';
+const DATE_FILTERS = [
+    { label: '1d', days: 1 },
+    { label: '3d', days: 3 },
+    { label: '7d', days: 7 },
+    { label: '30d', days: 30 },
+    { label: 'All', days: 0 },
+];
+const START_COMMAND_TEMPLATE = 'opencode --port <PORT>';
+type ProcessHint = {
+    pid: number;
+    directory: string;
+    projectName: string;
+    reason: 'process_without_api_port';
+};
+function isRecord(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && value !== null;
+}
+export default function Home() {
+    useOpencodeSync();
+    const [runtimeRole, setRuntimeRole] = useState<'unknown' | 'hub' | 'node'>('unknown');
+    const hostSourcesState = useHostSources({ runtimeRole });
+    const [filterDays, setFilterDays] = useState(7);
+    const muted = useSyncExternalStore(subscribeMuted, isMuted, () => false);
+    const [processHints, setProcessHints] = useState<ProcessHint[]>([]);
+    const [isProcessHintOpen, setIsProcessHintOpen] = useState(false);
+    const [copyFeedback, setCopyFeedback] = useState<'idle' | 'copied' | 'failed'>('idle');
+    const [configPanelOpen, setConfigPanelOpen] = useState(false);
+    const [hostManagerOpen, setHostManagerOpen] = useState(false);
+    const [hostStatuses, setHostStatuses] = useState<SessionHostStatus[]>([]);
+    const isNodeMode = runtimeRole === 'node';
+    const processHintButtonRef = useRef<HTMLButtonElement | null>(null);
+    const processHintPopoverRef = useRef<HTMLDivElement | null>(null);
+    useEffect(() => {
+        let cancelled = false;
+        fetch('/api/nodes')
+            .then(async res => {
+                if (cancelled) {
+                    return;
+                }
+                let body: unknown = null;
+                if (res.status === 404) {
+                    try {
+                        body = await res.json();
+                    } catch {
+                        body = null;
+                    }
+                }
+                const isNodeModeResponse = res.status === 404 && isRecord(body) && body.error === 'Route unavailable in node mode';
+                setRuntimeRole(isNodeModeResponse ? 'node' : 'hub');
+            })
+            .catch(() => {
+                if (!cancelled) {
+                    setRuntimeRole('hub');
+                }
+            });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const processHintProjects = useMemo(
+        () => Array.from(new Set(processHints.map((hint) => hint.projectName))),
+        [processHints]
+    );
+    const hasProcessHints = processHints.length > 0;
+    const processHintSummary = processHintProjects.length === 1
+        ? `${processHintProjects[0]} has an OpenCode process without an exposed API port.`
+        : `${processHintProjects.length} projects have OpenCode processes without exposed API ports.`;
+    const hostStatusById = useMemo(
+        () => new Map(hostStatuses.map((status) => [status.hostId, status] as const)),
+        [hostStatuses]
+    );
+    useEffect(() => {
+        const unlock = () => {
+            unlockAudio();
+            document.removeEventListener('click', unlock);
+            document.removeEventListener('pointerdown', unlock);
+            document.removeEventListener('keydown', unlock);
+            document.removeEventListener('touchstart', unlock);
+        };
+        document.addEventListener('click', unlock);
+        document.addEventListener('pointerdown', unlock, { passive: true });
+        document.addEventListener('keydown', unlock);
+        document.addEventListener('touchstart', unlock, { passive: true });
+        return () => {
+            document.removeEventListener('click', unlock);
+            document.removeEventListener('pointerdown', unlock);
+            document.removeEventListener('keydown', unlock);
+            document.removeEventListener('touchstart', unlock);
+        };
+    }, []);
+    useEffect(() => {
+        if (!isProcessHintOpen || !hasProcessHints) {
+            return;
+        }
+        const handlePointerDown = (event: MouseEvent) => {
+            const target = event.target as Node;
+            const popover = processHintPopoverRef.current;
+            const button = processHintButtonRef.current;
+            if (popover?.contains(target) || button?.contains(target)) {
+                return;
+            }
+            setIsProcessHintOpen(false);
+        };
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key !== 'Escape') {
+                return;
+            }
+            setIsProcessHintOpen(false);
+            processHintButtonRef.current?.focus();
+        };
+        document.addEventListener('mousedown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [hasProcessHints, isProcessHintOpen]);
+    const toggleMute = () => {
+        unlockAudio();
+        const newMuted = !muted;
+        setMuted(newMuted);
+        if (!newMuted) {
+            playToggleFeedbackSound();
+        }
+    };
+    const handleCopyStartCommand = async () => {
+        try {
+            await navigator.clipboard.writeText(START_COMMAND_TEMPLATE);
+            setCopyFeedback('copied');
+            setTimeout(() => setCopyFeedback('idle'), 1500);
+        } catch {
+            setCopyFeedback('failed');
+            setTimeout(() => setCopyFeedback('idle'), 2000);
+        }
+    };
+    return (
+        <div className="min-h-screen bg-zinc-50 dark:bg-black">
+            <main className="h-screen flex flex-col">
+                <header className="flex items-center justify-between px-4 py-4 border-b border-gray-200 dark:border-zinc-800">
+                    <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
+                        VibePulse {isNodeMode ? '(Node)' : ''}
+                    </h1>
+                    <div className="flex items-center gap-3 flex-wrap justify-end">
+                        <button
+                            type="button"
+                            onClick={toggleMute}
+                            className={`p-1.5 rounded-lg transition-all duration-150 ${
+                                muted
+                                    ? 'text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800'
+                                    : 'text-blue-500 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/20'
+                            }`}
+                            title={muted ? 'Unmute notifications' : 'Mute notifications'}
+                        >
+                            {muted ? (
+                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" />
+                                </svg>
+                            ) : (
+                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072M18.364 5.636a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
+                                </svg>
+                            )}
+                        </button>
+                        {hasProcessHints ? (
+                            <div className="relative">
+                                <button
+                                    ref={processHintButtonRef}
+                                    type="button"
+                                    onClick={() => setIsProcessHintOpen((open) => !open)}
+                                    className={`p-1.5 rounded-lg transition-all duration-150 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 ${
+                                        isProcessHintOpen ? 'bg-gray-100 dark:bg-zinc-800' : ''
+                                    }`}
+                                    aria-label="OpenCode process hint details"
+                                    aria-haspopup="dialog"
+                                    aria-expanded={hasProcessHints && isProcessHintOpen}
+                                    aria-controls="process-hint-popover"
+                                >
+                                    <Info className="h-3.5 w-3.5" />
+                                </button>
+                                {hasProcessHints && isProcessHintOpen ? (
+                                    <div
+                                        id="process-hint-popover"
+                                        ref={processHintPopoverRef}
+                                        role="dialog"
+                                        aria-label="OpenCode process hints"
+                                        className="absolute right-0 top-9 z-30 w-80 rounded-lg border border-blue-200 bg-white p-3 shadow-xl dark:border-blue-900/40 dark:bg-zinc-900"
+                                    >
+                                        <p className="text-xs font-medium text-blue-900 dark:text-blue-200">
+                                            {processHintSummary}
+                                        </p>
+                                        <p className="mt-1 text-[11px] leading-relaxed text-blue-800 dark:text-blue-300">
+                                            Sessions from these instances become visible once OpenCode starts with an exposed API port.
+                                        </p>
+                                        <div className="mt-2 rounded-md bg-blue-50 px-2 py-1.5 dark:bg-blue-900/20">
+                                            <code className="text-[11px] text-blue-900 dark:text-blue-200">{START_COMMAND_TEMPLATE}</code>
+                                        </div>
+                                        <div className="mt-2 flex items-center justify-between gap-2">
+                                            <span className="text-[10px] text-blue-700 dark:text-blue-300">
+                                                VibePulse auto-detects active ports.
+                                            </span>
+                                            <button
+                                                type="button"
+                                                onClick={handleCopyStartCommand}
+                                                className="rounded-md border border-blue-200 px-2 py-1 text-[10px] font-medium text-blue-800 transition-colors hover:bg-blue-50 dark:border-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/30"
+                                            >
+                                                {copyFeedback === 'copied'
+                                                    ? 'Copied'
+                                                    : copyFeedback === 'failed'
+                                                        ? 'Copy Failed'
+                                                        : 'Copy'}
+                                            </button>
+                                        </div>
+                                    </div>
+                                ) : null}
+                            </div>
+                        ) : null}
+                        <svg className="w-4 h-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                        <div className="flex items-center gap-1 bg-gray-100 dark:bg-zinc-800 rounded-lg p-0.5">
+                            {DATE_FILTERS.map((f) => (
+                                <button
+                                    key={f.days}
+                                    type="button"
+                                    onClick={() => setFilterDays(f.days)}
+                                    className={`px-3 py-1 text-xs font-medium rounded-md transition-all duration-150 ${
+                                        filterDays === f.days
+                                            ? 'bg-white dark:bg-zinc-600 text-gray-900 dark:text-white shadow-sm'
+                                            : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
+                                    }`}
+                                >
+                                    {f.label}
+                                </button>
+                            ))}
+                        </div>
+                        <div className="flex items-center gap-1 bg-gray-100 dark:bg-zinc-800 rounded-lg p-0.5" data-testid="host-filter">
+                            <button
+                                type="button"
+                                onClick={() => hostSourcesState.setActiveFilter('all')}
+                                className={`px-3 py-1 text-xs font-medium rounded-md transition-all duration-150 ${
+                                    hostSourcesState.activeFilter === 'all'
+                                        ? 'bg-white dark:bg-zinc-600 text-gray-900 dark:text-white shadow-sm'
+                                        : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
+                                }`}
+                                data-testid="host-filter-option-all"
+                            >
+                                All Hosts
+                            </button>
+                            {hostSourcesState.enabledSources.map((source) => {
+                                const status = hostStatusById.get(source.hostId);
+                                const isOnline = status?.online ?? (source.hostId === 'local' && hostSourcesState.enabledSources.length === 1);
+                                const hostAccentClass = getHostAccentTextClass(source.hostId, source.hostLabel);
+                                return (
+                                    <button
+                                        key={source.hostId}
+                                        type="button"
+                                        onClick={() => hostSourcesState.setActiveFilter(source.hostId)}
+                                        className={`flex items-center gap-1.5 px-3 py-1 text-xs font-medium rounded-md transition-all duration-150 ${
+                                            hostSourcesState.activeFilter === source.hostId
+                                                ? 'bg-white dark:bg-zinc-600 text-gray-900 dark:text-white shadow-sm'
+                                                : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'
+                                        }`}
+                                        data-testid={`host-filter-option-${source.hostId}`}
+                                    >
+                                        <span className={`inline-flex items-center justify-center flex-shrink-0 ${hostAccentClass}`} data-testid={`host-identity-${source.hostId}`} title={`Host identity: ${source.hostLabel}`}>
+                                            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+                                            </svg>
+                                        </span>
+                                        <span className="truncate">{source.hostLabel}</span>
+                                        <span className="ml-auto inline-flex items-center pl-1.5" data-testid={`host-indicators-${source.hostId}`}>
+                                            <span
+                                                className={`w-2 h-2 rounded-full ${isOnline ? 'bg-emerald-500' : 'bg-gray-400'}`}
+                                                data-testid={`host-status-${source.hostId}`}
+                                                title={isOnline ? 'Online' : 'Offline'}
+                                            />
+                                        </span>
+                                    </button>
+                                );
+                            })}
+                        </div>
+                        {!isNodeMode && (
+                            <button
+                                type="button"
+                                onClick={() => setHostManagerOpen(true)}
+                                className="flex items-center gap-1.5 rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-xs font-medium text-zinc-700 shadow-sm transition-colors hover:bg-zinc-50 hover:text-zinc-900 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700 dark:hover:text-white"
+                            >
+                                <Server className="h-3.5 w-3.5" />
+                                Nodes
+                            </button>
+                        )}
+                        <ConfigButton onClick={() => setConfigPanelOpen(true)} />
+                    </div>
+                </header>
+                <ErrorBoundary>
+                    <KanbanBoard
+                        filterDays={filterDays}
+                        onProcessHintsChange={setProcessHints}
+                        hostSources={hostSourcesState}
+                        isNodeMode={isNodeMode}
+                        showHostFilter={false}
+                        onHostStatusesChange={setHostStatuses}
+                    />
+                </ErrorBoundary>
+                <FullscreenConfigPanel
+                    open={configPanelOpen}
+                    onClose={() => setConfigPanelOpen(false)}
+                />
+                <HostManagerDialog
+                    hostSources={hostSourcesState}
+                    open={hostManagerOpen}
+                    onClose={() => setHostManagerOpen(false)}
+                    isNodeMode={isNodeMode}
+                />
+            </main>
+        </div>
+    );
+}

package/.next/standalone/src/components/AGENTS.md ADDED Viewed

@@ -0,0 +1,42 @@
+# COMPONENTS KNOWLEDGE BASE
+**Scope:** `src/components/`
+## OVERVIEW
+`src/components/` contains the kanban board experience, shared UI primitives, and the OpenCode configuration interface (agents/categories/profiles).
+## STRUCTURE
+```text
+src/components/
+├── KanbanBoard.tsx                 # board orchestration + fetch/degraded state
+├── ProjectCard.tsx                 # per-project group renderer
+├── SessionCard.tsx                 # session card presentation
+├── SessionList.tsx                 # list-style view support
+├── opencode-config/                # full config UX
+│   ├── categories/                 # category form/list/manager
+│   └── profiles/                   # profile editor/list/manager/card
+└── ui/                             # small reusable primitives
+```
+## WHERE TO LOOK
+| Task | Location | Notes |
+|------|----------|-------|
+| Board fetch + fallback behavior | `src/components/KanbanBoard.tsx` | query polling, stale snapshot merge, retry UX |
+| Project grouping + card actions | `src/components/ProjectCard.tsx` | grouped rendering and per-project controls |
+| Config panel composition | `src/components/opencode-config/ConfigPanel.tsx`, `src/components/opencode-config/FullscreenConfigPanel.tsx` | tabs + panel orchestration |
+| Agent model editing | `src/components/opencode-config/AgentConfigForm.tsx` | model/variant/temp/top_p editing flow |
+| Category workflow | `src/components/opencode-config/categories/*` | category list + editor rules |
+| Profile workflow | `src/components/opencode-config/profiles/*` | CRUD, apply/import/export surface |
+## CONVENTIONS
+- Board-level data fetching lives in `KanbanBoard.tsx` and is backed by TanStack Query caches.
+- Config subfeatures are split by domain (`categories/`, `profiles/`) with manager/list/editor-style components.
+- UI tests are co-located with components (`*.test.tsx`).
+- Session display transforms are delegated to `src/lib/transform.ts` rather than duplicated in child components.
+- Config mutations rely on API endpoints plus query invalidation instead of local-only state divergence.
+## ANTI-PATTERNS
+- Do not bypass `KanbanBoard` degraded-mode snapshot logic when touching session-fetch UX.
+- Do not duplicate waiting/status merge logic from realtime hooks inside multiple card components.
+- Do not inline heavy business validation into presentational components; keep validation in API/lib layers.
+- Do not expand `opencode-config` with one-off files at root when feature folders (`categories`, `profiles`) already fit.