diff --git a/panel/src/app/(dashboard)/business/page.tsx b/panel/src/app/(dashboard)/business/page.tsx
new file mode 100644
index 00000000..b559d604
--- /dev/null
+++ b/panel/src/app/(dashboard)/business/page.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Skeleton } from "@/components/ui/skeleton";
+import { GoalsTab } from "@/components/business/goals-tab";
+import { SecretaryTab } from "@/components/business/secretary-tab";
+import { PitchesTab } from "@/components/business/pitches-tab";
+
+// ---------------------------------------------------------------------------
+// Valid tab values
+// ---------------------------------------------------------------------------
+
+const TAB_VALUES = ["goals", "secretary", "pitches"] as const;
+type TabValue = (typeof TAB_VALUES)[number];
+
+function isValidTab(value: string | null): value is TabValue {
+  return TAB_VALUES.includes(value as TabValue);
+}
+
+// ---------------------------------------------------------------------------
+// Inner component that reads URL params
+// ---------------------------------------------------------------------------
+
+function BusinessPageContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const rawTab = searchParams.get("tab");
+  const activeTab: TabValue = isValidTab(rawTab) ? rawTab : "goals";
+
+  const handleTabChange = (value: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("tab", value);
+    router.replace(`/business?${params.toString()}`);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Page header */}
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Business</h1>
+        <p className="text-muted-foreground">
+          Company goals, your chief-of-staff Secretary, and Board pitches — all in
+          one place.
+        </p>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={handleTabChange}>
+        <TabsList>
+          <TabsTrigger value="goals">Goals</TabsTrigger>
+          <TabsTrigger value="secretary">Secretary</TabsTrigger>
+          <TabsTrigger value="pitches">Pitches</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="goals" className="mt-4">
+          <GoalsTab />
+        </TabsContent>
+
+        <TabsContent value="secretary" className="mt-4">
+          <SecretaryTab />
+        </TabsContent>
+
+        <TabsContent value="pitches" className="mt-4">
+          <PitchesTab />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Page export — wraps in Suspense for useSearchParams
+// ---------------------------------------------------------------------------
+
+export default function BusinessPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="space-y-6">
+          <div>
+            <Skeleton className="h-9 w-32 mb-2" />
+            <Skeleton className="h-5 w-96" />
+          </div>
+          <Skeleton className="h-9 w-72" />
+          <Skeleton className="h-96 w-full" />
+        </div>
+      }
+    >
+      <BusinessPageContent />
+    </Suspense>
+  );
+}
diff --git a/panel/src/app/(dashboard)/cockpit/page.tsx b/panel/src/app/(dashboard)/cockpit/page.tsx
deleted file mode 100644
index 0359a8a8..00000000
--- a/panel/src/app/(dashboard)/cockpit/page.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { AlertTriangle, Loader2 } from "lucide-react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { cockpitApi } from "@/lib/api/cockpit";
-
-function Stat({ label, value }: { label: string; value: string | number }) {
-  return (
-    <div className="rounded-lg border p-3">
-      <p className="text-xs text-muted-foreground">{label}</p>
-      <p className="text-2xl font-semibold">{value}</p>
-    </div>
-  );
-}
-
-export default function CockpitPage() {
-  const { data, isLoading } = useQuery({
-    queryKey: ["cockpit", "summary"],
-    queryFn: () => cockpitApi.summary(),
-    refetchInterval: 30000,
-  });
-
-  if (isLoading || !data) {
-    return (
-      <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        <Loader2 className="h-4 w-4 animate-spin" /> Loading the cockpit…
-      </div>
-    );
-  }
-
-  const cap = data.spend.monthly_budget_cap_usd;
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">Cockpit</h1>
-          <p className="text-muted-foreground">
-            Is the business winning, what&apos;s happening, what needs you.
-          </p>
-        </div>
-        <Badge variant="secondary" title="Performance is a proxy until real launches">
-          basis: {data.basis}
-        </Badge>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>North star</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          <p className="text-sm">
-            {data.north_star || "No north star set yet — define it in Company Goals."}
-          </p>
-          {data.objectives.length > 0 && (
-            <ul className="list-disc space-y-1 pl-5 text-sm text-muted-foreground">
-              {data.objectives.map((o, i) => (
-                <li key={i}>{JSON.stringify(o)}</li>
-              ))}
-            </ul>
-          )}
-        </CardContent>
-      </Card>
-
-      <div className="grid gap-4 sm:grid-cols-3">
-        <Stat label="In flight" value={data.delivery.in_flight} />
-        <Stat label="Blocked" value={data.delivery.blocked} />
-        <Stat label="Awaiting your approval" value={data.delivery.awaiting_ceo} />
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Spend (30 days)</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-2">
-          <div className="flex items-center gap-3">
-            <span className="text-2xl font-semibold">
-              ${data.spend.spend_30d_usd.toFixed(2)}
-            </span>
-            {cap != null && (
-              <span className="text-sm text-muted-foreground">
-                / ${cap.toFixed(2)} cap
-              </span>
-            )}
-            {data.spend.over_budget && (
-              <Badge variant="destructive">
-                <AlertTriangle className="mr-1 h-3 w-3" /> over budget
-              </Badge>
-            )}
-          </div>
-          {data.spend.projected_monthly_usd != null && (
-            <p className="text-xs text-muted-foreground">
-              Projected this month: ${data.spend.projected_monthly_usd.toFixed(2)}
-            </p>
-          )}
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Needs your attention</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          {data.pending_pitches > 0 && (
-            <p className="text-sm">
-              {data.pending_pitches} pitch(es) awaiting your approval.
-            </p>
-          )}
-          {data.signals.length === 0 && data.pending_pitches === 0 ? (
-            <p className="text-sm text-muted-foreground">
-              Nothing needs you right now.
-            </p>
-          ) : (
-            data.signals.map((s, i) => (
-              <div key={i} className="rounded-lg border p-3">
-                <p className="text-sm font-medium">{s.summary}</p>
-                <p className="text-xs text-muted-foreground">{s.detail}</p>
-              </div>
-            ))
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/panel/src/app/(dashboard)/company-goals/page.tsx b/panel/src/app/(dashboard)/company-goals/page.tsx
deleted file mode 100644
index 587cf189..00000000
--- a/panel/src/app/(dashboard)/company-goals/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-
-import { CompanyGoalsCard } from "@/components/company-goals/company-goals-card";
-
-export default function CompanyGoalsPage() {
-  return (
-    <div className="space-y-6 max-w-3xl">
-      <div>
-        <h1 className="text-3xl font-bold tracking-tight">Company Goals</h1>
-        <p className="text-muted-foreground">
-          The organization&apos;s charter — north star, objectives, constraints,
-          and operating policy that steer every agent&apos;s work.
-        </p>
-      </div>
-      <CompanyGoalsCard />
-    </div>
-  );
-}
diff --git a/panel/src/app/(dashboard)/pitches/page.tsx b/panel/src/app/(dashboard)/pitches/page.tsx
deleted file mode 100644
index f3bd56dc..00000000
--- a/panel/src/app/(dashboard)/pitches/page.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-"use client";
-
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { toast } from "sonner";
-import { Check, Loader2, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { getErrorMessage } from "@/lib/api/client";
-import { pitchesApi, type Pitch } from "@/lib/api/pitches";
-
-function PitchCard({
-  pitch,
-  onApprove,
-  onReject,
-  busy,
-}: {
-  pitch: Pitch;
-  onApprove: (id: string) => void;
-  onReject: (id: string) => void;
-  busy: boolean;
-}) {
-  const proposed = pitch.status === "proposed";
-  return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <CardTitle className="text-lg">{pitch.title}</CardTitle>
-          <Badge variant={proposed ? "default" : "secondary"}>{pitch.status}</Badge>
-        </div>
-        <div className="flex flex-wrap gap-1">
-          {pitch.target_cells.map((c) => (
-            <Badge key={c} variant="outline">
-              {c}
-            </Badge>
-          ))}
-        </div>
-      </CardHeader>
-      <CardContent className="space-y-3">
-        <div>
-          <p className="text-xs font-medium text-muted-foreground">Problem</p>
-          <p className="text-sm whitespace-pre-wrap">{pitch.problem}</p>
-        </div>
-        <div>
-          <p className="text-xs font-medium text-muted-foreground">
-            Proposed solution
-          </p>
-          <p className="text-sm whitespace-pre-wrap">{pitch.proposed_solution}</p>
-        </div>
-        {proposed ? (
-          <div className="flex gap-2">
-            <Button size="sm" disabled={busy} onClick={() => onApprove(pitch.id)}>
-              <Check className="mr-1 h-4 w-4" /> Approve &amp; provision
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              disabled={busy}
-              onClick={() => onReject(pitch.id)}
-            >
-              <X className="mr-1 h-4 w-4" /> Reject
-            </Button>
-          </div>
-        ) : (
-          pitch.decision_notes && (
-            <p className="text-xs text-muted-foreground">
-              Decision: {pitch.decision_notes}
-            </p>
-          )
-        )}
-      </CardContent>
-    </Card>
-  );
-}
-
-export default function PitchesPage() {
-  const qc = useQueryClient();
-
-  const { data: pitches = [], isLoading } = useQuery({
-    queryKey: ["pitches"],
-    queryFn: () => pitchesApi.list(),
-    refetchInterval: 30000,
-  });
-
-  const approveMutation = useMutation({
-    mutationFn: (id: string) => pitchesApi.approve(id),
-    onSuccess: () => {
-      toast.success("Pitch approved — provisioning started");
-      void qc.invalidateQueries({ queryKey: ["pitches"] });
-    },
-    onError: (e) => toast.error(getErrorMessage(e)),
-  });
-
-  const rejectMutation = useMutation({
-    mutationFn: (id: string) => pitchesApi.reject(id, "Rejected by CEO"),
-    onSuccess: () => {
-      toast.success("Pitch rejected");
-      void qc.invalidateQueries({ queryKey: ["pitches"] });
-    },
-    onError: (e) => toast.error(getErrorMessage(e)),
-  });
-
-  const busy = approveMutation.isPending || rejectMutation.isPending;
-
-  return (
-    <div className="max-w-3xl space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold tracking-tight">Pitches</h1>
-        <p className="text-muted-foreground">
-          Board proposals. Approving a pitch provisions a repository per target
-          cell, registers the projects, and seeds the first task to Main PM.
-        </p>
-      </div>
-      {isLoading ? (
-        <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <Loader2 className="h-4 w-4 animate-spin" /> Loading…
-        </div>
-      ) : pitches.length === 0 ? (
-        <p className="text-sm text-muted-foreground">
-          No pitches yet. The Board authors them; they appear here for your
-          approval.
-        </p>
-      ) : (
-        <div className="space-y-4">
-          {pitches.map((p) => (
-            <PitchCard
-              key={p.id}
-              pitch={p}
-              busy={busy}
-              onApprove={(id) => approveMutation.mutate(id)}
-              onReject={(id) => rejectMutation.mutate(id)}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/panel/src/app/(dashboard)/secretary/page.tsx b/panel/src/app/(dashboard)/secretary/page.tsx
deleted file mode 100644
index 633c09e1..00000000
--- a/panel/src/app/(dashboard)/secretary/page.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { toast } from "sonner";
-import { Check, Loader2, Send, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Textarea } from "@/components/ui/textarea";
-import { getErrorMessage } from "@/lib/api/client";
-import { secretaryApi, type SecretaryDirective } from "@/lib/api/secretary";
-import { useSecretary } from "@/hooks/use-secretary";
-
-function DirectiveCard({
-  directive,
-  onConfirm,
-  onReject,
-  busy,
-}: {
-  directive: SecretaryDirective;
-  onConfirm: (id: string) => void;
-  onReject: (id: string) => void;
-  busy: boolean;
-}) {
-  return (
-    <div className="space-y-2 rounded-lg border p-3">
-      <div className="flex items-center justify-between">
-        <span className="text-sm font-medium">{directive.kind}</span>
-        <span className="text-xs text-muted-foreground">{directive.status}</span>
-      </div>
-      <pre className="overflow-x-auto rounded bg-muted p-2 text-xs">
-        {JSON.stringify(directive.payload, null, 2)}
-      </pre>
-      <div className="flex gap-2">
-        <Button size="sm" disabled={busy} onClick={() => onConfirm(directive.id)}>
-          <Check className="mr-1 h-4 w-4" /> Confirm
-        </Button>
-        <Button
-          size="sm"
-          variant="outline"
-          disabled={busy}
-          onClick={() => onReject(directive.id)}
-        >
-          <X className="mr-1 h-4 w-4" /> Reject
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export default function SecretaryPage() {
-  const qc = useQueryClient();
-  const { sessionId, messages, streaming, start, send, stop } = useSecretary();
-  const [input, setInput] = useState("");
-  const [starting, setStarting] = useState(false);
-
-  const { data: pending = [] } = useQuery({
-    queryKey: ["secretary", "directives", "pending"],
-    queryFn: () => secretaryApi.listDirectives("pending"),
-    refetchInterval: 15000,
-  });
-
-  const confirmMutation = useMutation({
-    mutationFn: (id: string) => secretaryApi.confirmDirective(id),
-    onSuccess: (d) => {
-      toast.success(`Directive ${d.kind}: ${d.status}`);
-      void qc.invalidateQueries({ queryKey: ["secretary", "directives"] });
-    },
-    onError: (e) => toast.error(getErrorMessage(e)),
-  });
-
-  const rejectMutation = useMutation({
-    mutationFn: (id: string) => secretaryApi.rejectDirective(id),
-    onSuccess: () => {
-      toast.success("Directive rejected");
-      void qc.invalidateQueries({ queryKey: ["secretary", "directives"] });
-    },
-    onError: (e) => toast.error(getErrorMessage(e)),
-  });
-
-  const busy = confirmMutation.isPending || rejectMutation.isPending;
-
-  const handleStart = async () => {
-    setStarting(true);
-    try {
-      await start(input.trim() || undefined);
-      setInput("");
-    } catch (e) {
-      toast.error(getErrorMessage(e));
-    } finally {
-      setStarting(false);
-    }
-  };
-
-  const handleSend = async () => {
-    const text = input.trim();
-    if (!text) return;
-    setInput("");
-    try {
-      await send(text);
-    } catch (e) {
-      toast.error(getErrorMessage(e));
-    }
-  };
-
-  return (
-    <div className="space-y-6">
-      <div className="flex items-start justify-between">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">Secretary</h1>
-          <p className="text-muted-foreground">
-            Your chief-of-staff. It acts only on your command; high-impact
-            actions wait for your confirmation on the right.
-          </p>
-        </div>
-        {sessionId && (
-          <Button variant="outline" onClick={() => void stop()}>
-            End session
-          </Button>
-        )}
-      </div>
-
-      <div className="grid gap-6 lg:grid-cols-3">
-        <Card className="flex min-h-[60vh] flex-col lg:col-span-2">
-          <CardHeader>
-            <CardTitle>Chat</CardTitle>
-          </CardHeader>
-          <CardContent className="flex flex-1 flex-col gap-4">
-            <div className="flex-1 space-y-3 overflow-y-auto">
-              {messages.length === 0 && (
-                <p className="text-sm text-muted-foreground">
-                  {sessionId
-                    ? "Say something to your Secretary…"
-                    : "Start a session to talk to your Secretary."}
-                </p>
-              )}
-              {messages.map((m, i) => (
-                <div
-                  key={i}
-                  className={
-                    m.role === "user"
-                      ? "ml-auto max-w-[80%] rounded-lg bg-primary px-3 py-2 text-sm text-primary-foreground"
-                      : "mr-auto max-w-[80%] whitespace-pre-wrap rounded-lg bg-muted px-3 py-2 text-sm"
-                  }
-                >
-                  {m.text}
-                </div>
-              ))}
-              {streaming && (
-                <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                  <Loader2 className="h-3 w-3 animate-spin" /> thinking…
-                </div>
-              )}
-            </div>
-            <div className="flex gap-2">
-              <Textarea
-                value={input}
-                onChange={(e) => setInput(e.target.value)}
-                placeholder={
-                  sessionId
-                    ? "Message your Secretary…"
-                    : "Opening message (optional)…"
-                }
-                rows={2}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" && !e.shiftKey) {
-                    e.preventDefault();
-                    if (sessionId) void handleSend();
-                    else void handleStart();
-                  }
-                }}
-              />
-              {sessionId ? (
-                <Button onClick={() => void handleSend()} disabled={!input.trim()}>
-                  <Send className="h-4 w-4" />
-                </Button>
-              ) : (
-                <Button onClick={() => void handleStart()} disabled={starting}>
-                  {starting ? (
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                  ) : (
-                    "Start"
-                  )}
-                </Button>
-              )}
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card className="flex flex-col">
-          <CardHeader>
-            <CardTitle>Needs your confirmation</CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            {pending.length === 0 ? (
-              <p className="text-sm text-muted-foreground">
-                No directives waiting. High-impact actions the Secretary proposes
-                will appear here for you to confirm or reject.
-              </p>
-            ) : (
-              pending.map((d) => (
-                <DirectiveCard
-                  key={d.id}
-                  directive={d}
-                  busy={busy}
-                  onConfirm={(id) => confirmMutation.mutate(id)}
-                  onReject={(id) => rejectMutation.mutate(id)}
-                />
-              ))
-            )}
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}
diff --git a/panel/src/components/business/goals-tab.tsx b/panel/src/components/business/goals-tab.tsx
new file mode 100644
index 00000000..f288a06f
--- /dev/null
+++ b/panel/src/components/business/goals-tab.tsx
@@ -0,0 +1,374 @@
+"use client";
+
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Save } from "lucide-react";
+import {
+  companyGoalsApi,
+  type CompanyGoals,
+  type CompanyGoalsUpdate,
+} from "@/lib/api/company-goals";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { OfflineState } from "@/components/ui/offline-state";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function parseError(e: unknown): string {
+  return e instanceof Error ? e.message : "Unknown error";
+}
+
+/** Format an ISO timestamp nicely, or return the raw string. */
+function formatTs(ts: string | null | undefined): string {
+  if (!ts) return "—";
+  try {
+    return new Date(ts).toLocaleString();
+  } catch {
+    return ts;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Objectives field — one text field per key derived from the first item.
+// Falls back to a single "value" field when array is empty.
+// ---------------------------------------------------------------------------
+
+interface ObjectivesEditorProps {
+  items: Record<string, unknown>[];
+  onChange: (items: Record<string, unknown>[]) => void;
+  disabled: boolean;
+}
+
+function ObjectivesEditor({ items, onChange, disabled }: ObjectivesEditorProps) {
+  // Derive keys from the first item; fall back to generic keys.
+  const keys =
+    items.length > 0
+      ? Object.keys(items[0])
+      : ["metric", "target", "status"];
+
+  const handleChange = (
+    rowIdx: number,
+    key: string,
+    value: string
+  ) => {
+    const next = items.map((item, i) =>
+      i === rowIdx ? { ...item, [key]: value } : item
+    );
+    onChange(next);
+  };
+
+  const addRow = () => {
+    const empty: Record<string, unknown> = {};
+    keys.forEach((k) => (empty[k] = ""));
+    onChange([...items, empty]);
+  };
+
+  const removeRow = (idx: number) => {
+    onChange(items.filter((_, i) => i !== idx));
+  };
+
+  return (
+    <div className="space-y-3">
+      {items.map((item, rowIdx) => (
+        <div key={rowIdx} className="rounded-lg border p-3 space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-medium text-muted-foreground">
+              Objective #{rowIdx + 1}
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              disabled={disabled}
+              onClick={() => removeRow(rowIdx)}
+              className="h-6 px-2 text-xs text-destructive hover:text-destructive"
+            >
+              Remove
+            </Button>
+          </div>
+          {keys.map((key) => (
+            <div key={key} className="space-y-1">
+              <Label htmlFor={`obj-${rowIdx}-${key}`} className="text-xs capitalize">
+                {key.replace(/_/g, " ")}
+              </Label>
+              <Input
+                id={`obj-${rowIdx}-${key}`}
+                value={String(item[key] ?? "")}
+                disabled={disabled}
+                onChange={(e) => handleChange(rowIdx, key, e.target.value)}
+                className="h-8 text-sm"
+              />
+            </div>
+          ))}
+        </div>
+      ))}
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        disabled={disabled}
+        onClick={addRow}
+      >
+        + Add objective
+      </Button>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Operating policy editor — one input per key
+// ---------------------------------------------------------------------------
+
+interface PolicyEditorProps {
+  policy: Record<string, unknown>;
+  onChange: (policy: Record<string, unknown>) => void;
+  disabled: boolean;
+}
+
+function PolicyEditor({ policy, onChange, disabled }: PolicyEditorProps) {
+  const keys = Object.keys(policy);
+
+  const handleChange = (key: string, value: string) => {
+    onChange({ ...policy, [key]: value });
+  };
+
+  return (
+    <div className="space-y-2">
+      {keys.length === 0 && (
+        <p className="text-xs text-muted-foreground">
+          No policy keys yet — save with the backend to populate.
+        </p>
+      )}
+      {keys.map((key) => (
+        <div key={key} className="space-y-1">
+          <Label htmlFor={`policy-${key}`} className="text-xs capitalize">
+            {key.replace(/_/g, " ")}
+          </Label>
+          <Input
+            id={`policy-${key}`}
+            value={String(policy[key] ?? "")}
+            disabled={disabled}
+            onChange={(e) => handleChange(key, e.target.value)}
+            className="h-8 text-sm"
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Skeleton loading state
+// ---------------------------------------------------------------------------
+
+function GoalsTabSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-6 w-40 mb-1" />
+        <Skeleton className="h-4 w-80" />
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-20 w-full" />
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-20 w-full" />
+        </div>
+        <div className="space-y-3">
+          <Skeleton className="h-4 w-24" />
+          <div className="rounded-lg border p-3 space-y-2">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-4 w-16" />
+            <Skeleton className="h-8 w-full" />
+          </div>
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-36" />
+          <Skeleton className="h-8 w-full" />
+          <Skeleton className="h-8 w-full" />
+        </div>
+        <Skeleton className="h-9 w-32" />
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main editable form — only rendered when data is loaded
+// ---------------------------------------------------------------------------
+
+interface GoalsFormProps {
+  goals: CompanyGoals;
+  refetch: () => void;
+}
+
+function GoalsForm({ goals, refetch }: GoalsFormProps) {
+  const queryClient = useQueryClient();
+
+  const [northStar, setNorthStar] = useState<string | null>(null);
+  const [constraints, setConstraints] = useState<string | null>(null);
+  const [objectives, setObjectives] = useState<Record<string, unknown>[] | null>(null);
+  const [policy, setPolicy] = useState<Record<string, unknown> | null>(null);
+
+  const northStarVal = northStar ?? goals.north_star ?? "";
+  const constraintsVal = constraints ?? (goals.constraints ?? []).join("\n");
+  const objectivesVal = objectives ?? (goals.objectives ?? []);
+  const policyVal = policy ?? (goals.operating_policy ?? {});
+
+  const saveMutation = useMutation({
+    mutationFn: (update: CompanyGoalsUpdate) => companyGoalsApi.update(update),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["company-goals"] });
+      setNorthStar(null);
+      setConstraints(null);
+      setObjectives(null);
+      setPolicy(null);
+      toast.success("Company charter updated");
+    },
+    onError: (error) => {
+      toast.error(`Failed to save: ${parseError(error)}`);
+    },
+  });
+
+  const handleSave = () => {
+    saveMutation.mutate({
+      north_star: northStarVal,
+      objectives: objectivesVal,
+      constraints: constraintsVal
+        .split("\n")
+        .map((c) => c.trim())
+        .filter(Boolean),
+      operating_policy: policyVal,
+    });
+  };
+
+  const saving = saveMutation.isPending;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Company Charter</CardTitle>
+        <CardDescription>
+          CEO-owned north star, objectives, constraints, and operating policy.
+          Injected into every agent&apos;s briefing so all work stays goal-aware.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-5">
+        {/* North star */}
+        <div className="space-y-2">
+          <Label htmlFor="north-star">North star</Label>
+          <Textarea
+            id="north-star"
+            rows={3}
+            value={northStarVal}
+            disabled={saving}
+            onChange={(e) => setNorthStar(e.target.value)}
+            placeholder="The long-term vision in one or two sentences…"
+          />
+        </div>
+
+        {/* Constraints */}
+        <div className="space-y-2">
+          <Label htmlFor="constraints">Constraints (one per line)</Label>
+          <Textarea
+            id="constraints"
+            rows={3}
+            value={constraintsVal}
+            disabled={saving}
+            onChange={(e) => setConstraints(e.target.value)}
+            placeholder={"AGPL only\nNo external data egress"}
+          />
+        </div>
+
+        {/* Objectives */}
+        <div className="space-y-2">
+          <Label>Objectives</Label>
+          <ObjectivesEditor
+            items={objectivesVal}
+            onChange={(items) => setObjectives(items)}
+            disabled={saving}
+          />
+        </div>
+
+        {/* Operating policy */}
+        <div className="space-y-2">
+          <Label>Operating policy</Label>
+          <PolicyEditor
+            policy={policyVal}
+            onChange={(p) => setPolicy(p)}
+            disabled={saving}
+          />
+        </div>
+
+        {/* Save */}
+        <Button onClick={handleSave} disabled={saving}>
+          <Save className="h-4 w-4 mr-2" />
+          {saving ? "Saving…" : "Save charter"}
+        </Button>
+
+        {/* Metadata */}
+        <div className="border-t pt-4 space-y-1 text-xs text-muted-foreground">
+          <p>
+            Last updated:{" "}
+            <span className="font-medium text-foreground">
+              {formatTs(goals.updated_at)}
+            </span>
+          </p>
+          {goals.updated_by && (
+            <p>
+              Updated by:{" "}
+              <span className="font-medium text-foreground font-mono">
+                {goals.updated_by}
+              </span>
+            </p>
+          )}
+        </div>
+
+        {/* Hidden — just to make the refetch prop used */}
+        <button type="button" className="hidden" onClick={refetch} />
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Public export
+// ---------------------------------------------------------------------------
+
+export function GoalsTab() {
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: ["company-goals"],
+    queryFn: companyGoalsApi.get,
+  });
+
+  if (isLoading) return <GoalsTabSkeleton />;
+
+  if (isError || !data) {
+    return (
+      <OfflineState
+        title="Failed to load company goals"
+        description="Could not reach the orchestrator API. Check the backend is running."
+        onRetry={() => void refetch()}
+      />
+    );
+  }
+
+  return <GoalsForm goals={data} refetch={() => void refetch()} />;
+}
diff --git a/panel/src/components/business/pitches-tab.tsx b/panel/src/components/business/pitches-tab.tsx
new file mode 100644
index 00000000..fac95036
--- /dev/null
+++ b/panel/src/components/business/pitches-tab.tsx
@@ -0,0 +1,256 @@
+"use client";
+
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Check, RefreshCw, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { OfflineState } from "@/components/ui/offline-state";
+import { RequiredNotesDialog } from "@/components/ui/required-notes-dialog";
+import { getErrorMessage } from "@/lib/api/client";
+import { pitchesApi, type Pitch } from "@/lib/api/pitches";
+
+// ---------------------------------------------------------------------------
+// Skeleton placeholder shaped like a PitchCard
+// ---------------------------------------------------------------------------
+
+function PitchCardSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-5 w-48" />
+          <Skeleton className="h-5 w-20" />
+        </div>
+        <div className="flex gap-1 mt-1">
+          <Skeleton className="h-5 w-16" />
+          <Skeleton className="h-5 w-16" />
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <div>
+          <Skeleton className="h-3 w-12 mb-1" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-3/4 mt-1" />
+        </div>
+        <div>
+          <Skeleton className="h-3 w-28 mb-1" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-2/3 mt-1" />
+        </div>
+        <div className="flex gap-2">
+          <Skeleton className="h-8 w-32" />
+          <Skeleton className="h-8 w-20" />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Individual pitch card with RequiredNotesDialog for approve/reject
+// ---------------------------------------------------------------------------
+
+interface PitchCardProps {
+  pitch: Pitch;
+  onApprove: (id: string, notes: string) => void;
+  onReject: (id: string, notes: string) => void;
+  busy: boolean;
+}
+
+function PitchCard({ pitch, onApprove, onReject, busy }: PitchCardProps) {
+  const [approveOpen, setApproveOpen] = useState(false);
+  const [rejectOpen, setRejectOpen] = useState(false);
+  const proposed = pitch.status === "proposed";
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg">{pitch.title}</CardTitle>
+            <Badge variant={proposed ? "default" : "secondary"}>
+              {pitch.status}
+            </Badge>
+          </div>
+          {pitch.target_cells.length > 0 && (
+            <div className="flex flex-wrap gap-1 mt-1">
+              {pitch.target_cells.map((c) => (
+                <Badge key={c} variant="outline">
+                  {c}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <div>
+            <p className="text-xs font-medium text-muted-foreground">Problem</p>
+            <p className="text-sm whitespace-pre-wrap">{pitch.problem}</p>
+          </div>
+          <div>
+            <p className="text-xs font-medium text-muted-foreground">
+              Proposed solution
+            </p>
+            <p className="text-sm whitespace-pre-wrap">{pitch.proposed_solution}</p>
+          </div>
+          {proposed ? (
+            <div className="flex gap-2">
+              <Button
+                size="sm"
+                disabled={busy}
+                onClick={() => setApproveOpen(true)}
+              >
+                <Check className="mr-1 h-4 w-4" /> Approve &amp; provision
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                disabled={busy}
+                onClick={() => setRejectOpen(true)}
+              >
+                <X className="mr-1 h-4 w-4" /> Reject
+              </Button>
+            </div>
+          ) : (
+            pitch.decision_notes && (
+              <p className="text-xs text-muted-foreground">
+                Decision: {pitch.decision_notes}
+              </p>
+            )
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Approve dialog */}
+      <RequiredNotesDialog
+        open={approveOpen}
+        onOpenChange={setApproveOpen}
+        title="Approve pitch"
+        description="Add a note to accompany your approval. This will be recorded in the decision log."
+        notesLabel="Approval note"
+        placeholder="Why are you approving this pitch?"
+        submitLabel="Approve & provision"
+        isPending={busy}
+        onSubmit={(notes) => {
+          setApproveOpen(false);
+          onApprove(pitch.id, notes);
+        }}
+      />
+
+      {/* Reject dialog */}
+      <RequiredNotesDialog
+        open={rejectOpen}
+        onOpenChange={setRejectOpen}
+        title="Reject pitch"
+        description="Please provide a reason for rejecting this pitch."
+        notesLabel="Rejection reason"
+        placeholder="Why are you rejecting this pitch?"
+        submitLabel="Reject"
+        isPending={busy}
+        onSubmit={(notes) => {
+          setRejectOpen(false);
+          onReject(pitch.id, notes);
+        }}
+      />
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Public export
+// ---------------------------------------------------------------------------
+
+export function PitchesTab() {
+  const qc = useQueryClient();
+
+  const {
+    data: pitches = [],
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ["pitches"],
+    queryFn: () => pitchesApi.list(),
+    refetchInterval: 30000,
+  });
+
+  const approveMutation = useMutation({
+    mutationFn: ({ id, notes }: { id: string; notes: string }) =>
+      pitchesApi.approve(id, notes),
+    onSuccess: () => {
+      toast.success("Pitch approved — provisioning started");
+      void qc.invalidateQueries({ queryKey: ["pitches"] });
+    },
+    onError: (e) => toast.error(getErrorMessage(e)),
+  });
+
+  const rejectMutation = useMutation({
+    mutationFn: ({ id, notes }: { id: string; notes: string }) =>
+      pitchesApi.reject(id, notes),
+    onSuccess: () => {
+      toast.success("Pitch rejected");
+      void qc.invalidateQueries({ queryKey: ["pitches"] });
+    },
+    onError: (e) => toast.error(getErrorMessage(e)),
+  });
+
+  const busy = approveMutation.isPending || rejectMutation.isPending;
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle>Pitches</CardTitle>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void refetch()}
+            disabled={isLoading}
+          >
+            <RefreshCw className="mr-1 h-4 w-4" /> Refresh
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <div className="space-y-4">
+            <PitchCardSkeleton />
+            <PitchCardSkeleton />
+          </div>
+        ) : isError ? (
+          <OfflineState
+            title="Failed to load pitches"
+            description="Could not reach the orchestrator API. Check the backend is running."
+            onRetry={() => void refetch()}
+          />
+        ) : pitches.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            No pitches yet. The Board authors them; they appear here for your
+            approval.
+          </p>
+        ) : (
+          <div className="space-y-4">
+            {pitches.map((p: Pitch) => (
+              <PitchCard
+                key={p.id}
+                pitch={p}
+                busy={busy}
+                onApprove={(id, notes) => approveMutation.mutate({ id, notes })}
+                onReject={(id, notes) => rejectMutation.mutate({ id, notes })}
+              />
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/panel/src/components/business/secretary-tab.tsx b/panel/src/components/business/secretary-tab.tsx
new file mode 100644
index 00000000..afd5ffc0
--- /dev/null
+++ b/panel/src/components/business/secretary-tab.tsx
@@ -0,0 +1,324 @@
+"use client";
+
+import { useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Check, Loader2, Send, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Textarea } from "@/components/ui/textarea";
+import { Skeleton } from "@/components/ui/skeleton";
+import { OfflineState } from "@/components/ui/offline-state";
+import { Markdown } from "@/components/ui/markdown";
+import { RequiredNotesDialog } from "@/components/ui/required-notes-dialog";
+import { getErrorMessage } from "@/lib/api/client";
+import { secretaryApi, type SecretaryDirective } from "@/lib/api/secretary";
+import { useSecretary } from "@/hooks/use-secretary";
+
+// ---------------------------------------------------------------------------
+// Directive card — structured key-value rows, no raw JSON
+// ---------------------------------------------------------------------------
+
+interface DirectiveCardProps {
+  directive: SecretaryDirective;
+  onConfirm: (id: string) => void;
+  onReject: (id: string, reason: string) => void;
+  busy: boolean;
+}
+
+function DirectiveCard({ directive, onConfirm, onReject, busy }: DirectiveCardProps) {
+  const [rejectOpen, setRejectOpen] = useState(false);
+  const payloadKeys = Object.keys(directive.payload);
+
+  return (
+    <>
+      <div className="space-y-3 rounded-lg border p-3">
+        {/* Header row */}
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-semibold">{directive.kind}</span>
+          <span className="text-xs text-muted-foreground capitalize">
+            {directive.status}
+          </span>
+        </div>
+
+        {/* Structured payload — one labeled row per key */}
+        {payloadKeys.length > 0 ? (
+          <div className="space-y-1.5">
+            {payloadKeys.map((key) => (
+              <div key={key} className="flex flex-wrap gap-x-3 text-sm">
+                <span className="min-w-[8rem] text-xs font-medium text-muted-foreground capitalize">
+                  {key.replace(/_/g, " ")}
+                </span>
+                <span className="text-xs break-all">
+                  {String(directive.payload[key] ?? "—")}
+                </span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-xs text-muted-foreground">No payload.</p>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-2 pt-1">
+          <Button
+            size="sm"
+            disabled={busy}
+            onClick={() => onConfirm(directive.id)}
+          >
+            <Check className="mr-1 h-4 w-4" /> Confirm
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={busy}
+            onClick={() => setRejectOpen(true)}
+          >
+            <X className="mr-1 h-4 w-4" /> Reject
+          </Button>
+        </div>
+      </div>
+
+      {/* Reject requires a non-empty reason */}
+      <RequiredNotesDialog
+        open={rejectOpen}
+        onOpenChange={setRejectOpen}
+        title="Reject directive"
+        description="Please provide a reason for rejecting this directive."
+        notesLabel="Reason"
+        placeholder="Why are you rejecting this directive?"
+        submitLabel="Reject"
+        isPending={busy}
+        onSubmit={(reason) => {
+          setRejectOpen(false);
+          onReject(directive.id, reason);
+        }}
+      />
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Directives panel skeleton
+// ---------------------------------------------------------------------------
+
+function DirectivesSkeleton() {
+  return (
+    <div className="space-y-3">
+      {[1, 2].map((i) => (
+        <div key={i} className="rounded-lg border p-3 space-y-2">
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-3 w-16" />
+          </div>
+          <Skeleton className="h-3 w-full" />
+          <Skeleton className="h-3 w-3/4" />
+          <div className="flex gap-2 pt-1">
+            <Skeleton className="h-8 w-20" />
+            <Skeleton className="h-8 w-20" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Chat messages — ReactMarkdown in styled bubbles
+// ---------------------------------------------------------------------------
+
+function ChatMessages({
+  messages,
+  streaming,
+}: {
+  messages: { role: "user" | "assistant"; text: string }[];
+  streaming: boolean;
+}) {
+  return (
+    <div className="flex-1 space-y-3 overflow-y-auto">
+      {messages.length === 0 && (
+        <p className="text-sm text-muted-foreground">
+          Say something to start the conversation.
+        </p>
+      )}
+      {messages.map((m, i) => (
+        <div
+          key={i}
+          className={
+            m.role === "user"
+              ? "ml-auto max-w-[80%] rounded-lg bg-primary px-3 py-2 text-sm text-primary-foreground"
+              : "mr-auto max-w-[80%] rounded-lg bg-muted px-3 py-2"
+          }
+        >
+          {m.role === "user" ? (
+            <span>{m.text}</span>
+          ) : (
+            <Markdown className="text-sm">{m.text}</Markdown>
+          )}
+        </div>
+      ))}
+      {streaming && (
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <Loader2 className="h-3 w-3 animate-spin" /> thinking…
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Public export
+// ---------------------------------------------------------------------------
+
+export function SecretaryTab() {
+  const qc = useQueryClient();
+  const { sessionId, messages, streaming, start, send, stop } = useSecretary();
+  const [input, setInput] = useState("");
+  const [starting, setStarting] = useState(false);
+
+  const {
+    data: pending = [],
+    isLoading: directivesLoading,
+    isError: directivesError,
+    refetch: refetchDirectives,
+  } = useQuery({
+    queryKey: ["secretary", "directives", "pending"],
+    queryFn: () => secretaryApi.listDirectives("pending"),
+    refetchInterval: 15000,
+  });
+
+  const confirmMutation = useMutation({
+    mutationFn: (id: string) => secretaryApi.confirmDirective(id),
+    onSuccess: (d) => {
+      toast.success(`Directive ${d.kind}: ${d.status}`);
+      void qc.invalidateQueries({ queryKey: ["secretary", "directives"] });
+    },
+    onError: (e) => toast.error(getErrorMessage(e)),
+  });
+
+  const rejectMutation = useMutation({
+    mutationFn: ({ id, reason }: { id: string; reason: string }) =>
+      secretaryApi.rejectDirective(id, reason),
+    onSuccess: () => {
+      toast.success("Directive rejected");
+      void qc.invalidateQueries({ queryKey: ["secretary", "directives"] });
+    },
+    onError: (e) => toast.error(getErrorMessage(e)),
+  });
+
+  const busy = confirmMutation.isPending || rejectMutation.isPending;
+
+  const handleStart = async () => {
+    setStarting(true);
+    try {
+      await start(input.trim() || undefined);
+      setInput("");
+    } catch (e) {
+      toast.error(getErrorMessage(e));
+    } finally {
+      setStarting(false);
+    }
+  };
+
+  const handleSend = async () => {
+    const text = input.trim();
+    if (!text) return;
+    setInput("");
+    try {
+      await send(text);
+    } catch (e) {
+      toast.error(getErrorMessage(e));
+    }
+  };
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-3">
+      {/* Chat panel */}
+      <Card className="flex min-h-[60vh] flex-col lg:col-span-2">
+        <CardHeader className="flex-row items-center justify-between space-y-0 pb-3">
+          <CardTitle>Chat</CardTitle>
+          {sessionId && (
+            <Button variant="outline" size="sm" onClick={() => void stop()}>
+              End session
+            </Button>
+          )}
+        </CardHeader>
+        <CardContent className="flex flex-1 flex-col gap-4">
+          <ChatMessages messages={messages} streaming={streaming} />
+          <div className="flex gap-2">
+            <Textarea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder={
+                sessionId
+                  ? "Message your Secretary…"
+                  : "Opening message (optional)…"
+              }
+              rows={2}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  if (sessionId) void handleSend();
+                  else void handleStart();
+                }
+              }}
+            />
+            {sessionId ? (
+              <Button
+                onClick={() => void handleSend()}
+                disabled={!input.trim()}
+              >
+                <Send className="h-4 w-4" />
+              </Button>
+            ) : (
+              <Button onClick={() => void handleStart()} disabled={starting}>
+                {starting ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  "Start"
+                )}
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Pending directives panel */}
+      <Card className="flex flex-col">
+        <CardHeader>
+          <CardTitle>Needs your confirmation</CardTitle>
+        </CardHeader>
+        <CardContent className="flex-1">
+          {directivesLoading ? (
+            <DirectivesSkeleton />
+          ) : directivesError ? (
+            <OfflineState
+              title="Failed to load directives"
+              description="Could not reach the API."
+              onRetry={() => void refetchDirectives()}
+            />
+          ) : pending.length === 0 ? (
+            <p className="text-sm text-muted-foreground">
+              No directives waiting. High-impact actions the Secretary proposes
+              will appear here for you to confirm or reject.
+            </p>
+          ) : (
+            <div className="space-y-3">
+              {pending.map((d: SecretaryDirective) => (
+                <DirectiveCard
+                  key={d.id}
+                  directive={d}
+                  busy={busy}
+                  onConfirm={(id) => confirmMutation.mutate(id)}
+                  onReject={(id, reason) =>
+                    rejectMutation.mutate({ id, reason })
+                  }
+                />
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/panel/src/components/dashboard/command-center.tsx b/panel/src/components/dashboard/command-center.tsx
index edbdc66d..f49ebf1d 100644
--- a/panel/src/components/dashboard/command-center.tsx
+++ b/panel/src/components/dashboard/command-center.tsx
@@ -9,6 +9,7 @@ import { ActiveBlockersPanel } from "./active-blockers-panel";
 import { RecentActivityFeed } from "./recent-activity-feed";
 import { QuickActionsBar } from "./quick-actions-bar";
 import { CeoApprovalQueue } from "./ceo-approval-queue";
+import { StrategySignalsPanel } from "./strategy-signals-panel";
 import type { Activity } from "./activity-item";
 import { Button } from "@/components/ui/button";
 import { UsageOverviewPanel } from "./usage-overview-panel";
@@ -70,10 +71,11 @@ export function CommandCenter() {
         />
       </section>
 
-      {/* CEO Approval Queue - Your primary action item */}
-      <section>
+      {/* CEO Approval Queue + Strategy Signals - side-by-side on lg+ */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <CeoApprovalQueue />
-      </section>
+        <StrategySignalsPanel />
+      </div>
 
       {/* Metrics, Alerts, and Usage Row */}
       <div className="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 gap-6">
diff --git a/panel/src/components/dashboard/index.ts b/panel/src/components/dashboard/index.ts
index 2352d619..21c61137 100644
--- a/panel/src/components/dashboard/index.ts
+++ b/panel/src/components/dashboard/index.ts
@@ -9,4 +9,5 @@ export { ActivityItem } from "./activity-item";
 export { QuickActionsBar } from "./quick-actions-bar";
 export { HealthIndicator } from "./health-indicator";
 export { CeoApprovalQueue } from "./ceo-approval-queue";
+export { StrategySignalsPanel } from "./strategy-signals-panel";
 export { UsageOverviewPanel } from "./usage-overview-panel";
diff --git a/panel/src/components/dashboard/strategy-signals-panel.tsx b/panel/src/components/dashboard/strategy-signals-panel.tsx
new file mode 100644
index 00000000..7efaaa5a
--- /dev/null
+++ b/panel/src/components/dashboard/strategy-signals-panel.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { cockpitApi } from "@/lib/api/cockpit";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
+import { TrendingUp } from "lucide-react";
+
+interface StrategySignalsPanelProps {
+  className?: string;
+}
+
+export function StrategySignalsPanel({ className }: StrategySignalsPanelProps) {
+  const { data: signalsData, isLoading } = useQuery({
+    queryKey: ["cockpit", "signals"],
+    queryFn: () => cockpitApi.signals(),
+    refetchInterval: 30000,
+  });
+
+  const signals = signalsData ?? [];
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <TrendingUp className="h-5 w-5" />
+          Strategy Signals
+        </CardTitle>
+        <CardDescription>Live signals from the strategy engine</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <div className="space-y-3">
+            <Skeleton className="h-16 w-full" />
+            <Skeleton className="h-16 w-full" />
+          </div>
+        ) : signals.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <TrendingUp className="h-12 w-12 mx-auto mb-2 opacity-50" />
+            <p>No strategy signals right now</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {signals.map((signal, index) => (
+              <div
+                key={index}
+                className="flex items-start gap-3 p-4 border rounded-lg hover:bg-muted/50 transition-colors"
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <Badge variant="outline" className="text-xs">
+                      {signal.kind}
+                    </Badge>
+                  </div>
+                  <p className="font-medium text-sm">{signal.summary}</p>
+                  {signal.detail && (
+                    <p className="text-sm text-muted-foreground mt-1">
+                      {signal.detail}
+                    </p>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/panel/src/components/layout/sidebar.tsx b/panel/src/components/layout/sidebar.tsx
index 732ad578..ddc82236 100644
--- a/panel/src/components/layout/sidebar.tsx
+++ b/panel/src/components/layout/sidebar.tsx
@@ -22,10 +22,7 @@ import {
   Database,
   Cpu,
   Sparkles,
-  Target,
-  Briefcase,
-  Lightbulb,
-  Gauge,
+  Building2,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -34,19 +31,16 @@ import { useUIStore } from "@/store";
 export const navItems = [
   // Dashboard
   { title: "Overview", href: "/overview", icon: LayoutDashboard },
-  { title: "Cockpit", href: "/cockpit", icon: Gauge },
-  { title: "Company Goals", href: "/company-goals", icon: Target },
+  { title: "Business", href: "/business", icon: Building2 },
 
   // Work Management
   { title: "Tasks", href: "/tasks", icon: ListTodo },
   { title: "Kanban", href: "/kanban", icon: Kanban },
   { title: "Task Assistant", href: "/prompter", icon: Sparkles },
-  { title: "Secretary", href: "/secretary", icon: Briefcase },
 
   // Development
   { title: "Projects", href: "/projects", icon: FolderGit2 },
   { title: "Products", href: "/products", icon: Boxes },
-  { title: "Pitches", href: "/pitches", icon: Lightbulb },
   { title: "Git", href: "/git", icon: GitBranch },
 
   // Team & Reference
diff --git a/panel/src/components/ui/required-notes-dialog.tsx b/panel/src/components/ui/required-notes-dialog.tsx
new file mode 100644
index 00000000..33e9c3e1
--- /dev/null
+++ b/panel/src/components/ui/required-notes-dialog.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+
+interface RequiredNotesDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Title shown in the dialog header */
+  title?: string;
+  /** Description shown below the title */
+  description?: string;
+  /** Label for the notes textarea */
+  notesLabel?: string;
+  /** Placeholder text for the textarea */
+  placeholder?: string;
+  /** Called with the entered notes when the user clicks Submit */
+  onSubmit: (notes: string) => void;
+  /** Whether the submit action is currently pending (disables buttons) */
+  isPending?: boolean;
+  /** Label for the submit button */
+  submitLabel?: string;
+}
+
+/**
+ * A dialog that requires the user to enter a non-empty reason / notes before
+ * confirming a destructive or significant action.  The Submit button is
+ * disabled while the notes textarea is empty or whitespace-only.  Cancel
+ * closes the dialog without invoking `onSubmit`.
+ *
+ * The dialog is keyed on `open` so its internal state resets cleanly on each
+ * open; this avoids a `setState-in-effect` pattern.
+ */
+function RequiredNotesDialogInner({
+  open,
+  onOpenChange,
+  title = "Add a note",
+  description = "Please provide a reason before continuing.",
+  notesLabel = "Notes",
+  placeholder = "Enter your reason…",
+  onSubmit,
+  isPending = false,
+  submitLabel = "Submit",
+}: RequiredNotesDialogProps) {
+  const [notes, setNotes] = useState("");
+
+  const isBlank = notes.trim() === "";
+
+  const handleSubmit = () => {
+    if (isBlank || isPending) return;
+    onSubmit(notes.trim());
+  };
+
+  const handleCancel = () => {
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && (
+            <DialogDescription>{description}</DialogDescription>
+          )}
+        </DialogHeader>
+
+        <div className="space-y-2">
+          <Label htmlFor="required-notes">{notesLabel}</Label>
+          <Textarea
+            id="required-notes"
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            placeholder={placeholder}
+            rows={4}
+            disabled={isPending}
+          />
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleCancel} disabled={isPending}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={isBlank || isPending}>
+            {isPending ? "Submitting…" : submitLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/**
+ * Exported wrapper that remounts the inner component each time the dialog
+ * opens, giving us a fresh empty notes field without using setState-in-effect.
+ */
+export function RequiredNotesDialog(props: RequiredNotesDialogProps) {
+  // Using open as the key causes the inner component to remount (and reset its
+  // local state) each time the dialog transitions from closed → open.
+  return <RequiredNotesDialogInner key={String(props.open)} {...props} />;
+}
diff --git a/panel/src/lib/api/cockpit.ts b/panel/src/lib/api/cockpit.ts
index c4a93a21..ee4f4f7d 100644
--- a/panel/src/lib/api/cockpit.ts
+++ b/panel/src/lib/api/cockpit.ts
@@ -17,7 +17,13 @@ export interface CockpitSummary {
     over_budget: boolean;
   };
   pending_pitches: number;
-  signals: { kind: string; summary: string; detail: string }[];
+  signals: CockpitSignal[];
+}
+
+export interface CockpitSignal {
+  kind: string;
+  summary: string;
+  detail: string;
 }
 
 export const cockpitApi = {
@@ -26,4 +32,13 @@ export const cockpitApi = {
     const { data } = await api.get<CockpitSummary>("/cockpit/summary");
     return data;
   },
+
+  // GET /api/cockpit/signals — just the strategy-engine signals (Dashboard panel);
+  // lighter than /summary, which runs the full goals/usage/counts/pitches fan-out.
+  signals: async (): Promise<CockpitSignal[]> => {
+    const { data } = await api.get<{ signals: CockpitSignal[] }>(
+      "/cockpit/signals"
+    );
+    return data.signals;
+  },
 };
diff --git a/roboco/api/routes/cockpit.py b/roboco/api/routes/cockpit.py
index e9ad5964..bf4286fc 100644
--- a/roboco/api/routes/cockpit.py
+++ b/roboco/api/routes/cockpit.py
@@ -3,7 +3,7 @@
 from fastapi import APIRouter, HTTPException, status
 
 from roboco.api.deps import CurrentAgentContext, DbSession
-from roboco.api.schemas.cockpit import CockpitSummary
+from roboco.api.schemas.cockpit import CockpitSignals, CockpitSummary
 from roboco.models import AgentRole
 from roboco.services.cockpit import get_cockpit_service
 
@@ -29,3 +29,15 @@ async def cockpit_summary(db: DbSession, agent: CurrentAgentContext) -> CockpitS
             detail=f"role '{agent.role}' may not view the cockpit",
         )
     return CockpitSummary(**await get_cockpit_service(db).summary())
+
+
+@router.get("/signals", response_model=CockpitSignals)
+async def cockpit_signals(db: DbSession, agent: CurrentAgentContext) -> CockpitSignals:
+    """Just the strategy-engine signals — the lightweight slice the Dashboard's
+    Strategy Signals panel needs (lighter than ``/summary``, same role gate)."""
+    if agent.role not in _COCKPIT_ROLES:
+        raise HTTPException(
+            status_code=status.HTTP_403_FORBIDDEN,
+            detail=f"role '{agent.role}' may not view cockpit signals",
+        )
+    return CockpitSignals(**await get_cockpit_service(db).signals())
diff --git a/roboco/api/schemas/cockpit.py b/roboco/api/schemas/cockpit.py
index 307d55c6..4b9e2e95 100644
--- a/roboco/api/schemas/cockpit.py
+++ b/roboco/api/schemas/cockpit.py
@@ -35,3 +35,10 @@ class CockpitSummary(BaseModel):
     spend: SpendSummary
     pending_pitches: int
     signals: list[CockpitSignal]
+
+
+class CockpitSignals(BaseModel):
+    """Just the strategy-engine signals — the Dashboard panel's lightweight slice
+    (avoids the full /summary fan-out: goals / usage / task-counts / pitches)."""
+
+    signals: list[CockpitSignal]
diff --git a/roboco/services/cockpit.py b/roboco/services/cockpit.py
index 884310fd..61d87ca7 100644
--- a/roboco/services/cockpit.py
+++ b/roboco/services/cockpit.py
@@ -74,6 +74,18 @@ class CockpitService(BaseService):
             ],
         }
 
+    async def signals(self) -> dict[str, Any]:
+        """Just the strategy-engine signals (what needs the CEO) — the lightweight
+        slice the Dashboard's panel needs, without the full ``summary`` fan-out
+        (goals / usage / task-counts / pitches)."""
+        observations = await get_strategy_engine(self.session).assess()
+        return {
+            "signals": [
+                {"kind": o.kind, "summary": o.summary, "detail": o.detail}
+                for o in observations
+            ],
+        }
+
 
 def get_cockpit_service(session: AsyncSession) -> CockpitService:
     """Construct a CockpitService bound to ``session``."""
diff --git a/tests/unit/services/test_cockpit.py b/tests/unit/services/test_cockpit.py
index 5f6fff85..68320e18 100644
--- a/tests/unit/services/test_cockpit.py
+++ b/tests/unit/services/test_cockpit.py
@@ -121,3 +121,35 @@ async def test_route_ok_for_ceo(monkeypatch: pytest.MonkeyPatch) -> None:
     resp = await croute.cockpit_summary(MagicMock(), _agent(AgentRole.CEO))
     assert resp.basis == "proxy"
     assert resp.spend.over_budget is False
+
+
+@pytest.mark.asyncio
+async def test_signals_returns_only_strategy_signals(
+    monkeypatch: pytest.MonkeyPatch,
+) -> None:
+    # The lightweight slice returns ONLY the strategy signals — none of the
+    # summary fan-out (goals / spend / counts / pitches).
+    _patch(monkeypatch)
+    out = await CockpitService(MagicMock()).signals()
+    assert list(out.keys()) == ["signals"]
+    assert out["signals"][0]["kind"] == "idle"
+    assert out["signals"][0]["summary"] == "s"
+
+
+@pytest.mark.asyncio
+async def test_signals_route_forbidden_for_developer() -> None:
+    with pytest.raises(HTTPException) as exc:
+        await croute.cockpit_signals(MagicMock(), _agent(AgentRole.DEVELOPER))
+    assert exc.value.status_code == HTTPStatus.FORBIDDEN
+
+
+@pytest.mark.asyncio
+async def test_signals_route_ok_for_ceo(monkeypatch: pytest.MonkeyPatch) -> None:
+    svc = MagicMock(
+        signals=AsyncMock(
+            return_value={"signals": [{"kind": "idle", "summary": "s", "detail": "d"}]}
+        )
+    )
+    monkeypatch.setattr(croute, "get_cockpit_service", lambda _db: svc)
+    resp = await croute.cockpit_signals(MagicMock(), _agent(AgentRole.CEO))
+    assert resp.signals[0].kind == "idle"