@lamalibre/lamaste-agent-ui 4.0.0

package/dist-web/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lamaste Agent</title>
+    <script type="module" crossorigin src="/assets/index-D1W7KjDX.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Cl7aUHaU.css">
+  </head>
+  <body style="background-color: #09090b">
+    <div id="root"></div>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@lamalibre/lamaste-agent-ui",
+  "version": "4.0.0",
+  "description": "Shared React agent UI for Lamaste — consumed by desktop app and web agent panel",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./pages/*": "./src/pages/*",
+    "./components/*": "./src/components/*",
+    "./context/*": "./src/context/*",
+    "./lib/*": "./src/lib/*"
+  },
+  "scripts": {
+    "build:web": "vite build"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "clsx": "^2.1.0",
+    "lucide-react": ">=0.383.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tailwind-merge": "^2.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "vite": "^8.0.5"
+  },
+  "files": [
+    "src/",
+    "dist-web/"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AnonVans/lamaste.git",
+    "directory": "packages/agent/ui"
+  },
+  "license": "SEE LICENSE IN LICENSE.md",
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/src/WebApp.jsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { Activity, Network, Compass, Puzzle, ScrollText, Settings, Terminal } from 'lucide-react';
+import AgentDashboardPage from './pages/Dashboard.jsx';
+import AgentTunnelsPage from './pages/Tunnels.jsx';
+import AgentServicesPage from './pages/Services.jsx';
+import AgentPluginsPage from './pages/Plugins.jsx';
+import AgentLogsPage from './pages/Logs.jsx';
+import AgentSettingsPage from './pages/Settings.jsx';
+
+const TABS = [
+  { id: 'dashboard', label: 'Dashboard', icon: Activity },
+  { id: 'tunnels', label: 'Tunnels', icon: Network },
+  { id: 'services', label: 'Services', icon: Compass },
+  { id: 'plugins', label: 'Plugins', icon: Puzzle },
+  { id: 'logs', label: 'Logs', icon: ScrollText },
+  { id: 'settings', label: 'Settings', icon: Settings },
+];
+
+export default function WebApp() {
+  const [activeTab, setActiveTab] = useState('dashboard');
+
+  const renderPage = () => {
+    switch (activeTab) {
+      case 'tunnels':
+        return <AgentTunnelsPage />;
+      case 'services':
+        return <AgentServicesPage />;
+      case 'plugins':
+        return <AgentPluginsPage />;
+      case 'logs':
+        return <AgentLogsPage />;
+      case 'settings':
+        return <AgentSettingsPage />;
+      case 'dashboard':
+      default:
+        return <AgentDashboardPage />;
+    }
+  };
+
+  return (
+    <div className="flex h-screen bg-zinc-950">
+      {/* Sidebar */}
+      <div className="w-48 bg-zinc-900 border-r border-zinc-800 flex flex-col">
+        <div className="p-4 border-b border-zinc-800">
+          <div className="flex items-center gap-2">
+            <Terminal size={18} className="text-cyan-400" />
+            <span className="text-sm font-bold text-white">Lamaste Agent</span>
+          </div>
+        </div>
+
+        <nav className="flex-1 p-2 overflow-y-auto">
+          {TABS.map(({ id, label, icon: Icon }) => (
+            <button
+              key={id}
+              type="button"
+              onClick={() => setActiveTab(id)}
+              className={`w-full flex items-center gap-2 px-3 py-2 rounded text-sm mb-0.5 ${
+                activeTab === id
+                  ? 'bg-zinc-800 text-cyan-400'
+                  : 'text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50'
+              }`}
+            >
+              <Icon size={14} />
+              {label}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {/* Main content */}
+      <div className="flex-1 overflow-y-auto">{renderPage()}</div>
+    </div>
+  );
+}

package/src/components/Toast.jsx

@@ -0,0 +1,55 @@
+import { createContext, useCallback, useContext, useState } from 'react';
+import { X } from 'lucide-react';
+
+const ToastContext = createContext(null);
+
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast must be used within a ToastProvider');
+  return ctx;
+}
+
+let toastId = 0;
+
+export function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+
+  const addToast = useCallback((message, variant = 'success') => {
+    const id = ++toastId;
+    setToasts((prev) => [...prev, { id, message, variant }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 3000);
+  }, []);
+
+  const removeToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={addToast}>
+      {children}
+      <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
+        {toasts.map((toast) => (
+          <div
+            key={toast.id}
+            className={`flex items-center gap-3 rounded-lg border px-4 py-3 text-sm font-mono shadow-lg ${
+              toast.variant === 'error'
+                ? 'bg-red-500/10 border-red-500/20 text-red-400'
+                : 'bg-green-500/10 border-green-500/20 text-green-400'
+            }`}
+          >
+            <span className="flex-1">{toast.message}</span>
+            <button
+              type="button"
+              onClick={() => removeToast(toast.id)}
+              className="text-zinc-500 hover:text-zinc-300"
+            >
+              <X size={14} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}

package/src/context/AgentClientContext.jsx

@@ -0,0 +1,88 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * AgentClientContext — the data layer abstraction for the agent panel.
+ *
+ * Each host (desktop app, web agent panel) provides its own implementation:
+ * - Desktop app: uses Tauri invoke() → Rust subprocess calls
+ * - Web agent panel: uses apiFetch() with HTTP requests
+ *
+ * All methods return promises. The page components call useAgentClient()
+ * and are completely host-agnostic.
+ */
+const AgentClientContext = createContext(null);
+
+/**
+ * @returns {AgentClient} The agent client provided by the host.
+ * @throws If used outside an AgentClientProvider.
+ *
+ * @typedef {Object} AgentClient
+ *
+ * Status & Control:
+ * @property {() => Promise<{running: boolean, pid?: number, chiselVersion?: string, installed?: boolean}>} getStatus
+ * @property {() => Promise<any>} startAgent
+ * @property {() => Promise<any>} stopAgent
+ * @property {() => Promise<any>} restartAgent
+ * @property {() => Promise<any>} updateAgent
+ *
+ * Tunnels:
+ * @property {() => Promise<Array>} getTunnels
+ * @property {(data: {subdomain: string, port: number, description?: string}) => Promise<any>} createTunnel
+ * @property {(id: string, data: {enabled: boolean}) => Promise<any>} toggleTunnel
+ * @property {(id: string) => Promise<any>} deleteTunnel
+ *
+ * Services:
+ * @property {() => Promise<{services: Array, dockerContainers: Array}>} scanServices
+ * @property {() => Promise<{services: Array}>} getServiceRegistry
+ * @property {(data: {name: string, port: number, binary?: string, processName?: string, category: string, description: string}) => Promise<any>} addCustomService
+ * @property {(id: string) => Promise<any>} removeCustomService
+ *
+ * Logs:
+ * @property {() => Promise<string>} getLogs
+ *
+ * Configuration:
+ * @property {() => Promise<Object>} getConfig
+ * @property {() => Promise<string>} getPanelUrl
+ *
+ * Certificate:
+ * @property {() => Promise<any>} rotateCertificate
+ * @property {() => Promise<any>} downloadCertificate
+ *
+ * Web Panel:
+ * @property {() => Promise<{enabled: boolean, fqdn?: string, port?: number, running?: boolean}>} getPanelExposeStatus
+ * @property {(enabled: boolean) => Promise<any>} togglePanelExpose
+ * @property {() => Promise<any>} startAgentPanel
+ * @property {() => Promise<any>} stopAgentPanel
+ *
+ * Lifecycle:
+ * @property {() => Promise<any>} uninstallAgent
+ *
+ * Plugins:
+ * @property {() => Promise<{plugins: Array}>} getAgentPlugins
+ * @property {(packageName: string) => Promise<{ok: boolean, plugin: Object}>} installAgentPlugin
+ * @property {(name: string) => Promise<any>} enableAgentPlugin
+ * @property {(name: string) => Promise<any>} disableAgentPlugin
+ * @property {(name: string) => Promise<any>} uninstallAgentPlugin
+ * @property {(name: string) => Promise<any>} updateAgentPlugin
+ * @property {(name: string) => Promise<{type: 'source', source: string}>} fetchAgentPluginBundle
+ * @property {(name: string) => Promise<{name: string, currentVersion: string, latestVersion: string, hasUpdate: boolean}>} checkAgentPluginUpdate
+ *
+ * External links (host-specific):
+ * @property {(url: string) => Promise<void>} openExternal
+ */
+export function useAgentClient() {
+  const ctx = useContext(AgentClientContext);
+  if (!ctx) throw new Error('useAgentClient must be used within an AgentClientProvider');
+  return ctx;
+}
+
+/**
+ * Wrap your agent pages with this provider, supplying the host-specific client.
+ *
+ * @param {{ client: AgentClient, children: React.ReactNode }} props
+ */
+export function AgentClientProvider({ client, children }) {
+  return <AgentClientContext.Provider value={client}>{children}</AgentClientContext.Provider>;
+}
+
+export default AgentClientContext;

package/src/index.js

@@ -0,0 +1,19 @@
+// Context
+export { AgentClientProvider, useAgentClient } from './context/AgentClientContext.jsx';
+
+// Components
+export { ToastProvider, useToast } from './components/Toast.jsx';
+
+// Pages
+export { default as AgentDashboardPage } from './pages/Dashboard.jsx';
+export { default as AgentTunnelsPage } from './pages/Tunnels.jsx';
+export { default as AgentServicesPage } from './pages/Services.jsx';
+export { default as AgentLogsPage } from './pages/Logs.jsx';
+export { default as AgentSettingsPage } from './pages/Settings.jsx';
+export { default as AgentPluginsPage, AgentPluginPanel } from './pages/Plugins.jsx';
+
+// Web client
+export { createWebAgentClient } from './lib/web-agent-client.js';
+
+// Utilities
+export { cn } from './lib/cn.js';

package/src/lib/cn.js

@@ -0,0 +1,6 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/errorMessage.js

@@ -0,0 +1,10 @@
+/**
+ * Extract an error message from any thrown value.
+ * Tauri `invoke()` rejects with a plain string, while `fetch`-based clients
+ * reject with an Error object.  This normalises both.
+ */
+export function errorMessage(err) {
+  if (typeof err === 'string') return err || 'An unknown error occurred';
+  if (err instanceof Error) return err.message || 'An unknown error occurred';
+  return String(err ?? 'An unknown error occurred') || 'An unknown error occurred';
+}

package/src/lib/web-agent-client.js

@@ -0,0 +1,114 @@
+/**
+ * Web-backed AgentClient implementation.
+ *
+ * Used when the agent panel is accessed via agent-<label>.<domain>.
+ * All calls go through the local panel HTTP server's REST API.
+ *
+ * @returns {import('../context/AgentClientContext.jsx').AgentClient}
+ */
+export function createWebAgentClient() {
+  async function apiFetch(path, opts = {}) {
+    const { body, method = 'GET', ...rest } = opts;
+    const headers = { ...rest.headers };
+    if (body) {
+      headers['Content-Type'] = 'application/json';
+    }
+
+    const res = await fetch(`/api${path}`, {
+      method,
+      headers,
+      body: body ? JSON.stringify(body) : undefined,
+    });
+
+    // No-content responses (204)
+    if (res.status === 204) return undefined;
+
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      throw new Error(data.error || `HTTP ${res.status}`);
+    }
+    return data;
+  }
+
+  return {
+    // Status & Control
+    getStatus: () => apiFetch('/status'),
+    startAgent: () => apiFetch('/start', { method: 'POST' }),
+    stopAgent: () => apiFetch('/stop', { method: 'POST' }),
+    restartAgent: () => apiFetch('/restart', { method: 'POST' }),
+    updateAgent: () => apiFetch('/update', { method: 'POST' }),
+
+    // Tunnels
+    getTunnels: () => apiFetch('/tunnels').then((r) => r.tunnels || []),
+    createTunnel: (data) => apiFetch('/tunnels', { method: 'POST', body: data }),
+    toggleTunnel: (id, data) => apiFetch(`/tunnels/${id}`, { method: 'PATCH', body: data }),
+    deleteTunnel: (id) => apiFetch(`/tunnels/${id}`, { method: 'DELETE' }),
+
+    // Services — /services/scan is a live scan (process detection + docker
+    // inspection), /services/registry returns the persisted catalog. Custom
+    // services are created/removed under /services/custom.
+    scanServices: () => apiFetch('/services/scan'),
+    getServiceRegistry: () => apiFetch('/services/registry'),
+    addCustomService: (data) => apiFetch('/services/custom', { method: 'POST', body: data }),
+    removeCustomService: (id) =>
+      apiFetch(`/services/custom/${encodeURIComponent(id)}`, { method: 'DELETE' }),
+
+    // Logs
+    getLogs: () => apiFetch('/logs').then((r) => r.logs || ''),
+
+    // Configuration
+    getConfig: () => apiFetch('/config'),
+    getPanelUrl: async () => window.location.origin,
+
+    // Certificate
+    rotateCertificate: () => apiFetch('/certificate/rotate', { method: 'POST' }),
+    downloadCertificate: () => apiFetch('/certificate/download'),
+
+    // Web Panel
+    getPanelExposeStatus: () => apiFetch('/panel-expose-status'),
+    togglePanelExpose: (enabled) =>
+      apiFetch(enabled ? '/panel-expose' : '/panel-retract', { method: 'POST' }),
+
+    // Agent panel service — the panel hosting this web client is, by
+    // definition, running. `startAgentPanel` is idempotent and resolves the
+    // current expose status so callers can branch on it. `stopAgentPanel` is
+    // refused: a web client cannot kill the server it is served from without
+    // orphaning its own session — the desktop app remains the control plane
+    // for the panel lifecycle.
+    startAgentPanel: () => apiFetch('/panel-expose-status'),
+    stopAgentPanel: () =>
+      Promise.reject(
+        new Error(
+          'Stopping the agent panel from the web client is not supported — use the desktop app.',
+        ),
+      ),
+
+    // Lifecycle
+    uninstallAgent: () => apiFetch('/uninstall', { method: 'POST' }),
+
+    // Plugins
+    getAgentPlugins: () => apiFetch('/plugins'),
+    installAgentPlugin: (packageName) =>
+      apiFetch('/plugins/install', { method: 'POST', body: { packageName } }),
+    enableAgentPlugin: (name) =>
+      apiFetch(`/plugins/${encodeURIComponent(name)}/enable`, { method: 'POST' }),
+    disableAgentPlugin: (name) =>
+      apiFetch(`/plugins/${encodeURIComponent(name)}/disable`, { method: 'POST' }),
+    uninstallAgentPlugin: (name) =>
+      apiFetch(`/plugins/${encodeURIComponent(name)}`, { method: 'DELETE' }),
+    updateAgentPlugin: (name) =>
+      apiFetch(`/plugins/${encodeURIComponent(name)}/update`, { method: 'POST' }),
+    fetchAgentPluginBundle: (name) =>
+      apiFetch(`/plugins/${encodeURIComponent(name)}/bundle`).then((r) => ({
+        type: 'source',
+        source: r.source,
+      })),
+    checkAgentPluginUpdate: (name) => apiFetch(`/plugins/${encodeURIComponent(name)}/check-update`),
+
+    // External links — opens in new tab in web context
+    openExternal: (url) => {
+      window.open(url, '_blank', 'noopener,noreferrer');
+      return Promise.resolve();
+    },
+  };
+}

package/src/pages/Dashboard.jsx

@@ -0,0 +1,175 @@
+import { Activity, HardDrive, RefreshCw, Loader2, Play, Square, Download } from 'lucide-react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useAgentClient } from '../context/AgentClientContext.jsx';
+
+export default function Dashboard() {
+  const client = useAgentClient();
+  const queryClient = useQueryClient();
+
+  const invalidateAll = () => {
+    queryClient.invalidateQueries({ queryKey: ['agent', 'status'] });
+    queryClient.invalidateQueries({ queryKey: ['agent', 'tunnels'] });
+    queryClient.invalidateQueries({ queryKey: ['agents'] });
+  };
+
+  const statusQuery = useQuery({
+    queryKey: ['agent', 'status'],
+    queryFn: () => client.getStatus(),
+    refetchInterval: 3000,
+  });
+
+  const stopMutation = useMutation({
+    mutationFn: () => client.stopAgent(),
+    onSuccess: invalidateAll,
+  });
+
+  const startMutation = useMutation({
+    mutationFn: () => client.startAgent(),
+    onSuccess: invalidateAll,
+  });
+
+  const restartMutation = useMutation({
+    mutationFn: () => client.restartAgent(),
+    onSuccess: invalidateAll,
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: () => client.updateAgent(),
+    onSuccess: invalidateAll,
+  });
+
+  const anyPending =
+    stopMutation.isPending ||
+    startMutation.isPending ||
+    restartMutation.isPending ||
+    updateMutation.isPending;
+
+  const lastResult = updateMutation.isSuccess
+    ? { type: 'success', msg: updateMutation.data }
+    : updateMutation.isError
+      ? { type: 'error', msg: updateMutation.error?.message || 'Update failed' }
+      : stopMutation.isSuccess
+        ? { type: 'success', msg: stopMutation.data }
+        : stopMutation.isError
+          ? { type: 'error', msg: stopMutation.error?.message || 'Stop failed' }
+          : startMutation.isSuccess
+            ? { type: 'success', msg: startMutation.data }
+            : startMutation.isError
+              ? { type: 'error', msg: startMutation.error?.message || 'Start failed' }
+              : restartMutation.isSuccess
+                ? { type: 'success', msg: restartMutation.data }
+                : restartMutation.isError
+                  ? { type: 'error', msg: restartMutation.error?.message || 'Restart failed' }
+                  : null;
+
+  const chisel = statusQuery.data;
+
+  return (
+    <div className="p-6">
+      <h1 className="text-lg font-bold text-white mb-6">Dashboard</h1>
+
+      <div className="grid grid-cols-2 gap-4 mb-6">
+        {/* Connection Status */}
+        <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-5">
+          <div className="flex items-center gap-2 mb-3">
+            <Activity size={14} className="text-cyan-400" />
+            <span className="text-xs font-medium uppercase text-zinc-400">Connection</span>
+          </div>
+          <div className="flex items-center gap-2 mb-2">
+            <span
+              className={`h-3 w-3 rounded-full ${chisel?.running ? 'bg-green-400' : 'bg-red-400'}`}
+            />
+            <span className="text-white font-semibold">
+              {chisel?.running ? 'Connected' : 'Disconnected'}
+            </span>
+          </div>
+          {chisel?.pid && <p className="text-xs text-zinc-500">PID: {chisel.pid}</p>}
+        </div>
+
+        {/* Chisel Info */}
+        <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-5">
+          <div className="flex items-center gap-2 mb-3">
+            <HardDrive size={14} className="text-cyan-400" />
+            <span className="text-xs font-medium uppercase text-zinc-400">Chisel</span>
+          </div>
+          <p className="text-white font-semibold mb-1">
+            {chisel?.installed ? `v${chisel.chiselVersion || '?'}` : 'Not installed'}
+          </p>
+          <p className="text-xs text-zinc-500">
+            {chisel?.installed ? 'Installed' : 'Run lamaste-agent setup'}
+          </p>
+        </div>
+      </div>
+
+      {/* Chisel Controls */}
+      <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-5 mb-4">
+        <h2 className="text-xs font-medium uppercase text-zinc-400 mb-3">Chisel Controls</h2>
+        <div className="flex gap-3">
+          <button
+            onClick={() => stopMutation.mutate()}
+            disabled={anyPending || !chisel?.running}
+            className="flex items-center gap-2 rounded bg-zinc-800 border border-zinc-700 px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {stopMutation.isPending ? (
+              <Loader2 size={14} className="animate-spin" />
+            ) : (
+              <Square size={14} />
+            )}
+            Stop
+          </button>
+          <button
+            onClick={() => startMutation.mutate()}
+            disabled={anyPending || chisel?.running}
+            className="flex items-center gap-2 rounded bg-zinc-800 border border-zinc-700 px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {startMutation.isPending ? (
+              <Loader2 size={14} className="animate-spin" />
+            ) : (
+              <Play size={14} />
+            )}
+            Start
+          </button>
+          <button
+            onClick={() => restartMutation.mutate()}
+            disabled={anyPending || !chisel?.installed}
+            className="flex items-center gap-2 rounded bg-zinc-800 border border-zinc-700 px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {restartMutation.isPending ? (
+              <Loader2 size={14} className="animate-spin" />
+            ) : (
+              <RefreshCw size={14} />
+            )}
+            Restart
+          </button>
+        </div>
+      </div>
+
+      {/* Update Agent */}
+      <div className="bg-zinc-900 border border-zinc-800 rounded-lg p-5">
+        <h2 className="text-xs font-medium uppercase text-zinc-400 mb-3">Agent</h2>
+        <button
+          onClick={() => updateMutation.mutate()}
+          disabled={anyPending}
+          className="flex items-center gap-2 rounded bg-cyan-600 hover:bg-cyan-500 px-4 py-2 text-sm text-white disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {updateMutation.isPending ? (
+            <Loader2 size={14} className="animate-spin" />
+          ) : (
+            <Download size={14} />
+          )}
+          Update Agent
+        </button>
+        <p className="text-xs text-zinc-500 mt-2">
+          Re-fetch tunnel configuration from the panel and reload Chisel.
+        </p>
+        {lastResult && (
+          <p
+            className={`text-xs mt-2 ${lastResult.type === 'success' ? 'text-green-400' : 'text-red-400'}`}
+          >
+            {lastResult.msg}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/pages/Logs.jsx

@@ -0,0 +1,54 @@
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useRef } from 'react';
+import { ScrollText, RefreshCw } from 'lucide-react';
+import { useAgentClient } from '../context/AgentClientContext.jsx';
+
+export default function Logs() {
+  const client = useAgentClient();
+  const logsRef = useRef(null);
+
+  const logsQuery = useQuery({
+    queryKey: ['agent', 'logs'],
+    queryFn: () => client.getLogs(),
+    refetchInterval: 3000,
+  });
+
+  const logs = logsQuery.data || '';
+
+  useEffect(() => {
+    if (logsRef.current) {
+      logsRef.current.scrollTop = logsRef.current.scrollHeight;
+    }
+  }, [logs]);
+
+  return (
+    <div className="p-6 h-full flex flex-col">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-lg font-bold text-white">Logs</h1>
+        <button
+          onClick={() => logsQuery.refetch()}
+          className="flex items-center gap-1.5 text-xs text-zinc-400 hover:text-zinc-200"
+        >
+          <RefreshCw size={12} />
+          Refresh
+        </button>
+      </div>
+
+      <div
+        ref={logsRef}
+        className="flex-1 min-h-0 bg-zinc-900 border border-zinc-800 rounded-lg p-4 overflow-y-auto"
+      >
+        {logs ? (
+          <pre className="text-xs text-zinc-300 whitespace-pre-wrap break-all leading-relaxed">
+            {logs}
+          </pre>
+        ) : (
+          <div className="flex flex-col items-center justify-center h-full text-zinc-600">
+            <ScrollText size={24} className="mb-2" />
+            <p className="text-xs">No logs available</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}