Add ErrorBoundary, Config page, 4-col quick links

- ErrorBoundary wraps all pages with retry button
- Config: read-only view of model, terminal, memory, display settings
- Pulse quick links now 4-col: Skills, Cron, Soul, Config

app/config/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { Settings, Cpu, Globe, Wrench, Radio } from "lucide-react";
+import { useConfig, useHealth } from "@/lib/hooks";
+
+export default function ConfigPage() {
+  const { data: config, isLoading } = useConfig();
+  const { data: health } = useHealth();
+
+  const online = health?.status === "ok";
+  const cfg = config?.config || {};
+
+  const terminal = cfg.terminal as Record<string, unknown> | undefined;
+  const memory = cfg.memory as Record<string, unknown> | undefined;
+  const display = cfg.display as Record<string, unknown> | undefined;
+  const tts = cfg.tts as Record<string, unknown> | undefined;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <Settings size={20} style={{ color: "#6b7280" }} />
+        <h1 className="text-xl font-bold text-zinc-300">Config</h1>
+        <div className="ml-auto flex items-center gap-1.5">
+          <div
+            className="w-2 h-2 rounded-full"
+            style={{ background: online ? "#22c55e" : "#ef4444" }}
+          />
+          <span className="text-xs text-zinc-500">{online ? "Connected" : "Offline"}</span>
+        </div>
+      </div>
+
+      {isLoading ? (
+        <div className="space-y-3">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="glass p-4 animate-pulse">
+              <div className="h-4 bg-white/[0.06] rounded w-1/2 mb-2" />
+              <div className="h-3 bg-white/[0.06] rounded w-3/4" />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="space-y-3">
+          <ConfigSection icon={Cpu} label="Model" color="#f59e0b" items={[
+            ["Model", config?.model || "—"],
+            ["Provider", config?.provider || "custom"],
+            ["Base URL", config?.base_url || "—"],
+          ]} />
+
+          <ConfigSection icon={Wrench} label="Terminal" color="#38bdf8" items={[
+            ["Backend", String(terminal?.backend || "local")],
+            ["Timeout", String(terminal?.timeout || 180) + "s"],
+            ["Persistent shell", String(terminal?.persistent_shell ?? true)],
+          ]} />
+
+          <ConfigSection icon={Radio} label="Memory" color="#a78bfa" items={[
+            ["Enabled", String(memory?.memory_enabled ?? true)],
+            ["Memory limit", String(memory?.memory_char_limit || 2200) + " chars"],
+            ["User limit", String(memory?.user_char_limit || 1375) + " chars"],
+          ]} />
+
+          <ConfigSection icon={Globe} label="Display" color="#22c55e" items={[
+            ["Personality", String(display?.personality || "default")],
+            ["Streaming", String(display?.streaming ?? true)],
+            ["Skin", String(display?.skin || "default")],
+            ...(tts ? [["TTS provider", String(tts.provider || "—")] as [string, string]] : []),
+          ]} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ConfigSection({
+  icon: Icon,
+  label,
+  color,
+  items,
+}: {
+  icon: typeof Cpu;
+  label: string;
+  color: string;
+  items: [string, string][];
+}) {
+  return (
+    <div className="glass p-4">
+      <div className="flex items-center gap-2 mb-3">
+        <Icon size={16} style={{ color }} />
+        <span className="text-sm font-medium text-zinc-200">{label}</span>
+      </div>
+      <div className="space-y-1.5">
+        {items.map(([k, v]) => (
+          <div key={k} className="flex justify-between text-xs">
+            <span className="text-zinc-500">{k}</span>
+            <span className="text-zinc-300 font-mono truncate ml-4 max-w-[60%] text-right">{v}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata, Viewport } from "next";
 import "./globals.css";
 import { BottomNav } from "@/components/BottomNav";
 import { Providers } from "@/components/Providers";
+import { ErrorBoundary } from "@/components/ErrorBoundary";
 
 export const metadata: Metadata = {
   title: "Hermes OS",
@@ -27,7 +28,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body className="antialiased">
         <Providers>
           <main className="min-h-screen pb-safe px-4 pt-4 max-w-lg mx-auto">
-            {children}
+            <ErrorBoundary>{children}</ErrorBoundary>
           </main>
           <BottomNav />
         </Providers>

app/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { Puzzle, Timer, Sparkles } from "lucide-react";
+import { Puzzle, Timer, Sparkles, Settings } from "lucide-react";
 import { StatusCard } from "@/components/StatusCard";
 import { StatsCard } from "@/components/StatsCard";
 import { SessionCard } from "@/components/SessionCard";
@@ -12,6 +12,7 @@ const QUICK_LINKS = [
   { href: "/skills", label: "Skills", icon: Puzzle, color: "#a78bfa" },
   { href: "/cron", label: "Cron", icon: Timer, color: "#f59e0b" },
   { href: "/soul", label: "Soul", icon: Sparkles, color: "#ec4899" },
+  { href: "/config", label: "Config", icon: Settings, color: "#6b7280" },
 ] as const;
 
 export default function PulsePage() {
@@ -27,7 +28,7 @@ export default function PulsePage() {
       <StatsCard />
       <MemorySnapshotCard />
 
-      <div className="grid grid-cols-3 gap-2">
+      <div className="grid grid-cols-4 gap-2">
         {QUICK_LINKS.map(({ href, label, icon: Icon, color }) => (
           <Link key={href} href={href}>
             <div className="glass glass-hover p-3 flex flex-col items-center gap-1.5 transition-all">

components/ErrorBoundary.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Component, type ReactNode } from "react";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+
+interface Props { children: ReactNode; fallbackLabel?: string }
+interface State { error: Error | null }
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { error: null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div className="glass p-6 text-center space-y-3">
+          <AlertTriangle size={24} className="mx-auto text-amber-400" />
+          <p className="text-sm text-zinc-400">
+            {this.props.fallbackLabel || "Something went wrong"}
+          </p>
+          <p className="text-xs text-zinc-600 font-mono">{this.state.error.message}</p>
+          <button
+            onClick={() => this.setState({ error: null })}
+            className="flex items-center gap-1.5 mx-auto px-3 py-1.5 rounded-lg text-xs text-amber-400 active:bg-white/[0.04]"
+          >
+            <RefreshCw size={12} /> Retry
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}