From 07fd785f77a0e064c0658a36c90062037de46c71 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 6 Aug 2026 08:14:17 +0000 Subject: [PATCH 1/4] style: Telivity-brand the Otaip agent map MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Match telivity.app / Ligare: slate-950 canvas, cyan accents, Space Grotesk + IBM Plex, Telivity · Otaip header and footer. Co-authored-by: telivity-otaip --- docs/agent-map.html | 155 ++++++++++++------ .../platform-ui/src/components/AgentMap.tsx | 8 +- scripts/generate-agent-map-html.ts | 155 ++++++++++++------ 3 files changed, 214 insertions(+), 104 deletions(-) diff --git a/docs/agent-map.html b/docs/agent-map.html index fdb8601..2447296 100644 --- a/docs/agent-map.html +++ b/docs/agent-map.html @@ -3,48 +3,72 @@ - OTAIP Agent Map + Otaip Agent Map · Telivity + + + +
-

OTAIP Agent Map

+

Telivity · Otaip

+

Agent Map for the whole travel transaction

- Stage columns for every discovered agent. Solid arcs are Orchestrator - workflow steps; dashed arcs are package workspace dependencies (stage hubs). - This is navigation only — not a travel-domain knowledge graph. + Every discovered Otaip agent by stage. Solid cyan arcs are Orchestrator + workflow steps; dashed arcs are package workspace dependencies. + Navigation only — not a travel-domain knowledge graph.

@@ -603,6 +657,7 @@

lodging 9

+ Telivity · Powered by Otaip. Generated by pnpm gen:manifest from agents.graph.json (77 agents, 27 edges). Do not hand-edit.

diff --git a/examples/platform-ui/src/components/AgentMap.tsx b/examples/platform-ui/src/components/AgentMap.tsx index 45b54a9..6251edb 100644 --- a/examples/platform-ui/src/components/AgentMap.tsx +++ b/examples/platform-ui/src/components/AgentMap.tsx @@ -233,10 +233,10 @@ export default function AgentMap({ graph }: AgentMapProps) { key={i} d={p.d} fill="none" - stroke={p.kind === 'workflow' ? '#c2410c' : '#a8a29e'} + stroke={p.kind === 'workflow' ? '#06b6d4' : '#64748b'} strokeWidth={p.hl ? 2.25 : p.kind === 'workflow' ? 1.5 : 1} strokeDasharray={p.kind === 'package' ? '4 3' : undefined} - opacity={p.hl ? 1 : p.kind === 'workflow' ? 0.5 : 0.3} + opacity={p.hl ? 1 : p.kind === 'workflow' ? 0.55 : 0.35} /> ))} @@ -262,8 +262,8 @@ export default function AgentMap({ graph }: AgentMapProps) { onClick={() => setSelected(a.id)} className={[ 'rounded-md border bg-white px-2 py-1.5 text-left transition', - a.contract_status === 'active' ? 'border-l-[3px] border-l-teal-700' : 'border-l-[3px] border-l-stone-400', - isSelected || onPath ? 'border-teal-600 shadow-[0_0_0_1px_#0d9488]' : 'border-slate-200', + diff --git a/scripts/generate-agent-map-html.ts b/scripts/generate-agent-map-html.ts index d1a6105..f66eb5e 100644 --- a/scripts/generate-agent-map-html.ts +++ b/scripts/generate-agent-map-html.ts @@ -110,48 +110,72 @@ ${cards} - OTAIP Agent Map + Otaip Agent Map · Telivity + + + +
-

OTAIP Agent Map

+

Telivity · Otaip

+

Agent Map for the whole travel transaction

- Stage columns for every discovered agent. Solid arcs are Orchestrator - workflow steps; dashed arcs are package workspace dependencies (stage hubs). - This is navigation only — not a travel-domain knowledge graph. + Every discovered Otaip agent by stage. Solid cyan arcs are Orchestrator + workflow steps; dashed arcs are package workspace dependencies. + Navigation only — not a travel-domain knowledge graph.

@@ -343,6 +397,7 @@ ${columnsHtml}

+ Telivity · Powered by Otaip. Generated by pnpm gen:manifest from agents.graph.json (${graph.total_nodes} agents, ${graph.total_edges} edges). Do not hand-edit.

From b7682191eba1669a8519077178b955456f52186e Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 6 Aug 2026 08:16:36 +0000 Subject: [PATCH 2/4] fix: repair AgentMap className ternary syntax Co-authored-by: telivity-otaip --- examples/platform-ui/src/components/AgentMap.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/platform-ui/src/components/AgentMap.tsx b/examples/platform-ui/src/components/AgentMap.tsx index 6251edb..95311c1 100644 --- a/examples/platform-ui/src/components/AgentMap.tsx +++ b/examples/platform-ui/src/components/AgentMap.tsx @@ -262,7 +262,7 @@ export default function AgentMap({ graph }: AgentMapProps) { onClick={() => setSelected(a.id)} className={[ 'rounded-md border bg-white px-2 py-1.5 text-left transition', - Date: Thu, 6 Aug 2026 08:26:08 +0000 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20redesign=20agent=20map=20=E2=80=94?= =?UTF-8?q?=20Telivity=20mission=20control=20with=20visible=20edges?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Kimi-driven 2026 redesign: slate/cyan Telivity chrome, Space Grotesk hero, workflow pills defaulting to full_booking, SVG edges ABOVE cards with side anchors + arrowheads + marching ants, package bus-lane routing so connections are actually readable. Co-authored-by: telivity-otaip --- docs/agent-map.html | 1091 ++++++++++++++++++++-------- scripts/generate-agent-map-html.ts | 944 +++++++++++++++++------- 2 files changed, 1468 insertions(+), 567 deletions(-) diff --git a/docs/agent-map.html b/docs/agent-map.html index 2447296..31cf9cc 100644 --- a/docs/agent-map.html +++ b/docs/agent-map.html @@ -4,663 +4,953 @@ Otaip Agent Map · Telivity - + - + -
-

Telivity · Otaip

-

Agent Map for the whole travel transaction

-

- Every discovered Otaip agent by stage. Solid cyan arcs are Orchestrator - workflow steps; dashed arcs are package workspace dependencies. - Navigation only — not a travel-domain knowledge graph. -

-
-
- - - - -
- Active - Stub - Workflow - Package dep +
+
+
+

Telivity · Otaip — open source

+

Agent map for the whole travel transaction.

+

77 typed agents. Search to settlement. Solid cyan arcs are Orchestrator workflows; dashed traces are package dependencies.

+
+
+
77Agents
+
12Stages
+
5Workflows
+
27Edges
+
+
+ +
+ + + +
+ + + + + + +
+
+ Active + Stub + Workflow + Package +
-
-
-
- -
+ +
+
+ + + +
-

reference 7

+

reference 7

- - - - - - -
-

search 8

+

search 8

- - - - - - - -
-

pricing 7

+

pricing 7

- - - - - - -
-

booking 8

+

booking 8

- - - - - - - -
-

ticketing 5

+

ticketing 5

- - - - -
-

exchange 6

+

exchange 6

- - - - - -
-

settlement 6

+

settlement 6

- - - - - -
-

reconciliation 6

+

reconciliation 6

- - - - - -
-

tmc 5

+

tmc 5

- - - - -
-

platform 9

+

platform 9

- - - - - - - - -
-

core 1

+

core 1

-
-

lodging 9

+

lodging 9

- - - - - - - - -
+
+
- + +
+ Telivity — AI travel infrastructure · Otaip open core · + 77 agents · 27 edges · generated from agents.graph.json · pnpm gen:agent-map +
-

- Telivity · Powered by Otaip. - Generated by pnpm gen:manifest from agents.graph.json - (77 agents, 27 edges). Do not hand-edit. -

+ diff --git a/scripts/generate-agent-map-html.ts b/scripts/generate-agent-map-html.ts index f66eb5e..2294a4c 100644 --- a/scripts/generate-agent-map-html.ts +++ b/scripts/generate-agent-map-html.ts @@ -2,11 +2,9 @@ /** * Render `docs/agent-map.html` from an AgentGraph. * - * Callable standalone (`pnpm gen:agent-map`) or from `generate-manifest.ts` - * so CI `--check` keeps the HTML in sync with the graph. - * - * Self-contained: no external JS/CSS. Stage columns + SVG workflow arcs. - * Not a domain knowledge graph — agent navigation only. + * Telivity-branded mission-control board: dark slate + cyan, Space Grotesk / + * IBM Plex, workflow edges above cards with side anchors so connections are + * actually readable. Generated by `pnpm gen:manifest` / `pnpm gen:agent-map`. */ import { existsSync, readFileSync, writeFileSync } from 'node:fs'; @@ -17,7 +15,6 @@ import type { AgentGraph, AgentGraphNode } from './agent-graph.js'; const GRAPH_PATH = 'agents.graph.json'; const MAP_HTML_PATH = 'docs/agent-map.html'; -/** Display order for stage columns. Unknown stages append alphabetically. */ const STAGE_ORDER = [ 'reference', 'search', @@ -76,26 +73,26 @@ function groupByStage(nodes: readonly AgentGraphNode[]): Array<[string, AgentGra return [...map.entries()].sort(([a], [b]) => stageSortKey(a) - stageSortKey(b) || a.localeCompare(b)); } -/** - * Build a standalone HTML page that embeds the graph JSON and renders - * stage columns with interactive selection. - */ export function renderAgentMapHtml(graph: AgentGraph): string { const stages = groupByStage(graph.nodes); + const workflows = [ + ...new Set(graph.edges.filter((e) => e.kind === 'workflow').map((e) => e.label)), + ].sort(); + const columnsHtml = stages - .map(([stage, agents]) => { + .map(([stage, agents], colIdx) => { const cards = agents - .map((a) => { + .map((a, cardIdx) => { const status = a.contract_status === 'active' ? 'active' : 'stub'; - const contract = a.has_contract ? 'contracted' : 'no-contract'; - return ` `; }) .join('\n'); return `
-

${escapeHtml(stage)} ${agents.length}

+

${escapeHtml(stage)} ${agents.length}

${cards}
@@ -103,6 +100,14 @@ ${cards} }) .join('\n'); + const workflowPills = [ + ``, + ...workflows.map( + (w) => + ``, + ), + ].join('\n '); + const payload = JSON.stringify(graph); return ` @@ -111,296 +116,581 @@ ${cards} Otaip Agent Map · Telivity - + - + -
-

Telivity · Otaip

-

Agent Map for the whole travel transaction

-

- Every discovered Otaip agent by stage. Solid cyan arcs are Orchestrator - workflow steps; dashed arcs are package workspace dependencies. - Navigation only — not a travel-domain knowledge graph. -

-
-
- - - - -
- Active - Stub - Workflow - Package dep +
+
+
+

Telivity · Otaip — open source

+

Agent map for the whole travel transaction.

+

${graph.total_nodes} typed agents. Search to settlement. Solid cyan arcs are Orchestrator workflows; dashed traces are package dependencies.

+
+
+
${graph.total_nodes}Agents
+
${stages.length}Stages
+
${workflows.length}Workflows
+
${graph.total_edges}Edges
+
+
+ +
+ + + +
+ ${workflowPills} +
+
+ Active + Stub + Workflow + Package +
-
-
-
- -
+ +
+
+ + + +
${columnsHtml} +
+
- + +
+ Telivity — AI travel infrastructure · Otaip open core · + ${graph.total_nodes} agents · ${graph.total_edges} edges · generated from agents.graph.json · pnpm gen:agent-map +
-

- Telivity · Powered by Otaip. - Generated by pnpm gen:manifest from agents.graph.json - (${graph.total_nodes} agents, ${graph.total_edges} edges). Do not hand-edit. -

+ @@ -565,7 +1016,6 @@ function main(): void { console.log(`Wrote ${MAP_HTML_PATH} (${graph.total_nodes} agents).`); } -// Only run as CLI when invoked directly (not when imported by generate-manifest). const isDirect = process.argv[1] !== undefined && resolve(process.argv[1]) === fileURLToPath(import.meta.url); From 97f4f62e6e7ab2eeb47437f952b03ed71827bbd9 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 6 Aug 2026 08:26:39 +0000 Subject: [PATCH 4/4] style: thicken workflow arcs for unmissable connections Co-authored-by: telivity-otaip --- docs/agent-map.html | 28 ++++++++++++++-------------- scripts/generate-agent-map-html.ts | 28 ++++++++++++++-------------- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/docs/agent-map.html b/docs/agent-map.html index 31cf9cc..d83c33f 100644 --- a/docs/agent-map.html +++ b/docs/agent-map.html @@ -252,37 +252,37 @@ overflow: visible; } svg.edges .hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; } - svg.edges .glow { fill: none; stroke: var(--cyan-400); stroke-width: 8; opacity: 0.10; stroke-linecap: round; } + svg.edges .glow { fill: none; stroke: var(--cyan-400); stroke-width: 12; opacity: 0.14; stroke-linecap: round; } svg.edges .core-wf { fill: none; stroke: var(--cyan-400); - stroke-width: 2; - opacity: 0.9; + stroke-width: 2.75; + opacity: 0.95; stroke-linecap: round; stroke-linejoin: round; } svg.edges .ants { fill: none; stroke: var(--cyan-200); - stroke-width: 1.25; + stroke-width: 1.75; stroke-linecap: round; - stroke-dasharray: 1 9; - animation: march 0.9s linear infinite; + stroke-dasharray: 2 8; + animation: march 0.85s linear infinite; opacity: 0; } - svg.edges g.live .core-wf { stroke-width: 2.75; opacity: 1; } - svg.edges g.live .glow { stroke-width: 10; opacity: 0.16; } + svg.edges g.live .core-wf { stroke-width: 3.5; opacity: 1; stroke: var(--cyan-300); } + svg.edges g.live .glow { stroke-width: 16; opacity: 0.22; } svg.edges g.live .ants { opacity: 1; } svg.edges g.dim .core-wf, svg.edges g.dim .glow, svg.edges g.dim .ants { opacity: 0.08; } svg.edges g.dim .core-wf { marker-end: none; } - svg.edges g.hot .core-wf { stroke-width: 3; opacity: 1; stroke: var(--cyan-300); } - svg.edges g.hot .glow { opacity: 0.22; stroke-width: 12; } + svg.edges g.hot .core-wf { stroke-width: 4; opacity: 1; stroke: var(--cyan-200); } + svg.edges g.hot .glow { opacity: 0.28; stroke-width: 18; } svg.edges .core-pkg { fill: none; - stroke: var(--pkg); - stroke-width: 1.5; - opacity: 0.42; - stroke-dasharray: 3 5; + stroke: var(--pkg-hi); + stroke-width: 2; + opacity: 0.55; + stroke-dasharray: 4 6; stroke-linecap: round; stroke-linejoin: round; } diff --git a/scripts/generate-agent-map-html.ts b/scripts/generate-agent-map-html.ts index 2294a4c..0cfbef9 100644 --- a/scripts/generate-agent-map-html.ts +++ b/scripts/generate-agent-map-html.ts @@ -364,37 +364,37 @@ ${cards} overflow: visible; } svg.edges .hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; } - svg.edges .glow { fill: none; stroke: var(--cyan-400); stroke-width: 8; opacity: 0.10; stroke-linecap: round; } + svg.edges .glow { fill: none; stroke: var(--cyan-400); stroke-width: 12; opacity: 0.14; stroke-linecap: round; } svg.edges .core-wf { fill: none; stroke: var(--cyan-400); - stroke-width: 2; - opacity: 0.9; + stroke-width: 2.75; + opacity: 0.95; stroke-linecap: round; stroke-linejoin: round; } svg.edges .ants { fill: none; stroke: var(--cyan-200); - stroke-width: 1.25; + stroke-width: 1.75; stroke-linecap: round; - stroke-dasharray: 1 9; - animation: march 0.9s linear infinite; + stroke-dasharray: 2 8; + animation: march 0.85s linear infinite; opacity: 0; } - svg.edges g.live .core-wf { stroke-width: 2.75; opacity: 1; } - svg.edges g.live .glow { stroke-width: 10; opacity: 0.16; } + svg.edges g.live .core-wf { stroke-width: 3.5; opacity: 1; stroke: var(--cyan-300); } + svg.edges g.live .glow { stroke-width: 16; opacity: 0.22; } svg.edges g.live .ants { opacity: 1; } svg.edges g.dim .core-wf, svg.edges g.dim .glow, svg.edges g.dim .ants { opacity: 0.08; } svg.edges g.dim .core-wf { marker-end: none; } - svg.edges g.hot .core-wf { stroke-width: 3; opacity: 1; stroke: var(--cyan-300); } - svg.edges g.hot .glow { opacity: 0.22; stroke-width: 12; } + svg.edges g.hot .core-wf { stroke-width: 4; opacity: 1; stroke: var(--cyan-200); } + svg.edges g.hot .glow { opacity: 0.28; stroke-width: 18; } svg.edges .core-pkg { fill: none; - stroke: var(--pkg); - stroke-width: 1.5; - opacity: 0.42; - stroke-dasharray: 3 5; + stroke: var(--pkg-hi); + stroke-width: 2; + opacity: 0.55; + stroke-dasharray: 4 6; stroke-linecap: round; stroke-linejoin: round; }