@@ -1027,6 +1135,10 @@ function CanvasStats({ data, t }: { data: any; t: T }) {
{t.canvasStats.agents}
{agents}
+
+ {t.canvasStats.subAgents}
+ {subAgents}
+
{t.canvasStats.products}
{products}+
@@ -1056,6 +1168,13 @@ function Legend({ t }: { t: T }) {
{t.legendAgentDesc}
+
+
+
+ {t.legendSubAgentLabel}
+
+ {t.legendSubAgentDesc}
+
@@ -1613,6 +1732,18 @@ function AiAtlasApp() {
const p = POL(data.order.r, n.theta);
m[n.id] = { ...p, ring: 'order', node: n };
}
+ if (data.reception) {
+ const n = data.reception.member;
+ const p = POL(data.reception.r, n.theta);
+ m[n.id] = { ...p, ring: 'outside', node: n };
+ // Globe sits further out on the same radial, so globe → reception →
+ // wolf reads as a single straight line from the public internet inward.
+ m['globe'] = { ...POL(data.reception.globeR, n.theta), ring: 'outside' };
+ m['tg-relay'] = {
+ ...POL((data.reception.r + data.reception.globeR) / 2, n.theta),
+ ring: 'outside',
+ };
+ }
data.devEnv.members.forEach((n: any) => {
const p = POL(data.devEnv.r, n.theta);
m[n.id] = { ...p, ring: 'dev', node: n };
@@ -1778,8 +1909,9 @@ function AiAtlasApp() {
}
if (highlightId === 'terminal') {
if (data.order.member.diamond === 'blue') set.add(data.order.member.id);
+ if (data.reception) set.add('reception');
data.devEnv.members.forEach((n: any) => {
- if (n.diamond === 'blue') set.add(n.id);
+ if (n.diamond === 'blue' || n.diamond === 'subagent') set.add(n.id);
});
data.projects.members.forEach((p: any) => {
if (p.leadDiamond === 'blue') set.add(`lead-${p.id}`);
@@ -1800,6 +1932,10 @@ function AiAtlasApp() {
set.add('order');
set.add('terminal');
set.add('lead-terminal');
+ if (data.reception) set.add('reception');
+ }
+ if (highlightId === 'reception') {
+ set.add('wolf');
}
if (highlightId === 'order') {
set.add('wolf');
@@ -1936,6 +2072,25 @@ function AiAtlasApp() {
glow={spokeGlow('wolf', 'order')}
/>
+ {data.reception && (
+ <>
+
+
+
+ )}
+
{data.devEnv.members.map((n: any) => (
+ {data.reception && (
+ <>
+
+
+
+
+ )}
+
{data.devEnv.members.map((n: any) => (
))}
- {data.projects.members.map((p: any) => (
-
- ))}
+ {data.projects.members
+ .filter((p: any) => p.id !== 'terminal')
+ .map((p: any) => (
+
+ ))}
{data.projects.members.map((p: any) => {
const id = `lead-${p.id}`;
@@ -2126,6 +2312,24 @@ function AiAtlasApp() {
);
})}
+ {data.projects.members
+ .filter((p: any) => p.id === 'terminal')
+ .map((p: any) => (
+
+ ))}
+
{data.projects.members
.filter((p: any) => p.leadDiamond2)
.map((p: any) => {
diff --git a/src/styles/ai-atlas.css b/src/styles/ai-atlas.css
index 7953a6e9..938d037d 100644
--- a/src/styles/ai-atlas.css
+++ b/src/styles/ai-atlas.css
@@ -204,6 +204,7 @@ html.scroll-style-atlas::-webkit-scrollbar-thumb:hover {
.kv li .v.red { color: var(--red); }
.kv li .v.blue { color: var(--blue); }
.kv li .v.gold { color: var(--gold); }
+.kv li .v.subagent { color: var(--blue); }
.kv li .v.v--ref { cursor: pointer; transition: filter 0.15s ease; }
.kv li .v.v--ref:hover { filter: brightness(1.15); }
.legend-kv li { padding: 8px 0; }
@@ -217,6 +218,12 @@ html.scroll-style-atlas::-webkit-scrollbar-thumb:hover {
}
.dmd.blue { background: var(--blue); }
.dmd.gold { background: var(--gold); }
+.dmd.subagent {
+ /* half-filled: the span is rotated 45deg, so "to bottom right" reads
+ as a clean vertical split — blue half, white half, blue outline */
+ background: linear-gradient(to bottom right, var(--blue) 50%, #fff 50%);
+ box-shadow: inset 0 0 0 1.5px var(--blue);
+}
/* iOS Safari mangles the rotated-div diamond inside foreignObject.
On touch iOS, drop the diamond marker entirely and color the card
@@ -237,6 +244,10 @@ html.scroll-style-atlas::-webkit-scrollbar-thumb:hover {
outline: 2px solid var(--gold);
outline-offset: -1px;
}
+ .canvas--orbital .node--dmd-subagent {
+ outline: 2px dashed var(--blue);
+ outline-offset: -1px;
+ }
}
}
@@ -414,6 +425,46 @@ html.scroll-style-atlas::-webkit-scrollbar-thumb:hover {
.wire { transition: opacity 0.2s ease, stroke 0.2s ease; }
.wire.is-dim { opacity: 0.18; }
+/* public internet globe */
+.globe-mark { transition: opacity 0.2s ease; }
+.globe-mark circle,
+.globe-mark ellipse,
+.globe-mark line {
+ stroke: var(--ink-3);
+ stroke-width: 0.9;
+}
+.globe-mark__label {
+ font-family: var(--mono);
+ font-size: 14px;
+ letter-spacing: 0.22em;
+ fill: var(--ink-3);
+}
+.globe-mark__label--sm { font-size: 12px; }
+.globe-mark__plane {
+ fill: var(--ink-3);
+ stroke: none;
+}
+.globe-mark.is-dim { opacity: 0.28; }
+
+/* telegram relay marker */
+.telegram-mark { transition: opacity 0.2s ease; }
+.telegram-mark circle {
+ stroke: var(--ink-3);
+ stroke-width: 0.9;
+}
+.telegram-mark__label {
+ font-family: var(--mono);
+ font-size: 14px;
+ letter-spacing: 0.22em;
+ fill: var(--ink-3);
+}
+.telegram-mark__label--sm { font-size: 12px; }
+.telegram-mark__plane {
+ fill: var(--ink-3);
+ stroke: none;
+}
+.telegram-mark.is-dim { opacity: 0.28; }
+
/* ---------- node ---------- */
.node-wrap {
width: 100%; height: 100%;