mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
Feature/observability gateway health (#247)
* feat(observability): revision_count + audit_log query index (migration 045)
Adds tasks.revision_count (the O(1) rework counter — forward-only, existing
rows default 0) and the composite index audit_log(target_id, event_type,
timestamp) that powers the cycle-time and rework reconstruction queries.
Verified the real upgrade/downgrade/upgrade chain on a throwaway pgvector PG.
First task of the 0.10.0 observability dashboards.
* feat(observability): count reworks + attribute qa_fail/pr_fail to the rejector
Every transition into needs_revision increments tasks.revision_count at the
single audit chokepoint (exactly once per bounce, across all paths incl. pr_fail
and ceo_reject), so the rework rate is an O(1) read. A QA or PR-review bounce
also emits a named task.qa_fail / task.pr_fail audit event carrying the
rejector's agent_id, so the per-agent rework scorecard charges the rejection to
the reviewer who made it, not the developer who owns the task.
* feat(observability): cycle-time, bottleneck, rework, and scorecard metrics
MetricsService gains four read methods on the audit_log + tasks data: per-stage
cycle time reconstructed from the transition journey (excluding the named
qa_fail/pr_fail events), bottleneck distribution (cumulative dwell + live parked
counts), rework rate (overall/by-team/by-agent with rejector attribution + cost
via spawn-session task_id), and a fused per-agent/per-cell scorecard. Dataclass
models with to_dict(). Verified against a real Postgres journey.
* feat(observability): cycle-time/bottleneck/rework/scorecard read endpoints
Thin read-only routes on the dashboard router delegating to MetricsService:
/metrics/cycle-time, /metrics/bottlenecks, /metrics/rework, and
/metrics/scorecard/{agent,team}. 404 when an agent scorecard target is absent.
5 route tests (200 + shape + the agent-404 case).
* feat(panel): Delivery observability tab (cycle-time, bottlenecks, rework, scorecards)
A third Metrics tab built on the observability endpoints: a per-stage
cycle-time bar chart, a bottleneck panel (worst stage + cumulative dwell +
live parked counts), a rework panel (rate + by-team + by-agent attribution +
cost), and per-cell scorecards. Reuses Recharts + Card/Badge/Skeleton and the
React-Query hook pattern; observabilityApi mirrors usageApi with mock-mode
fallbacks. tsc + eslint clean; 113 panel tests pass.
* docs(observability): changelog + CLAUDE.md for the delivery dashboards
* feat(gateway-health): recover a broken-but-alive agent instead of protecting it
The verb-heartbeat cannot tell a quiet-healthy agent from one whose MCP gateway
is broken (a corrupted /app/.venv firing no verb) yet whose container is up — the
reaper's live-skip would shield it forever. The reaper now probes the gateway
out-of-band (docker exec: does the gateway venv import its deps?) and, once it
has been broken past gateway_health_grace_seconds (tolerating a transient probe
miss), kills + evicts the container so it falls through to release + respawn.
Probe-inconclusive or healthy spares the container. Gated by
gateway_health_enabled (default-on reliability fix; in the panel Feature Flags).
Defers the optional agent-side self-check + full registry re-adoption — the
reaper's docker-liveness fallback already recovers a broken-after-restart agent.
* docs(gateway-health): changelog + CLAUDE.md for broken-but-alive recovery
* docs(observability): user-facing docs for the Delivery dashboards + gateway-health
Documents the new Metrics -> Delivery tab (cycle-time, bottlenecks, rework with
rejector attribution, cell scorecards) in the panel guide and the operations
health-and-metrics guide, and adds the gateway-health env vars + an agent-gateway
recovery note. Published MkDocs site only; settings.md's default-off flag table
intentionally omits the default-on gateway-health flag (same as overload-break).
* chore(release): cut 0.10.0 (changelog section + version refs)
* fix(gateway): exempt PM coordinators from single-task claim guards
A Main/Cell PM plans and delegates many root tasks in parallel; the work
then runs in the delegated cells, not in the PM's own hands. But the
claim-time concurrency guards meant for developers — already_active and
paused (the latter firing after i_am_idle auto-pauses the PM's own
umbrella) — were applied to the PM too, so once it held one root it could
never plan a second: it thrashed between its claimed roots and respawned
forever, burning tokens for zero progress.
_run_claim_guards now skips already_active/paused for the coordinator PM
roles (_COORDINATOR_ROLES = {main_pm, cell_pm}); only unmet_dependency — a
real upstream sequence constraint, which parks the root back to pending —
still gates a PM. paused_tasks_guard also excludes the target task itself,
so a PM re-entering its own paused umbrella never self-blocks.
Tests: a coordinator plans a second root with one in_progress + one paused
sibling (full path + claimed-recovery path), the paused target exclusion,
and the developer guards still fire. Repurposed the pre-fix test that
asserted the now-removed PM block.
* fix(metrics): coerce SQL avg/extract hours aggregates to float (panel toFixed crash)
EXTRACT(epoch ...) returns numeric on PostgreSQL 14+, which asyncpg surfaces
as a Decimal; a Decimal serializes to a quoted JSON string, so the panel's
avg_cycle_hours.toFixed(1) (and the other hours fields) threw 'toFixed is not
a function' and blanked the Delivery tab.
A single _as_hours helper now rounds every SQL-averaged hours field to a real
float — avg_cycle_hours on the new scorecards plus the pre-existing
avg_completion_hours / avg_blocked_hours / longest_blocked_hours. Token and
cost fields were already float()-cast and are unaffected.
Regression test asserts _as_hours coerces Decimal -> float and preserves the
None/zero behavior.
* feat(panel): edit a task's sequence from the details page
A task's sequence (order within siblings, lower runs first) was display-only
with no way to change it from the UI, and TaskUpdate didn't carry the field
so PATCH couldn't set it either. The details page's Dependencies tab now has
an inline sequence editor mirroring the parent / dependency editors, and
PATCH /tasks/{id} accepts a sequence field (owner or privileged role) through
the existing generic update path.
* fix(mypy): green the full make-quality type gate
make quality runs 'mypy roboco/ tests/', which the per-module checks on the
0.10.0 branch never exercised. Two issues surfaced:
- The coordinator-exemption change added role_str to
Choreographer._run_claim_guards but not to the ChoreographerHelpers
protocol base, so the composed Choreographer had incompatible base-class
signatures. Sync the protocol signature.
- The gateway-health / stale-reaper tests stubbed methods by direct
assignment (orch._m = AsyncMock()) and typed their duck-typed task doubles
as object, tripping method-assign / assignment / attr-defined. Switch to
monkeypatch.setattr (keeping a local mock ref for the assertions) and type
the doubles as Any — no type: ignore.
Full mypy roboco/ tests/ clean (785 files); the 21 runtime tests pass.
* fix(metrics): static cycle-time SQL — clear bandit B608 (CI gate)
The cycle-time query interpolated an optional team clause into the text() SQL
via an f-string, which bandit flags as B608 (hardcoded SQL) and turned the
merge gate red. The team value was always a bound parameter, so it was a false
positive — but the f-string is the trigger. Rebuilt as one static query with
(CAST(:team AS text) IS NULL OR a.details->>'team' = :team) and an always-bound
team param (CAST, not ::text — SQLAlchemy's :param parser collides with
PostgreSQL's :: cast operator, which broke the query as a stray param).
Full make quality green vs a real pgvector PG (all 21 gate steps).
---------
Co-authored-by: Renn F <rennf93@users.noreply.github.com>
This commit is contained in:
Renzo F
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "roboco-panel",
|
||||
"version": "0.9.0",
|
||||
"version": "0.10.0",
|
||||
"private": true,
|
||||
"packageManager": "pnpm@10.25.0",
|
||||
"scripts": {
|
||||
|
||||
@@ -20,6 +20,7 @@ import { Progress } from "@/components/ui/progress";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { OfflineState } from "@/components/ui/offline-state";
|
||||
import { DeliveryTabContent } from "@/components/metrics/delivery-tab";
|
||||
import {
|
||||
UsageTimeSeriesChart,
|
||||
ModelUsageDonut,
|
||||
@@ -527,9 +528,9 @@ function CacheEfficiencyCard({ cacheStats, isLoading }: CacheEfficiencyCardProps
|
||||
|
||||
// ─── Tab types ────────────────────────────────────────────────────────────────
|
||||
|
||||
type MetricsTab = "performance" | "token-usage";
|
||||
type MetricsTab = "performance" | "token-usage" | "delivery";
|
||||
|
||||
const VALID_METRICS_TABS: MetricsTab[] = ["performance", "token-usage"];
|
||||
const VALID_METRICS_TABS: MetricsTab[] = ["performance", "token-usage", "delivery"];
|
||||
|
||||
function isValidMetricsTab(value: string | null): value is MetricsTab {
|
||||
return VALID_METRICS_TABS.includes(value as MetricsTab);
|
||||
@@ -567,6 +568,7 @@ function MetricsPageContent() {
|
||||
<TabsList>
|
||||
<TabsTrigger value="performance">Performance</TabsTrigger>
|
||||
<TabsTrigger value="token-usage">Token Usage</TabsTrigger>
|
||||
<TabsTrigger value="delivery">Delivery</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="performance" className="mt-6">
|
||||
@@ -576,6 +578,10 @@ function MetricsPageContent() {
|
||||
<TabsContent value="token-usage" className="mt-6">
|
||||
<TokenUsageCostsSection />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="delivery" className="mt-6">
|
||||
<DeliveryTabContent />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,263 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
useCycleTime,
|
||||
useBottlenecks,
|
||||
useRework,
|
||||
useTeamScorecard,
|
||||
} from "@/hooks/use-observability";
|
||||
import type { Scorecard } from "@/types";
|
||||
|
||||
const CELLS = ["backend", "frontend", "ux_ui"] as const;
|
||||
|
||||
function label(status: string): string {
|
||||
return status
|
||||
.split("_")
|
||||
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
function fmtDuration(seconds: number): string {
|
||||
if (seconds >= 3600) return (seconds / 3600).toFixed(1) + "h";
|
||||
if (seconds >= 60) return (seconds / 60).toFixed(0) + "m";
|
||||
return seconds.toFixed(0) + "s";
|
||||
}
|
||||
|
||||
function pct(rate: number): string {
|
||||
return (rate * 100).toFixed(1) + "%";
|
||||
}
|
||||
|
||||
// ─── Cycle time ───────────────────────────────────────────────────────────────
|
||||
|
||||
function CycleTimeCard() {
|
||||
const { data, isLoading } = useCycleTime(30);
|
||||
const chartData = (data ?? []).map((s) => ({
|
||||
name: label(s.status),
|
||||
Hours: Number((s.avg_seconds / 3600).toFixed(2)),
|
||||
}));
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">Cycle Time by Stage (avg, 30d)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<Skeleton className="h-52 w-full" />
|
||||
) : chartData.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground py-16 text-center">
|
||||
No completed transitions in the window yet.
|
||||
</p>
|
||||
) : (
|
||||
<ResponsiveContainer width="100%" height={208}>
|
||||
<BarChart data={chartData} margin={{ top: 4, right: 8, left: 0, bottom: 24 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" className="opacity-20" />
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
tick={{ fontSize: 10 }}
|
||||
angle={-30}
|
||||
textAnchor="end"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 10 }}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
width={36}
|
||||
tickFormatter={(v) => v + "h"}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value) => [value + "h", "Avg"]}
|
||||
contentStyle={{ fontSize: 12 }}
|
||||
/>
|
||||
<Bar dataKey="Hours" fill="var(--chart-1)" radius={[3, 3, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Bottlenecks ──────────────────────────────────────────────────────────────
|
||||
|
||||
function BottlenecksCard() {
|
||||
const { data, isLoading } = useBottlenecks(30);
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">Bottlenecks</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{isLoading ? (
|
||||
<Skeleton className="h-52 w-full" />
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="text-muted-foreground">Worst stage:</span>
|
||||
{data?.worst_stage ? (
|
||||
<Badge variant="destructive">{label(data.worst_stage)}</Badge>
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
)}
|
||||
<span className="ml-auto text-muted-foreground">
|
||||
{data?.active_blockers ?? 0} active blockers
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{(data?.by_stage ?? []).slice(0, 6).map((s) => (
|
||||
<div key={s.status} className="space-y-1">
|
||||
<div className="flex justify-between text-xs">
|
||||
<span>{label(s.status)}</span>
|
||||
<span className="text-muted-foreground">
|
||||
{fmtDuration(s.cumulative_seconds)} · {s.parked_now} parked
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 w-full rounded bg-muted">
|
||||
<div
|
||||
className="h-2 rounded bg-[var(--chart-2)]"
|
||||
style={{ width: `${Math.round(s.pct_of_total * 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{(data?.by_stage ?? []).length === 0 && (
|
||||
<p className="text-sm text-muted-foreground py-12 text-center">
|
||||
No stage data yet.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Rework ───────────────────────────────────────────────────────────────────
|
||||
|
||||
function ReworkCard() {
|
||||
const { data, isLoading } = useRework(30);
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">Rework (30d)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{isLoading ? (
|
||||
<Skeleton className="h-52 w-full" />
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-baseline gap-3">
|
||||
<span className="text-3xl font-bold">{pct(data?.rate ?? 0)}</span>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{data?.total_reworked ?? 0}/{data?.total_completed ?? 0} bounced ·
|
||||
${(data?.rework_cost_usd ?? 0).toFixed(2)} cost
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2 text-xs">
|
||||
{(data?.by_team ?? []).map((t) => (
|
||||
<Badge key={t.team} variant="secondary">
|
||||
{label(t.team)} {pct(t.rate)}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
{(data?.by_agent ?? []).length > 0 && (
|
||||
<table className="w-full text-xs">
|
||||
<thead className="text-muted-foreground">
|
||||
<tr className="text-left">
|
||||
<th className="py-1 font-medium">Agent</th>
|
||||
<th className="py-1 font-medium text-right">Rate</th>
|
||||
<th className="py-1 font-medium text-right">QA fails</th>
|
||||
<th className="py-1 font-medium text-right">PR fails</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(data?.by_agent ?? []).slice(0, 8).map((a) => (
|
||||
<tr key={a.agent_slug} className="border-t border-border/50">
|
||||
<td className="py-1">{a.agent_slug}</td>
|
||||
<td className="py-1 text-right">{pct(a.rate)}</td>
|
||||
<td className="py-1 text-right">{a.qa_fails}</td>
|
||||
<td className="py-1 text-right">{a.pr_fails}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Per-cell scorecards ────────────────────────────────────────────────────────
|
||||
|
||||
function CellScorecard({ team }: { team: string }) {
|
||||
const { data, isLoading } = useTeamScorecard(team, 7);
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">{label(team)} (7d)</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<Skeleton className="h-24 w-full" />
|
||||
) : (
|
||||
<ScorecardBody card={data} />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function ScorecardBody({ card }: { card: Scorecard | undefined }) {
|
||||
const stat = (k: string, v: string) => (
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">{k}</span>
|
||||
<span className="font-medium">{v}</span>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
{stat("Completed", String(card?.tasks_completed ?? 0))}
|
||||
{stat(
|
||||
"Avg cycle",
|
||||
card?.avg_cycle_hours != null ? card.avg_cycle_hours.toFixed(1) + "h" : "—",
|
||||
)}
|
||||
{stat("Rework", pct(card?.rework_rate ?? 0))}
|
||||
{stat("Cost", "$" + (card?.cost_usd ?? 0).toFixed(2))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Tab ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
export function DeliveryTabContent() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<CycleTimeCard />
|
||||
<BottlenecksCard />
|
||||
</div>
|
||||
<ReworkCard />
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{CELLS.map((team) => (
|
||||
<CellScorecard key={team} team={team} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -7,7 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { ArrowUp, Link2, AlertTriangle, Plus, Trash2, X, Check } from "lucide-react";
|
||||
import { ArrowUp, Link2, AlertTriangle, Plus, Trash2, X, Check, Hash, Pencil } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { toast } from "sonner";
|
||||
|
||||
@@ -264,6 +264,54 @@ export function TabDependencies({ task }: TabDependenciesProps) {
|
||||
}
|
||||
};
|
||||
|
||||
// Sequence editing (sibling order — lower runs first; mirrors dependency order)
|
||||
const [editingSequence, setEditingSequence] = useState(false);
|
||||
const [localSequenceValue, setLocalSequenceValue] = useState("");
|
||||
const sequenceInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const startEditingSequence = () => {
|
||||
setLocalSequenceValue(String(task.sequence ?? 0));
|
||||
setEditingSequence(true);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (editingSequence && sequenceInputRef.current) {
|
||||
sequenceInputRef.current.focus();
|
||||
sequenceInputRef.current.select();
|
||||
}
|
||||
}, [editingSequence]);
|
||||
|
||||
const handleSequenceSave = async () => {
|
||||
const parsed = parseInt(localSequenceValue, 10);
|
||||
if (Number.isNaN(parsed) || parsed < 0) {
|
||||
toast.error("Sequence must be a non-negative integer");
|
||||
setLocalSequenceValue(String(task.sequence ?? 0));
|
||||
return;
|
||||
}
|
||||
if (parsed === task.sequence) {
|
||||
setEditingSequence(false);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await updateTask.mutateAsync({
|
||||
taskId: task.id,
|
||||
updates: { sequence: parsed },
|
||||
});
|
||||
setEditingSequence(false);
|
||||
} catch {
|
||||
toast.error("Failed to update sequence");
|
||||
setLocalSequenceValue(String(task.sequence ?? 0));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSequenceKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === "Enter") {
|
||||
handleSequenceSave();
|
||||
} else if (e.key === "Escape") {
|
||||
setEditingSequence(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Dependencies (upstream - blocks this task) */}
|
||||
@@ -369,6 +417,76 @@ export function TabDependencies({ task }: TabDependenciesProps) {
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Sequence (sibling order) */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Hash className="h-5 w-5 text-amber-500" />
|
||||
Sequence
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{editingSequence ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Hash className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
<Input
|
||||
ref={sequenceInputRef}
|
||||
type="number"
|
||||
min={0}
|
||||
value={localSequenceValue}
|
||||
onChange={(e) => setLocalSequenceValue(e.target.value)}
|
||||
onKeyDown={handleSequenceKeyDown}
|
||||
placeholder="Order within siblings (lower runs first)"
|
||||
className="h-8 text-sm flex-1"
|
||||
disabled={updateTask.isPending}
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => setEditingSequence(false)}
|
||||
className="h-7 w-7 p-0"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleSequenceSave}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
disabled={updateTask.isPending}
|
||||
className="h-7 w-7 p-0"
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="flex items-center gap-2 p-3 rounded-lg border hover:bg-muted/50 transition-colors cursor-pointer group"
|
||||
onClick={startEditingSequence}
|
||||
title="Click to edit"
|
||||
>
|
||||
<Hash className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium text-sm">#{task.sequence ?? 0}</span>
|
||||
<span className="ml-2 text-xs text-muted-foreground">
|
||||
Order within siblings — lower runs first
|
||||
</span>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
startEditingSequence();
|
||||
}}
|
||||
className="ml-auto h-7 w-7 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
<Pencil className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { observabilityApi } from "@/lib/api/observability";
|
||||
import type {
|
||||
StageTiming,
|
||||
BottleneckReport,
|
||||
ReworkReport,
|
||||
Scorecard,
|
||||
} from "@/types";
|
||||
|
||||
// =============================================================================
|
||||
// QUERY KEYS
|
||||
// =============================================================================
|
||||
|
||||
export const observabilityKeys = {
|
||||
all: ["observability"] as const,
|
||||
cycleTime: (days: number, team?: string) =>
|
||||
[...observabilityKeys.all, "cycle-time", days, team ?? "all"] as const,
|
||||
bottlenecks: (days: number) =>
|
||||
[...observabilityKeys.all, "bottlenecks", days] as const,
|
||||
rework: (days: number, team?: string) =>
|
||||
[...observabilityKeys.all, "rework", days, team ?? "all"] as const,
|
||||
teamScorecard: (team: string, days: number) =>
|
||||
[...observabilityKeys.all, "scorecard", "team", team, days] as const,
|
||||
};
|
||||
|
||||
// =============================================================================
|
||||
// HOOKS
|
||||
// =============================================================================
|
||||
|
||||
/** Per-stage cycle time (dwell per lifecycle status). */
|
||||
export function useCycleTime(days = 30, team?: string) {
|
||||
return useQuery<StageTiming[]>({
|
||||
queryKey: observabilityKeys.cycleTime(days, team),
|
||||
queryFn: () => observabilityApi.getCycleTime(days, team),
|
||||
refetchInterval: 60_000,
|
||||
});
|
||||
}
|
||||
|
||||
/** Bottleneck distribution: cumulative dwell + live parked counts. */
|
||||
export function useBottlenecks(days = 30) {
|
||||
return useQuery<BottleneckReport>({
|
||||
queryKey: observabilityKeys.bottlenecks(days),
|
||||
queryFn: () => observabilityApi.getBottlenecks(days),
|
||||
refetchInterval: 60_000,
|
||||
});
|
||||
}
|
||||
|
||||
/** Rework rate overall, by team, and by agent + cost. */
|
||||
export function useRework(days = 30, team?: string) {
|
||||
return useQuery<ReworkReport>({
|
||||
queryKey: observabilityKeys.rework(days, team),
|
||||
queryFn: () => observabilityApi.getRework(days, team),
|
||||
refetchInterval: 60_000,
|
||||
});
|
||||
}
|
||||
|
||||
/** Per-cell delivery scorecard. */
|
||||
export function useTeamScorecard(team: string, days = 7) {
|
||||
return useQuery<Scorecard>({
|
||||
queryKey: observabilityKeys.teamScorecard(team, days),
|
||||
queryFn: () => observabilityApi.getTeamScorecard(team, days),
|
||||
refetchInterval: 60_000,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import api from "./client";
|
||||
import { isMockMode } from "@/lib/mock-data";
|
||||
import type {
|
||||
StageTiming,
|
||||
BottleneckReport,
|
||||
ReworkReport,
|
||||
Scorecard,
|
||||
} from "@/types";
|
||||
|
||||
// =============================================================================
|
||||
// MOCK FALLBACKS (demo / no-backend mode)
|
||||
// =============================================================================
|
||||
|
||||
const EMPTY_BOTTLENECK: BottleneckReport = {
|
||||
by_stage: [],
|
||||
worst_stage: null,
|
||||
active_blockers: 0,
|
||||
};
|
||||
|
||||
const EMPTY_REWORK: ReworkReport = {
|
||||
rate: 0,
|
||||
total_completed: 0,
|
||||
total_reworked: 0,
|
||||
by_team: [],
|
||||
by_agent: [],
|
||||
rework_cost_usd: 0,
|
||||
};
|
||||
|
||||
function emptyScorecard(scope: string, id: string): Scorecard {
|
||||
return {
|
||||
scope,
|
||||
id,
|
||||
name: id,
|
||||
tasks_completed: 0,
|
||||
avg_cycle_hours: null,
|
||||
rework_rate: 0,
|
||||
tokens: 0,
|
||||
cost_usd: 0,
|
||||
};
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// API OBJECT
|
||||
// =============================================================================
|
||||
|
||||
export const observabilityApi = {
|
||||
/** Per-stage cycle time — GET /dashboard/metrics/cycle-time?days&team */
|
||||
getCycleTime: async (days = 30, team?: string): Promise<StageTiming[]> => {
|
||||
if (isMockMode()) return [];
|
||||
const { data } = await api.get<StageTiming[]>("/dashboard/metrics/cycle-time", {
|
||||
params: { days, ...(team ? { team } : {}) },
|
||||
});
|
||||
return data;
|
||||
},
|
||||
|
||||
/** Bottleneck distribution — GET /dashboard/metrics/bottlenecks?days */
|
||||
getBottlenecks: async (days = 30): Promise<BottleneckReport> => {
|
||||
if (isMockMode()) return EMPTY_BOTTLENECK;
|
||||
const { data } = await api.get<BottleneckReport>(
|
||||
"/dashboard/metrics/bottlenecks",
|
||||
{ params: { days } },
|
||||
);
|
||||
return data;
|
||||
},
|
||||
|
||||
/** Rework rate + attribution — GET /dashboard/metrics/rework?days&team */
|
||||
getRework: async (days = 30, team?: string): Promise<ReworkReport> => {
|
||||
if (isMockMode()) return EMPTY_REWORK;
|
||||
const { data } = await api.get<ReworkReport>("/dashboard/metrics/rework", {
|
||||
params: { days, ...(team ? { team } : {}) },
|
||||
});
|
||||
return data;
|
||||
},
|
||||
|
||||
/** Per-cell scorecard — GET /dashboard/metrics/scorecard/team/{team}?days */
|
||||
getTeamScorecard: async (team: string, days = 7): Promise<Scorecard> => {
|
||||
if (isMockMode()) return emptyScorecard("cell", team);
|
||||
const { data } = await api.get<Scorecard>(
|
||||
`/dashboard/metrics/scorecard/team/${team}`,
|
||||
{ params: { days } },
|
||||
);
|
||||
return data;
|
||||
},
|
||||
};
|
||||
@@ -1361,3 +1361,60 @@ export interface UsageSession {
|
||||
cost: number;
|
||||
model: string;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Observability (0.10.0): cycle-time, bottlenecks, rework, scorecard
|
||||
// =============================================================================
|
||||
|
||||
export interface StageTiming {
|
||||
status: string;
|
||||
avg_seconds: number;
|
||||
median_seconds: number;
|
||||
p90_seconds: number;
|
||||
sample_size: number;
|
||||
}
|
||||
|
||||
export interface StageBottleneck {
|
||||
status: string;
|
||||
cumulative_seconds: number;
|
||||
parked_now: number;
|
||||
pct_of_total: number;
|
||||
}
|
||||
|
||||
export interface BottleneckReport {
|
||||
by_stage: StageBottleneck[];
|
||||
worst_stage: string | null;
|
||||
active_blockers: number;
|
||||
}
|
||||
|
||||
export interface AgentReworkRate {
|
||||
agent_slug: string;
|
||||
rate: number;
|
||||
qa_fails: number;
|
||||
pr_fails: number;
|
||||
}
|
||||
|
||||
export interface TeamReworkRate {
|
||||
team: string;
|
||||
rate: number;
|
||||
}
|
||||
|
||||
export interface ReworkReport {
|
||||
rate: number;
|
||||
total_completed: number;
|
||||
total_reworked: number;
|
||||
by_team: TeamReworkRate[];
|
||||
by_agent: AgentReworkRate[];
|
||||
rework_cost_usd: number;
|
||||
}
|
||||
|
||||
export interface Scorecard {
|
||||
scope: string;
|
||||
id: string;
|
||||
name: string;
|
||||
tasks_completed: number;
|
||||
avg_cycle_hours: number | null;
|
||||
rework_rate: number;
|
||||
tokens: number;
|
||||
cost_usd: number;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user