+ {tab === "today" &&
}
{tab === "approvals" &&
}
{tab === "inbox" &&
}
{tab === "board" &&
}
diff --git a/panel/src/components/tg/__tests__/tg-today-tab.test.tsx b/panel/src/components/tg/__tests__/tg-today-tab.test.tsx
new file mode 100644
index 00000000..9ad1a10d
--- /dev/null
+++ b/panel/src/components/tg/__tests__/tg-today-tab.test.tsx
@@ -0,0 +1,114 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { TgTodayTab } from "../tg-today-tab";
+
+const { get } = vi.hoisted(() => ({ get: vi.fn() }));
+vi.mock("@/lib/api/client", () => ({ default: { get } }));
+
+function renderTab(onNavigate = vi.fn()) {
+ const client = new QueryClient({
+ defaultOptions: { queries: { retry: false } },
+ });
+ render(
+
+
+ ,
+ );
+ return onNavigate;
+}
+
+function brief(overrides: Record
= {}) {
+ return {
+ needs_you: {
+ total: 0,
+ awaiting_ceo_count: 0,
+ awaiting_ceo: [],
+ blocked_count: 0,
+ blocked: [],
+ held_drafts: {
+ release_proposals: 0,
+ x_posts: 0,
+ video_posts: 0,
+ roadmap_items: 0,
+ },
+ },
+ fleet: { total: 3, by_status: { active: 3 }, working: [] },
+ spend: { tokens_today: 1_234_000, cost_today_usd: 12.34 },
+ ship: { version: "0.25.0", open_release_proposal: false, ci_fix_tasks: 0 },
+ ...overrides,
+ };
+}
+
+describe("TgTodayTab", () => {
+ // Block body on purpose: returning the mock from beforeEach would make
+ // vitest call it as an after-test teardown hook.
+ beforeEach(() => {
+ get.mockReset();
+ });
+
+ it("shows skeletons while loading", () => {
+ get.mockReturnValue(new Promise(() => {}));
+ renderTab();
+ expect(document.querySelectorAll("[data-slot=skeleton]").length).toBeGreaterThan(
+ 0,
+ );
+ });
+
+ it("renders the all-clear state and the spend/ship numbers", async () => {
+ get.mockResolvedValue({ data: brief() });
+ renderTab();
+
+ expect(await screen.findByText(/all clear/i)).toBeInTheDocument();
+ expect(screen.getByText("$12.34")).toBeInTheDocument();
+ expect(screen.getByText(/1\.2M tokens/)).toBeInTheDocument();
+ expect(screen.getByText("v0.25.0")).toBeInTheDocument();
+ expect(screen.getByText(/no release pending/i)).toBeInTheDocument();
+ expect(screen.getByText("3 agents")).toBeInTheDocument();
+ });
+
+ it("renders needs-you items and deep-links taps into the right tab", async () => {
+ get.mockResolvedValue({
+ data: brief({
+ needs_you: {
+ total: 3,
+ awaiting_ceo_count: 1,
+ awaiting_ceo: [
+ {
+ id: "t1",
+ title: "Root PR ready",
+ status: "awaiting_ceo_approval",
+ team: "backend",
+ updated_at: null,
+ },
+ ],
+ blocked_count: 0,
+ blocked: [],
+ held_drafts: {
+ release_proposals: 1,
+ x_posts: 1,
+ video_posts: 0,
+ roadmap_items: 0,
+ },
+ },
+ }),
+ });
+ const onNavigate = vi.fn();
+ renderTab(onNavigate);
+
+ await userEvent.click(await screen.findByText(/Release · 1/));
+ expect(onNavigate).toHaveBeenCalledWith("approvals");
+
+ await userEvent.click(screen.getByText("Root PR ready"));
+ expect(onNavigate).toHaveBeenCalledWith("board");
+ });
+
+ it("shows an error state when the brief fails to load", async () => {
+ get.mockRejectedValue(new Error("boom"));
+ renderTab();
+ await waitFor(() =>
+ expect(screen.getByText(/couldn.t load/i)).toBeInTheDocument(),
+ );
+ });
+});
diff --git a/panel/src/components/tg/tg-tab-bar.tsx b/panel/src/components/tg/tg-tab-bar.tsx
index 0e407181..51f8991b 100644
--- a/panel/src/components/tg/tg-tab-bar.tsx
+++ b/panel/src/components/tg/tg-tab-bar.tsx
@@ -1,15 +1,16 @@
"use client";
-import { CheckSquare, Bell, Kanban, MessageSquare } from "lucide-react";
+import { Gauge, CheckSquare, Bell, Kanban, MessageSquare } from "lucide-react";
import { cn } from "@/lib/utils";
-export type TgTab = "approvals" | "inbox" | "board" | "chat";
+export type TgTab = "today" | "approvals" | "inbox" | "board" | "chat";
const TABS: ReadonlyArray<{
id: TgTab;
label: string;
icon: typeof CheckSquare;
}> = [
+ { id: "today", label: "Today", icon: Gauge },
{ id: "approvals", label: "Approvals", icon: CheckSquare },
{ id: "inbox", label: "Inbox", icon: Bell },
{ id: "board", label: "Board", icon: Kanban },
diff --git a/panel/src/components/tg/tg-today-tab.tsx b/panel/src/components/tg/tg-today-tab.tsx
new file mode 100644
index 00000000..a8fab056
--- /dev/null
+++ b/panel/src/components/tg/tg-today-tab.tsx
@@ -0,0 +1,246 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import api from "@/lib/api/client";
+import { haptics } from "@/lib/telegram/webapp";
+import type { TgTab } from "@/components/tg/tg-tab-bar";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+ AlertTriangle,
+ CheckCircle2,
+ ChevronRight,
+ CircleDollarSign,
+ Rocket,
+ Users,
+} from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+
+interface TodayTaskItem {
+ id: string;
+ title: string;
+ status: string;
+ team: string | null;
+ updated_at: string | null;
+}
+
+interface TodayBrief {
+ needs_you: {
+ total: number;
+ awaiting_ceo_count: number;
+ awaiting_ceo: TodayTaskItem[];
+ blocked_count: number;
+ blocked: TodayTaskItem[];
+ held_drafts: Record;
+ };
+ fleet: {
+ total: number;
+ by_status: Record;
+ working: Array<{
+ name: string;
+ role: string;
+ team: string | null;
+ task_title: string | null;
+ }>;
+ };
+ spend: { tokens_today: number; cost_today_usd: number };
+ ship: {
+ version: string;
+ open_release_proposal: boolean;
+ ci_fix_tasks: number;
+ };
+}
+
+const REFETCH_MS = 45_000;
+
+const DRAFT_LABELS: Record = {
+ release_proposals: "Release",
+ x_posts: "X posts",
+ video_posts: "Videos",
+ roadmap_items: "Roadmap",
+};
+
+const compactNumber = new Intl.NumberFormat("en", {
+ notation: "compact",
+ maximumFractionDigits: 1,
+});
+
+function SectionCard({
+ icon: Icon,
+ title,
+ children,
+}: {
+ icon: typeof Users;
+ title: string;
+ children: React.ReactNode;
+}) {
+ return (
+
+
+
+ {title}
+
+ {children}
+
+ );
+}
+
+function TaskRow({
+ task,
+ onOpen,
+}: {
+ task: TodayTaskItem;
+ onOpen: () => void;
+}) {
+ return (
+
+ );
+}
+
+/**
+ * The cockpit's home screen: one glance answering "does anything need me?"
+ * — capped needs-you items, held-draft counts, fleet, today's spend, and
+ * ship state, off the single aggregated `/telegram/today` round trip.
+ * Row taps deep-link into the tab that acts on the item.
+ */
+export function TgTodayTab({
+ onNavigate,
+}: {
+ onNavigate: (tab: TgTab) => void;
+}) {
+ const { data, isLoading, isError } = useQuery({
+ queryKey: ["tg-today"],
+ queryFn: async () => (await api.get("/telegram/today")).data,
+ refetchInterval: REFETCH_MS,
+ });
+
+ if (isLoading) {
+ return (
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+ ))}
+
+ );
+ }
+
+ if (isError || !data) {
+ return (
+
+
+
Couldn't load the brief
+
+
+ {needs.total === 0 ? (
+
+ All clear — nothing is waiting on you.
+
+ ) : (
+
+ {heldEntries.length > 0 && (
+
+ {heldEntries.map(([key, count]) => (
+
+ ))}
+
+ )}
+ {needs.awaiting_ceo.map((t) => (
+
go("board")} />
+ ))}
+ {needs.blocked_count > 0 && (
+
+ {needs.blocked_count} blocked
+
+ )}
+ {needs.blocked.map((t) => (
+ go("board")} />
+ ))}
+
+
+
+
+ {fleet.total} agents
+ {Object.entries(fleet.by_status).map(([status, count]) => (
+
+ {count} {status}
+
+ ))}
+
+ {fleet.working.length === 0 ? (
+ No one is mid-task.
+ ) : (
+
+ {fleet.working.map((agent) => (
+ -
+ {agent.name}
+ {agent.task_title && (
+
+ {" "}
+ — {agent.task_title}
+
+ )}
+
+ ))}
+
+ )}
+
+
+
+
+
+ ${spend.cost_today_usd.toFixed(2)}
+
+
+ {compactNumber.format(spend.tokens_today)} tokens
+
+
+
+ v{ship.version}
+
+ {ship.open_release_proposal
+ ? "Release proposal waiting"
+ : ship.ci_fix_tasks > 0
+ ? `${ship.ci_fix_tasks} CI fix open`
+ : "No release pending"}
+
+
+
+