Intelligence
Artifacts
Browse the repository, read documents, and manage the governance folders. Source, runtime, and infrastructure are read-only.
Repository
repositories/aaf-holdings/hq01/app/page.tsx
15.3 KB
import Link from "next/link";
import {
Rocket, HardHat, AlertTriangle, Users, FileText, Box, Activity,
ShieldAlert, Link2, Gauge, CircleDot, ArrowRight,
} from "lucide-react";
import { Card } from "@/components/ui/card";
import { MissionStatusBadge } from "@/components/missions/mission-status-badge";
import { PriorityBadge } from "@/components/shared/status-badge";
import { Clock } from "@/components/mission-control/clock";
import { AutoRefresh } from "@/components/sessions/auto-refresh";
import { getMissionControl } from "@/lib/mission-control/overview";
export const dynamic = "force-dynamic";
/**
* HQ01 — Mission Control. The operational headquarters of AAF Holdings. Every
* element descends from missions; this surface is a read-only composition of the
* Mission OS (PASS M8).
*/
export default function HQ01() {
const mc = getMissionControl();
return (
<div className="space-y-8">
<AutoRefresh intervalMs={10000} />
{/* HEADER */}
<div className="flex flex-col gap-4 border-b border-border pb-6 sm:flex-row sm:items-end sm:justify-between">
<div>
<div className="text-[11px] font-semibold uppercase tracking-[0.14em] text-accent">
AAF Holdings · HQ01
</div>
<h1 className="mt-1 text-2xl font-semibold tracking-tight">Mission Control</h1>
<div className="mt-1 text-[13px] text-muted-foreground">
<Clock />
</div>
</div>
<div className="flex gap-3">
<Stat icon={Rocket} label="Open Missions" value={mc.header.openMissions} href="/mission-control" />
<Stat icon={HardHat} label="Running Workers" value={mc.header.runningWorkers} />
<Stat icon={Activity} label="Active Sessions" value={mc.header.activeSessions} href="/sessions" />
</div>
</div>
{/* SECTION 1 — MISSION PORTFOLIO */}
<Section title="Mission Portfolio" icon={Rocket} href="/mission-control">
{mc.portfolio.length === 0 ? (
<Empty>No missions yet. Create one in Mission Control.</Empty>
) : (
<div className="divide-y divide-border">
{mc.portfolio.map((p) => (
<Link
key={p.mission.id}
href={`/mission-control/${p.mission.id}`}
className="group flex flex-wrap items-center gap-3 py-3 transition-colors hover:bg-secondary/40"
>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="font-mono text-[11px] text-muted-foreground">
{p.mission.id.replace("MISSION-", "M-")}
</span>
<span className="truncate text-[14px] font-medium text-foreground">
{p.mission.title}
</span>
</div>
<div className="mt-0.5 flex flex-wrap items-center gap-x-3 text-[12px] text-muted-foreground">
<span className="font-mono">{p.mission.executive_owner ?? "—"}</span>
<span>· {p.progress.completed}/{p.progress.total} obj ({p.progress.percentage}%)</span>
{p.workerCount > 0 && <span className="text-emerald-700">· {p.workerCount} running</span>}
{p.openRisks > 0 && <span className="text-amber-700">· {p.openRisks} risks</span>}
{p.blockReasons > 0 && <span className="text-red-700">· blockable</span>}
{p.recentActivity && <span className="truncate">· {p.recentActivity}</span>}
</div>
</div>
<PriorityBadge priority={p.mission.priority} />
<MissionStatusBadge status={p.mission.status} />
<ArrowRight className="h-4 w-4 text-muted-foreground/40 transition-colors group-hover:text-foreground" />
</Link>
))}
</div>
)}
</Section>
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
{/* SECTION 2 — EXECUTION */}
<Section title="Execution" icon={HardHat}>
<SubHead>Running workers</SubHead>
{mc.execution.running.length === 0 ? (
<Empty>No workers running.</Empty>
) : (
<ul className="divide-y divide-border">
{mc.execution.running.map((w) => (
<WorkerLine key={w.instance.id} w={w} accent />
))}
</ul>
)}
{mc.execution.recentCompleted.length > 0 && (
<>
<SubHead className="mt-4">Recently completed</SubHead>
<ul className="divide-y divide-border">
{mc.execution.recentCompleted.map((w) => <WorkerLine key={w.instance.id} w={w} />)}
</ul>
</>
)}
{mc.execution.failed.length > 0 && (
<>
<SubHead className="mt-4 text-red-700">Failed</SubHead>
<ul className="divide-y divide-border">
{mc.execution.failed.map((w) => <WorkerLine key={w.instance.id} w={w} />)}
</ul>
</>
)}
</Section>
{/* SECTION 3 — ATTENTION REQUIRED */}
<Section title="Attention Required" icon={AlertTriangle}>
<AttnGroup label="Blocked missions" icon={CircleDot}>
{mc.attention.blockedMissions.map((m) => (
<AttnItem key={m.id} href={`/mission-control/${m.id}`}>{m.title}</AttnItem>
))}
</AttnGroup>
<AttnGroup label="Critical risks" icon={ShieldAlert}>
{mc.attention.criticalRisks.map((r, i) => (
<AttnItem key={i} href={`/mission-control/${r.missionId}`}>{r.title}</AttnItem>
))}
</AttnGroup>
<AttnGroup label="Active blocking dependencies" icon={Link2}>
{mc.attention.activeBlockingDeps.map((d, i) => (
<AttnItem key={i} href={`/mission-control/${d.missionId}`}>{d.detail}</AttnItem>
))}
</AttnGroup>
<AttnGroup label="Off-track KPIs" icon={Gauge}>
{mc.attention.offTrackKpis.map((k, i) => (
<AttnItem key={i} href={`/mission-control/${k.missionId}`}>{k.name}</AttnItem>
))}
</AttnGroup>
<AttnGroup label="Review required" icon={FileText}>
{mc.attention.reviewRequired.map((m) => (
<AttnItem key={m.id} href={`/mission-control/${m.id}`}>{m.title}</AttnItem>
))}
</AttnGroup>
{mc.attention.blockedMissions.length + mc.attention.criticalRisks.length +
mc.attention.activeBlockingDeps.length + mc.attention.offTrackKpis.length +
mc.attention.reviewRequired.length === 0 && <Empty>Nothing needs attention.</Empty>}
</Section>
</div>
{/* SECTION 4 — EXECUTIVE ACTIVITY */}
<Section title="Executive Activity" icon={Users}>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
{mc.executives.map((e) => (
<div key={e.id} className="rounded-md border border-border p-3">
<div className="flex items-center justify-between gap-2">
<div className="min-w-0">
<div className="truncate text-[13px] font-medium">{e.displayName}</div>
<div className="truncate font-mono text-[11px] text-muted-foreground">{e.id}</div>
</div>
<span className={
e.status === "active"
? "rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-medium text-emerald-700"
: "rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-500"
}>{e.status}</span>
</div>
<div className="mt-2 flex items-center gap-3 text-[11px] text-muted-foreground">
<span>{e.missionCount} missions</span>
<span>{e.workerCount} running</span>
</div>
<div className="mt-1 text-[11px] text-muted-foreground">
{e.lastActivity ? `last report ${new Date(e.lastActivity).toLocaleDateString()}` : "no reports yet"}
</div>
<Link href="/mission-control" className="mt-2 inline-flex items-center gap-1 text-[12px] font-medium text-accent hover:underline">
Dispatch via Mission <ArrowRight className="h-3 w-3" />
</Link>
</div>
))}
</div>
</Section>
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
{/* SECTION 5 — RECENT REPORTS */}
<Section title="Recent Reports" icon={FileText}>
{mc.recentReports.length === 0 ? (
<Empty>No reports yet.</Empty>
) : (
<ul className="divide-y divide-border">
{mc.recentReports.map((r) => (
<li key={`${r.assignment_id}/${r.report_id}`} className="py-2.5">
<Link
href={`/mission-control/${r.mission_id}/assignments/${r.assignment_id}/reports/${r.report_id}`}
className="block hover:underline"
>
<div className="truncate text-[13px] font-medium text-foreground">
{r.summary ? r.summary.split("\n")[0] : r.report_id}
</div>
</Link>
<div className="mt-0.5 flex flex-wrap items-center gap-x-2 font-mono text-[11px] text-muted-foreground">
<span>{r.mission_id.replace("MISSION-", "M-")}</span>
{r.worker_template_id && <span>· {r.worker_template_id}</span>}
{r.doctrine_candidates.length > 0 && <span className="text-amber-700">· doctrine</span>}
{r.artifacts_produced.length > 0 && <span>· {r.artifacts_produced.length} artifacts</span>}
</div>
</li>
))}
</ul>
)}
</Section>
{/* SECTION 6 — RECENT ASSETS */}
<Section title="Recent Assets" icon={Box} href="/assets">
{mc.recentAssets.length === 0 ? (
<Empty>No assets registered yet.</Empty>
) : (
<ul className="divide-y divide-border">
{mc.recentAssets.map((a) => (
<li key={a.asset_id} className="py-2.5">
<Link href={`/assets/${a.asset_id}`} className="block hover:underline">
<div className="flex items-center gap-2 text-[13px]">
<span className="truncate font-medium text-foreground">{a.name}</span>
<span className="rounded-full bg-secondary px-2 py-0.5 text-[10px] font-medium text-foreground/70">{a.type}</span>
</div>
</Link>
<div className="mt-0.5 font-mono text-[11px] text-muted-foreground">
{a.mission_id.replace("MISSION-", "M-")} · {a.repository} · {a.created_by_executive}
</div>
</li>
))}
</ul>
)}
</Section>
</div>
{/* SECTION 7 — MISSION HEALTH */}
<Section title="Mission Health" icon={Gauge}>
<div className="flex flex-wrap gap-3">
{["Draft", "Planning", "Active", "Blocked", "Review", "Completed", "Archived"].map((s) => (
<HealthStat key={s} label={s} value={mc.health.byState[s] ?? 0} />
))}
<HealthStat label="Objectives %" value={`${mc.health.objectivesCompletePct}%`} />
<HealthStat label="Open Work Orders" value={mc.health.openWorkOrders} />
<HealthStat label="Assignments" value={mc.health.assignments} />
<HealthStat label="Worker Instances" value={mc.health.workerInstances} />
</div>
</Section>
</div>
);
}
function Stat({ icon: Icon, label, value, href }: { icon: typeof Rocket; label: string; value: number; href?: string }) {
const body = (
<Card className="px-4 py-3">
<div className="flex items-center gap-2 text-[11px] text-muted-foreground"><Icon className="h-3.5 w-3.5" />{label}</div>
<div className="mt-1 text-2xl font-semibold tabular-nums">{value}</div>
</Card>
);
return href ? <Link href={href}>{body}</Link> : body;
}
function Section({ title, icon: Icon, href, children }: { title: string; icon: typeof Rocket; href?: string; children: React.ReactNode }) {
return (
<section>
<div className="mb-3 flex items-center justify-between">
<h2 className="flex items-center gap-2 text-sm font-semibold tracking-tight">
<Icon className="h-4 w-4 text-muted-foreground" /> {title}
</h2>
{href && (
<Link href={href} className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground hover:text-foreground">
View all <ArrowRight className="h-3 w-3" />
</Link>
)}
</div>
<Card className="p-5">{children}</Card>
</section>
);
}
function SubHead({ children, className }: { children: React.ReactNode; className?: string }) {
return <div className={`mb-1 text-[10px] font-semibold uppercase tracking-[0.1em] text-muted-foreground ${className ?? ""}`}>{children}</div>;
}
function Empty({ children }: { children: React.ReactNode }) {
return <p className="text-sm text-muted-foreground">{children}</p>;
}
function WorkerLine({ w, accent }: { w: { instance: { id: string; status: string; session_id: string | null; mission_id: string }; templateName: string; missionTitle: string; runtime: string; reportStatus: string }; accent?: boolean }) {
return (
<li className="flex flex-wrap items-center gap-2 py-2 text-[12px]">
{accent && <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500" />}
<span className="font-mono text-[11px] text-muted-foreground">{w.instance.id.replace("WORKER-", "W-")}</span>
<span className="font-medium text-foreground">{w.templateName}</span>
<Link href={`/mission-control/${w.instance.mission_id}`} className="truncate text-muted-foreground hover:underline">{w.missionTitle}</Link>
<span className="ml-auto text-muted-foreground">{w.runtime}</span>
<span className="text-muted-foreground">· {w.reportStatus}</span>
</li>
);
}
function AttnGroup({ label, icon: Icon, children }: { label: string; icon: typeof Rocket; children: React.ReactNode }) {
const items = Array.isArray(children) ? children : [children];
if (items.filter(Boolean).length === 0) return null;
return (
<div className="mb-3 last:mb-0">
<div className="mb-1 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground"><Icon className="h-3 w-3" />{label}</div>
<ul className="space-y-0.5">{children}</ul>
</div>
);
}
function AttnItem({ href, children }: { href: string; children: React.ReactNode }) {
return (
<li>
<Link href={href} className="flex items-center gap-1 text-[13px] text-foreground hover:underline">
<ArrowRight className="h-3 w-3 text-muted-foreground/50" /> {children}
</Link>
</li>
);
}
function HealthStat({ label, value }: { label: string; value: number | string }) {
return (
<div className="rounded-md border border-border px-3 py-2 text-center">
<div className="text-lg font-semibold tabular-nums">{value}</div>
<div className="text-[10px] uppercase tracking-[0.08em] text-muted-foreground">{label}</div>
</div>
);
}
root · /srv/aaf