Polish UI components and rework AgentConfigForm

Major AgentConfigForm rework with improved adapter configuration fields and layout. Refine sidebar, breadcrumbs, and card/tab components for visual consistency. Clean up page layouts across Activity, Agents, Approvals, Costs, Dashboard, Goals, Inbox, Issues, Org, and Projects pages. Minor heartbeat-run CLI fix. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-18 10:43:25 -06:00
parent 769d74d896
commit 0d436911cd
29 changed files with 434 additions and 256 deletions
--- a/cli/src/commands/heartbeat-run.ts
+++ b/cli/src/commands/heartbeat-run.ts
@@ -174,6 +174,8 @@ export async function heartbeatRun(opts: HeartbeatRunOptions): Promise<void> {
      }
      if (typeof logResult.nextOffset === "number") {
        logOffset = logResult.nextOffset;
+      } else if (logResult.content) {
+        logOffset += Buffer.byteLength(logResult.content, "utf8");
      }
    }

--- a/ui/src/components/AgentConfigForm.tsx
+++ b/ui/src/components/AgentConfigForm.tsx
@@ -1,12 +1,15 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { AGENT_ADAPTER_TYPES } from "@paperclip/shared";
 import type { Agent } from "@paperclip/shared";
 import type { AdapterModel } from "../api/agents";
+import { agentsApi } from "../api/agents";
 import {
  Popover,
  PopoverContent,
  PopoverTrigger,
 } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
 import { FolderOpen, Heart, ChevronDown } from "lucide-react";
 import { cn } from "../lib/utils";
 import {
@@ -18,7 +21,6 @@ import {
  DraftInput,
  DraftTextarea,
  DraftNumberInput,
-  HintIcon,
  help,
  adapterLabels,
 } from "./agent-config-primitives";
@@ -73,9 +75,37 @@ type AgentConfigFormProps = {
      mode: "edit";
      agent: Agent;
      onSave: (patch: Record<string, unknown>) => void;
+      isSaving?: boolean;
    }
 );

+/* ---- Edit mode overlay (dirty tracking) ---- */
+
+interface Overlay {
+  identity: Record<string, unknown>;
+  adapterType?: string;
+  adapterConfig: Record<string, unknown>;
+  heartbeat: Record<string, unknown>;
+  runtime: Record<string, unknown>;
+}
+
+const emptyOverlay: Overlay = {
+  identity: {},
+  adapterConfig: {},
+  heartbeat: {},
+  runtime: {},
+};
+
+function isOverlayDirty(o: Overlay): boolean {
+  return (
+    Object.keys(o.identity).length > 0 ||
+    o.adapterType !== undefined ||
+    Object.keys(o.adapterConfig).length > 0 ||
+    Object.keys(o.heartbeat).length > 0 ||
+    Object.keys(o.runtime).length > 0
+  );
+}
+
 /* ---- Shared input class ---- */
 const inputClass =
  "w-full rounded-md border border-border px-2.5 py-1.5 bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40";
@@ -83,20 +113,87 @@ const inputClass =
 /* ---- Form ---- */

 export function AgentConfigForm(props: AgentConfigFormProps) {
-  const { mode, adapterModels } = props;
+  const { mode, adapterModels: externalModels } = props;
  const isCreate = mode === "create";

-  // Resolve adapter type + config + heartbeat from props
-  const adapterType = isCreate ? props.values.adapterType : props.agent.adapterType;
-  const isLocal = adapterType === "claude_local" || adapterType === "codex_local";
+  // ---- Edit mode: overlay for dirty tracking ----
+  const [overlay, setOverlay] = useState<Overlay>(emptyOverlay);
+  const agentRef = useRef<Agent | null>(null);

-  // Edit mode: extract from agent
+  // Clear overlay when agent data refreshes (after save)
+  useEffect(() => {
+    if (!isCreate) {
+      if (agentRef.current !== null && props.agent !== agentRef.current) {
+        setOverlay({ ...emptyOverlay });
+      }
+      agentRef.current = props.agent;
+    }
+  }, [isCreate, !isCreate ? props.agent : undefined]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const isDirty = !isCreate && isOverlayDirty(overlay);
+
+  /** Read effective value: overlay if dirty, else original */
+  function eff<T>(group: keyof Omit<Overlay, "adapterType">, field: string, original: T): T {
+    const o = overlay[group];
+    if (field in o) return o[field] as T;
+    return original;
+  }
+
+  /** Mark field dirty in overlay */
+  function mark(group: keyof Omit<Overlay, "adapterType">, field: string, value: unknown) {
+    setOverlay((prev) => ({
+      ...prev,
+      [group]: { ...prev[group], [field]: value },
+    }));
+  }
+
+  /** Build accumulated patch and send to parent */
+  function handleSave() {
+    if (isCreate || !isDirty) return;
+    const agent = props.agent;
+    const patch: Record<string, unknown> = {};
+
+    if (Object.keys(overlay.identity).length > 0) {
+      Object.assign(patch, overlay.identity);
+    }
+    if (overlay.adapterType !== undefined) {
+      patch.adapterType = overlay.adapterType;
+    }
+    if (Object.keys(overlay.adapterConfig).length > 0) {
+      const existing = (agent.adapterConfig ?? {}) as Record<string, unknown>;
+      patch.adapterConfig = { ...existing, ...overlay.adapterConfig };
+    }
+    if (Object.keys(overlay.heartbeat).length > 0) {
+      const existingRc = (agent.runtimeConfig ?? {}) as Record<string, unknown>;
+      const existingHb = (existingRc.heartbeat ?? {}) as Record<string, unknown>;
+      patch.runtimeConfig = { ...existingRc, heartbeat: { ...existingHb, ...overlay.heartbeat } };
+    }
+    if (Object.keys(overlay.runtime).length > 0) {
+      Object.assign(patch, overlay.runtime);
+    }
+
+    props.onSave(patch);
+  }
+
+  // ---- Resolve values ----
  const config = !isCreate ? ((props.agent.adapterConfig ?? {}) as Record<string, unknown>) : {};
  const runtimeConfig = !isCreate ? ((props.agent.runtimeConfig ?? {}) as Record<string, unknown>) : {};
  const heartbeat = !isCreate ? ((runtimeConfig.heartbeat ?? {}) as Record<string, unknown>) : {};

-  // Section toggle state
-  const [adapterAdvancedOpen, setAdapterAdvancedOpen] = useState(!isCreate);
+  const adapterType = isCreate
+    ? props.values.adapterType
+    : overlay.adapterType ?? props.agent.adapterType;
+  const isLocal = adapterType === "claude_local" || adapterType === "codex_local";
+
+  // Fetch adapter models for the effective adapter type
+  const { data: fetchedModels } = useQuery({
+    queryKey: ["adapter-models", adapterType],
+    queryFn: () => agentsApi.adapterModels(adapterType),
+  });
+  const models = fetchedModels ?? externalModels ?? [];
+
+  // Section toggle state — advanced always starts collapsed
+  const [adapterAdvancedOpen, setAdapterAdvancedOpen] = useState(false);
  const [heartbeatOpen, setHeartbeatOpen] = useState(!isCreate);

  // Popover states
@@ -108,27 +205,29 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
    ? (patch: Partial<CreateConfigValues>) => props.onChange(patch)
    : null;

-  // Edit mode helpers
-  const saveConfig = !isCreate
-    ? (field: string, value: unknown) =>
-        props.onSave({ adapterConfig: { ...config, [field]: value } })
-    : null;
-  const saveHeartbeat = !isCreate
-    ? (field: string, value: unknown) =>
-        props.onSave({
-          runtimeConfig: { ...runtimeConfig, heartbeat: { ...heartbeat, [field]: value } },
-        })
-    : null;
-  const saveIdentity = !isCreate
-    ? (field: string, value: unknown) => props.onSave({ [field]: value })
-    : null;
-
  // Current model for display
-  const currentModelId = isCreate ? val!.model : String(config.model ?? "");
-  const selectedModel = (adapterModels ?? []).find((m) => m.id === currentModelId);
+  const currentModelId = isCreate
+    ? val!.model
+    : eff("adapterConfig", "model", String(config.model ?? ""));

  return (
-    <div>
+    <div className="relative">
+      {/* ---- Floating Save button (edit mode, when dirty) ---- */}
+      {isDirty && (
+        <div className="sticky top-0 z-10 flex items-center justify-end px-4 py-2 bg-background/90 backdrop-blur-sm border-b border-primary/20">
+          <div className="flex items-center gap-3">
+            <span className="text-xs text-muted-foreground">Unsaved changes</span>
+            <Button
+              size="sm"
+              onClick={handleSave}
+              disabled={!isCreate && props.isSaving}
+            >
+              {!isCreate && props.isSaving ? "Saving..." : "Save"}
+            </Button>
+          </div>
+        </div>
+      )}
+
      {/* ---- Identity (edit only) ---- */}
      {!isCreate && (
        <div className="border-b border-border">
@@ -136,24 +235,24 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
          <div className="px-4 pb-3 space-y-3">
            <Field label="Name" hint={help.name}>
              <DraftInput
-                value={props.agent.name}
-                onCommit={(v) => saveIdentity!("name", v)}
+                value={eff("identity", "name", props.agent.name)}
+                onCommit={(v) => mark("identity", "name", v)}
                className={inputClass}
                placeholder="Agent name"
              />
            </Field>
            <Field label="Title" hint={help.title}>
              <DraftInput
-                value={props.agent.title ?? ""}
-                onCommit={(v) => saveIdentity!("title", v || null)}
+                value={eff("identity", "title", props.agent.title ?? "")}
+                onCommit={(v) => mark("identity", "title", v || null)}
                className={inputClass}
                placeholder="e.g. VP of Engineering"
              />
            </Field>
            <Field label="Capabilities" hint={help.capabilities}>
              <DraftTextarea
-                value={props.agent.capabilities ?? ""}
-                onCommit={(v) => saveIdentity!("capabilities", v || null)}
+                value={eff("identity", "capabilities", props.agent.capabilities ?? "")}
+                onCommit={(v) => mark("identity", "capabilities", v || null)}
                placeholder="Describe what this agent can do..."
                minRows={2}
              />
@@ -167,9 +266,17 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
        <Field label="Adapter" hint={help.adapterType}>
          <AdapterTypeDropdown
            value={adapterType}
-            onChange={(t) =>
-              isCreate ? set!({ adapterType: t }) : props.onSave({ adapterType: t })
-            }
+            onChange={(t) => {
+              if (isCreate) {
+                set!({ adapterType: t });
+              } else {
+                setOverlay((prev) => ({
+                  ...prev,
+                  adapterType: t,
+                  adapterConfig: {}, // clear adapter config when type changes
+                }));
+              }
+            }}
          />
        </Field>
      </div>
@@ -186,9 +293,15 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
              <div className="flex items-center gap-2 rounded-md border border-border px-2.5 py-1.5">
                <FolderOpen className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                <DraftInput
-                  value={isCreate ? val!.cwd : String(config.cwd ?? "")}
+                  value={
+                    isCreate
+                      ? val!.cwd
+                      : eff("adapterConfig", "cwd", String(config.cwd ?? ""))
+                  }
                  onCommit={(v) =>
-                    isCreate ? set!({ cwd: v }) : saveConfig!("cwd", v || undefined)
+                    isCreate
+                      ? set!({ cwd: v })
+                      : mark("adapterConfig", "cwd", v || undefined)
                  }
                  immediate={isCreate}
                  className="w-full bg-transparent outline-none text-sm font-mono placeholder:text-muted-foreground/40"
@@ -202,7 +315,7 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
                      // @ts-expect-error -- showDirectoryPicker is not in all TS lib defs yet
                      const handle = await window.showDirectoryPicker({ mode: "read" });
                      if (isCreate) set!({ cwd: handle.name });
-                      else saveConfig!("cwd", handle.name);
+                      else mark("adapterConfig", "cwd", handle.name);
                    } catch {
                      // user cancelled or API unsupported
                    }
@@ -226,8 +339,14 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
                />
              ) : (
                <DraftTextarea
-                  value={String(config.promptTemplate ?? "")}
-                  onCommit={(v) => saveConfig!("promptTemplate", v || undefined)}
+                  value={eff(
+                    "adapterConfig",
+                    "promptTemplate",
+                    String(config.promptTemplate ?? ""),
+                  )}
+                  onCommit={(v) =>
+                    mark("adapterConfig", "promptTemplate", v || undefined)
+                  }
                  placeholder="You are agent {{ agent.name }}. Your role is {{ agent.role }}..."
                  minRows={4}
                />
@@ -243,12 +362,16 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
              checked={
                isCreate
                  ? val!.dangerouslySkipPermissions
-                  : config.dangerouslySkipPermissions !== false
+                  : eff(
+                      "adapterConfig",
+                      "dangerouslySkipPermissions",
+                      config.dangerouslySkipPermissions !== false,
+                    )
              }
              onChange={(v) =>
                isCreate
                  ? set!({ dangerouslySkipPermissions: v })
-                  : saveConfig!("dangerouslySkipPermissions", v)
+                  : mark("adapterConfig", "dangerouslySkipPermissions", v)
              }
            />
          )}
@@ -262,20 +385,30 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
                checked={
                  isCreate
                    ? val!.dangerouslyBypassSandbox
-                    : config.dangerouslyBypassApprovalsAndSandbox !== false
+                    : eff(
+                        "adapterConfig",
+                        "dangerouslyBypassApprovalsAndSandbox",
+                        config.dangerouslyBypassApprovalsAndSandbox !== false,
+                      )
                }
                onChange={(v) =>
                  isCreate
                    ? set!({ dangerouslyBypassSandbox: v })
-                    : saveConfig!("dangerouslyBypassApprovalsAndSandbox", v)
+                    : mark("adapterConfig", "dangerouslyBypassApprovalsAndSandbox", v)
                }
              />
              <ToggleField
                label="Enable search"
                hint={help.search}
-                checked={isCreate ? val!.search : !!config.search}
+                checked={
+                  isCreate
+                    ? val!.search
+                    : eff("adapterConfig", "search", !!config.search)
+                }
                onChange={(v) =>
-                  isCreate ? set!({ search: v }) : saveConfig!("search", v)
+                  isCreate
+                    ? set!({ search: v })
+                    : mark("adapterConfig", "search", v)
                }
              />
            </>
@@ -286,9 +419,15 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
            <>
              <Field label="Command" hint={help.command}>
                <DraftInput
-                  value={isCreate ? val!.command : String(config.command ?? "")}
+                  value={
+                    isCreate
+                      ? val!.command
+                      : eff("adapterConfig", "command", String(config.command ?? ""))
+                  }
                  onCommit={(v) =>
-                    isCreate ? set!({ command: v }) : saveConfig!("command", v || undefined)
+                    isCreate
+                      ? set!({ command: v })
+                      : mark("adapterConfig", "command", v || undefined)
                  }
                  immediate={isCreate}
                  className={inputClass}
@@ -297,11 +436,16 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
              </Field>
              <Field label="Args (comma-separated)" hint={help.args}>
                <DraftInput
-                  value={isCreate ? val!.args : String(config.args ?? "")}
+                  value={
+                    isCreate
+                      ? val!.args
+                      : eff("adapterConfig", "args", String(config.args ?? ""))
+                  }
                  onCommit={(v) =>
                    isCreate
                      ? set!({ args: v })
-                      : saveConfig!(
+                      : mark(
+                          "adapterConfig",
                          "args",
                          v
                            ? v
@@ -323,9 +467,15 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
          {adapterType === "http" && (
            <Field label="Webhook URL" hint={help.webhookUrl}>
              <DraftInput
-                value={isCreate ? val!.url : String(config.url ?? "")}
+                value={
+                  isCreate
+                    ? val!.url
+                    : eff("adapterConfig", "url", String(config.url ?? ""))
+                }
                onCommit={(v) =>
-                  isCreate ? set!({ url: v }) : saveConfig!("url", v || undefined)
+                  isCreate
+                    ? set!({ url: v })
+                    : mark("adapterConfig", "url", v || undefined)
                }
                immediate={isCreate}
                className={inputClass}
@@ -334,90 +484,100 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
            </Field>
          )}

-          {/* Advanced adapter section */}
+          {/* Advanced adapter section — collapsible in both modes */}
          {isLocal && (
-            <>
-              {isCreate ? (
-                <CollapsibleSection
-                  title="Advanced Adapter Configuration"
-                  open={adapterAdvancedOpen}
-                  onToggle={() => setAdapterAdvancedOpen(!adapterAdvancedOpen)}
-                >
-                  <div className="space-y-3">
-                    <ModelDropdown
-                      models={adapterModels ?? []}
-                      value={val!.model}
-                      onChange={(v) => set!({ model: v })}
-                      open={modelOpen}
-                      onOpenChange={setModelOpen}
+            <CollapsibleSection
+              title="Advanced Adapter Settings"
+              open={adapterAdvancedOpen}
+              onToggle={() => setAdapterAdvancedOpen(!adapterAdvancedOpen)}
+            >
+              <div className="space-y-3">
+                <ModelDropdown
+                  models={models}
+                  value={currentModelId}
+                  onChange={(v) =>
+                    isCreate
+                      ? set!({ model: v })
+                      : mark("adapterConfig", "model", v || undefined)
+                  }
+                  open={modelOpen}
+                  onOpenChange={setModelOpen}
+                />
+                <Field label="Bootstrap prompt (first run)" hint={help.bootstrapPrompt}>
+                  {isCreate ? (
+                    <AutoExpandTextarea
+                      placeholder="Optional initial setup prompt for the first run"
+                      value={val!.bootstrapPrompt}
+                      onChange={(v) => set!({ bootstrapPrompt: v })}
+                      minRows={2}
                    />
-                    <Field label="Bootstrap prompt (first run)" hint={help.bootstrapPrompt}>
-                      <AutoExpandTextarea
-                        placeholder="Optional initial setup prompt for the first run"
-                        value={val!.bootstrapPrompt}
-                        onChange={(v) => set!({ bootstrapPrompt: v })}
-                        minRows={2}
-                      />
-                    </Field>
-                    {adapterType === "claude_local" && (
-                      <Field label="Max turns per run" hint={help.maxTurnsPerRun}>
-                        <input
-                          type="number"
-                          className={inputClass}
-                          value={val!.maxTurnsPerRun}
-                          onChange={(e) => set!({ maxTurnsPerRun: Number(e.target.value) })}
-                        />
-                      </Field>
-                    )}
-                  </div>
-                </CollapsibleSection>
-              ) : (
-                /* Edit mode: show advanced fields inline (no collapse) */
-                <div className="space-y-3 pt-2 border-t border-border/50">
-                  <div className="text-[10px] font-medium text-muted-foreground/60 uppercase tracking-wider">
-                    Advanced
-                  </div>
-                  <ModelDropdown
-                    models={adapterModels ?? []}
-                    value={String(config.model ?? "")}
-                    onChange={(v) => saveConfig!("model", v || undefined)}
-                    open={modelOpen}
-                    onOpenChange={setModelOpen}
-                  />
-                  <Field label="Bootstrap prompt (first run)" hint={help.bootstrapPrompt}>
+                  ) : (
                    <DraftTextarea
-                      value={String(config.bootstrapPromptTemplate ?? "")}
-                      onCommit={(v) => saveConfig!("bootstrapPromptTemplate", v || undefined)}
+                      value={eff(
+                        "adapterConfig",
+                        "bootstrapPromptTemplate",
+                        String(config.bootstrapPromptTemplate ?? ""),
+                      )}
+                      onCommit={(v) =>
+                        mark("adapterConfig", "bootstrapPromptTemplate", v || undefined)
+                      }
                      placeholder="Optional initial setup prompt for the first run"
                      minRows={2}
                    />
-                  </Field>
-                  {adapterType === "claude_local" && (
-                    <Field label="Max turns per run" hint={help.maxTurnsPerRun}>
+                  )}
+                </Field>
+                {adapterType === "claude_local" && (
+                  <Field label="Max turns per run" hint={help.maxTurnsPerRun}>
+                    {isCreate ? (
+                      <input
+                        type="number"
+                        className={inputClass}
+                        value={val!.maxTurnsPerRun}
+                        onChange={(e) => set!({ maxTurnsPerRun: Number(e.target.value) })}
+                      />
+                    ) : (
                      <DraftNumberInput
-                        value={Number(config.maxTurnsPerRun ?? 80)}
-                        onCommit={(v) => saveConfig!("maxTurnsPerRun", v || 80)}
+                        value={eff(
+                          "adapterConfig",
+                          "maxTurnsPerRun",
+                          Number(config.maxTurnsPerRun ?? 80),
+                        )}
+                        onCommit={(v) => mark("adapterConfig", "maxTurnsPerRun", v || 80)}
+                        className={inputClass}
+                      />
+                    )}
+                  </Field>
+                )}
+
+                {/* Edit-only: timeout + grace period */}
+                {!isCreate && (
+                  <>
+                    <Field label="Timeout (sec)" hint={help.timeoutSec}>
+                      <DraftNumberInput
+                        value={eff(
+                          "adapterConfig",
+                          "timeoutSec",
+                          Number(config.timeoutSec ?? 0),
+                        )}
+                        onCommit={(v) => mark("adapterConfig", "timeoutSec", v)}
                        className={inputClass}
                      />
                    </Field>
-                  )}
-                  <Field label="Timeout (sec)" hint={help.timeoutSec}>
-                    <DraftNumberInput
-                      value={Number(config.timeoutSec ?? 0)}
-                      onCommit={(v) => saveConfig!("timeoutSec", v)}
-                      className={inputClass}
-                    />
-                  </Field>
-                  <Field label="Interrupt grace period (sec)" hint={help.graceSec}>
-                    <DraftNumberInput
-                      value={Number(config.graceSec ?? 15)}
-                      onCommit={(v) => saveConfig!("graceSec", v)}
-                      className={inputClass}
-                    />
-                  </Field>
-                </div>
-              )}
-            </>
+                    <Field label="Interrupt grace period (sec)" hint={help.graceSec}>
+                      <DraftNumberInput
+                        value={eff(
+                          "adapterConfig",
+                          "graceSec",
+                          Number(config.graceSec ?? 15),
+                        )}
+                        onCommit={(v) => mark("adapterConfig", "graceSec", v)}
+                        className={inputClass}
+                      />
+                    </Field>
+                  </>
+                )}
+              </div>
+            </CollapsibleSection>
          )}
        </div>
      </div>
@@ -456,14 +616,14 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
            <ToggleWithNumber
              label="Heartbeat on interval"
              hint={help.heartbeatInterval}
-              checked={heartbeat.enabled !== false}
-              onCheckedChange={(v) => saveHeartbeat!("enabled", v)}
-              number={Number(heartbeat.intervalSec ?? 300)}
-              onNumberChange={(v) => saveHeartbeat!("intervalSec", v)}
+              checked={eff("heartbeat", "enabled", heartbeat.enabled !== false)}
+              onCheckedChange={(v) => mark("heartbeat", "enabled", v)}
+              number={eff("heartbeat", "intervalSec", Number(heartbeat.intervalSec ?? 300))}
+              onNumberChange={(v) => mark("heartbeat", "intervalSec", v)}
              numberLabel="sec"
              numberPrefix="Run heartbeat every"
              numberHint={help.intervalSec}
-              showNumber={heartbeat.enabled !== false}
+              showNumber={eff("heartbeat", "enabled", heartbeat.enabled !== false)}
            />

            {/* Edit-only: wake-on-* and cooldown */}
@@ -474,25 +634,41 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
              <ToggleField
                label="Wake on assignment"
                hint={help.wakeOnAssignment}
-                checked={heartbeat.wakeOnAssignment !== false}
-                onChange={(v) => saveHeartbeat!("wakeOnAssignment", v)}
+                checked={eff(
+                  "heartbeat",
+                  "wakeOnAssignment",
+                  heartbeat.wakeOnAssignment !== false,
+                )}
+                onChange={(v) => mark("heartbeat", "wakeOnAssignment", v)}
              />
              <ToggleField
                label="Wake on on-demand"
                hint={help.wakeOnOnDemand}
-                checked={heartbeat.wakeOnOnDemand !== false}
-                onChange={(v) => saveHeartbeat!("wakeOnOnDemand", v)}
+                checked={eff(
+                  "heartbeat",
+                  "wakeOnOnDemand",
+                  heartbeat.wakeOnOnDemand !== false,
+                )}
+                onChange={(v) => mark("heartbeat", "wakeOnOnDemand", v)}
              />
              <ToggleField
                label="Wake on automation"
                hint={help.wakeOnAutomation}
-                checked={heartbeat.wakeOnAutomation !== false}
-                onChange={(v) => saveHeartbeat!("wakeOnAutomation", v)}
+                checked={eff(
+                  "heartbeat",
+                  "wakeOnAutomation",
+                  heartbeat.wakeOnAutomation !== false,
+                )}
+                onChange={(v) => mark("heartbeat", "wakeOnAutomation", v)}
              />
              <Field label="Cooldown (sec)" hint={help.cooldownSec}>
                <DraftNumberInput
-                  value={Number(heartbeat.cooldownSec ?? 10)}
-                  onCommit={(v) => saveHeartbeat!("cooldownSec", v)}
+                  value={eff(
+                    "heartbeat",
+                    "cooldownSec",
+                    Number(heartbeat.cooldownSec ?? 10),
+                  )}
+                  onCommit={(v) => mark("heartbeat", "cooldownSec", v)}
                  className={inputClass}
                />
              </Field>
@@ -513,8 +689,12 @@ export function AgentConfigForm(props: AgentConfigFormProps) {
            </Field>
            <Field label="Monthly budget (cents)" hint={help.budgetMonthlyCents}>
              <DraftNumberInput
-                value={props.agent.budgetMonthlyCents}
-                onCommit={(v) => saveIdentity!("budgetMonthlyCents", v)}
+                value={eff(
+                  "runtime",
+                  "budgetMonthlyCents",
+                  props.agent.budgetMonthlyCents,
+                )}
+                onCommit={(v) => mark("runtime", "budgetMonthlyCents", v)}
                className={inputClass}
              />
            </Field>
--- a/ui/src/components/BreadcrumbBar.tsx
+++ b/ui/src/components/BreadcrumbBar.tsx
@@ -15,8 +15,20 @@ export function BreadcrumbBar() {

  if (breadcrumbs.length === 0) return null;

+  // Single breadcrumb = page title (uppercase)
+  if (breadcrumbs.length === 1) {
+    return (
+      <div className="border-b border-border px-6 py-4">
+        <h1 className="text-sm font-semibold uppercase tracking-wider">
+          {breadcrumbs[0].label}
+        </h1>
+      </div>
+    );
+  }
+
+  // Multiple breadcrumbs = breadcrumb trail
  return (
-    <div className="border-b border-border px-6 py-2">
+    <div className="border-b border-border px-6 py-3">
      <Breadcrumb>
        <BreadcrumbList>
          {breadcrumbs.map((crumb, i) => {
--- a/ui/src/components/CommentThread.tsx
+++ b/ui/src/components/CommentThread.tsx
@@ -37,7 +37,7 @@ export function CommentThread({ comments, onAdd }: CommentThreadProps) {

      <div className="space-y-3">
        {comments.map((comment) => (
-          <div key={comment.id} className="rounded-md border border-border p-3">
+          <div key={comment.id} className="border border-border p-3">
            <div className="flex items-center justify-between mb-1">
              <span className="text-xs font-medium text-muted-foreground">
                {comment.authorAgentId ? "Agent" : "Human"}
--- a/ui/src/components/EmptyState.tsx
+++ b/ui/src/components/EmptyState.tsx
@@ -12,7 +12,7 @@ interface EmptyStateProps {
 export function EmptyState({ icon: Icon, message, action, onAction }: EmptyStateProps) {
  return (
    <div className="flex flex-col items-center justify-center py-16 text-center">
-      <div className="rounded-xl bg-muted/50 p-4 mb-4">
+      <div className="bg-muted/50 p-4 mb-4">
        <Icon className="h-10 w-10 text-muted-foreground/50" />
      </div>
      <p className="text-sm text-muted-foreground mb-4">{message}</p>
--- a/ui/src/components/GoalTree.tsx
+++ b/ui/src/components/GoalTree.tsx
@@ -25,7 +25,7 @@ function GoalNode({ goal, children, allGoals, depth, onSelect }: GoalNodeProps)
    <div>
      <div
        className={cn(
-          "flex items-center gap-2 px-3 py-1.5 rounded-md text-sm transition-colors cursor-pointer hover:bg-accent/50",
+          "flex items-center gap-2 px-3 py-1.5 text-sm transition-colors cursor-pointer hover:bg-accent/50",
        )}
        style={{ paddingLeft: `${depth * 20 + 12}px` }}
        onClick={() => onSelect?.(goal)}
@@ -75,7 +75,7 @@ export function GoalTree({ goals, onSelect }: GoalTreeProps) {
  }

  return (
-    <div className="border border-border rounded-md py-1">
+    <div className="border border-border py-1">
      {roots.map((goal) => (
        <GoalNode
          key={goal.id}
--- a/ui/src/components/MetricCard.tsx
+++ b/ui/src/components/MetricCard.tsx
@@ -13,7 +13,7 @@ export function MetricCard({ icon: Icon, value, label, description }: MetricCard
    <Card>
      <CardContent className="p-4">
        <div className="flex items-center gap-3">
-          <div className="rounded-md bg-muted p-2">
+          <div className="bg-muted p-2">
            <Icon className="h-4 w-4 text-muted-foreground" />
          </div>
          <div className="flex-1 min-w-0">
--- a/ui/src/components/OnboardingWizard.tsx
+++ b/ui/src/components/OnboardingWizard.tsx
@@ -278,7 +278,7 @@ export function OnboardingWizard() {
          {step === 1 && (
            <div className="p-4 space-y-4">
              <div className="flex items-center gap-3 mb-2">
-                <div className="rounded-lg bg-muted/50 p-2">
+                <div className="bg-muted/50 p-2">
                  <Building2 className="h-5 w-5 text-muted-foreground" />
                </div>
                <div>
@@ -317,7 +317,7 @@ export function OnboardingWizard() {
          {step === 2 && (
            <div className="p-4 space-y-4">
              <div className="flex items-center gap-3 mb-2">
-                <div className="rounded-lg bg-muted/50 p-2">
+                <div className="bg-muted/50 p-2">
                  <Bot className="h-5 w-5 text-muted-foreground" />
                </div>
                <div>
@@ -506,7 +506,7 @@ export function OnboardingWizard() {
          {step === 3 && (
            <div className="p-4 space-y-4">
              <div className="flex items-center gap-3 mb-2">
-                <div className="rounded-lg bg-muted/50 p-2">
+                <div className="bg-muted/50 p-2">
                  <ListTodo className="h-5 w-5 text-muted-foreground" />
                </div>
                <div>
@@ -546,7 +546,7 @@ export function OnboardingWizard() {
          {step === 4 && (
            <div className="p-4 space-y-4">
              <div className="flex items-center gap-3 mb-2">
-                <div className="rounded-lg bg-muted/50 p-2">
+                <div className="bg-muted/50 p-2">
                  <Rocket className="h-5 w-5 text-muted-foreground" />
                </div>
                <div>
@@ -556,7 +556,7 @@ export function OnboardingWizard() {
                  </p>
                </div>
              </div>
-              <div className="rounded-md border border-border divide-y divide-border">
+              <div className="border border-border divide-y divide-border">
                <div className="flex items-center gap-3 px-3 py-2.5">
                  <Building2 className="h-4 w-4 text-muted-foreground shrink-0" />
                  <div className="flex-1 min-w-0">
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -12,13 +12,14 @@ import {
  ListTodo,
  ShieldCheck,
  Building2,
+  BookOpen,
+  Paperclip,
 } from "lucide-react";
 import { CompanySwitcher } from "./CompanySwitcher";
 import { SidebarSection } from "./SidebarSection";
 import { SidebarNavItem } from "./SidebarNavItem";
 import { useDialog } from "../context/DialogContext";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import { ScrollArea } from "@/components/ui/scroll-area";

 export function Sidebar() {
@@ -29,8 +30,15 @@ export function Sidebar() {
  }

  return (
-    <aside className="w-60 h-full border-r border-border bg-card flex flex-col">
-      <div className="flex items-center gap-1 p-3">
+    <aside className="w-60 h-full border-r border-border bg-background flex flex-col">
+      {/* Logo */}
+      <div className="flex items-center gap-2 px-4 py-3">
+        <Paperclip className="h-5 w-5 text-foreground" />
+        <span className="text-sm font-semibold tracking-tight text-foreground">Paperclip</span>
+      </div>
+
+      {/* Company switcher + actions */}
+      <div className="flex items-center gap-1 px-3 pb-3">
        <div className="flex-1 min-w-0">
          <CompanySwitcher />
        </div>
@@ -52,10 +60,8 @@ export function Sidebar() {
        </Button>
      </div>

-      <Separator />
-
      <ScrollArea className="flex-1">
-        <nav className="flex flex-col gap-3 p-3">
+        <nav className="flex flex-col gap-4 px-3 py-2">
          <div className="flex flex-col gap-0.5">
            <SidebarNavItem to="/inbox" label="Inbox" icon={Inbox} />
            <SidebarNavItem to="/my-issues" label="My Issues" icon={ListTodo} />
@@ -77,6 +83,11 @@ export function Sidebar() {
          </SidebarSection>
        </nav>
      </ScrollArea>
+
+      {/* Bottom links */}
+      <div className="border-t border-border px-3 py-2">
+        <SidebarNavItem to="/docs" label="Documentation" icon={BookOpen} />
+      </div>
    </aside>
  );
 }
--- a/ui/src/components/SidebarNavItem.tsx
+++ b/ui/src/components/SidebarNavItem.tsx
@@ -23,10 +23,10 @@ export function SidebarNavItem({
      end={end}
      className={({ isActive }) =>
        cn(
-          "flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
+          "flex items-center gap-2.5 px-3 py-2 text-[13px] font-medium transition-colors",
          isActive
-            ? "bg-accent text-accent-foreground"
-            : "text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground"
+            ? "bg-accent text-foreground"
+            : "text-foreground/80 hover:bg-accent/50 hover:text-foreground"
        )
      }
    >
--- a/ui/src/components/SidebarSection.tsx
+++ b/ui/src/components/SidebarSection.tsx
@@ -23,14 +23,14 @@ export function SidebarSection({

  return (
    <Collapsible open={open} onOpenChange={setOpen}>
-      <CollapsibleTrigger className="flex items-center gap-1 w-full px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors">
+      <CollapsibleTrigger className="flex items-center justify-between w-full px-3 py-1.5 text-[10px] font-medium uppercase tracking-widest font-mono text-muted-foreground/60 hover:text-muted-foreground transition-colors">
+        {label}
        <ChevronRight
          className={cn(
            "h-3 w-3 transition-transform",
            open && "rotate-90"
          )}
        />
-        {label}
      </CollapsibleTrigger>
      <CollapsibleContent>
        <div className="flex flex-col gap-0.5 mt-0.5">{children}</div>
--- a/ui/src/components/ui/card.tsx
+++ b/ui/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card"
      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-6 border py-6 shadow-sm",
        className
      )}
      {...props}
--- a/ui/src/components/ui/tabs.tsx
+++ b/ui/src/components/ui/tabs.tsx
@@ -24,7 +24,7 @@ function Tabs({
 }

 const tabsListVariants = cva(
-  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  "p-[3px] group-data-[orientation=horizontal]/tabs:h-9 group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
  {
    variants: {
      variant: {
@@ -62,7 +62,7 @@ function TabsTrigger({
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -102,7 +102,7 @@
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
+  --sidebar: oklch(0.145 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
--- a/ui/src/pages/Activity.tsx
+++ b/ui/src/pages/Activity.tsx
@@ -101,8 +101,7 @@ export function Activity() {

  return (
    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h2 className="text-lg font-semibold">Activity</h2>
+      <div className="flex items-center justify-end">
        <Select value={filter} onValueChange={setFilter}>
          <SelectTrigger className="w-[140px] h-8 text-xs">
            <SelectValue placeholder="Filter by type" />
@@ -126,7 +125,7 @@ export function Activity() {
      )}

      {filtered && filtered.length > 0 && (
-        <div className="border border-border rounded-md divide-y divide-border">
+        <div className="border border-border divide-y divide-border">
          {filtered.map((event) => {
            const link = entityLink(event.entityType, event.entityId);
            return (
--- a/ui/src/pages/AgentDetail.tsx
+++ b/ui/src/pages/AgentDetail.tsx
@@ -367,7 +367,7 @@ export function AgentDetail() {
          {assignedIssues.length === 0 ? (
            <p className="text-sm text-muted-foreground">No assigned issues.</p>
          ) : (
-            <div className="border border-border rounded-md">
+            <div className="border border-border">
              {assignedIssues.map((issue) => (
                <EntityRow
                  key={issue.id}
@@ -429,6 +429,7 @@ function ConfigurationTab({ agent }: { agent: Agent }) {
        mode="edit"
        agent={agent}
        onSave={(patch) => updateAgent.mutate(patch)}
+        isSaving={updateAgent.isPending}
        adapterModels={adapterModels}
      />
    </div>
@@ -450,7 +451,7 @@ function RunsTab({ runs, companyId }: { runs: HeartbeatRun[]; companyId: string
  );

  return (
-    <div className="border border-border rounded-md">
+    <div className="border border-border">
      {sorted.map((run) => {
        const statusInfo = runStatusIcons[run.status] ?? { icon: Clock, color: "text-neutral-400" };
        const StatusIcon = statusInfo.icon;
@@ -975,7 +976,7 @@ function KeysTab({ agentId }: { agentId: string }) {
          <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
            Active Keys
          </h3>
-          <div className="border border-border rounded-md divide-y divide-border">
+          <div className="border border-border divide-y divide-border">
            {activeKeys.map((key: AgentKey) => (
              <div key={key.id} className="flex items-center justify-between px-4 py-2.5">
                <div>
@@ -1005,7 +1006,7 @@ function KeysTab({ agentId }: { agentId: string }) {
          <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
            Revoked Keys
          </h3>
-          <div className="border border-border rounded-md divide-y divide-border opacity-50">
+          <div className="border border-border divide-y divide-border opacity-50">
            {revokedKeys.map((key: AgentKey) => (
              <div key={key.id} className="flex items-center justify-between px-4 py-2.5">
                <div>
--- a/ui/src/pages/Agents.tsx
+++ b/ui/src/pages/Agents.tsx
@@ -93,20 +93,17 @@ export function Agents() {
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <h2 className="text-lg font-semibold">Agents</h2>
-          <Tabs value={tab} onValueChange={(v) => setTab(v as FilterTab)}>
-            <TabsList>
-              <TabsTrigger value="all">All{agents ? ` (${agents.length})` : ""}</TabsTrigger>
-              <TabsTrigger value="active">Active</TabsTrigger>
-              <TabsTrigger value="paused">Paused</TabsTrigger>
-              <TabsTrigger value="error">Error</TabsTrigger>
-            </TabsList>
-          </Tabs>
-        </div>
+        <Tabs value={tab} onValueChange={(v) => setTab(v as FilterTab)}>
+          <TabsList variant="line">
+            <TabsTrigger value="all">All{agents ? ` (${agents.length})` : ""}</TabsTrigger>
+            <TabsTrigger value="active">Active</TabsTrigger>
+            <TabsTrigger value="paused">Paused</TabsTrigger>
+            <TabsTrigger value="error">Error</TabsTrigger>
+          </TabsList>
+        </Tabs>
        <div className="flex items-center gap-2">
          {/* View toggle */}
-          <div className="flex items-center border border-border rounded-md">
+          <div className="flex items-center border border-border">
            <button
              className={cn(
                "p-1.5 transition-colors",
@@ -147,7 +144,7 @@ export function Agents() {

      {/* List view */}
      {view === "list" && filtered.length > 0 && (
-        <div className="border border-border rounded-md">
+        <div className="border border-border">
          {filtered.map((agent) => {
            const budgetPct =
              agent.budgetMonthlyCents > 0
@@ -221,7 +218,7 @@ export function Agents() {

      {/* Org chart view */}
      {view === "org" && filteredOrg.length > 0 && (
-        <div className="border border-border rounded-md py-1">
+        <div className="border border-border py-1">
          {filteredOrg.map((node) => (
            <OrgTreeNode key={node.id} node={node} depth={0} navigate={navigate} agentMap={agentMap} />
          ))}
@@ -275,7 +272,7 @@ function OrgTreeNode({
  return (
    <div style={{ paddingLeft: depth * 24 }}>
      <button
-        className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-accent/30 transition-colors w-full text-left"
+        className="flex items-center gap-3 px-3 py-2 hover:bg-accent/30 transition-colors w-full text-left"
        onClick={() => navigate(`/agents/${node.id}`)}
      >
        <span className="relative flex h-2.5 w-2.5 shrink-0">
--- a/ui/src/pages/Approvals.tsx
+++ b/ui/src/pages/Approvals.tsx
@@ -227,25 +227,22 @@ export function Approvals() {
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <h2 className="text-lg font-semibold">Approvals</h2>
-          <Tabs value={statusFilter} onValueChange={(v) => setStatusFilter(v as StatusFilter)}>
-            <TabsList>
-              <TabsTrigger value="pending">
-                Pending
-                {pendingCount > 0 && (
-                  <span className={cn(
-                    "ml-1.5 rounded-full px-1.5 py-0.5 text-[10px] font-medium",
-                    "bg-yellow-500/20 text-yellow-500"
-                  )}>
-                    {pendingCount}
-                  </span>
-                )}
-              </TabsTrigger>
-              <TabsTrigger value="all">All</TabsTrigger>
-            </TabsList>
-          </Tabs>
-        </div>
+        <Tabs value={statusFilter} onValueChange={(v) => setStatusFilter(v as StatusFilter)}>
+          <TabsList variant="line">
+            <TabsTrigger value="pending">
+              Pending
+              {pendingCount > 0 && (
+                <span className={cn(
+                  "ml-1.5 rounded-full px-1.5 py-0.5 text-[10px] font-medium",
+                  "bg-yellow-500/20 text-yellow-500"
+                )}>
+                  {pendingCount}
+                </span>
+              )}
+            </TabsTrigger>
+            <TabsTrigger value="all">All</TabsTrigger>
+          </TabsList>
+        </Tabs>
      </div>

      {isLoading && <p className="text-sm text-muted-foreground">Loading...</p>}
--- a/ui/src/pages/Companies.tsx
+++ b/ui/src/pages/Companies.tsx
@@ -89,11 +89,7 @@ export function Companies() {

  return (
    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-lg font-semibold">Companies</h2>
-          <p className="text-sm text-muted-foreground">Manage your companies.</p>
-        </div>
+      <div className="flex items-center justify-end">
        <Button size="sm" onClick={openOnboarding}>
          <Plus className="h-3.5 w-3.5 mr-1.5" />
          New Company
--- a/ui/src/pages/Costs.tsx
+++ b/ui/src/pages/Costs.tsx
@@ -36,8 +36,6 @@ export function Costs() {

  return (
    <div className="space-y-6">
-      <h2 className="text-lg font-semibold">Costs</h2>
-
      {isLoading && <p className="text-sm text-muted-foreground">Loading...</p>}
      {error && <p className="text-sm text-destructive">{error.message}</p>}

--- a/ui/src/pages/Dashboard.tsx
+++ b/ui/src/pages/Dashboard.tsx
@@ -113,12 +113,9 @@ export function Dashboard() {

  return (
    <div className="space-y-6">
-      <div>
-        <h2 className="text-lg font-semibold">Dashboard</h2>
-        {selectedCompany && (
-          <p className="text-sm text-muted-foreground">{selectedCompany.name}</p>
-        )}
-      </div>
+      {selectedCompany && (
+        <p className="text-sm text-muted-foreground">{selectedCompany.name}</p>
+      )}

      {isLoading && <p className="text-sm text-muted-foreground">Loading...</p>}
      {error && <p className="text-sm text-destructive">{error.message}</p>}
@@ -159,7 +156,7 @@ export function Dashboard() {
                <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
                  Recent Activity
                </h3>
-                <div className="border border-border rounded-md divide-y divide-border">
+                <div className="border border-border divide-y divide-border">
                  {activity.slice(0, 10).map((event) => (
                    <div key={event.id} className="px-4 py-2 flex items-center justify-between text-sm">
                      <div className="flex items-center gap-2 min-w-0">
@@ -185,11 +182,11 @@ export function Dashboard() {
                Stale Tasks
              </h3>
              {staleIssues.length === 0 ? (
-                <div className="border border-border rounded-md p-4">
+                <div className="border border-border p-4">
                  <p className="text-sm text-muted-foreground">No stale tasks. All work is up to date.</p>
                </div>
              ) : (
-                <div className="border border-border rounded-md divide-y divide-border">
+                <div className="border border-border divide-y divide-border">
                  {staleIssues.slice(0, 10).map((issue) => (
                    <div
                      key={issue.id}
--- a/ui/src/pages/GoalDetail.tsx
+++ b/ui/src/pages/GoalDetail.tsx
@@ -94,7 +94,7 @@ export function GoalDetail() {
          {linkedProjects.length === 0 ? (
            <p className="text-sm text-muted-foreground">No linked projects.</p>
          ) : (
-            <div className="border border-border rounded-md">
+            <div className="border border-border">
              {linkedProjects.map((project) => (
                <EntityRow
                  key={project.id}
--- a/ui/src/pages/Goals.tsx
+++ b/ui/src/pages/Goals.tsx
@@ -30,8 +30,6 @@ export function Goals() {

  return (
    <div className="space-y-4">
-      <h2 className="text-lg font-semibold">Goals</h2>
-
      {isLoading && <p className="text-sm text-muted-foreground">Loading...</p>}
      {error && <p className="text-sm text-destructive">{error.message}</p>}

--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -116,8 +116,6 @@ export function Inbox() {

  return (
    <div className="space-y-6">
-      <h2 className="text-lg font-semibold">Inbox</h2>
-
      {isLoading && <p className="text-sm text-muted-foreground">Loading...</p>}
      {error && <p className="text-sm text-destructive">{error.message}</p>}
      {actionError && <p className="text-sm text-destructive">{actionError}</p>}
@@ -140,7 +138,7 @@ export function Inbox() {
              See all approvals <ExternalLink className="inline h-3 w-3 ml-0.5" />
            </button>
          </div>
-          <div className="border border-border rounded-md divide-y divide-border">
+          <div className="border border-border divide-y divide-border">
            {approvals!.map((approval) => (
              <div key={approval.id} className="p-4 space-y-2">
                <div className="flex items-center gap-2">
@@ -191,7 +189,7 @@ export function Inbox() {
            <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
              Alerts
            </h3>
-            <div className="border border-border rounded-md divide-y divide-border">
+            <div className="border border-border divide-y divide-border">
              {dashboard!.agents.error > 0 && (
                <div
                  className="px-4 py-3 flex items-center gap-3 cursor-pointer hover:bg-accent/50 transition-colors"
@@ -232,7 +230,7 @@ export function Inbox() {
            <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
              Stale Work
            </h3>
-            <div className="border border-border rounded-md divide-y divide-border">
+            <div className="border border-border divide-y divide-border">
              {staleIssues.map((issue) => (
                <div
                  key={issue.id}
--- a/ui/src/pages/Issues.tsx
+++ b/ui/src/pages/Issues.tsx
@@ -89,17 +89,14 @@ export function Issues() {
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          <h2 className="text-lg font-semibold">Issues</h2>
-          <Tabs value={tab} onValueChange={(v) => setTab(v as TabFilter)}>
-            <TabsList>
-              <TabsTrigger value="all">All Issues</TabsTrigger>
-              <TabsTrigger value="active">Active</TabsTrigger>
-              <TabsTrigger value="backlog">Backlog</TabsTrigger>
-              <TabsTrigger value="done">Done</TabsTrigger>
-            </TabsList>
-          </Tabs>
-        </div>
+        <Tabs value={tab} onValueChange={(v) => setTab(v as TabFilter)}>
+          <TabsList variant="line">
+            <TabsTrigger value="all">All Issues</TabsTrigger>
+            <TabsTrigger value="active">Active</TabsTrigger>
+            <TabsTrigger value="backlog">Backlog</TabsTrigger>
+            <TabsTrigger value="done">Done</TabsTrigger>
+          </TabsList>
+        </Tabs>
        <Button size="sm" onClick={() => openNewIssue()}>
          <Plus className="h-4 w-4 mr-1" />
          New Issue
@@ -120,7 +117,7 @@ export function Issues() {

      {orderedGroups.map(({ status, items }) => (
        <div key={status}>
-          <div className="flex items-center gap-2 px-4 py-2 bg-muted/50 rounded-t-md">
+          <div className="flex items-center gap-2 px-4 py-2 bg-muted/50">
            <StatusIcon status={status} />
            <span className="text-xs font-semibold uppercase tracking-wide">
              {statusLabel(status)}
@@ -135,7 +132,7 @@ export function Issues() {
              <Plus className="h-3 w-3" />
            </Button>
          </div>
-          <div className="border border-border rounded-b-md">
+          <div className="border border-border">
            {items.map((issue) => (
              <EntityRow
                key={issue.id}
--- a/ui/src/pages/MyIssues.tsx
+++ b/ui/src/pages/MyIssues.tsx
@@ -38,8 +38,6 @@ export function MyIssues() {

  return (
    <div className="space-y-4">
-      <h2 className="text-lg font-semibold">My Issues</h2>
-
      {isLoading && <p className="text-sm text-muted-foreground">Loading...</p>}
      {error && <p className="text-sm text-destructive">{error.message}</p>}

@@ -48,7 +46,7 @@ export function MyIssues() {
      )}

      {myIssues.length > 0 && (
-        <div className="border border-border rounded-md">
+        <div className="border border-border">
          {myIssues.map((issue) => (
            <EntityRow
              key={issue.id}
--- a/ui/src/pages/Org.tsx
+++ b/ui/src/pages/Org.tsx
@@ -106,8 +106,6 @@ export function Org() {

  return (
    <div className="space-y-4">
-      <h2 className="text-lg font-semibold">Org Chart</h2>
-
      {isLoading && <p className="text-sm text-muted-foreground">Loading...</p>}
      {error && <p className="text-sm text-destructive">{error.message}</p>}

@@ -119,7 +117,7 @@ export function Org() {
      )}

      {data && data.length > 0 && (
-        <div className="border border-border rounded-md py-1">
+        <div className="border border-border py-1">
          <OrgTree nodes={data} onSelect={(id) => navigate(`/agents/${id}`)} />
        </div>
      )}
--- a/ui/src/pages/ProjectDetail.tsx
+++ b/ui/src/pages/ProjectDetail.tsx
@@ -87,7 +87,7 @@ export function ProjectDetail() {
          {projectIssues.length === 0 ? (
            <p className="text-sm text-muted-foreground">No issues in this project.</p>
          ) : (
-            <div className="border border-border rounded-md">
+            <div className="border border-border">
              {projectIssues.map((issue) => (
                <EntityRow
                  key={issue.id}
--- a/ui/src/pages/Projects.tsx
+++ b/ui/src/pages/Projects.tsx
@@ -35,8 +35,7 @@ export function Projects() {

  return (
    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h2 className="text-lg font-semibold">Projects</h2>
+      <div className="flex items-center justify-end">
        <Button size="sm" onClick={openNewProject}>
          <Plus className="h-4 w-4 mr-1" />
          Add Project
@@ -56,7 +55,7 @@ export function Projects() {
      )}

      {projects && projects.length > 0 && (
-        <div className="border border-border rounded-md">
+        <div className="border border-border">
          {projects.map((project) => (
            <EntityRow
              key={project.id}