mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
[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>
This commit is contained in:
Renzo F
co-authored by
Frontend Developer 1
Frontend Developer 2
Renn F
Frontend Developer 1
Frontend Developer 2
Renn F
parent
a89d3cc885
commit
1757659754
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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'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>
|
||||
);
|
||||
}
|
||||
@@ -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's charter — north star, objectives, constraints,
|
||||
and operating policy that steer every agent's work.
|
||||
</p>
|
||||
</div>
|
||||
<CompanyGoalsCard />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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 & 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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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'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()} />;
|
||||
}
|
||||
@@ -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 & 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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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">
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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
|
||||
|
||||
@@ -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} />;
|
||||
}
|
||||
@@ -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;
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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())
|
||||
|
||||
@@ -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]
|
||||
|
||||
@@ -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``."""
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user