[27208d92] Consolidate Cockpit/Goals/Secretary/Pitches into a Business page (#184)

* [0c66b856] Frontend: Build tabbed Business page consolidating Goals/Secretary/Pitches (#183)

* [c9f00d0d] feat(business): add /business tabbed page consolidating Goals, Secretary, Pitches (#182)

- Create src/app/(dashboard)/business/page.tsx with URL-driven Tabs (goals|secretary|pitches), reading ?tab= via useSearchParams; defaults to 'goals'
- Create src/components/business/goals-tab.tsx: key-introspected form fields for objectives items and operating_policy (no raw JSON textareas), updated_at/updated_by metadata, skeleton loading, OfflineState on error
- Create src/components/business/secretary-tab.tsx: ReactMarkdown (GFM) chat bubbles, structured directive cards with labeled key-value rows, RequiredNotesDialog for reject, skeleton loading, OfflineState on error
- Create src/components/business/pitches-tab.tsx: sub-header Refresh button, PitchCard skeleton loading, OfflineState on error (not empty-state text), RequiredNotesDialog for both Approve and Reject
- Create src/components/ui/required-notes-dialog.tsx: Submit disabled on empty/whitespace, Cancel closes without action, state resets on each open via key pattern
- Update sidebar.tsx: remove Cockpit/Company Goals/Secretary/Pitches entries, add single Business entry (Building2 icon, /business)
- Replace company-goals/page.tsx, secretary/page.tsx, pitches/page.tsx with server-side redirect() to /business?tab=X
- Replace cockpit/page.tsx with notFound() (404)
- All tabs: shadcn Card + Skeleton, sonner toast for success/error

Co-authored-by: Frontend Developer 1 <fe-dev-1@agents.roboco.dev>

* [e3e5ff9b] feat(dashboard): add StrategySignalsPanel next to CeoApprovalQueue in a 2-column grid layout (#181)

Co-authored-by: Frontend Developer 2 <fe-dev-2@agents.roboco.dev>

---------

Co-authored-by: Frontend Developer 1 <fe-dev-1@agents.roboco.dev>
Co-authored-by: Frontend Developer 2 <fe-dev-2@agents.roboco.dev>

* refactor(panel): delete the consolidated old routes instead of stubbing them

cockpit/company-goals/secretary/pitches are fully consolidated into /business,
so the old route pages are dead code. Remove the four page.tsx files outright
rather than keep redirect/404 stubs — the clean move is to delete, not add.
The sidebar already points only at /business; no internal links reference the
old routes (the remaining /company-goals|/secretary|/pitches|/cockpit strings
are backend API paths the API clients call, unaffected). Old bookmarks now
resolve to Next's default 404, which is correct for a removed route.

* perf(cockpit): light /cockpit/signals endpoint for the Dashboard panel

The relocated Strategy Signals panel was calling /cockpit/summary, which runs
the whole fan-out (company goals + usage/spend + task-counts + pitches +
strategy assess) just to read the signals. Add CockpitService.signals() +
GET /api/cockpit/signals (CockpitSignals schema, same _COCKPIT_ROLES gate) that
runs only StrategyEngine.assess(), and repoint the panel (+ cockpitApi.signals()
client method, CockpitSignal type). Now the Dashboard fetches only what it
shows. Backend gated: ruff + full mypy + 6 cockpit tests green (live DB).

---------

Co-authored-by: Frontend Developer 1 <fe-dev-1@agents.roboco.dev>
Co-authored-by: Frontend Developer 2 <fe-dev-2@agents.roboco.dev>
Co-authored-by: Renn F <rennf93@users.noreply.github.com>

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>
+  );
+}

panel/src/app/(dashboard)/cockpit/page.tsx

@@ -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>
-  );
-}

panel/src/app/(dashboard)/company-goals/page.tsx

@@ -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>
-  );
-}

panel/src/app/(dashboard)/pitches/page.tsx

@@ -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>
-  );
-}

panel/src/app/(dashboard)/secretary/page.tsx

@@ -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>
-  );
-}