npm - noecosystem-design - Versions diffs - 0.1.0 - Mend

noecosystem-design 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (653) hide show

package/apps/web/index.html ADDED Viewed

@@ -0,0 +1,205 @@
+<!doctype html>
+<html lang="en" dir="ltr" data-theme="light" data-locale="en">
+<head>
+  <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="favicon.svg" type="image/svg+xml" />
+  <meta name="color-scheme" content="light dark" />
+  <title>NOE Design System Reference</title>
+  <link rel="stylesheet" href="../../packages/design-tokens/src/tokens.css" />
+  <link rel="stylesheet" href="./styles.css" />
+  <script defer src="./app.js"></script>
+</head>
+<body>
+  <a class="skip-link" href="#main" data-i18n="skip.content">Skip to content</a>
+  <header class="topbar">
+    <a class="brand" href="./" data-i18n-aria="brand.home" aria-label="NOE home">
+      <svg viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="16" r="12" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="16" cy="16" r="3" fill="currentColor"/><path d="M4 16h9M19 16h9M16 4v9M16 19v9" stroke="currentColor" stroke-width="2"/></svg>
+      <span>NOE<span class="brand-muted">cosystem</span></span>
+    </a>
+    <nav class="primary-nav" aria-label="Primary">
+      <a href="?surface=consumer" data-i18n="nav.system">System</a>
+      <a href="?surface=consumer" data-i18n="nav.principles">Principles</a>
+      <a href="?surface=dashboard" data-i18n="nav.progress">Progress</a>
+    </nav>
+    <div class="topbar-actions">
+      <button class="icon-button" type="button" data-action="theme" data-i18n-aria="action.toggleTheme" aria-label="Toggle theme"><span aria-hidden="true">◐</span></button>
+      <button class="compact-button" type="button" data-action="locale"><span data-locale-label>FA</span></button>
+      <button class="accent-button" type="button"><span data-i18n="nav.ask">Ask NOa</span><span aria-hidden="true">↗</span></button>
+    </div>
+  </header>
+  <!-- biome-ignore lint/a11y/useSemanticElements: control cluster has no fieldset-equivalent styling contract -->
+  <div class="reference-controls" role="group" data-i18n-aria="reference.controls" aria-label="Reference controls">
+    <label><span data-i18n="control.surface">Surface</span>
+      <select data-control="surface">
+        <option value="consumer">Consumer</option>
+        <option value="dashboard">Dashboard</option>
+        <option value="agent">Agent</option>
+        <option value="workflow">Workflow</option>
+      </select>
+    </label>
+    <label><span data-i18n="control.locale">Locale</span>
+      <select data-control="locale">
+        <option value="en">English</option>
+        <option value="fa">فارسی</option>
+        <option value="en-XA">Pseudo LTR</option>
+        <option value="ar-XB">Pseudo RTL</option>
+      </select>
+    </label>
+    <label><span data-i18n="control.theme">Theme</span>
+      <select data-control="theme">
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+      </select>
+    </label>
+  </div>
+  <main id="main">
+    <section class="surface surface-consumer" data-surface="consumer">
+      <div class="hero-grid">
+        <div class="hero-copy">
+          <p class="eyebrow" data-i18n="hero.eyebrow">NOECOSYSTEM / SHARED DIGITAL FOUNDATIONS</p>
+          <h1 data-i18n="hero.title">Shared foundations. Connected experiences.</h1>
+          <p class="hero-body" data-i18n="hero.body">A shared digital foundation for connected products and services—coherent at the core, clear at the surface.</p>
+          <div class="hero-actions">
+            <a class="accent-button" href="#foundation" data-i18n="hero.primary">Explore the system</a>
+            <a class="quiet-button" href="?surface=dashboard"><span data-i18n="hero.secondary">View progress</span><span class="logical-icon" aria-hidden="true">→</span></a>
+          </div>
+        </div>
+        <div class="system-visual" role="img" data-i18n-aria="system.visual.label" aria-label="Connected NOE system illustration">
+          <div class="system-axis system-axis-inline" aria-hidden="true"></div>
+          <div class="system-axis system-axis-block" aria-hidden="true"></div>
+          <div class="orbit orbit-one" aria-hidden="true"></div>
+          <div class="orbit orbit-two" aria-hidden="true"></div>
+          <div class="core-node"><span>NOE</span><small>SHARED CORE</small></div>
+          <div class="satellite satellite-a"><span>NOCloud</span></div>
+          <div class="satellite satellite-b"><span>NOData</span></div>
+          <div class="satellite satellite-c"><span>NOsist</span></div>
+          <div class="satellite satellite-d"><span>NOrbit</span></div>
+          <div class="signal signal-a" aria-hidden="true"></div>
+          <div class="signal signal-b" aria-hidden="true"></div>
+        </div>
+      </div>
+      <section class="foundation-section" id="foundation">
+        <div class="section-heading">
+          <p class="eyebrow">01 / FOUNDATION</p>
+          <h2 data-i18n="foundation.title">A shared core. Distinct experiences.</h2>
+        </div>
+        <div class="principle-grid">
+          <article><span>01</span><h3 data-i18n="foundation.shared">Shared by design.</h3><p>Identity, trust, data, and reusable capabilities mature once beneath every product.</p></article>
+          <article><span>02</span><h3 data-i18n="foundation.connected">Connected with intent.</h3><p>Signals move only where needed, keeping each capability focused and the whole system coherent.</p></article>
+          <article><span>03</span><h3 data-i18n="foundation.clear">Clear at the surface.</h3><p>Complexity stays underneath a calm, direct, and distinctly useful human experience.</p></article>
+        </div>
+      </section>
+      <section class="ask-panel">
+        <div><p class="eyebrow">NOsist / AI FOUNDATION</p><h2>Move from intent to coordinated action.</h2><p>Ask, inspect, approve, and receive a clear result. Technical detail remains available without dominating the experience.</p></div>
+        <form class="composer" data-demo-composer>
+          <label class="sr-only" for="consumer-prompt">Prompt</label>
+          <textarea id="consumer-prompt" rows="3" dir="auto" data-i18n-placeholder="agent.composer.placeholder" placeholder="Ask NOa to investigate, plan, or execute…"></textarea>
+          <footer><span><kbd>⌘</kbd><kbd>↵</kbd></span><button class="accent-button" type="submit"><span data-i18n="nav.ask">Ask NOa</span><span class="logical-icon" aria-hidden="true">→</span></button></footer>
+        </form>
+      </section>
+    </section>
+    <section class="surface app-surface" data-surface="dashboard" hidden>
+      <aside class="app-sidebar">
+        <div class="sidebar-brand"><span class="brand-glyph">N</span><div><strong>NOE</strong><small data-i18n="brand.controlCenter">CONTROL CENTER</small></div></div>
+        <nav aria-label="Dashboard">
+          <a href="#main" aria-current="page"><span aria-hidden="true">◫</span><span data-i18n="nav.overview">Overview</span></a>
+          <a href="#main"><span aria-hidden="true">⌁</span><span data-i18n="nav.services">Services</span></a>
+          <a href="#main"><span aria-hidden="true">◇</span><span data-i18n="nav.signals">Signals</span></a>
+          <a href="#main"><span aria-hidden="true">✓</span><span data-i18n="nav.approvals">Approvals</span><b>2</b></a>
+          <a href="#main"><span aria-hidden="true">◎</span><span data-i18n="nav.observability">Observability</span></a>
+        </nav>
+        <div class="sidebar-foot"><span class="avatar">AM</span><div><strong>Ali Mohammadi</strong><small data-i18n="sidebar.platformOwner">Platform owner</small></div><button type="button" class="icon-button" data-i18n-aria="action.accountMenu" aria-label="Account menu">•••</button></div>
+      </aside>
+      <div class="app-main">
+        <header class="page-header">
+          <div><p class="eyebrow" data-i18n="dashboard.eyebrow">OPERATIONS / LIVE</p><h1 data-i18n="dashboard.title">Operating overview</h1><p data-i18n="dashboard.subtitle">Signals, services, and delivery health across the ecosystem.</p></div>
+          <div class="page-actions"><button type="button" class="compact-button"><span aria-hidden="true">↻</span><span data-i18n="dashboard.refresh">Refresh</span></button><button type="button" class="accent-button" data-i18n="dashboard.createView">Create view</button></div>
+        </header>
+        <div class="metric-grid">
+          <article class="metric-card"><header><span data-i18n="metric.active">Active services</span><span class="metric-icon">◇</span></header><strong>24</strong><footer><bdi class="positive" dir="ltr" data-i18n="metric.active.delta">+3</bdi><span data-i18n="metric.active.period">this quarter</span></footer></article>
+          <article class="metric-card"><header><span data-i18n="metric.reliability">Reliability</span><span class="metric-icon">◎</span></header><strong dir="ltr">99.97%</strong><footer><bdi class="positive" dir="ltr" data-i18n="metric.reliability.delta">+0.04%</bdi><span data-i18n="metric.reliability.period">30-day window</span></footer></article>
+          <article class="metric-card"><header><span data-i18n="metric.latency">Median latency</span><span class="metric-icon">⌁</span></header><strong dir="ltr">184 ms</strong><footer><bdi class="positive" dir="ltr" data-i18n="metric.latency.delta">−18 ms</bdi><span data-i18n="metric.latency.period">week over week</span></footer></article>
+          <article class="metric-card warning"><header><span data-i18n="metric.approvals">Pending approvals</span><span class="metric-icon">!</span></header><strong>2</strong><footer><span data-i18n="metric.approvals.note">1 high-impact</span><span data-i18n="metric.approvals.action">review required</span></footer></article>
+        </div>
+        <section class="table-panel">
+          <header class="panel-header"><div><h2 data-i18n="panel.serviceHealth.title">Service health</h2><p data-i18n="panel.serviceHealth.subtitle">Current status and responsibility across shared capabilities.</p></div><div class="filter-row"><label class="search-control"><span aria-hidden="true">⌕</span><input type="search" dir="auto" data-i18n-placeholder="common.search" placeholder="Search" /></label><button type="button" class="compact-button"><span aria-hidden="true">≡</span><span data-i18n="common.filter">Filter</span></button></div></header>
+          <!-- biome-ignore lint/a11y/noNoninteractiveTabindex: WCAG keyboard-accessible scrollable region -->
+          <section class="table-scroll" aria-label="Service health" tabindex="0">
+            <table>
+              <caption class="sr-only">Service health</caption>
+              <thead><tr><th scope="col" data-i18n="table.service">Service</th><th scope="col" data-i18n="table.owner">Owner</th><th scope="col" data-i18n="table.status">Status</th><th scope="col" data-i18n="table.updated">Updated</th><th scope="col" data-i18n="table.actions">Actions</th></tr></thead>
+              <tbody>
+                <tr><td><div class="service-cell"><span class="service-mark">C</span><div><strong>NOCloud</strong><small>Cloud Engineering</small></div></div></td><td>Platform</td><td><span class="status healthy"><i></i><span data-i18n="status.healthy">Healthy</span></span></td><td><time data-i18n="time.2m">2m ago</time></td><td><button type="button" class="icon-button" data-i18n-aria="action.more" aria-label="More actions">•••</button></td></tr>
+                <tr><td><div class="service-cell"><span class="service-mark">D</span><div><strong>NOData</strong><small>Data & Integration</small></div></div></td><td>Data Core</td><td><span class="status healthy"><i></i><span data-i18n="status.healthy">Healthy</span></span></td><td><time data-i18n="time.4m">4m ago</time></td><td><button type="button" class="icon-button" data-i18n-aria="action.more" aria-label="More actions">•••</button></td></tr>
+                <tr><td><div class="service-cell"><span class="service-mark">O</span><div><strong>NOrchestration</strong><small>Enterprise Orchestration</small></div></div></td><td>Workflow</td><td><span class="status degraded"><i></i><span data-i18n="status.degraded">Degraded</span></span></td><td><time data-i18n="time.8m">8m ago</time></td><td><button type="button" class="icon-button" data-i18n-aria="action.more" aria-label="More actions">•••</button></td></tr>
+                <tr><td><div class="service-cell"><span class="service-mark">A</span><div><strong>NOsist</strong><small>AI Foundation</small></div></div></td><td>AI Platform</td><td><span class="status healthy"><i></i><span data-i18n="status.healthy">Healthy</span></span></td><td><time data-i18n="time.11m">11m ago</time></td><td><button type="button" class="icon-button" data-i18n-aria="action.more" aria-label="More actions">•••</button></td></tr>
+              </tbody>
+            </table>
+          </section>
+          <footer class="pagination"><span dir="auto" data-i18n="pagination.summary">1–4 of 24</span><div><button type="button" class="icon-button" data-i18n-aria="action.previousPage" aria-label="Previous page"><span class="logical-icon backward">→</span></button><button type="button" class="page-button" aria-current="page">1</button><button type="button" class="page-button">2</button><button type="button" class="page-button">3</button><button type="button" class="icon-button" data-i18n-aria="action.nextPage" aria-label="Next page"><span class="logical-icon">→</span></button></div></footer>
+        </section>
+      </div>
+    </section>
+    <section class="surface agent-surface" data-surface="agent" hidden>
+      <aside class="agent-nav">
+        <div class="sidebar-brand"><span class="brand-glyph">N</span><div><strong>NOsist</strong><small data-i18n="agent.brand.small">AGENT FOUNDATION</small></div></div>
+        <button type="button" class="new-run-button"><span aria-hidden="true">＋</span><span data-i18n="agent.newRun">New run</span><kbd>⌘K</kbd></button>
+        <nav aria-label="Agent workspace"><p data-i18n="agent.section.workspace">WORKSPACE</p><a href="#main" aria-current="page"><span>◉</span><span data-i18n="nav.conversation">Conversation</span></a><a href="#main"><span>▱</span><span data-i18n="nav.artifacts">Artifacts</span><b>1</b></a><a href="#main"><span>⌁</span><span data-i18n="nav.runs">Runs</span></a><a href="#main"><span>◇</span><span data-i18n="nav.workflows">Workflows</span></a><p data-i18n="agent.section.recent">RECENT</p><a href="#main"><span class="recent-dot healthy-dot"></span><span data-i18n="agent.recent.orchestration">Orchestration review</span></a><a href="#main"><span class="recent-dot"></span><span data-i18n="agent.recent.release">Release readiness</span></a></nav>
+        <div class="sidebar-foot"><span class="avatar">AM</span><div><strong>Ali Mohammadi</strong><small data-i18n="sidebar.platformOwner">Production</small></div><button type="button" class="icon-button" data-i18n-aria="action.accountMenu" aria-label="Account menu">•••</button></div>
+      </aside>
+      <section class="conversation-pane">
+        <header class="conversation-header"><div><h1 data-i18n="agent.title">Agent workspace</h1><p><span class="status healthy"><i></i><span data-i18n="agent.status.online">NOa / online</span></span><span class="technical" dir="ltr">gpt-5.6</span></p></div><div><button type="button" class="icon-button" data-i18n-aria="action.search" aria-label="Search">⌕</button><button type="button" class="icon-button" data-i18n-aria="common.more" aria-label="More">•••</button></div></header>
+        <div class="conversation-scroll">
+          <div class="conversation-intro"><p class="eyebrow">RUN / <bdi dir="ltr">run_01JY9A6F</bdi></p><h2 data-i18n="agent.run.title">Operational health review</h2><p data-i18n="agent.subtitle">Coordinate plans, tools, approvals, and artifacts without exposing implementation noise.</p></div>
+          <article class="message user-message"><header><span class="avatar">AM</span><div><strong data-i18n="agent.you">You</strong><time>10:42</time></div></header><p dir="auto" data-i18n="agent.message.user">Review today’s orchestration health and prepare an executive summary.</p></article>
+          <article class="message assistant-message"><header><span class="agent-avatar">N</span><div><strong>NOa</strong><span class="technical" dir="ltr">gpt-5.6</span></div></header>
+            <section class="plan-card"><header><div><span class="plan-icon">≡</span><div><strong data-i18n="agent.plan">Execution plan</strong><small data-i18n="agent.plan.progress">3 steps · 2 completed</small></div></div><button type="button" class="icon-button" data-i18n-aria="action.collapse" aria-label="Collapse">⌃</button></header><ol><li class="completed"><i>✓</i><span data-i18n="agent.plan.step1">Inspect service health</span><time dir="ltr">1.2s</time></li><li class="completed"><i>✓</i><span data-i18n="agent.plan.step2">Compare incidents and change history</span><time dir="ltr">2.8s</time></li><li class="running"><i></i><span data-i18n="agent.plan.step3">Prepare the decision brief</span><time data-i18n="status.running">Running</time></li></ol></section>
+            <details class="tool-card"><summary><span class="tool-icon">⌁</span><div><strong data-i18n="tool.title">Fetch service health</strong><small><bdi dir="ltr">mcp://noe-observability/service-health</bdi></small></div><span class="status healthy"><i></i><span data-i18n="tool.success">Telemetry retrieved</span></span><span>⌄</span></summary><div class="tool-body"><p data-i18n="tool.scope">Read-only access to service telemetry</p><dl><div><dt data-i18n="tool.scope.label">Scope</dt><dd><bdi dir="ltr">production/*</bdi></dd></div><div><dt data-i18n="tool.duration">Duration</dt><dd><bdi dir="ltr">1.2s</bdi></dd></div></dl></div></details>
+            <p dir="auto" data-i18n="agent.message.assistant">I found one degraded connector and two approvals that require attention. The executive summary is ready for review.</p>
+            <section class="approval-card"><header><span class="approval-icon">!</span><div><h3 data-i18n="approval.title">Approval required</h3><p data-i18n="approval.body">Publish the prepared executive brief to the leadership workspace.</p></div></header><dl><div><dt data-i18n="approval.target">Target</dt><dd><bdi dir="ltr">workspace://leadership/daily-brief</bdi></dd></div><div><dt data-i18n="approval.visibility">Visibility</dt><dd data-i18n="approval.visibility.value">Leadership</dd></div><div><dt data-i18n="approval.consequence">Consequence</dt><dd data-i18n="approval.consequence.value">Publishes a new shared artifact</dd></div></dl><footer><button type="button" class="accent-button" data-i18n="approval.once">Allow once</button><button type="button" class="compact-button" data-i18n="approval.session">Allow for session</button><button type="button" class="quiet-button" data-i18n="approval.deny">Deny</button></footer></section>
+          </article>
+        </div>
+        <form class="composer agent-composer" data-demo-composer><label class="sr-only" for="agent-prompt">Prompt</label><textarea id="agent-prompt" rows="3" dir="auto" data-i18n-placeholder="agent.composer.placeholder" placeholder="Ask NOa to investigate, plan, or execute…"></textarea><footer><div><button type="button" class="icon-button" data-i18n-aria="action.attach" aria-label="Attach">＋</button><button type="button" class="model-button"><span class="agent-avatar small">N</span><span class="technical" dir="ltr">gpt-5.6</span><span aria-hidden="true">⌄</span></button></div><button class="accent-button" type="submit"><span data-i18n="agent.send">Send</span><span class="logical-icon">→</span></button></footer></form>
+      </section>
+      <aside class="artifact-pane"><header><div><p class="eyebrow" data-i18n="artifact.section">ARTIFACT</p><h2 data-i18n="artifact.title">Executive brief</h2><small data-i18n="artifact.updated">Updated just now</small></div><div><button type="button" class="icon-button">↗</button><button type="button" class="icon-button">•••</button></div></header><article class="artifact-document"><p class="document-kicker" data-i18n="artifact.kicker">OPERATING ECOSYSTEM / DAILY BRIEF</p><h2 data-i18n="artifact.heading">Orchestration remains stable with one contained degradation.</h2><p data-i18n="artifact.body">Core service health is within objective. The degradation is isolated to a partner connector and has not affected critical customer paths.</p><div class="artifact-metrics"><div><span data-i18n="metric.reliability">Reliability</span><strong dir="ltr">99.97%</strong></div><div><span data-i18n="artifact.incidents">Active incidents</span><strong>1</strong></div><div><span data-i18n="nav.approvals">Approvals</span><strong>2</strong></div></div><h3 data-i18n="artifact.decisionPoints">Decision points</h3><ul><li data-i18n="artifact.decision1">Approve connector failover before the next traffic window.</li><li data-i18n="artifact.decision2">Publish the prepared partner communication after legal review.</li></ul><h3 data-i18n="artifact.technicalReference">Technical reference</h3><pre dir="ltr"><code>connector: partner-ledger-02
+status: degraded
+trace: 7f8d2b1c
+p95_latency_ms: 684</code></pre></article>
+        <section class="run-strip"><header><span><i class="running-dot"></i><span data-i18n="run.inspector">Run inspector</span></span><button type="button" class="icon-button">⌃</button></header><div><span data-i18n="table.status">Status</span><strong data-i18n="status.running">Running</strong><span data-i18n="run.elapsed">Elapsed</span><bdi dir="ltr">00:04:12</bdi><span data-i18n="run.tokens">Tokens</span><bdi dir="ltr">8,421</bdi></div></section>
+      </aside>
+    </section>
+    <section class="surface workflow-surface" data-surface="workflow" hidden>
+      <aside class="workflow-sidebar">
+        <div class="sidebar-brand"><span class="brand-glyph">N</span><div><strong>NOrchestration</strong><small data-i18n="workflow.brand.small">WORKFLOW STUDIO</small></div></div>
+        <div class="node-search"><span>⌕</span><input type="search" data-i18n-placeholder="workflow.searchNodes" placeholder="Search nodes" dir="auto" /></div>
+        <section><h2 data-i18n="workflow.section.triggers">TRIGGERS</h2><button type="button" draggable="true"><span class="node-symbol trigger-symbol">↯</span><div><strong data-i18n="workflow.node.request">Request</strong><small data-i18n="workflow.node.request.desc">Starts from an incoming request</small></div></button><button type="button" draggable="true"><span class="node-symbol trigger-symbol">◴</span><div><strong data-i18n="workflow.node.schedule">Schedule</strong><small data-i18n="workflow.node.schedule.desc">Starts on a time rule</small></div></button></section>
+        <section><h2 data-i18n="workflow.section.capabilities">CAPABILITIES</h2><button type="button" draggable="true"><span class="node-symbol agent-symbol">N</span><div><strong data-i18n="workflow.capability.agent">Agent</strong><small data-i18n="workflow.capability.agent.desc">Plans and reasons</small></div></button><button type="button" draggable="true"><span class="node-symbol tool-symbol">⌁</span><div><strong data-i18n="workflow.capability.tool">Tool</strong><small data-i18n="workflow.capability.tool.desc">Performs a bounded action</small></div></button><button type="button" draggable="true"><span class="node-symbol condition-symbol">◇</span><div><strong data-i18n="workflow.capability.condition">Condition</strong><small data-i18n="workflow.capability.condition.desc">Routes by evaluated state</small></div></button></section>
+      </aside>
+      <div class="workflow-main">
+        <header class="workflow-header"><div><button type="button" class="icon-button" data-i18n-aria="action.back" aria-label="Back"><span class="logical-icon backward">→</span></button><div><h1 data-i18n="workflow.title">Workflow builder</h1><p><span class="status healthy"><i></i><span data-i18n="workflow.saved">Saved</span></span><bdi dir="ltr">exec-health-review-v4</bdi></p></div></div><div><button type="button" class="compact-button" data-i18n="workflow.testRun">Test run</button><button type="button" class="accent-button" data-i18n="workflow.publish">Publish</button></div></header>
+        <div class="workflow-toolbar"><div><button type="button" class="icon-button" aria-label="Select">↖</button><button type="button" class="icon-button" aria-label="Pan">✥</button><button type="button" class="icon-button" aria-label="Add">＋</button></div><div><button type="button" class="icon-button" aria-label="Undo">↶</button><button type="button" class="icon-button" aria-label="Redo">↷</button></div></div>
+        <!-- biome-ignore lint/a11y/noNoninteractiveTabindex: focusable canvas landmark -->
+        <section class="canvas" aria-label="Workflow canvas" tabindex="0">
+          <svg class="edges" viewBox="0 0 1100 620" preserveAspectRatio="none" aria-hidden="true"><path d="M210 130 C310 130 290 250 390 250"/><path d="M570 250 C670 250 650 150 750 150"/><path d="M570 250 C670 250 650 390 750 390"/><path class="signal-edge" d="M930 150 C980 150 970 270 925 270"/><path d="M930 390 C980 390 970 270 925 270"/></svg>
+          <article class="canvas-node trigger-node" style="--inline: 4%; --block: 12%;"><header><span class="node-symbol trigger-symbol">↯</span><span data-i18n="workflow.kind.trigger">TRIGGER</span><button type="button">•••</button></header><strong data-i18n="workflow.trigger">Incoming request</strong><small><bdi dir="ltr">POST /agent/run</bdi></small><i class="port output-port"></i></article>
+          <article class="canvas-node agent-node selected" style="--inline: 35%; --block: 31%;"><header><span class="node-symbol agent-symbol">N</span><span data-i18n="workflow.kind.agent">AGENT</span><button type="button">•••</button></header><strong data-i18n="workflow.agent">Planning agent</strong><small><bdi dir="ltr">gpt-5.6 / balanced</bdi></small><i class="port input-port"></i><i class="port output-port"></i></article>
+          <article class="canvas-node condition-node" style="--inline: 67%; --block: 14%;"><header><span class="node-symbol condition-symbol">◇</span><span data-i18n="workflow.kind.condition">CONDITION</span><button type="button">•••</button></header><strong data-i18n="workflow.condition">Risk detected?</strong><small data-i18n="workflow.condition.rule"><bdi dir="ltr">severity ≥ medium</bdi></small><i class="port input-port"></i><i class="port output-port"></i></article>
+          <article class="canvas-node tool-node" style="--inline: 67%; --block: 57%;"><header><span class="node-symbol tool-symbol">⌁</span><span data-i18n="workflow.kind.tool">TOOL</span><button type="button">•••</button></header><strong data-i18n="workflow.tool">Health tool</strong><small><bdi dir="ltr">mcp://observability</bdi></small><i class="port input-port"></i><i class="port output-port"></i></article>
+          <article class="canvas-node output-node" style="--inline: 84%; --block: 36%;"><header><span class="node-symbol output-symbol">▱</span><span data-i18n="workflow.kind.output">OUTPUT</span><button type="button">•••</button></header><strong data-i18n="workflow.output">Decision brief</strong><small data-i18n="workflow.output.format">Artifact / Markdown</small><i class="port input-port"></i></article>
+          <div class="canvas-controls"><button type="button">＋</button><span>83%</span><button type="button">−</button><button type="button">⌖</button></div>
+        </section>
+      </div>
+      <aside class="workflow-inspector"><header><div><p class="eyebrow" data-i18n="inspector.selectedNode">SELECTED NODE</p><h2 data-i18n="inspector.title">Inspector</h2></div><button type="button" class="icon-button" aria-label="Close">×</button></header><div class="inspector-section"><label><span data-i18n="inspector.name">Name</span><input value="Planning agent" dir="auto" /></label><label><span data-i18n="inspector.model">Model</span><select><option>gpt-5.6</option></select></label><label><span data-i18n="inspector.reasoning">Reasoning</span><select><option data-i18n="inspector.balanced">Balanced</option></select></label></div><div class="inspector-section"><h3 data-i18n="inspector.permissions">Permissions</h3><label class="switch-row"><span><strong data-i18n="inspector.readTelemetry">Read telemetry</strong><small data-i18n="inspector.readTelemetry.desc">Access service metrics and traces</small></span><input type="checkbox" checked /></label><label class="switch-row"><span><strong data-i18n="inspector.publishArtifact">Publish artifact</strong><small data-i18n="inspector.publishArtifact.desc">Requires approval at runtime</small></span><input type="checkbox" checked /></label></div><div class="inspector-section"><label><span data-i18n="inspector.timeout">Timeout</span><div class="input-with-unit"><input value="120" inputmode="numeric" dir="ltr" /><span>s</span></div></label><label><span data-i18n="inspector.failurePath">Failure path</span><select><option data-i18n="inspector.routeHuman">Route to human review</option></select></label></div><footer><button type="button" class="quiet-button destructive" data-i18n="inspector.deleteNode">Delete node</button></footer></aside>
+    </section>
+  </main>
+  <footer class="site-footer"><span data-i18n="footer.note">One system. Built deliberately.</span><span><bdi dir="ltr">NOE / DS-001</bdi></span></footer>
+</body>
+</html>