setOpen(o => !o)}>
{label}:
{cur ? cur[1] : value}
{open && (
<>
setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 30 }}/>
{options.map(([v, l]) => (
{ setValue(v); setOpen(false); }}
style={{
display: "block", width: "100%", textAlign: "left",
padding: "7px 10px", fontSize: 12.5,
background: v === value ? "var(--tan-1)" : "transparent",
color: "var(--ink)", border: "none", borderRadius: 5,
cursor: "pointer", fontFamily: "inherit",
}}
onMouseEnter={e => { if (v !== value) e.currentTarget.style.background = "var(--cream-3)"; }}
onMouseLeave={e => { if (v !== value) e.currentTarget.style.background = "transparent"; }}>
{l}
))}
)}
);
}
// ---------- Connections page ----------
function ConnectionsPage({ onOpenApp, onOpenService, onOpenContract, initialTab, tpPosture, setTpPosture, policyFor, setPolicy }) {
const [tab, setTab] = useState(initialTab || "third-party"); // third-party | data
React.useEffect(() => { if (initialTab) setTab(initialTab); }, [initialTab]);
const [tpMode, setTpMode] = useState("graph"); // graph | all | api | llm
const [dataMode, setDataMode] = useState("graph"); // graph | schemas | unmapped
const [filter, setFilter] = useState("all"); // all / shared / non-det
const schemas = DATA.SCHEMAS;
const services = DATA.SERVICES;
const sharedSchemas = DATA.SHARED_RESOURCES.schemas();
const noContract = sharedSchemas.filter(s => s.contract !== "typed").length;
const sharedKeyCount = services.filter(s => s.sharedKey && s.apps.length > 1).length;
const llmCount = services.filter(s => s.kind === "LLM").length;
const apiCount = services.filter(s => s.kind !== "LLM").length;
const newCount = services.filter(s => (s.firstSeen ?? 9999) <= 30).length;
// Schemas that show up in app.connections but not in the SCHEMAS table => "unmapped".
const knownSchemaNames = new Set(schemas.map(s => s.name));
const unmappedMap = {};
DATA.APPS.forEach(a => (a.connections || []).forEach(c => {
if (c.type === "db" && !knownSchemaNames.has(c.name)) {
if (!unmappedMap[c.name]) unmappedMap[c.name] = { name: c.name, apps: [], det: c.det };
if (!unmappedMap[c.name].apps.includes(a.name)) unmappedMap[c.name].apps.push(a.name);
}
}));
const unmapped = Object.values(unmappedMap);
return (
Connections · {tab === "third-party" ? "Third party services" : "Data sources"}
What connects to what.
{tab === "third-party"
? "Every external API and LLM the fleet talks to. Set the default outbound posture, and override per-domain in the table below."
: "Every table, warehouse, and bucket the fleet reads. Codify a contract on shared schemas so changes go through a single reviewable diff."}
Filter Export
{/* (sidebar handles tab switching now) */}
{tab === "third-party" && (
<>
{/* Shared third-party summary */}
Third-party services
External APIs and LLMs every app talks to. {sharedKeyCount > 0 && <>{sharedKeyCount} services share an API key across multiple apps, the biggest blast-radius risk on this page.}
{/* Default outbound posture */}
Default outbound posture
{tpPosture === "default-deny"
? "Apps can only call services on the allowlist."
: "Apps can call any service unless explicitly blocked."}
setTpPosture("default-deny")}
style={{
padding: "6px 12px", fontSize: 12, fontWeight: 500,
border: "none", borderRadius: 6, cursor: "pointer",
background: tpPosture === "default-deny" ? "var(--ink-2)" : "transparent",
color: tpPosture === "default-deny" ? "#fff" : "var(--muted)",
}}>
Default-deny
setTpPosture("default-allow")}
style={{
padding: "6px 12px", fontSize: 12, fontWeight: 500,
border: "none", borderRadius: 6, cursor: "pointer",
background: tpPosture === "default-allow" ? "var(--ink-2)" : "transparent",
color: tpPosture === "default-allow" ? "#fff" : "var(--muted)",
}}>
Default-allow
{newCount > 0 && (
{newCount} first seen in last 30d
)}
0 ? "warn" : "ok"}/>
{tpMode === "graph" &&
}
{tpMode !== "graph" && (
Service Kind Used by Behavior Key Policy Cost / mo
{services
.filter(s => tpMode === "all" || (tpMode === "llm" ? s.kind === "LLM" : s.kind !== "LLM"))
.slice()
.sort((a, b) => {
// new (≤30d) first, then blocked, then everyone else
const order = (s) => {
if ((s.firstSeen ?? 9999) <= 30) return 0;
if (policyFor(s.name) === "blocked") return 1;
return 2;
};
return order(a) - order(b);
})
.map((s, i) => {
const policy = policyFor(s.name);
const isNew = (s.firstSeen ?? 9999) <= 30;
return (
onOpenService && onOpenService(s)}>
{s.kind === "LLM" ? : }
{s.name}
{isNew &&
first seen {s.firstSeen}d ago }
{s.sharedKey && s.apps.length > 1 &&
shared key }
{s.kind}
{s.apps.length === 0
? —
: (
{s.apps.slice(0, 2).map((a, j) =>
{a} )}
{s.apps.length > 2 &&
+{s.apps.length - 2} }
{s.det ? deterministic : non-det }
{!s.sharedKey
? per-app
: shared · {s.apps.length} apps }
e.stopPropagation()}>
setPolicy(s.name, v)}/>
{currency(s.cost)}
);
})}
)}
)}
{tab === "data" && (
<>
{/* Shared data summary */}
Schemas + data
Tables and warehouses the fleet reads. A codified contract on shared schemas means a change goes through a single reviewable diff, apps can't break silently.
{noContract > 0 && <> {noContract} shared schema{noContract > 1 ? "s" : ""} still missing a typed contract. }
0 ? "warn" : "ok"}/>
{dataMode === "graph" &&
}
{dataMode === "schemas" && (
Schema Kind Used by Reads / mo Contract Health
{schemas.map(s => (
onOpenContract && onOpenContract(s)}>
{s.name}
{s.kind}
{s.apps.slice(0, 2).map((a, i) =>
{a} )}
{s.apps.length > 2 &&
+{s.apps.length - 2} }
{(s.reads/1000).toFixed(1)}k
{s.contract === "typed" && typed }
{s.contract === "partial" && partial }
{s.contract === "none" && none }
{s.health === "ok" && stable }
{s.health === "warn" && drift }
{s.health === "risk" && exposed }
))}
)}
{dataMode === "unmapped" && (
{unmapped.length === 0 ? (
Every schema referenced by an app is registered. Nothing to map.
) : (
Schema Used by Status
{unmapped.map(u => (
{u.name}
{u.apps.slice(0, 3).map((a, i) =>
{a} )}
{u.apps.length > 3 &&
+{u.apps.length - 3} }
unmapped Register
))}
)}
)}
)}
);
}
// Compact stat for the summary cards.
function Stat({ label, value, kind }) {
const color = kind === "warn" ? "var(--red)" : kind === "ok" ? "var(--ink)" : "var(--ink)";
return (
);
}
// Policy cell — renders state and (in pending) inline allow/block actions.
// Policy cell — renders state. Inline allow/block on rows that inherit posture.
function PolicyCell({ state, posture, onSet }) {
if (state === "blocked") return
Blocked ;
if (state === "allowed") return
Allowlisted ;
// Inherits posture — no explicit policy on this service.
if (posture === "default-deny") {
return
Default-deny ;
}
return
Default-allow ;
}
// ---------- Bipartite graph ----------
// Apps on the left, resources (schemas + services) on the right.
// Edges thicken on shared resources, dashed on non-deterministic.
function BipartiteGraph({ onOpenApp, filter, setFilter, domain }) {
const apps = DATA.APPS;
const schemas = DATA.SCHEMAS;
const services = DATA.SERVICES;
// Resources column: filtered by domain prop. "schemas" → only schemas, "services" → only services, default → both.
const includeSchemas = !domain || domain === "schemas";
const includeServices = !domain || domain === "services";
const resources = [
...(includeSchemas ? [...schemas].sort((a,b) => b.apps.length - a.apps.length).map(s => ({
kind: "schema", name: s.name, apps: s.apps,
contract: s.contract, health: s.health,
})) : []),
...(includeServices ? [...services].sort((a,b) => b.apps.length - a.apps.length).map(s => ({
kind: "service", subkind: s.kind, name: s.name, apps: s.apps,
det: s.det, sharedKey: s.sharedKey,
})) : []),
];
// Apps sorted by total connections (desc) for cleaner edge bundling.
// When a domain is set, only show apps that actually connect to a resource in this domain.
const resourceNames = new Set(resources.map(r => r.name));
const appsFiltered = domain
? apps.filter(a => (a.connections || []).some(c => resourceNames.has(c.name)))
: apps;
const appsSorted = [...appsFiltered].sort((a,b) => {
const ca = (a.connections || []).filter(c => !domain || resourceNames.has(c.name)).length;
const cb = (b.connections || []).filter(c => !domain || resourceNames.has(c.name)).length;
return cb - ca;
});
// Build edges. Match by name.
const edges = [];
appsSorted.forEach((a, ai) => {
(a.connections || []).forEach(c => {
const ri = resources.findIndex(r => r.name === c.name);
if (ri < 0) return;
const r = resources[ri];
const isShared = r.apps.length > 1;
const isNonDet = c.det === false;
// filter
if (filter === "shared" && !isShared) return;
if (filter === "non-det" && !isNonDet) return;
edges.push({ ai, ri, det: c.det !== false, shared: isShared, type: c.type, kind: r.kind });
});
});
// Hover state
const [hover, setHover] = useState(null); // {kind: "app"|"resource", index}
const isEdgeLit = (e) => {
if (!hover) return false;
if (hover.kind === "app") return e.ai === hover.index;
if (hover.kind === "resource") return e.ri === hover.index;
return false;
};
const isAppLit = (i) => {
if (!hover) return true;
if (hover.kind === "app") return i === hover.index;
return edges.some(e => e.ai === i && e.ri === hover.index);
};
const isResourceLit = (i) => {
if (!hover) return true;
if (hover.kind === "resource") return i === hover.index;
return edges.some(e => e.ri === i && e.ai === hover.index);
};
// Layout sizes
const W = 1080, rowH = 32;
const padTop = 36;
const appsH = appsSorted.length * rowH;
const resH = resources.length * rowH;
const H = Math.max(padTop + appsH, padTop + resH) + 20;
const appX = 220; // right edge of app column (where edges start)
const resX = 740; // left edge of resources column (where edges end)
const appY = (i) => padTop + i * rowH + rowH/2;
const resY = (i) => padTop + i * rowH + rowH/2;
return (
setFilter("all")}>All edges
setFilter("shared")}>Shared only
setFilter("non-det")}>Non-det only
{/* column headers */}
APPS · {appsSorted.length}
RESOURCES · {resources.length}
{/* edges */}
{edges.map((e, i) => {
const lit = isEdgeLit(e);
const dim = hover && !lit;
const x1 = appX, y1 = appY(e.ai);
const x2 = resX, y2 = resY(e.ri);
const cx1 = x1 + 80, cx2 = x2 - 80;
const stroke = e.shared ? "var(--ink-2)" : "var(--tan)";
const sw = e.shared ? 1.6 : 1.0;
return (
{/* app nodes */}
{appsSorted.map((a, i) => {
const lit = isAppLit(i);
const o = DATA.OPERATORS[a.owner];
return (
setHover({ kind: "app", index: i })}
onMouseLeave={() => setHover(null)}
onClick={() => onOpenApp(a)}
style={{ cursor: "pointer", opacity: lit ? 1 : 0.35, transition: "opacity 0.15s" }}>
{a.name}
{(a.connections||[]).length}
);
})}
{/* resource nodes */}
{resources.map((r, i) => {
const lit = isResourceLit(i);
const isShared = r.apps.length > 1;
const isLLM = r.kind === "service" && r.subkind === "LLM";
const baseFill = r.kind === "schema" ? "var(--cream-3)" : isLLM ? "color-mix(in srgb, var(--orange) 10%, var(--paper))" : "var(--paper)";
const baseStroke = isShared ? "var(--ink-3)" : "var(--tan-2)";
const swText = isShared ? 600 : 400;
return (
setHover({ kind: "resource", index: i })}
onMouseLeave={() => setHover(null)}
style={{ cursor: "pointer", opacity: lit ? 1 : 0.35, transition: "opacity 0.15s" }}>
{r.kind === "schema" ? "DB" : r.subkind}
{r.name}
{/* badges on right */}
{r.apps.length}
{r.kind === "schema" && r.contract === "none" && (
);
})}
{edges.length} edges · {edges.filter(e => e.shared).length} shared · {edges.filter(e => !e.det).length} non-deterministic
Hover to focus · click an app to open detail
);
}
// ---------- Governance page ----------
function GovernancePage({ onAddRule, onInspect }) {
const rules = DATA.RULES;
const cats = DATA.RULE_CATEGORIES;
const [expanded, setExpanded] = useState(() => new Set(cats.map(c => c.id)));
const [query, setQuery] = useState("");
const totalRules = rules.length;
const totalOn = rules.filter(r => r.status === "on").length;
const totalTests = rules.reduce((s, r) => s + r.builtInTests, 0);
const totalViolations = rules.reduce((s, r) => s + r.violations, 0);
const byCat = Object.fromEntries(cats.map(c => [c.id, rules.filter(r => r.category === c.id)]));
const toggle = (id) => setExpanded(prev => {
const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n;
});
return (
Governance · {cats.length} categories · {totalRules} rules · {totalTests} built-in tests
Rules that hold.
Every rule runs a bundle of deterministic tests Stoda ships, maintained by us, applied to your fleet. Toggle by category, inspect violations, export signed evidence.
{/* Top stats, simple flat row, not Kpi cards */}
Rules active
{totalOn} / {totalRules}
Built-in tests
{totalTests}
Violations
{totalViolations} · auto-routed
{/* Rule categories */}
{cats.map(cat => {
const list = byCat[cat.id] || [];
const filtered = query
? list.filter(r => r.name.toLowerCase().includes(query.toLowerCase()) || r.summary.toLowerCase().includes(query.toLowerCase()))
: list;
if (query && filtered.length === 0) return null;
const catOn = list.filter(r => r.status === "on").length;
const catTests = list.reduce((s,r) => s + r.builtInTests, 0);
const catViolations = list.reduce((s,r) => s + r.violations, 0);
const isOpen = expanded.has(cat.id) || !!query;
const Ic = Icons[cat.icon] || Icons.Shield;
return (
toggle(cat.id)}>
{cat.name}
{cat.description}
{catOn}/{list.length} on {catTests} tests
{catViolations > 0
? <>{catViolations} violations
: <>0 violations }
{isOpen && (
{filtered.map(r => (
{r.name}
{r.status === "on" &&
on }
{r.status === "partial" &&
partial }
{r.status === "off" &&
off }
{r.summary}
{r.builtInTests} built-in tests {r.coverage} / 24 apps
{r.violations > 0 && {r.violations} violation{r.violations > 1 ? "s" : ""} }
onInspect && onInspect(r.id)}>Inspect
))}
)}
);
})}
);
}
// ---------- Costs page ----------
function CostsPage({ onOpenApp, onOpenService, onOpenBudget }) {
const budgets = DATA.TEAM_BUDGETS;
const lineItems = DATA.TOP_LINE_ITEMS;
const apps = [...DATA.APPS].sort((a,b) => b.cost - a.cost);
const trend = DATA.COST_TREND_30D;
const totalBudget = budgets.reduce((s, b) => s + b.budget, 0);
const totalSpent = budgets.reduce((s, b) => s + b.spent, 0);
const totalApps = apps.length + 15; // extrapolated for "24 apps"
const unattributedPool = lineItems.filter(l => l.unattributed).reduce((s,l) => s+l.cost, 0);
const forecast = Math.round(totalSpent * 30 / 27); // day 27 of month, project to 30
const pct = Math.min(100, Math.round((totalSpent / totalBudget) * 100));
const maxTrend = Math.max(...trend);
const minTrend = Math.min(...trend);
const maxBudget = Math.max(...budgets.map(b => b.budget));
return (
Cost attribution · April 2026 · Month-to-date
Every dollar has an owner.
Compute, APIs, and LLM spend, attributed to the team using it. Shared keys surface as an unattributed pool you can split on demand.
{/* Top stats */}
Month-to-date spend
${(totalSpent/1000).toFixed(1)}k
of ${(totalBudget/1000).toFixed(1)}k budgeted ({pct}%)
Forecast · end of month
${(forecast/1000).toFixed(1)}k
on track · ~${((totalBudget-forecast)/1000).toFixed(1)}k under budget
Unattributed
${unattributedPool.toLocaleString()}
1 shared key · 3 apps
{
const svc = DATA.SERVICES.find(s => s.sharedKey);
onOpenService && onOpenService(svc);
}}>Split into per-app keys
Cost per user
${(totalSpent / DATA.FLEET_TOTALS.monthlyUsers).toFixed(0)}
across {DATA.FLEET_TOTALS.monthlyUsers} monthly users
{/* 30-day trend */}
30-day spend
Daily cost across the fleet. Dashed line = projected.
{/* Team budgets */}
By team
Budget vs. month-to-date spend. Click to open the team's apps.
{budgets.map(b => {
const used = Math.round((b.spent / b.budget) * 100);
const over = used > 100;
return (
{b.team}
{b.apps} app{b.apps > 1 ? "s" : ""} · owned by {DATA.OPERATORS[b.owner].name}
${b.spent.toLocaleString()}
of ${b.budget.toLocaleString()}
);
})}
{/* Side-by-side: by app + top line items */}
By app
Compute / APIs / LLM breakdown per app.
App Owner Compute APIs LLM Total
{apps.map(a => {
const o = DATA.OPERATORS[a.owner];
const cb = a.costBreakdown || { compute: Math.round(a.cost * 0.2), apis: Math.round(a.cost * 0.45), llm: Math.round(a.cost * 0.35) };
return (
onOpenBudget ? onOpenBudget(a) : onOpenApp(a)} style={{ cursor: "pointer" }}>
{a.name}
{o.initials}
{o.team}
${cb.compute}
${cb.apis}
${cb.llm}
${a.cost.toLocaleString()}
);
})}
Top line items
Services by monthly spend.
{lineItems.slice(0, 8).map((l, i) => {
const svc = DATA.SERVICES.find(s => s.name === l.name);
return (
svc && onOpenService && onOpenService(svc)}>
{l.kind}
{l.name}
{l.unattributed && shared key }
{l.apps} app{l.apps > 1 ? "s" : ""} · {l.trend}
${l.cost.toLocaleString()}
);
})}
{/* Attribution quality */}
${unattributedPool.toLocaleString()} sits in a shared OPENAI_API_KEY
Quote Copilot, Churn Early Warning, and NPS Pulse all bill against one key. Splitting into per-app keys restores team-level cost attribution and limits blast radius if a key leaks.
{
const svc = DATA.SERVICES.find(s => s.sharedKey);
onOpenService && onOpenService(svc);
}}>Split keys
Dismiss
);
}
function CostTrendChart({ values, dailyBudget }) {
const W = 1000, H = 220;
const pad = { t: 20, r: 20, b: 30, l: 48 };
const iw = W - pad.l - pad.r;
const ih = H - pad.t - pad.b;
const actualCount = 27;
const projCount = values.length - actualCount;
const max = Math.max(...values, dailyBudget) * 1.15;
const x = (i) => pad.l + (i / (values.length - 1)) * iw;
const y = (v) => pad.t + ih - (v / max) * ih;
const actualPath = values.slice(0, actualCount).map((v, i) => `${i === 0 ? "M" : "L"}${x(i)},${y(v)}`).join(" ");
const projPath = `M${x(actualCount - 1)},${y(values[actualCount - 1])} ` + values.slice(actualCount).map((v, i) => `L${x(actualCount + i)},${y(v)}`).join(" ");
const budgetY = y(dailyBudget);
return (
{/* grid lines */}
{[0.25, 0.5, 0.75, 1].map((g, i) => (
${Math.round(max*g)}
))}
{/* budget line */}
daily budget ${Math.round(dailyBudget)}
{/* actual fill */}
{d === 29 ? "today" : `d${d+1}`}
))}
{/* today marker */}
);
}
// ---------- Recommendations page ----------
function RecommendationsPage({ onOpenApp, onOpenRec }) {
const all = DATA.SIGNALS;
const sevRank = { risk: 0, warn: 1, info: 2, ok: 3 };
const sorted = [...all].sort((a, b) => (sevRank[a.sev] ?? 9) - (sevRank[b.sev] ?? 9));
return (
Recommendations · Decisions awaiting you
Calls only you can make.
Each one is a moment where Stoda needs a human decision, exception, allowlist, budget, or rule.
{sorted.map(s => )}
);
}
// ---------- Coming soon scaffold ----------
function ComingSoonPage({ title, eyebrow, description, items, icon }) {
const Ic = Icons[icon || "Clock"];
return (
{eyebrow}
{title}
{description}
Coming soon
This surface is in private beta. A preview of what will live here:
{items.map((it, i) => (
{it}
))}
Request early access
);
}
Object.assign(window, {
SignalItem, RecommendationCard,
OverviewPage, FleetPage, ConnectionsPage, GovernancePage, RecommendationsPage, CostsPage, ComingSoonPage,
});