myui · November 14, 2025 02:22
diff --git a/agentic_workflow.html b/agentic_workflow.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>Agentic Workflow — Why Workflows Still Win</title>
 <script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
  mermaid.initialize({
    startOnLoad: true,
    theme: 'default',
    flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'basis' },
    themeVariables: {
      primaryColor: '#e0e7ff',
      primaryTextColor: '#111827',
      primaryBorderColor: '#4F46E5',
      lineColor: '#64748b',
      secondaryColor: '#c7d2fe',
      tertiaryColor: '#a5b4fc',
      fontFamily: "Segoe UI, Hiragino Sans, Yu Gothic, system-ui, sans-serif"
    }
  });
 </script>
 <style>
  :root { --pri:#4F46E5; --ink:#111827; --mut:#6B7280; --ok:#10b981; --warn:#f59e0b; --bad:#ef4444; }
  * { box-sizing: border-box; }
  body { font-family: "Segoe UI","Hiragino Sans","Yu Gothic",system-ui,sans-serif; margin:0; color:var(--ink); background:#fff; }
  .deck { max-width: 1200px; margin: 0 auto; padding: 32px 20px 80px; }
  h1 { text-align:center; font-size: 2.3rem; margin: 6px 0 4px; }
  .subtitle { text-align:center; color:var(--mut); margin-bottom: 18px; }
  .thesis { background:#F9FAFB; border-left:6px solid var(--pri); padding:16px 18px; border-radius:8px; text-align:center; margin: 18px 0 28px; font-weight:600; }
  h2 { font-size:1.5rem; border-left:6px solid var(--pri); padding-left:12px; margin:30px 0 12px; }
  .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
  .card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
  .mermaid { background:#fff; border:1px dashed #e5e7eb; border-radius:8px; padding:8px; }
  table { width:100%; border-collapse: collapse; margin-top: 8px; font-size: 0.95em; }
  th, td { border:1px solid #e5e7eb; padding:10px; text-align:left; }
  th { background:#f3f4f6; }
  .chart-table { width:100%; border-collapse: collapse; margin-top: 8px; }
  .chart-table th, .chart-table td { padding:10px; border-bottom:1px solid #e5e7eb; vertical-align: middle; }
  .bar-container { background:#f3f4f6; height:18px; border-radius:9px; overflow:hidden; }
  .bar { height:100%; border-radius:9px; }
  .ok { background: var(--ok); }
  .warn { background: var(--warn); }
  .bad { background: var(--bad); }
  .small { color: var(--mut); font-size: 0.9em; }
  .checklist { display:grid; grid-template-columns: 24px 1fr; gap: 10px 12px; align-items: start; margin-top: 8px; }
  .check { font-weight:900; color: var(--ok); }
  .footer { text-align:right; color:var(--mut); font-size:0.9em; margin-top:28px; }
 </style>
 </head>
 <body>
  <div class="deck">
    <h1>Why Workflows Still Win in the Age of AI Agents</h1>
    <div class="subtitle">Balancing structure (determinism) and autonomy (reasoning)</div>
    <div class="thesis">Agentic Workflow = SuperAgent × Deterministic Workflow</div>

    <!-- Three workflow diagrams -->
    <h2>Three Approaches (with workflows)</h2>
    <div class="grid">
      <div class="card">
        <div style="font-weight:700; margin-bottom:6px;">A. Deterministic Workflow <span class="small">— LLM as one step</span></div>
        <pre class="mermaid">
 flowchart LR
  A["Trigger"] --> B["Get Data"]
  B --> C["LLM"]
  C --> D["Format"]
  D --> E["Send"]
        </pre>
        <div class="small">Autonomy: none / Fully predefined</div>
      </div>
      <div class="card">
        <div style="font-weight:700; margin-bottom:6px;">B. Agentic Workflow <span class="small">— SuperAgent inside workflow</span></div>
        <pre class="mermaid">
 flowchart TB
  A["Trigger"] --> B["Research Agent"]
  B --> C["Chat Model"]
  B --> D["Get Data"]
  B --> E["API Call"]
  C --> F["Markdown"]
  D --> F
  E --> F
  F --> G["Send"]
        </pre>
        <div class="small">Autonomy: moderate / Structured orchestration</div>
      </div>
      <div class="card">
        <div style="font-weight:700; margin-bottom:6px;">C. SuperAgent <span class="small">— Self-planning & tools</span></div>
        <pre class="mermaid">
 flowchart TB
  A["Trigger"] --> S["SuperAgent"]
  S --> C["Chat Model"]
  S --> D["Get Data"]
  S --> E["API"]
  S --> T["Think"]
  S --> M["Send Email"]
  S -.-> SA["Sub Agent"]
  S -.-> TN["Tool N"]
        </pre>
        <div class="small">Autonomy: high / Emergent control</div>
      </div>
    </div>

    <!-- Requested table with Key Insight -->
    <h2>Overview Table</h2>
    <table>
      <tr><th>Type</th><th>Control</th><th>Autonomy</th><th>Use Cases</th><th>Primary Strength</th></tr>
      <tr><td><b>Deterministic Workflow</b></td><td>Fully predefined</td><td>None</td><td>ETL, RPA, prompt chains</td><td>Reliable & auditable</td></tr>
      <tr><td><b>Agentic Workflow</b></td><td>Structured orchestration</td><td>Moderate</td><td>Research, synthesis, decision support</td><td>Balanced control & reasoning</td></tr>
      <tr><td><b>SuperAgent</b></td><td>Emergent control</td><td>High</td><td>Open-ended planning, long tasks</td><td>Autonomous & exploratory</td></tr>
    </table>
    <div class="small" style="margin-top:6px;">
      <b>Key Insight:</b> The choice between these approaches depends on your specific requirements for control, predictability, and flexibility.
      More autonomy isn't always better—it comes with trade-offs in cost, speed, and determinism.
    </div>

    <!-- Comparative metrics with measured values integrated -->
    <h2>Comparative Metrics (with measured values)</h2>
    <table class="chart-table">
      <tr><th>Metric</th><th>Deterministic Workflow</th><th>Agentic Workflow</th><th>SuperAgent</th></tr>
      <tr>
        <td>Context / Token Cost</td>
        <td><div class="bar-container"><div class="bar ok" style="width:28%"></div></div> Low<br><span class="small">4,543 tokens</span></td>
        <td><div class="bar-container"><div class="bar warn" style="width:58%"></div></div> Medium<br><span class="small">15,605 tokens</span></td>
        <td><div class="bar-container"><div class="bar bad" style="width:90%"></div></div> High<br><span class="small">30,204 tokens</span></td>
      </tr>
      <tr>
        <td>Processing Efficiency</td>
        <td><div class="bar-container"><div class="bar ok" style="width:88%"></div></div> Fast<br><span class="small">41 s</span></td>
        <td><div class="bar-container"><div class="bar warn" style="width:60%"></div></div> Moderate<br><span class="small">1m 09s</span></td>
        <td><div class="bar-container"><div class="bar bad" style="width:30%"></div></div> Slow<br><span class="small">1m 09s</span></td>
      </tr>
      <tr>
        <td>Accuracy / Success Rate</td>
        <td><div class="bar-container"><div class="bar warn" style="width:72%"></div></div> 98.4%</td>
        <td><div class="bar-container"><div class="bar ok" style="width:96%"></div></div> 100%</td>
        <td><div class="bar-container"><div class="bar ok" style="width:96%"></div></div> 100%</td>
      </tr>
      <tr>
        <td>Design / Maintenance Effort</td>
        <td><div class="bar-container"><div class="bar bad" style="width:90%"></div></div> High</td>
        <td><div class="bar-container"><div class="bar warn" style="width:60%"></div></div> Medium</td>
        <td><div class="bar-container"><div class="bar ok" style="width:30%"></div></div> Low</td>
      </tr>
    </table>

    <!-- Why Workflows Still Matter checklist -->
    <h2>Why Workflows Still Matter</h2>
    <div class="card">
      <div class="checklist">
        <div class="check">✓</div><div><b>Determinism & Reproducibility</b><br><span class="small">Predictable paths, safe retries. Critical for production systems where reliability is paramount.</span></div>
        <div class="check">✓</div><div><b>Observability & Auditing</b><br><span class="small">Step-level traces and HITL checkpoints. Essential for debugging and compliance.</span></div>
        <div class="check">✓</div><div><b>Guardrails & Compliance</b><br><span class="small">Policies enforced as code, not prompts. Ensures consistent application of business rules.</span></div>
        <div class="check">✓</div><div><b>Cost & Latency Control</b><br><span class="small">Minimize tokens by invoking LLMs only when necessary. Significant savings at scale.</span></div>
        <div class="check">✓</div><div><b>Progressive Autonomy</b><br><span class="small">Embed agents inside workflows; scale freedom with confidence. Start deterministic, add autonomy where it adds value.</span></div>
      </div>
    </div>

    <!-- Best Practices -->
    <h2>Best Practices</h2>
    <div class="card">
      <ul>
        <li><b>Start deterministic</b> for high-SLA paths; <b>introduce agentic steps</b> only where they measurably improve quality.</li>
        <li>Keep <b>guardrails as code</b>: policy checks, PII filters, rate limits, and approval gates.</li>
        <li>Instrument <b>traces at step granularity</b>; add HITL where correctness matters.</li>
        <li>Cache aggressively and <b>minimize context</b> to control token cost and latency.</li>
        <li>Adopt <b>progressive rollout</b>: offline eval → shadow → canary → full.</li>
      </ul>
    </div>

    <div class="thesis">Workflows are the backbone; Agents are the muscles.<br/>The future is <b>Agentic Workflow</b> — <span style="color:var(--pri);">SuperAgent × Deterministic Workflow</span>.</div>

    <div class="footer">© 2025 — Minimal, people-free diagrams</div>
  </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Agentic Workflow — Why Workflows Still Win</title>
	<script type="module">
	import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
	mermaid.initialize({
	startOnLoad: true,
	theme: 'default',
	flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'basis' },
	themeVariables: {
	primaryColor: '#e0e7ff',
	primaryTextColor: '#111827',
	primaryBorderColor: '#4F46E5',
	lineColor: '#64748b',
	secondaryColor: '#c7d2fe',
	tertiaryColor: '#a5b4fc',
	fontFamily: "Segoe UI, Hiragino Sans, Yu Gothic, system-ui, sans-serif"
	}
	});
	</script>
	<style>
	:root { --pri:#4F46E5; --ink:#111827; --mut:#6B7280; --ok:#10b981; --warn:#f59e0b; --bad:#ef4444; }
	* { box-sizing: border-box; }
	body { font-family: "Segoe UI","Hiragino Sans","Yu Gothic",system-ui,sans-serif; margin:0; color:var(--ink); background:#fff; }
	.deck { max-width: 1200px; margin: 0 auto; padding: 32px 20px 80px; }
	h1 { text-align:center; font-size: 2.3rem; margin: 6px 0 4px; }
	.subtitle { text-align:center; color:var(--mut); margin-bottom: 18px; }
	.thesis { background:#F9FAFB; border-left:6px solid var(--pri); padding:16px 18px; border-radius:8px; text-align:center; margin: 18px 0 28px; font-weight:600; }
	h2 { font-size:1.5rem; border-left:6px solid var(--pri); padding-left:12px; margin:30px 0 12px; }
	.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
	.card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
	.mermaid { background:#fff; border:1px dashed #e5e7eb; border-radius:8px; padding:8px; }
	table { width:100%; border-collapse: collapse; margin-top: 8px; font-size: 0.95em; }
	th, td { border:1px solid #e5e7eb; padding:10px; text-align:left; }
	th { background:#f3f4f6; }
	.chart-table { width:100%; border-collapse: collapse; margin-top: 8px; }
	.chart-table th, .chart-table td { padding:10px; border-bottom:1px solid #e5e7eb; vertical-align: middle; }
	.bar-container { background:#f3f4f6; height:18px; border-radius:9px; overflow:hidden; }
	.bar { height:100%; border-radius:9px; }
	.ok { background: var(--ok); }
	.warn { background: var(--warn); }
	.bad { background: var(--bad); }
	.small { color: var(--mut); font-size: 0.9em; }
	.checklist { display:grid; grid-template-columns: 24px 1fr; gap: 10px 12px; align-items: start; margin-top: 8px; }
	.check { font-weight:900; color: var(--ok); }
	.footer { text-align:right; color:var(--mut); font-size:0.9em; margin-top:28px; }
	</style>
	</head>
	<body>
	<div class="deck">
	<h1>Why Workflows Still Win in the Age of AI Agents</h1>
	<div class="subtitle">Balancing structure (determinism) and autonomy (reasoning)</div>
	<div class="thesis">Agentic Workflow = SuperAgent × Deterministic Workflow</div>

	<!-- Three workflow diagrams -->
	<h2>Three Approaches (with workflows)</h2>
	<div class="grid">
	<div class="card">
	<div style="font-weight:700; margin-bottom:6px;">A. Deterministic Workflow <span class="small">— LLM as one step</span></div>
	<pre class="mermaid">
	flowchart LR
	A["Trigger"] --> B["Get Data"]
	B --> C["LLM"]
	C --> D["Format"]
	D --> E["Send"]
	</pre>
	<div class="small">Autonomy: none / Fully predefined</div>
	</div>
	<div class="card">
	<div style="font-weight:700; margin-bottom:6px;">B. Agentic Workflow <span class="small">— SuperAgent inside workflow</span></div>
	<pre class="mermaid">
	flowchart TB
	A["Trigger"] --> B["Research Agent"]
	B --> C["Chat Model"]
	B --> D["Get Data"]
	B --> E["API Call"]
	C --> F["Markdown"]
	D --> F
	E --> F
	F --> G["Send"]
	</pre>
	<div class="small">Autonomy: moderate / Structured orchestration</div>
	</div>
	<div class="card">
	<div style="font-weight:700; margin-bottom:6px;">C. SuperAgent <span class="small">— Self-planning & tools</span></div>
	<pre class="mermaid">
	flowchart TB
	A["Trigger"] --> S["SuperAgent"]
	S --> C["Chat Model"]
	S --> D["Get Data"]
	S --> E["API"]
	S --> T["Think"]
	S --> M["Send Email"]
	S -.-> SA["Sub Agent"]
	S -.-> TN["Tool N"]
	</pre>
	<div class="small">Autonomy: high / Emergent control</div>
	</div>
	</div>

	<!-- Requested table with Key Insight -->
	<h2>Overview Table</h2>
	<table>
	<tr><th>Type</th><th>Control</th><th>Autonomy</th><th>Use Cases</th><th>Primary Strength</th></tr>
	<tr><td><b>Deterministic Workflow</b></td><td>Fully predefined</td><td>None</td><td>ETL, RPA, prompt chains</td><td>Reliable & auditable</td></tr>
	<tr><td><b>Agentic Workflow</b></td><td>Structured orchestration</td><td>Moderate</td><td>Research, synthesis, decision support</td><td>Balanced control & reasoning</td></tr>
	<tr><td><b>SuperAgent</b></td><td>Emergent control</td><td>High</td><td>Open-ended planning, long tasks</td><td>Autonomous & exploratory</td></tr>
	</table>
	<div class="small" style="margin-top:6px;">
	<b>Key Insight:</b> The choice between these approaches depends on your specific requirements for control, predictability, and flexibility.
	More autonomy isn't always better—it comes with trade-offs in cost, speed, and determinism.
	</div>

	<!-- Comparative metrics with measured values integrated -->
	<h2>Comparative Metrics (with measured values)</h2>
	<table class="chart-table">
	<tr><th>Metric</th><th>Deterministic Workflow</th><th>Agentic Workflow</th><th>SuperAgent</th></tr>
	<tr>
	<td>Context / Token Cost</td>
	<td><div class="bar-container"><div class="bar ok" style="width:28%"></div></div> Low<br><span class="small">4,543 tokens</span></td>
	<td><div class="bar-container"><div class="bar warn" style="width:58%"></div></div> Medium<br><span class="small">15,605 tokens</span></td>
	<td><div class="bar-container"><div class="bar bad" style="width:90%"></div></div> High<br><span class="small">30,204 tokens</span></td>
	</tr>
	<tr>
	<td>Processing Efficiency</td>
	<td><div class="bar-container"><div class="bar ok" style="width:88%"></div></div> Fast<br><span class="small">41 s</span></td>
	<td><div class="bar-container"><div class="bar warn" style="width:60%"></div></div> Moderate<br><span class="small">1m 09s</span></td>
	<td><div class="bar-container"><div class="bar bad" style="width:30%"></div></div> Slow<br><span class="small">1m 09s</span></td>
	</tr>
	<tr>
	<td>Accuracy / Success Rate</td>
	<td><div class="bar-container"><div class="bar warn" style="width:72%"></div></div> 98.4%</td>
	<td><div class="bar-container"><div class="bar ok" style="width:96%"></div></div> 100%</td>
	<td><div class="bar-container"><div class="bar ok" style="width:96%"></div></div> 100%</td>
	</tr>
	<tr>
	<td>Design / Maintenance Effort</td>
	<td><div class="bar-container"><div class="bar bad" style="width:90%"></div></div> High</td>
	<td><div class="bar-container"><div class="bar warn" style="width:60%"></div></div> Medium</td>
	<td><div class="bar-container"><div class="bar ok" style="width:30%"></div></div> Low</td>
	</tr>
	</table>

	<!-- Why Workflows Still Matter checklist -->
	<h2>Why Workflows Still Matter</h2>
	<div class="card">
	<div class="checklist">
	<div class="check">✓</div><div><b>Determinism & Reproducibility</b><br><span class="small">Predictable paths, safe retries. Critical for production systems where reliability is paramount.</span></div>
	<div class="check">✓</div><div><b>Observability & Auditing</b><br><span class="small">Step-level traces and HITL checkpoints. Essential for debugging and compliance.</span></div>
	<div class="check">✓</div><div><b>Guardrails & Compliance</b><br><span class="small">Policies enforced as code, not prompts. Ensures consistent application of business rules.</span></div>
	<div class="check">✓</div><div><b>Cost & Latency Control</b><br><span class="small">Minimize tokens by invoking LLMs only when necessary. Significant savings at scale.</span></div>
	<div class="check">✓</div><div><b>Progressive Autonomy</b><br><span class="small">Embed agents inside workflows; scale freedom with confidence. Start deterministic, add autonomy where it adds value.</span></div>
	</div>
	</div>

	<!-- Best Practices -->
	<h2>Best Practices</h2>
	<div class="card">
	<ul>
	<li><b>Start deterministic</b> for high-SLA paths; <b>introduce agentic steps</b> only where they measurably improve quality.</li>
	<li>Keep <b>guardrails as code</b>: policy checks, PII filters, rate limits, and approval gates.</li>
	<li>Instrument <b>traces at step granularity</b>; add HITL where correctness matters.</li>
	<li>Cache aggressively and <b>minimize context</b> to control token cost and latency.</li>
	<li>Adopt <b>progressive rollout</b>: offline eval → shadow → canary → full.</li>
	</ul>
	</div>

	<div class="thesis">Workflows are the backbone; Agents are the muscles.<br/>The future is <b>Agentic Workflow</b> — <span style="color:var(--pri);">SuperAgent × Deterministic Workflow</span>.</div>

	<div class="footer">© 2025 — Minimal, people-free diagrams</div>
	</div>
	</body>
	</html>
No results found