@flame0510/project-aether 1.1.9

package/app/tools/ToolsPageClient.tsx

@@ -0,0 +1,308 @@
+'use client';
+
+import { useEffect, useMemo, useState, type CSSProperties, type ReactNode } from 'react';
+import { TOOL_CATALOG, TOTAL_TOOL_COUNT, type ToolStatus } from './tools-catalog';
+import { Button, Input, Pill, LoadingSpinner } from '../components/ui';
+import type { Tone } from '../components/ui';
+
+const API_FETCH_OPTIONS: RequestInit = {
+  cache: 'no-store',
+  credentials: 'same-origin',
+};
+
+interface AudioModel {
+  provider: string;
+  model: string;
+  baseUrl?: string;
+}
+
+export interface AudioConfig {
+  enabled?: boolean;
+  timeoutSeconds?: number;
+  maxBytes?: number;
+  models?: AudioModel[];
+}
+
+const CONFIGURABLE_TOOL_COUNT = 1;
+
+const statusTone: Record<ToolStatus, Tone> = {
+  Configured: 'success',
+  Available: 'info',
+  'Coming soon': 'neutral',
+};
+
+function sanitizeAudioConfig(value: unknown): AudioConfig {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return {};
+  const raw = value as Record<string, unknown>;
+  const audio: AudioConfig = {};
+  if (typeof raw.enabled === 'boolean') audio.enabled = raw.enabled;
+  if (typeof raw.timeoutSeconds === 'number' && Number.isFinite(raw.timeoutSeconds)) audio.timeoutSeconds = raw.timeoutSeconds;
+  if (typeof raw.maxBytes === 'number' && Number.isFinite(raw.maxBytes)) audio.maxBytes = raw.maxBytes;
+  if (Array.isArray(raw.models)) {
+    audio.models = raw.models
+      .filter((model): model is Record<string, unknown> => Boolean(model) && typeof model === 'object' && !Array.isArray(model))
+      .map((model) => ({
+        provider: typeof model.provider === 'string' ? model.provider : '',
+        model: typeof model.model === 'string' ? model.model : '',
+        baseUrl: typeof model.baseUrl === 'string' ? model.baseUrl : '',
+      }));
+  }
+  return audio;
+}
+
+function hasAudioConfig(audio: AudioConfig | null): boolean {
+  if (!audio) return false;
+  if (audio.enabled !== undefined) return true;
+  if (audio.timeoutSeconds !== undefined) return true;
+  if (audio.maxBytes !== undefined) return true;
+  return Boolean(audio.models?.some((model) => model.provider || model.model || model.baseUrl));
+}
+
+function StatusBadge({ status }: { status: ToolStatus }) {
+  return <Pill tone={statusTone[status]}>{status}</Pill>;
+}
+
+const TIMEZONE_OPTIONS = [
+  'Europe/Rome', 'UTC', 'Europe/London', 'Europe/Berlin', 'Europe/Paris',
+  'America/New_York', 'America/Chicago', 'America/Denver', 'America/Los_Angeles',
+  'Asia/Tokyo', 'Asia/Shanghai', 'Asia/Dubai', 'Asia/Kolkata',
+  'Australia/Sydney', 'Pacific/Auckland',
+];
+
+export default function ToolsPageClient({ initialAudio = {}, initialTimezone = 'Europe/Rome', initialError = null }: { initialAudio?: AudioConfig | null; initialTimezone?: string; initialError?: string | null }) {
+  const [audio, setAudio] = useState<AudioConfig | null>(sanitizeAudioConfig(initialAudio));
+  const [timezone, setTimezone] = useState(initialTimezone);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(initialError);
+  const [success, setSuccess] = useState(false);
+  const [clock, setClock] = useState('');
+
+  useEffect(() => {
+    const tick = () => setClock(new Date().toLocaleString('it-IT', { timeZone: timezone, hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }));
+    tick();
+    const id = setInterval(tick, 1000);
+    return () => clearInterval(id);
+  }, [timezone]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    fetch('/api/tools-config', { ...API_FETCH_OPTIONS, signal: controller.signal })
+      .then((r) => r.json())
+      .then((data) => {
+        if (controller.signal.aborted) return;
+        setAudio(sanitizeAudioConfig(data.audio));
+        if (data.timezone) setTimezone(data.timezone);
+        if (data.error) setError(String(data.error));
+      })
+      .catch((e: unknown) => {
+        if (controller.signal.aborted) return;
+        setError((e as Error).message);
+      });
+    return () => controller.abort();
+  }, []);
+
+  async function handleSave() {
+    setSaving(true);
+    setError(null);
+    setSuccess(false);
+    try {
+      const res = await fetch('/api/tools-config', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ audio }),
+      });
+      const data = (await res.json()) as { ok?: boolean; error?: string; audio?: AudioConfig };
+      if (!res.ok) throw new Error(data.error ?? 'Save failed');
+      if (data.audio) setAudio(data.audio);
+      setSuccess(true);
+      setTimeout(() => setSuccess(false), 3000);
+    } catch (e: unknown) {
+      setError((e as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function updateModel(field: keyof AudioModel, value: string) {
+    setAudio((prev) => {
+      if (!prev) return prev;
+      const models = prev.models ? [...prev.models] : [{ provider: '', model: '' }];
+      models[0] = { ...models[0], [field]: value };
+      return { ...prev, models };
+    });
+  }
+
+  const audioStatus: ToolStatus = hasAudioConfig(audio) ? 'Configured' : 'Available';
+  const model = audio?.models?.[0] ?? { provider: '', model: '', baseUrl: '' };
+  const configuredCount = audioStatus === 'Configured' ? 1 : 0;
+  const catalog = useMemo(() => TOOL_CATALOG.map((category) => ({ ...category, tools: category.tools.map((tool) => ({ ...tool, status: tool.name === 'tts' ? audioStatus : tool.status ?? 'Available' })) })), [audioStatus]);
+
+  return (
+    <div style={{ flex: 1, background: 'var(--bg)', color: 'var(--text)', fontFamily: 'var(--font-mono-stack)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+      <header style={{ height: '48px', padding: '0 14px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0, boxSizing: 'border-box' }}>
+        <span style={{ fontFamily: 'var(--font-serif-stack)', fontSize: '20px', letterSpacing: '4px', color: 'var(--violet)' }}>TOOLS</span>
+        <div style={heroPillStyle}>{configuredCount}/{CONFIGURABLE_TOOL_COUNT} configurable ready</div>
+      </header>
+
+      <div style={pageScrollStyle}>
+        <div style={pageInnerStyle}>
+          <header style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: '18px', marginBottom: '18px', paddingBottom: '18px', borderBottom: '1px solid var(--border)' }}>
+            <div style={{ minWidth: 0 }}>
+              <p style={eyebrowStyle}>OpenClaw inventory</p>
+              <h1 style={titleStyle}>Tools</h1>
+              <p style={ledeStyle}>A compact inventory of OpenClaw tools. Configure the exposed base tools here, then use the catalog as a quick reference for available capabilities.</p>
+            </div>
+          </header>
+
+          <section aria-label="Tools overview" style={overviewStyle}>
+            {[[ 'Total tools', TOTAL_TOOL_COUNT ], [ 'Configurable', CONFIGURABLE_TOOL_COUNT ], [ 'Configured', configuredCount ], [ 'Categories', TOOL_CATALOG.length ]].map(([label, value]) => (
+              <div key={label} style={metricStyle}><span style={metricLabelStyle}>{label}</span><strong style={metricValueStyle}>{value}</strong></div>
+            ))}
+          </section>
+
+          {loading && <LoadingSpinner compact />}
+
+          {!loading && audio && (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '28px' }}>
+              <section>
+                <SectionHeading title="Base tools" description="Editable tool configuration currently exposed in Rev4a. Credentials remain hidden." action={<StatusBadge status={audioStatus} />} />
+                <div style={configCardStyle}>
+                  <div style={configHeaderStyle}>
+                    <div>
+                      <h3 style={{ fontSize: '16px', fontWeight: 700, margin: 0, color: 'var(--foreground)' }}>Audio Transcription</h3>
+                      <p style={{ margin: '5px 0 0', color: 'var(--text-dim)', fontSize: '13px', lineHeight: 1.5 }}>Primary speech-to-text provider settings used by the audio tool.</p>
+                    </div>
+                    <label style={switchRowStyle}>
+                      <input type="checkbox" checked={audio.enabled ?? false} onChange={(e) => setAudio((p) => (p ? { ...p, enabled: e.target.checked } : p))} style={{ width: '16px', height: '16px', cursor: 'pointer' }} />
+                      <span>Enabled</span>
+                    </label>
+                  </div>
+                  <div style={formGridStyle}>
+                    <Field label="Timeout (seconds)"><Input type="number" value={audio.timeoutSeconds ?? ''} onChange={(e) => setAudio((p) => (p ? { ...p, timeoutSeconds: Number(e.target.value) } : p))} /></Field>
+                    <Field label="Max bytes"><Input type="number" value={audio.maxBytes ?? ''} onChange={(e) => setAudio((p) => (p ? { ...p, maxBytes: Number(e.target.value) } : p))} /></Field>
+                  </div>
+                  <div style={subsectionStyle}>
+                    <p style={subsectionTitleStyle}>Model (primary)</p>
+                    <div style={formGridStyle}>
+                      <Field label="Provider"><Input type="text" value={model.provider} onChange={(e) => updateModel('provider', e.target.value)} /></Field>
+                      <Field label="Model"><Input type="text" value={model.model} onChange={(e) => updateModel('model', e.target.value)} /></Field>
+                      <Field label="Base URL"><Input type="text" value={model.baseUrl ?? ''} onChange={(e) => updateModel('baseUrl', e.target.value)} /></Field>
+                    </div>
+                  </div>
+                  {error && <p style={{ color: 'var(--destructive, #ef4444)', fontSize: '13px', margin: '16px 0 0' }}>{error}</p>}
+                  {success && <p style={{ color: 'var(--success, #22c55e)', fontSize: '13px', margin: '16px 0 0' }}>Saved successfully.</p>}
+                  <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '18px' }}>
+                    <Button variant="primary" size="sm" loading={saving} onClick={() => void handleSave()}>
+                      {saving ? 'Saving…' : 'Save changes'}
+                    </Button>
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <SectionHeading title="System Settings" description="Global runtime preferences for the Rev4a dashboard." />
+                <div style={configCardStyle}>
+                  <div style={configHeaderStyle}>
+                    <div>
+                      <h3 style={{ fontSize: '16px', fontWeight: 700, margin: 0, color: 'var(--foreground)' }}>Time Zone</h3>
+                      <p style={{ margin: '5px 0 0', color: 'var(--text-dim)', fontSize: '13px', lineHeight: 1.5 }}>Used by all dashboards to display session timestamps. Current time: <strong style={{ color: 'var(--foreground)' }}>{clock}</strong> in {timezone}.</p>
+                    </div>
+                  </div>
+                  <div style={formGridStyle}>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                      <label style={fieldLabelStyle}>Time zone</label>
+                      <select value={timezone} onChange={(e) => setTimezone(e.target.value)} style={{ ...inputStyle, cursor: 'pointer' }} className="ui-select">
+                        {TIMEZONE_OPTIONS.map((tz) => <option key={tz} value={tz}>{tz}</option>)}
+                      </select>
+                    </div>
+                  </div>
+                  <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '18px' }}>
+                    <Button variant="primary" size="sm" loading={saving} onClick={async () => {
+                      setSaving(true); setError(null); setSuccess(false);
+                      try {
+                        const res = await fetch('/api/tools-config', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, credentials: 'same-origin', body: JSON.stringify({ timezone }) });
+                        const data = (await res.json()) as { ok?: boolean; error?: string };
+                        if (!res.ok) throw new Error(data.error ?? 'Save failed');
+                        setSuccess(true);
+                        setTimeout(() => setSuccess(false), 3000);
+                      } catch (e: unknown) { setError((e as Error).message); }
+                      finally { setSaving(false); }
+                    }}>{saving ? 'Saving…' : 'Save timezone'}</Button>
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <SectionHeading title="Tool catalog" description="Full inventory grouped by capability. Rows are lighter here because most tools do not need page-level configuration yet." />
+                <div style={catalogGridStyle}>
+                  {catalog.map((category) => (
+                    <div key={category.name} style={categoryCardStyle}>
+                      <div style={categoryHeaderStyle}>
+                        <svg viewBox={category.viewBox || '0 0 24 24'} style={{ width: 22, height: 22, flex: '0 0 auto' }} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
+                          <path d={category.icon} />
+                        </svg>
+                        <div style={{ minWidth: 0 }}>
+                          <h3 style={{ fontSize: '15px', fontWeight: 700, margin: 0, color: 'var(--foreground)' }}>{category.name}</h3>
+                          <p style={{ margin: '5px 0 0', color: 'var(--text-dim)', fontSize: '12px', lineHeight: 1.45 }}>{category.description}</p>
+                        </div>
+                        <span style={countPillStyle}>{category.tools.length}</span>
+                      </div>
+                      <div style={toolListStyle}>
+                        {category.tools.map((tool) => (
+                          <div key={tool.name} style={toolRowStyle}>
+                            <svg viewBox="0 0 24 24" style={{ width: 16, height: 16, flex: '0 0 auto', marginTop: 2, stroke: 'var(--text-dim)' }} fill="none" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
+                              <path d={tool.icon} />
+                            </svg>
+                            <div style={{ minWidth: 0 }}><p style={{ margin: '0 0 4px', color: 'var(--foreground)', fontSize: '13px', fontWeight: 650 }}>{tool.name}</p><p style={{ margin: 0, color: 'var(--text-dim)', fontSize: '12px', lineHeight: 1.45 }}>{tool.description}</p></div>
+                            <StatusBadge status={tool.status} />
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </section>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SectionHeading({ title, description, action }: { title: string; description: string; action?: ReactNode }) {
+  return <div style={sectionHeadingStyle}><div><h2 style={{ fontSize: '17px', fontWeight: 700, margin: 0, color: 'var(--foreground)' }}>{title}</h2><p style={{ margin: '5px 0 0', color: 'var(--text-dim)', fontSize: '13px', lineHeight: 1.5 }}>{description}</p></div>{action}</div>;
+}
+
+function Field({ label, children }: { label: string; children: ReactNode }) {
+  return <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}><label style={fieldLabelStyle}>{label}</label>{children}</div>;
+}
+
+const pageScrollStyle: CSSProperties = { height: '100%', minHeight: 0, overflowY: 'auto', overflowX: 'hidden' };
+const pageInnerStyle: CSSProperties = { width: '100%', maxWidth: '1180px', padding: '24px 24px 40px' };
+const heroStyle: CSSProperties = { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: '18px', marginBottom: '18px', paddingBottom: '18px', borderBottom: '1px solid var(--border)' };
+const eyebrowStyle: CSSProperties = { margin: 0, color: 'var(--text-dim)', fontSize: '12px', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' };
+const titleStyle: CSSProperties = { fontSize: '26px', fontWeight: 750, margin: '6px 0 0', color: 'var(--foreground)' };
+const ledeStyle: CSSProperties = { maxWidth: '760px', margin: '8px 0 0', color: 'var(--text-dim)', fontSize: '14px', lineHeight: 1.6 };
+const heroPillStyle: CSSProperties = { flex: '0 0 auto', border: '1px solid rgba(99, 102, 241, 0.26)', borderRadius: '999px', padding: '7px 11px', background: 'rgba(99, 102, 241, 0.1)', color: '#a5b4fc', fontSize: '12px', fontWeight: 700, whiteSpace: 'nowrap' };
+const overviewStyle: CSSProperties = { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '1px', overflow: 'hidden', border: '1px solid var(--border)', borderRadius: 0, background: 'var(--border)', marginBottom: '26px' };
+const metricStyle: CSSProperties = { padding: '14px 16px', background: 'rgba(15, 23, 42, 0.42)' };
+const metricLabelStyle: CSSProperties = { display: 'block', color: 'var(--text-dim)', fontSize: '11px', fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase' };
+const metricValueStyle: CSSProperties = { display: 'block', marginTop: '7px', color: 'var(--foreground)', fontSize: '24px', lineHeight: 1 };
+const sectionHeadingStyle: CSSProperties = { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: '12px', marginBottom: '12px' };
+const configCardStyle: CSSProperties = { border: '1px solid var(--border)', borderRadius: '14px', padding: '18px', background: 'linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015))' };
+const configHeaderStyle: CSSProperties = { display: 'flex', justifyContent: 'space-between', gap: '16px', alignItems: 'flex-start', marginBottom: '18px' };
+const switchRowStyle: CSSProperties = { display: 'inline-flex', alignItems: 'center', gap: '9px', cursor: 'pointer', border: '1px solid var(--border)', borderRadius: '999px', padding: '7px 10px', color: 'var(--foreground)', fontSize: '13px', fontWeight: 650, whiteSpace: 'nowrap' };
+const formGridStyle: CSSProperties = { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '14px' };
+const subsectionStyle: CSSProperties = { borderTop: '1px solid var(--border)', marginTop: '18px', paddingTop: '18px' };
+const subsectionTitleStyle: CSSProperties = { fontSize: '12px', color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '0.07em', fontWeight: 700, margin: '0 0 12px' };
+const fieldLabelStyle: CSSProperties = { fontSize: '12px', color: 'var(--text-dim)', fontWeight: 650 };
+const catalogGridStyle: CSSProperties = { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '14px' };
+const categoryCardStyle: CSSProperties = { border: '1px solid var(--border)', borderRadius: '14px', background: 'rgba(255,255,255,0.018)', overflow: 'hidden' };
+const categoryHeaderStyle: CSSProperties = { display: 'flex', justifyContent: 'space-between', gap: '12px', alignItems: 'flex-start', padding: '15px 16px', borderBottom: '1px solid var(--border)', background: 'rgba(255,255,255,0.025)' };
+const countPillStyle: CSSProperties = { border: '1px solid var(--border)', borderRadius: '999px', padding: '3px 8px', color: 'var(--text-dim)', fontSize: '11px', fontWeight: 700 };
+const toolListStyle: CSSProperties = { display: 'flex', flexDirection: 'column' };
+const toolRowStyle: CSSProperties = { display: 'flex', justifyContent: 'space-between', gap: '10px', alignItems: 'flex-start', padding: '12px 16px', borderTop: '1px solid rgba(148, 163, 184, 0.12)' };
+const inputStyle: CSSProperties = { padding: '7px 10px', borderRadius: '6px', border: '1px solid var(--border)', background: 'var(--input)', color: 'var(--foreground)', fontSize: '14px', width: '100%' };

package/app/tools/loading.tsx

@@ -0,0 +1,10 @@
+import { Skeleton, CardRowSkeleton } from '../components/Skeleton';
+
+const PageSkeleton = () => (
+  <div style={{ padding: '24px 20px', maxWidth: 1080, margin: '0 auto' }}>
+    <Skeleton width={120} height={20} accent style={{ marginBottom: 20 }} />
+    <CardRowSkeleton count={5} height={48} />
+  </div>
+);
+
+export default PageSkeleton;

package/app/tools/page.tsx

@@ -0,0 +1,62 @@
+import fs from 'fs';
+import ToolsPageClient, { type AudioConfig } from './ToolsPageClient';
+
+export const dynamic = 'force-dynamic';
+
+const CONFIG_PATH = '/data/.openclaw/openclaw.json';
+const REV4A_SETTINGS_PATH = '/data/rev4a/settings.json';
+
+type JsonObject = Record<string, unknown>;
+
+function asJsonObject(value: unknown): JsonObject {
+  return value && typeof value === 'object' && !Array.isArray(value) ? (value as JsonObject) : {};
+}
+
+function sanitizeAudioConfig(value: unknown): AudioConfig {
+  const raw = asJsonObject(value);
+  const audio: AudioConfig = {};
+  if (typeof raw.enabled === 'boolean') audio.enabled = raw.enabled;
+  if (typeof raw.timeoutSeconds === 'number' && Number.isFinite(raw.timeoutSeconds)) audio.timeoutSeconds = raw.timeoutSeconds;
+  if (typeof raw.maxBytes === 'number' && Number.isFinite(raw.maxBytes)) audio.maxBytes = raw.maxBytes;
+  if (Array.isArray(raw.models)) {
+    audio.models = raw.models
+      .filter((model): model is JsonObject => Boolean(model) && typeof model === 'object' && !Array.isArray(model))
+      .map((model) => ({
+        provider: typeof model.provider === 'string' ? model.provider : '',
+        model: typeof model.model === 'string' ? model.model : '',
+        baseUrl: typeof model.baseUrl === 'string' ? model.baseUrl : '',
+      }));
+  }
+  return audio;
+}
+
+function readInitialTimezone(): string {
+  try {
+    const settings = JSON.parse(fs.readFileSync(REV4A_SETTINGS_PATH, 'utf8')) as JsonObject;
+    return typeof settings.timezone === 'string' && settings.timezone ? settings.timezone : 'Europe/Rome';
+  } catch {
+    return 'Europe/Rome';
+  }
+}
+
+function getInitialData(): { audio: AudioConfig; timezone: string; error: string | null } {
+  try {
+    const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf8')) as JsonObject;
+    const tools = asJsonObject(config.tools);
+    const media = asJsonObject(tools.media);
+    const timezone = readInitialTimezone();
+    return { audio: sanitizeAudioConfig(media.audio), timezone, error: null };
+  } catch (error: unknown) {
+    return {
+      audio: {},
+      timezone: 'Europe/Rome',
+      error: `Could not read initial config: ${(error as Error).message}`,
+    };
+  }
+}
+
+export default function ToolsPage() {
+
+  const { audio, timezone, error } = getInitialData();
+  return <ToolsPageClient initialAudio={audio} initialTimezone={timezone} initialError={error} />;
+}

package/app/tools/tools-catalog.ts

@@ -0,0 +1,141 @@
+export type ToolStatus = 'Configured' | 'Available' | 'Coming soon';
+
+export interface ToolCatalogItem {
+  name: string;
+  description: string;
+  icon: string;
+  status?: ToolStatus;
+}
+
+export interface ToolCatalogCategory {
+  name: string;
+  description: string;
+  icon: string; // SVG path data (d attribute)
+  viewBox?: string;
+  tools: ToolCatalogItem[];
+}
+
+export const TOOL_CATALOG: ToolCatalogCategory[] = [
+  {
+    name: 'File & Code',
+    description: 'Read, write, and patch files in the active workspace.',
+    icon: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM6 2v4h8V2M6 6l12 0',
+    viewBox: '0 0 24 24',
+    tools: [
+      { name: 'read', icon: 'M4 6h16M4 12h16M4 18h12', description: 'Read text files and supported images.' },
+      { name: 'write', icon: 'M12 3v14m-7-7l7 7 7-7', description: 'Create or overwrite workspace files.' },
+      { name: 'edit', icon: 'M15.232 5.232l3.536 3.536M9 11l-3 3V8l3-3a2 2 0 0 1 2.828 0L16.5 8.5a2 2 0 0 1 0 2.828l-5.5 5.5', description: 'Apply precise text replacements.' },
+      { name: 'apply_patch', icon: 'M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9l2 2 4-4', description: 'Apply structured multi-file patches.' },
+    ],
+  },
+  {
+    name: 'Shell & Processes',
+    description: 'Run commands and manage long-running sessions.',
+    icon: 'M4 17l6-6L4 5m8 14h8',
+    viewBox: '0 0 24 24',
+    tools: [
+      { name: 'exec', icon: 'M4 17l6-6L4 5', description: 'Execute shell commands with optional PTY/background mode.' },
+      { name: 'process', icon: 'M12 8v4l3 3M12 2a10 10 0 1 0 10 10', description: 'Inspect, poll, and control running command sessions.' },
+    ],
+  },
+  {
+    name: 'Web',
+    description: 'Search, fetch, and automate browser workflows.',
+    icon: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z',
+    viewBox: '0 0 24 24',
+    tools: [
+      { name: 'web_search', icon: 'M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z', description: 'Search the web for current information.' },
+      { name: 'web_fetch', icon: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z', description: 'Fetch readable markdown or text from URLs.' },
+      { name: 'browser', icon: 'M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m9 9a9 9 0 0 1-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 0 1 9-9', description: 'Control browser tabs, pages, snapshots, and actions.' },
+    ],
+  },
+  {
+    name: 'Devices & Nodes',
+    description: 'Interact with paired phones, desktops, and node capabilities.',
+    icon: 'M17 1H7a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 17H7V6h10v12z',
+    viewBox: '0 0 24 24',
+    tools: [{ name: 'nodes', icon: 'M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7zm4 10V7m8 10V7', description: 'List nodes, notify devices, capture screens, photos, and status.' }],
+  },
+  {
+    name: 'Automation',
+    description: 'Scheduled and durable operational automation.',
+    icon: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z',
+    viewBox: '0 0 24 24',
+    tools: [{ name: 'cron', icon: 'M12 8v4l3 3M12 2a10 10 0 1 0 10 10', description: 'Schedule recurring jobs and maintenance tasks.', status: 'Coming soon' }],
+  },
+  {
+    name: 'Messaging',
+    description: 'Send and manage messages across connected channels.',
+    icon: 'M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z',
+    viewBox: '0 0 24 24',
+    tools: [{ name: 'message', icon: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10z', description: 'Send messages, attachments, reactions, polls, and channel actions.' }],
+  },
+  {
+    name: 'Gateway & Config',
+    description: 'Gateway lifecycle and configuration operations.',
+    icon: 'M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z',
+    viewBox: '0 0 24 24',
+    tools: [{ name: 'gateway', icon: 'M19.14 12.94a3.6 3.6 0 1 0-7.14-1.88M12 8.4V12l1.5 1.5', description: 'Inspect and update OpenClaw gateway configuration.', status: 'Coming soon' }],
+  },
+  {
+    name: 'Sessions & Agents',
+    description: 'Inspect sessions and coordinate agent work.',
+    icon: 'M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z',
+    viewBox: '0 0 24 24',
+    tools: [
+      { name: 'agents_list', icon: 'M16 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM4 21v-2a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v2', description: 'List available agents and their status.' },
+      { name: 'sessions_list', icon: 'M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2M9 12h6m-6 4h6', description: 'List active and recent sessions.' },
+      { name: 'sessions_history', icon: 'M12 8v4l3 3M12 2a10 10 0 1 0 10 10', description: 'Read session transcript history.' },
+      { name: 'sessions_send', icon: 'M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z', description: 'Send messages into existing sessions.' },
+      { name: 'sessions_spawn', icon: 'M17 5l4 4-4 4m-6 0H3m14 6l4-4-4-4', description: 'Create delegated agent sessions.' },
+      { name: 'sessions_yield', icon: 'M17 5l-4 4 4 4m6-4H3', description: 'Yield while waiting for spawned work to complete.' },
+      { name: 'subagents', icon: 'M12 4.354a4 4 0 1 1 0 5.292M9 15H3a1 1 0 0 0-1 1v4m18-5h-6m-3-5a4 4 0 1 1-8 0 4 4 0 0 1 8 0z', description: 'Coordinate subagent execution and results.' },
+      { name: 'session_status', icon: 'M9 12l2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z', description: 'Inspect current runtime, model, date, and capability status.' },
+    ],
+  },
+  {
+    name: 'Media & AI',
+    description: 'Analyze or generate media with configured AI providers.',
+    icon: 'M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z',
+    viewBox: '0 0 24 24',
+    tools: [
+      { name: 'image', icon: 'M15 8h.01M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM3 16l5-5 4 4 5-5 4 4', description: 'Analyze images with a vision model.' },
+      { name: 'image_generate', icon: 'M4 16l4-4 5 5 3-3 4 4m-5-9a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm2-6a9 9 0 1 0 0 18 9 9 0 0 0 0-18z', description: 'Generate or edit images.' },
+      { name: 'music_generate', icon: 'M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2z', description: 'Create music, songs, loops, or instrumentals.' },
+      { name: 'video_generate', icon: 'M15 10l4.553-2.276A1 1 0 0 1 21 8.618v6.764a1 1 0 0 1-1.447.894L15 14M5 18h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2z', description: 'Generate videos from text and media references.' },
+      { name: 'tts', icon: 'M19 11a7 7 0 0 1-7 7m0 0a7 7 0 0 1-7-7m7 7v4m-4 0h8M5 8h1m7 0h1m-4 3h2', description: 'Convert explicit speech requests into audio.' },
+      { name: 'pdf', icon: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM6 2v4h8V2m-2 6v6m-3-3l3 3 3-3', description: 'Analyze PDF documents.' },
+    ],
+  },
+  {
+    name: 'File Transfer',
+    description: 'Move files and directory listings between paired nodes and the gateway.',
+    icon: 'M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z',
+    viewBox: '0 0 24 24',
+    tools: [
+      { name: 'dir_fetch', icon: 'M19 9l-7 7-7-7', description: 'Fetch directory trees from paired nodes.' },
+      { name: 'dir_list', icon: 'M9 5H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zM9 15H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2z', description: 'List node directory metadata.' },
+      { name: 'file_fetch', icon: 'M4 16v1a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-1m-4-8l-4-4m0 0L8 8m4-4v12', description: 'Retrieve files from paired nodes.' },
+      { name: 'file_write', icon: 'M4 16v1a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-1m-4 0l-4 4m0 0l-4-4m4 4V4', description: 'Write files to paired nodes.' },
+    ],
+  },
+  {
+    name: 'Memory',
+    description: 'Search and read persisted workspace memory.',
+    icon: 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
+    viewBox: '0 0 24 24',
+    tools: [
+      { name: 'memory_get', icon: 'M4 7v10c0 2 1.5 3 4 3s4-1 4-3V7c0-2-1.5-3-4-3S4 5 4 7zm12 0v10c0 2 1.5 3 4 3s4-1 4-3V7c0-2-1.5-3-4-3s-4 1-4 3z', description: 'Read bounded excerpts from memory files.' },
+      { name: 'memory_search', icon: 'M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z', description: 'Semantic search over memory and session records.' },
+    ],
+  },
+  {
+    name: 'Planning',
+    description: 'Keep multi-step work visible and current.',
+    icon: 'M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM17.99 9l-1.41-1.42-6.59 6.59-2.58-2.57-1.42 1.41 4 3.99z',
+    viewBox: '0 0 24 24',
+    tools: [{ name: 'update_plan', icon: 'M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9l2 2 4-4', description: 'Create and update the current run plan.' }],
+  },
+];
+
+export const TOTAL_TOOL_COUNT = TOOL_CATALOG.reduce((total, category) => total + category.tools.length, 0);