943 lines
138 KiB
HTML
943 lines
138 KiB
HTML
<!doctype html>
|
||
<!--
|
||
MIT License
|
||
|
||
Copyright (c) 2026 Michael Hönnig
|
||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||
of this software and associated documentation files (the "Software"), to deal
|
||
in the Software without restriction, including without limitation the rights
|
||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||
copies of the Software, and to permit persons to whom the Software is
|
||
furnished to do so, subject to the following conditions:
|
||
|
||
The above copyright notice and this permission notice shall be included in all
|
||
copies or substantial portions of the Software.
|
||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||
SOFTWARE.
|
||
-->
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Agentic AI Software Development Profiles — Vibe Coding vs. Vibe Engineering</title>
|
||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f2f9fa%22%2F%3E%3Cpath%20d%3D%22M12%2048V38H26V27H40V16H52V48Z%22%20fill%3D%22%23147f8e%22%2F%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2216%22%20r%3D%227%22%20fill%3D%22%23d58b32%22%20stroke%3D%22%23f2f9fa%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E">
|
||
<style>
|
||
:root{
|
||
--accent:#147f8e;--accent-dark:#0d6674;--accent-soft:#dceff1;--accent-faint:#f2f9fa;
|
||
--ai:#147f8e;--human:#d58b32;--overlap:#8064a2;--gap:#d9dde0;
|
||
--ink:#20262b;--muted:#677078;--line:#a8b0b6;--panel:#fff;--page:#f6f8f9;
|
||
--risk:#735c8d;--warning:#9a6b16;--warning-bg:#fbf3df;--good-bg:#edf7f7;
|
||
--shadow:0 8px 24px rgba(27,45,52,.08)
|
||
}
|
||
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--page);font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
|
||
button,select,input{font:inherit}.devapp{max-width:1480px;margin:0 auto;padding:28px 22px 40px}
|
||
.hero{text-align:center;margin:4px auto 22px;max-width:980px}.hero h1{margin:0 0 7px;font-size:clamp(30px,4.1vw,48px);line-height:1.05;letter-spacing:-.025em}.hero p{margin:0;color:var(--muted);font-size:15px}.hero .accent-rule{width:84px;height:4px;border-radius:99px;background:var(--accent);margin:14px auto 0}
|
||
.global-tabs{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:0 auto 18px;padding:6px;width:max-content;max-width:100%;background:#e9eef0;border:1px solid #d2d9dd;border-radius:12px}
|
||
.global-tabs button{border:0;background:transparent;color:#4e5961;padding:9px 14px;border-radius:8px;cursor:pointer;font-weight:700;white-space:nowrap}.global-tabs button.active{background:#fff;color:var(--accent-dark);box-shadow:0 1px 5px rgba(0,0,0,.08)}
|
||
.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.scenario{min-width:0;background:var(--panel);border:1px solid #c9d0d4;border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
|
||
.scenario-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid #d5dade;background:linear-gradient(180deg,#fff,var(--accent-faint))}.scenario-title{display:flex;align-items:center;gap:10px;min-width:0}.scenario-badge{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--accent);color:#fff;font-weight:800;flex:none}.scenario-name{font-size:18px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scenario-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}.scenario-actions select,.scenario-actions button,.sim-actions button{border:1px solid #b9c2c7;border-radius:8px;background:#fff;color:var(--ink);padding:7px 9px;cursor:pointer}.scenario-actions button:hover,.sim-actions button:hover{border-color:var(--accent);color:var(--accent-dark)}
|
||
.tab-pane{display:none;padding:16px}.tab-pane.active{display:block}
|
||
.control-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.control-box{border:1px solid #d3d9dc;border-radius:10px;padding:12px;background:#fff}.control-box h3{margin:0 0 10px;font-size:15px}.control-box.ai h3{color:var(--ai)}.control-box.human h3{color:var(--human)}.control-box label{display:grid;gap:5px;margin:10px 0}.control-box label>span{display:flex;justify-content:space-between;gap:10px}.control-box output{color:var(--muted);font-variant-numeric:tabular-nums}input[type=range]{width:100%}.ai input[type=range]{accent-color:var(--ai)}.human input[type=range]{accent-color:var(--human)}.status{height:27px;margin-top:8px;padding:5px 8px;border-radius:7px;background:#f1f4f5;color:var(--muted);font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status.warning{background:var(--warning-bg);color:var(--warning)}
|
||
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:13px 0}.metric{border:1px solid #d2d8dc;border-radius:10px;padding:10px;background:#fff}.metric-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}.metric-value{font-size:20px;overflow-wrap:anywhere;font-weight:850;margin:2px 0 6px;font-variant-numeric:tabular-nums}.meter{height:8px;background:#e7ebed;border-radius:99px;overflow:hidden}.meter>i{display:block;height:100%;width:0;background:var(--accent)}.metric.risk .meter>i{background:var(--risk)}.metric-note{margin-top:5px;font-size:11px;color:var(--muted)}.metric-label,.sim-stat span{display:flex;align-items:center;gap:5px}.help{display:inline-grid;place-items:center;width:15px;height:15px;border:1px solid #9aa6ac;border-radius:50%;color:#65727a;font-size:10px;font-weight:800;line-height:1;cursor:help;text-transform:none;letter-spacing:0}.help:hover{border-color:var(--accent);color:var(--accent-dark)}
|
||
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:12px 0 8px}.section-title h3{margin:0;font-size:14px}.section-title small{color:var(--muted)}.authorship-list,.coverage-list{display:grid;gap:7px}.data-row{display:grid;grid-template-columns:minmax(125px,1fr) minmax(170px,1.3fr);gap:10px;align-items:center}.data-row .label{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stackbar,.coveragebar{display:grid;gap:2px;height:22px}.stackbar{grid-template-columns:repeat(10,1fr)}.coveragebar{grid-template-columns:repeat(12,1fr)}.seg{border:1px solid rgba(30,40,44,.16);background:var(--gap)}.seg.ai{background:var(--ai)}.seg.human{background:var(--human)}.seg.overlap{background:repeating-linear-gradient(135deg,var(--overlap) 0 7px,#fff 7px 9px,var(--overlap) 9px 16px)}
|
||
.practice-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;margin-bottom:10px;border-radius:9px;background:var(--accent-faint);border:1px solid var(--accent-soft)}.practice-summary strong{color:var(--accent-dark)}.practice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.practice{display:flex;gap:9px;align-items:flex-start;padding:10px;border:1px solid #d5dbde;border-radius:9px;cursor:pointer;background:#fff}.practice:hover{border-color:#9fb8bd}.practice input{margin-top:2px;accent-color:var(--accent)}.practice strong{display:block;font-size:13px}.practice small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.practice.on{background:var(--good-bg);border-color:#9cc7cd}.practice .tag{display:inline-block;margin-top:5px;padding:1px 6px;border-radius:99px;background:#edf0f2;color:#5b656c;font-size:10px;font-weight:800}
|
||
.sim-top{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:10px}.sim-stat{background:#f4f7f8;border:1px solid #d8dee1;border-radius:8px;padding:7px;text-align:center}.sim-stat b{display:block;font-size:15px}.sim-stat span{font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:.05em}.canvas-wrap{position:relative;border:1px solid #cfd7db;border-radius:11px;overflow:hidden;background:radial-gradient(circle at 76% 28%,rgba(20,127,142,.08),transparent 24%),linear-gradient(#fff,#fbfcfc)}canvas{display:block;width:100%;height:330px}.sim-caption{padding:9px 11px;border-top:1px solid #d7dde0;color:var(--muted);font-size:12px}.sim-progress{margin-right:auto;align-self:center;color:var(--muted);font-size:12px}.sim-actions button:disabled{opacity:.55;cursor:default}.sim-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:9px;flex-wrap:wrap}
|
||
.coverage-note{margin-bottom:10px;padding:9px 11px;border-left:4px solid var(--accent);background:var(--accent-faint);color:#47545b;font-size:12px}.legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:11px;color:var(--muted);font-size:11px}.legend span{display:flex;align-items:center;gap:6px}.sw{width:18px;height:14px;border:1px solid rgba(30,40,44,.18)}.sw.ai{background:var(--ai)}.sw.human{background:var(--human)}.sw.gap{background:var(--gap)}.sw.overlap{background:repeating-linear-gradient(135deg,var(--overlap) 0 6px,#fff 6px 8px,var(--overlap) 8px 14px)}.coverage-detail{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;align-items:center}.coverage-detail .pct{display:inline-flex;align-items:center;gap:4px;min-width:48px;justify-content:flex-end;color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px;font-weight:700;cursor:help}.coverage-detail .pct.overlap-pct{color:var(--overlap)}.coverage-detail .pct.gap-pct{color:#687178}
|
||
.compare-strip{margin-top:18px;background:#fff;border:1px solid #ccd4d8;border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}.compare-strip h2{margin:0 0 9px;font-size:14px;color:var(--accent-dark)}.compare-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.compare-card{background:#f7f9fa;border:1px solid #dce1e4;border-radius:8px;padding:8px 10px}.compare-card span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em}.compare-card b{font-size:13px}.model-note{max-width:980px;margin:14px auto 0;text-align:center;color:var(--muted);font-size:11px}.model-note strong{color:var(--accent-dark)}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:18px 0 0;padding:14px 2px 0;border-top:1px solid #d7dde0;color:var(--muted);font-size:12px}.site-footer a{color:inherit;text-decoration:none}.site-footer a:hover,.site-footer a:focus-visible{color:var(--accent-dark);text-decoration:underline}.site-footer-right{display:flex;align-items:center;gap:7px;white-space:nowrap}@media(max-width:620px){.site-footer{align-items:flex-start;flex-direction:column}.site-footer-right{align-self:flex-start}}
|
||
@media(max-width:1050px){.comparison-grid{grid-template-columns:1fr}.compare-cards{grid-template-columns:1fr 1fr}}@media(max-width:620px){.devapp{padding:18px 10px 28px}.control-columns,.practice-grid,.metrics{grid-template-columns:1fr}.scenario-head{grid-template-columns:1fr}.scenario-actions{justify-content:flex-start}.data-row{grid-template-columns:1fr}.sim-top,.compare-cards{grid-template-columns:1fr 1fr}}
|
||
|
||
[hidden]{display:none!important}
|
||
.view-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}
|
||
.view-heading h2{margin:0;font-size:22px;color:var(--accent-dark)}
|
||
.nav-arrow{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:1px solid #c6cdd1;border-radius:9px;background:#e9edef;color:#4e5961;text-decoration:none;font:26px/1 system-ui;cursor:pointer}
|
||
.nav-arrow:hover{background:#dce3e7;border-color:#8b9ba3;color:#0d6674}
|
||
.nav-arrow:focus-visible{outline:3px solid #147f8e;outline-offset:3px}
|
||
|
||
.hero{max-width:none}
|
||
.hero-heading{position:relative;padding:0 56px;font-size:clamp(30px,4.1vw,48px);line-height:1.05}
|
||
.hero-heading h1{font-size:inherit;line-height:inherit}
|
||
.hero-heading .nav-arrow{position:absolute;right:0;top:clamp(15.75px,2.1525vw,25.2px);transform:translateY(-50%)}
|
||
@media(max-width:620px){.hero-heading{padding:0 54px 0 0}}
|
||
#staircase-view{width:100%;height:1200px;border:0;display:block}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="devapp">
|
||
<header class="hero"><div class="hero-heading"><h1>Agentic AI Software Development Profiles</h1><a class="nav-arrow" id="practices-heading" href="#engineering-activities" aria-label="Engineering Activities by Software Criticality" title="Engineering Activities by Software Criticality">→</a></div><p>Vibe Coding vs. Vibe Engineering — with traditional development without AI for comparison.</p><p style="margin-top:8px;font-size:13px">Compare how capability, delegation, involvement and engineering practices affect authorship, coverage, risk and delivery speed.</p><div class="accent-rule"></div></header>
|
||
<nav class="global-tabs" aria-label="Comparison view"><button class="active" data-tab="profile">Profile</button><button data-tab="practices">Engineering Practices</button><button data-tab="iterations">Iterative Development</button><button data-tab="coverage">Engineering Coverage</button></nav>
|
||
<main class="comparison-grid">
|
||
<section class="scenario" data-side="left"><header class="scenario-head"><div class="scenario-title"><span class="scenario-badge">A</span><span class="scenario-name">Vibe Coding</span></div><div class="scenario-actions"><select class="preset" title="Choose a preset as the starting configuration for Scenario A"></select><button class="copy" data-to="right" title="Copy all settings and engineering practices from Scenario A to Scenario B">Copy →</button><button class="reset" title="Restore Scenario A to its original preset and settings">Reset</button></div></header><div class="tab-pane active" data-pane="profile"></div><div class="tab-pane" data-pane="practices"></div><div class="tab-pane" data-pane="iterations"></div><div class="tab-pane" data-pane="coverage"></div></section>
|
||
<section class="scenario" data-side="right"><header class="scenario-head"><div class="scenario-title"><span class="scenario-badge">B</span><span class="scenario-name">Vibe Engineering</span></div><div class="scenario-actions"><select class="preset" title="Choose a preset as the starting configuration for Scenario B"></select><button class="copy" data-to="left" title="Copy all settings and engineering practices from Scenario B to Scenario A">← Copy</button><button class="reset" title="Restore Scenario B to its original preset and settings">Reset</button></div></header><div class="tab-pane active" data-pane="profile"></div><div class="tab-pane" data-pane="practices"></div><div class="tab-pane" data-pane="iterations"></div><div class="tab-pane" data-pane="coverage"></div></section>
|
||
</main>
|
||
<section class="compare-strip"><h2>Live comparison</h2><div class="compare-cards"><div class="compare-card"><span>Risk</span><b id="cmpRisk">—</b></div><div class="compare-card"><span>Efficiency gain</span><b id="cmpEff">—</b></div><div class="compare-card"><span title="Estimated end-to-end delivery speed relative to a capable no-AI baseline">Delivery speed</span><b id="cmpSpeed">—</b></div><div class="compare-card"><span>Uncontrolled gap</span><b id="cmpGap">—</b></div></div></section>
|
||
<p class="model-note"><strong>Illustrative model, not a benchmark.</strong> The calculations are intentionally heuristic: the goal is a plausible visual explanation of different development styles, not a predictive simulation.</p>
|
||
<footer class="site-footer">
|
||
<div class="site-footer-left">(C) 2026 <a href="https://michael.hoennig.de/" rel="author">Michael Hönnig</a></div>
|
||
<div class="site-footer-right">
|
||
<a href="https://michael.hoennig.de/en/imprint/">Imprint</a>
|
||
<span aria-hidden="true">-</span>
|
||
<a href="https://michael.hoennig.de/en/privacy-policy/">Privacy</a>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
<script>
|
||
(() => {
|
||
const ASPECTS=[
|
||
{id:'problem',label:'Problem analysis',ai:.80,human:.98,bias:.62,risk:1.00,overlap:.14,practice:'problem',humanAuthorshipFloor:.55},
|
||
{id:'tech',label:'Tool / technology selection',ai:.74,human:1.00,bias:.60,risk:.85,overlap:.10,practice:'tech'},
|
||
{id:'architecture',label:'Architecture',ai:.91,human:1.04,bias:.80,risk:1.22,overlap:.20,practice:'architecture'},
|
||
{id:'api',label:'API design',ai:.94,human:1.02,bias:.90,risk:1.15,overlap:.18,practice:'api'},
|
||
{id:'code',label:'Production code',ai:1.06,human:.88,bias:1.13,risk:1.15,overlap:.14,practice:'code'},
|
||
{id:'behavior',label:'Behavior / acceptance tests',ai:.90,human:1.08,bias:.96,risk:1.08,overlap:.18,practice:'behavior'},
|
||
{id:'tests',label:'Integration / unit tests',ai:1.02,human:.76,bias:1.08,risk:.88,overlap:.10,practice:'tests'},
|
||
{id:'security',label:'Security audit',ai:.72,human:1.06,bias:.70,risk:1.35,overlap:.24,practice:'security'},
|
||
{id:'accessibility',label:'Accessibility review',ai:.78,human:.94,bias:.78,risk:.78,overlap:.14,practice:'accessibility'},
|
||
{id:'performance',label:'Performance review',ai:.86,human:.96,bias:.84,risk:.92,overlap:.16,practice:'performance'},
|
||
{id:'quality',label:'Automated quality checks',ai:1.10,human:.82,bias:1.16,risk:.86,overlap:.08,practice:'quality'},
|
||
{id:'tooling',label:'Tooling / helper scripts',ai:1.10,human:.64,bias:1.20,risk:.55,overlap:.06,practice:'tooling'}];
|
||
const PRACTICES=[
|
||
{id:'problem',label:'Problem analysis',hint:'Explicitly clarify goals, constraints and acceptance criteria.',tag:'Intent'},
|
||
{id:'tech',label:'Technology review',hint:'Evaluate languages, frameworks and tools before implementation.',tag:'Design'},
|
||
{id:'architecture',label:'Architecture review',hint:'Review boundaries, coupling, data flow and structural decisions.',tag:'Review'},
|
||
{id:'api',label:'API review',hint:'Check semantics, consistency, compatibility and usability.',tag:'Review'},
|
||
{id:'code',label:'Production code review',hint:'Inspect implementation choices instead of only external behavior.',tag:'Review'},
|
||
{id:'behavior',label:'Behavior-driven tests',hint:'Verify externally visible behavior and business scenarios.',tag:'Test'},
|
||
{id:'tests',label:'Integration / unit tests',hint:'Exercise lower-level integration and implementation behavior.',tag:'Test'},
|
||
{id:'security',label:'Security audit',hint:'Explicitly evaluate attack surface, permissions and misuse cases.',tag:'Audit'},
|
||
{id:'accessibility',label:'Accessibility review',hint:'Check keyboard use, semantics, contrast and assistive technology.',tag:'Audit'},
|
||
{id:'performance',label:'Performance review',hint:'Measure or reason about latency, throughput and resource use.',tag:'Audit'},
|
||
{id:'quality',label:'Automated quality checks',hint:'Linting, coding style, complexity, static analysis and project rules.',tag:'Check'},
|
||
{id:'tooling',label:'Tooling / helper scripts review',hint:'Review generated scripts and developer tooling where relevant.',tag:'Review'}];
|
||
const allOn=Object.fromEntries(PRACTICES.map(p=>[p.id,true])),mostlyOff=Object.fromEntries(PRACTICES.map(p=>[p.id,false]));
|
||
const PRESETS={
|
||
vibe:{label:'Vibe Coding',aiCapability:88,aiDelegation:98,humanCapability:8,humanInvolvement:10,practices:{...mostlyOff,problem:true}},
|
||
engineering:{label:'Vibe Engineering',aiCapability:88,aiDelegation:96,humanCapability:94,humanInvolvement:80,practices:{...allOn}},
|
||
junior:{label:'Traditional · Junior',aiCapability:0,aiDelegation:0,humanCapability:36,humanInvolvement:100,practices:{...mostlyOff,problem:true,tests:true,quality:true}},
|
||
senior:{label:'Traditional · Senior',aiCapability:0,aiDelegation:0,humanCapability:82,humanInvolvement:100,practices:{...allOn,accessibility:false}},
|
||
distinguished:{label:'Traditional · Distinguished',aiCapability:0,aiDelegation:0,humanCapability:98,humanInvolvement:100,practices:{...allOn}},
|
||
assisted:{label:'AI-assisted Engineering',aiCapability:88,aiDelegation:55,humanCapability:88,humanInvolvement:88,practices:{...allOn,accessibility:false,performance:false}}};
|
||
const initial={left:'vibe',right:'engineering'},states={};let activeTab='profile';
|
||
const clamp=(x,min=0,max=1)=>Math.max(min,Math.min(max,x));const clone=o=>JSON.parse(JSON.stringify(o));
|
||
function delegatedShare(d,bias){if(d<=0)return 0;if(d>=1)return 1;const odds=d/(1-d),bo=odds*bias;return bo/(1+bo)}
|
||
|
||
function speedDisplay(m){
|
||
if(m.deliveryKind==='enabling') return {value:'Enabling',note:'No meaningful no-AI baseline for this user'};
|
||
if(m.deliveryKind==='baseline') return {value:'1×',note:'No-AI baseline'};
|
||
return {value:`${m.deliverySpeed.toFixed(m.deliverySpeed<10?1:0)}×`,note:'Relative to capable no-AI delivery'};
|
||
}
|
||
function efficiencyDisplay(m){
|
||
if(m.deliveryKind==='enabling') return {value:'Enabling',note:'AI enables delivery; no meaningful no-AI efficiency baseline'};
|
||
if(m.deliveryKind==='baseline') return {value:'0%',note:'No AI productivity gain'};
|
||
return {value:`${m.efficiency>=0?'+':''}${Math.round(m.efficiency*100)}%`,note:'Human effort leverage'};
|
||
}
|
||
function applyPreset(side,key){const p=PRESETS[key];states[side]={preset:key,name:p.label,aiCapability:p.aiCapability,aiDelegation:p.aiDelegation,humanCapability:p.humanCapability,humanInvolvement:p.humanInvolvement,practices:clone(p.practices),seed:side==='left'?1107:2209,simProgress:null};renderScenario(side,true)}
|
||
function compute(s){
|
||
const CA=s.aiCapability/100;
|
||
const DA=s.aiDelegation/100;
|
||
const CH=s.humanCapability/100;
|
||
const IH=s.humanInvolvement/100;
|
||
const aiOver=Math.max(0,DA-CA);
|
||
const humanOver=Math.max(0,IH-CH);
|
||
|
||
let riskSum=0,weight=0,gapSum=0,overlapSum=0,aiShareSum=0;
|
||
const rows=[];
|
||
|
||
for(const a of ASPECTS){
|
||
const explicit=s.practices[a.practice]?1:0;
|
||
|
||
let aiShare=delegatedShare(DA,a.bias);
|
||
if(explicit&&a.humanAuthorshipFloor){
|
||
aiShare=Math.min(aiShare,1-a.humanAuthorshipFloor);
|
||
}
|
||
|
||
const humanShare=1-aiShare;
|
||
// Authorship describes work performed, not how reliably it is assured.
|
||
// Coding and problem solving happen implicitly; unchecked assurance
|
||
// activities are omitted. Some design work happens without formal review.
|
||
const implicitWork={problem:1,tech:.5,architecture:.5,api:.5,code:1,tooling:.25};
|
||
const activityExtent=explicit?1:(implicitWork[a.id]??0);
|
||
const execution=activityExtent*clamp(DA+IH*(1-DA));
|
||
const humanEffort=(1-aiShare)*IH;
|
||
const aiEffort=aiShare;
|
||
const totalEffort=aiEffort+humanEffort;
|
||
const authoredAI=totalEffort?execution*aiEffort/totalEffort:0;
|
||
const authoredHuman=totalEffort?execution*humanEffort/totalEffort:0;
|
||
const notPerformed=1-authoredAI-authoredHuman;
|
||
|
||
const aiAttention=.66+.34*explicit;
|
||
const humanAttention=.72+.28*explicit;
|
||
|
||
const aiCoverage=clamp(CA*DA*a.ai*aiAttention);
|
||
const humanCoverage=clamp(CH*IH*a.human*humanAttention);
|
||
|
||
const overlap=Math.max(0,aiCoverage+humanCoverage-1);
|
||
const gap=Math.max(0,1-aiCoverage-humanCoverage);
|
||
const overlapShortfall=
|
||
Math.max(0,a.overlap-overlap)/Math.max(.001,a.overlap);
|
||
|
||
const localOver=
|
||
aiOver*aiShare +
|
||
humanOver*humanShare;
|
||
|
||
const omitted=explicit?0:.07;
|
||
|
||
const rowRisk=clamp(
|
||
gap*.52 +
|
||
overlapShortfall*.17 +
|
||
localOver*.38 +
|
||
omitted
|
||
);
|
||
|
||
riskSum+=rowRisk*a.risk;
|
||
weight+=a.risk;
|
||
gapSum+=gap*a.risk;
|
||
overlapSum+=overlap*a.risk;
|
||
aiShareSum+=aiShare*a.risk;
|
||
|
||
rows.push({
|
||
aspect:a,
|
||
explicit,
|
||
aiShare,
|
||
authoredAI,
|
||
authoredHuman,
|
||
notPerformed,
|
||
aiCoverage,
|
||
humanCoverage,
|
||
overlap,
|
||
gap,
|
||
rowRisk
|
||
});
|
||
}
|
||
|
||
const risk=clamp(riskSum/weight);
|
||
const gap=clamp(gapSum/weight);
|
||
const overlap=clamp(overlapSum/weight);
|
||
const avgAIShare=clamp(aiShareSum/weight);
|
||
|
||
const guidance=clamp(CH*IH);
|
||
|
||
// Practices such as behavior tests, automated checks and reviews preserve
|
||
// already achieved behavior. Without them, later changes can re-break
|
||
// something that had worked before.
|
||
const regressionWeights={
|
||
behavior:1.45,
|
||
tests:1.30,
|
||
quality:1.25,
|
||
code:1.05,
|
||
architecture:.90,
|
||
api:.75
|
||
};
|
||
|
||
let regressionDone=0,regressionTotal=0;
|
||
for(const [id,w] of Object.entries(regressionWeights)){
|
||
regressionTotal+=w;
|
||
if(s.practices[id]) regressionDone+=w;
|
||
}
|
||
|
||
const regressionProtection=
|
||
regressionTotal ? regressionDone/regressionTotal : 0;
|
||
|
||
const regression=clamp(
|
||
(1-regressionProtection) *
|
||
(.42+.30*DA) *
|
||
(.70+.30*(1-guidance)) +
|
||
risk*.09
|
||
);
|
||
|
||
// -------------------------------------------------------------------------
|
||
// EFFICIENCY GAIN
|
||
//
|
||
// This explicitly models HUMAN effort saved.
|
||
//
|
||
// Lower Human Involvement immediately reduces review / coordination effort,
|
||
// so efficiency rises noticeably at first. Only when engineering risk gets
|
||
// too high does expected rework eat into that gain.
|
||
// -------------------------------------------------------------------------
|
||
let efficiency;
|
||
|
||
if(DA<=.001){
|
||
efficiency=0;
|
||
} else {
|
||
const directHumanWork=1-avgAIShare;
|
||
|
||
// Human involvement on AI-authored work is valuable engineering work, but
|
||
// it still consumes human time. The coefficient keeps 100% involvement
|
||
// from meaning "the human rewrites everything".
|
||
const reviewAndGuidanceEffort=
|
||
avgAIShare * IH * .38;
|
||
|
||
const humanEffort=
|
||
clamp(directHumanWork + reviewAndGuidanceEffort,0,1.25);
|
||
|
||
const grossGain=
|
||
clamp(1-humanEffort,-.25,1);
|
||
|
||
// Weak AI converts saved human effort into useful output less efficiently.
|
||
const capabilityFactor=
|
||
.45+.55*CA;
|
||
|
||
// Rework penalty starts only once risk becomes material.
|
||
// Below 30% risk there is intentionally no risk penalty.
|
||
const riskExcess=
|
||
Math.max(0,(risk-.30)/.70);
|
||
|
||
const regressionExcess=
|
||
Math.max(0,(regression-.35)/.65);
|
||
|
||
const reworkPenalty=
|
||
.88*Math.pow(riskExcess,2) +
|
||
.24*Math.pow(regressionExcess,2) +
|
||
.18*aiOver;
|
||
|
||
efficiency=clamp(
|
||
grossGain*capabilityFactor-reworkPenalty,
|
||
-.25,
|
||
1
|
||
);
|
||
}
|
||
|
||
// -------------------------------------------------------------------------
|
||
// DELIVERY SPEED
|
||
//
|
||
// Base implementation speed depends on AI capability + delegation, not on
|
||
// Human Involvement. Reducing review does NOT make the AI type faster.
|
||
//
|
||
// Delivery only gets slower once engineering risk becomes large enough that
|
||
// rework and regressions dominate. This creates a broad plateau followed by
|
||
// a nonlinear drop rather than a slow continuous decline.
|
||
// -------------------------------------------------------------------------
|
||
let deliverySpeed,deliveryKind='factor';
|
||
|
||
if(DA<=.001){
|
||
deliverySpeed=1;
|
||
deliveryKind='baseline';
|
||
} else {
|
||
const productiveAI=
|
||
clamp(DA*CA);
|
||
|
||
const baseSpeed=
|
||
1+31*Math.pow(productiveAI,1.75);
|
||
|
||
// Treat regression as part of delivery risk, but give the aggregate
|
||
// engineering-risk metric the dominant weight.
|
||
const deliveryRisk=
|
||
clamp(risk*.78+regression*.22);
|
||
|
||
// No delivery-speed penalty at all up to 30% risk.
|
||
// Above that threshold the penalty increases quadratically.
|
||
const riskExcess=
|
||
Math.max(0,(deliveryRisk-.30)/.70);
|
||
|
||
const riskPenalty=
|
||
clamp(1-.82*Math.pow(riskExcess,2),.18,1);
|
||
|
||
deliverySpeed=
|
||
clamp(baseSpeed*riskPenalty,.5,32);
|
||
|
||
// With very low human capability there is no honest same-person no-AI
|
||
// baseline: AI is enabling the work rather than merely accelerating it.
|
||
if(CH<.20&&DA>.60){
|
||
deliveryKind='enabling';
|
||
}
|
||
}
|
||
|
||
const spread=clamp(
|
||
avgAIShare*(1-CA)*.72 +
|
||
(1-avgAIShare)*(1-CH)*.48 +
|
||
risk*.28 +
|
||
regression*.22
|
||
);
|
||
|
||
const convergence=clamp(
|
||
.20 +
|
||
CA*DA*.35 +
|
||
guidance*.38 +
|
||
(1-risk)*.24 -
|
||
regression*.26
|
||
);
|
||
|
||
const drift=clamp(
|
||
gap*.46 +
|
||
risk*.22 +
|
||
(1-overlap)*.06 +
|
||
regression*.32
|
||
);
|
||
|
||
// Discovery can substantially change the goal in every development style.
|
||
// Initial learning is independent of capability, delegation and involvement.
|
||
const targetShift=.80;
|
||
// Explicit analysis and behavioral feedback help discoveries settle later.
|
||
const targetDecay=.84
|
||
-(s.practices.problem?.08:0)
|
||
-(s.practices.behavior?.10:0);
|
||
|
||
const speedNorm=clamp(
|
||
(Math.log(deliverySpeed)-Math.log(.5)) /
|
||
(Math.log(32)-Math.log(.5))
|
||
);
|
||
|
||
const stepSize=.045+.205*speedNorm;
|
||
|
||
// Fast implementation reduces productive steps, while regression and risk
|
||
// add rework iterations.
|
||
const iterations=Math.round(
|
||
clamp(
|
||
18-11*speedNorm+
|
||
regression*8+
|
||
risk*4,
|
||
7,
|
||
24
|
||
)
|
||
);
|
||
|
||
return{
|
||
rows,
|
||
risk,
|
||
gap,
|
||
overlap,
|
||
avgAIShare,
|
||
efficiency,
|
||
deliverySpeed,
|
||
deliveryKind,
|
||
spread,
|
||
guidance,
|
||
convergence,
|
||
drift,
|
||
regression,
|
||
targetShift,
|
||
targetDecay,
|
||
stepSize,
|
||
iterations,
|
||
aiOver,
|
||
humanOver
|
||
};
|
||
}
|
||
function options(selected){return Object.entries(PRESETS).map(([k,p])=>`<option value="${k}" ${k===selected?'selected':''}>${p.label}</option>`).join('')+`<option value="custom" ${selected==='custom'?'selected':''}>Custom</option>`}
|
||
function status(actor,over,noun){return over<=.001?'<div class="status" title="Responsibility does not exceed capability">Within capability</div>':`<div class="status warning" title="${actor} overstretch: ${Math.round(over*100)}% ${noun} beyond capability">${actor} overstretch: ${Math.round(over*100)}% ${noun} > capability</div>`}
|
||
function meter(v){return `<div class="meter"><i style="width:${clamp(v)*100}%"></i></div>`}
|
||
function bar(types,cls){return `<div class="${cls}">${types.map(t=>`<i class="seg ${t}"></i>`).join('')}</div>`}
|
||
function authTypes(r){const ai=Math.round(r.authoredAI*10),human=Math.min(10-ai,Math.round(r.authoredHuman*10));return Array.from({length:10},(_,i)=>i<ai?'ai':i<10-human?'gap':'human')}
|
||
function covTypes(aiCov,hCov){const ae=clamp(aiCov),hs=1-clamp(hCov);return Array.from({length:12},(_,i)=>{const x=(i+.5)/12,a=x<=ae,h=x>=hs;return a&&h?'overlap':a?'ai':h?'human':'gap'})}
|
||
function profile(s,m){return `<div class="control-columns"><div class="control-box ai"><h3>AI</h3><label><span><strong>Capability</strong><output>${s.aiCapability}%</output></span><input type="range" min="0" max="100" value="${s.aiCapability}" data-field="aiCapability"></label><label><span><strong>Delegation</strong><output>${s.aiDelegation}%</output></span><input type="range" min="0" max="100" value="${s.aiDelegation}" data-field="aiDelegation"></label>${status('AI',m.aiOver,'delegation')}</div><div class="control-box human"><h3>Human</h3><label><span><strong>Capability</strong><output>${s.humanCapability}%</output></span><input type="range" min="0" max="100" value="${s.humanCapability}" data-field="humanCapability"></label><label><span><strong>Involvement</strong><output>${s.humanInvolvement}%</output></span><input type="range" min="0" max="100" value="${s.humanInvolvement}" data-field="humanInvolvement"></label>${status('Human',m.humanOver,'involvement')}</div></div><div class="metrics"><div class="metric risk"><div class="metric-label">Aggregate risk <i class="help" title="Estimated engineering risk from uncontrolled coverage gaps, insufficient shared coverage, capability overstretch and missing practices. Lower is better.">?</i></div><div class="metric-value">${Math.round(m.risk*100)}%</div>${meter(m.risk)}<div class="metric-note">${m.risk<.25?'Low':m.risk<.5?'Moderate':m.risk<.75?'High':'Very high'}</div></div><div class="metric"><div class="metric-label">Efficiency gain <i class="help" title="Estimated reduction in human effort compared with doing the same work without AI. Lower Human Involvement saves review and coordination time immediately; only sufficiently high risk and rework reduce that gain again.">?</i></div><div class="metric-value">${efficiencyDisplay(m).value}</div>${meter(m.deliveryKind==='enabling'?1:(m.efficiency+.25)/1.25)}<div class="metric-note">${efficiencyDisplay(m).note}</div></div><div class="metric"><div class="metric-label">Delivery speed <i class="help" title="Estimated end-to-end delivery speed relative to a capable no-AI baseline. AI capability and delegation set the base speed. Human Involvement does not slow delivery by itself; speed is penalized only once engineering risk becomes substantial (roughly above 30%).">?</i></div><div class="metric-value">${speedDisplay(m).value}</div>${meter(m.deliverySpeed/32)}<div class="metric-note">${speedDisplay(m).note}</div></div></div><div class="section-title"><h3>Authorship share</h3><small>AI · Not performed · Human</small></div><p class="authorship-note" style="color:var(--muted);font-size:11px;margin:0 0 9px">Estimated work performed: gray marks omitted work, not unreliable work. Unchecked assurance activities are omitted; coding and some design still happen implicitly. Coverage separately shows how reliably the work is assured.</p><div class="authorship-list">${m.rows.map(r=>`<div class="data-row"><div class="label" title="${r.aspect.label}">${r.aspect.label}</div><div title="AI: ${Math.round(r.authoredAI*100)}% · Not performed: ${Math.round(r.notPerformed*100)}% · Human: ${Math.round(r.authoredHuman*100)}%">${bar(authTypes(r),'stackbar')}</div></div>`).join('')}</div>`}
|
||
function practices(s){const enabled=PRACTICES.filter(p=>s.practices[p.id]).length;return `<div class="practice-summary"><div><strong>${enabled} / ${PRACTICES.length} practices active</strong><br><small>Explicit practices focus both humans and AI on the selected concern.</small></div><div>${Math.round(enabled/PRACTICES.length*100)}%</div></div><div class="practice-grid">${PRACTICES.map(p=>`<label class="practice ${s.practices[p.id]?'on':''}"><input type="checkbox" data-practice="${p.id}" ${s.practices[p.id]?'checked':''}><span><strong>${p.label}</strong><small>${p.hint}</small><i class="tag">${p.tag}</i></span></label>`).join('')}</div>`}
|
||
function caption(m){let text;if(m.deliveryKind==='enabling')text='AI makes delivery feasible for this user; a numeric no-AI speed-up would be misleading.';else if(m.deliverySpeed<1.5&&m.risk<.4)text='Small, comparatively controlled steps — typical of careful traditional development.';else if(m.deliverySpeed>8&&m.risk>.45)text='Large, fast steps with substantial spread and path drift — fast progress, but expensive misses are plausible.';else if(m.deliverySpeed>8&&m.risk<.35)text='Large steps with comparatively strong convergence — the characteristic promise of agentic engineering.';else text='A hybrid profile: speed, precision and convergence emerge from the selected configuration.';return text+' The understood target also moves as the team learns, strongly during the first three iterations, then gradually settling as learning continues. Explicit problem analysis and behavior tests accelerate that later stabilization.'}
|
||
function iterations(side,m){return `<div class="sim-top"><div class="sim-stat"><b>${speedDisplay(m).value}</b><span>Delivery speed <i class="help" title="Relative end-to-end speed, including both AI acceleration and expected rework.">?</i></span></div><div class="sim-stat"><b>${m.stepSize.toFixed(2)}</b><span>Step size <i class="help" title="How much implementation progress one iteration can make. Faster delivery produces larger steps.">?</i></span></div><div class="sim-stat"><b>${m.spread.toFixed(2)}</b><span>Spread σ <i class="help" title="How imprecise individual development steps are. Low capability, risk and regressions increase the spread.">?</i></span></div><div class="sim-stat"><b>${m.drift.toFixed(2)}</b><span>Path drift <i class="help" title="Uncontrolled technical deviation from the intended path, including regressions where later changes break previously working behavior.">?</i></span></div><div class="sim-stat"><b>${m.targetShift.toFixed(2)}</b><span>Target shift δ <i class="help" title="Initial learning-driven target movement, equally strong for every profile. The first three iterations retain this strength; later movement decays faster with explicit problem analysis and behavior tests. This is independent of AI delegation and human capability or involvement.">?</i></span></div></div><div class="canvas-wrap"><canvas data-sim="${side}" width="720" height="330"></canvas><div class="sim-caption">${caption(m)}${m.regression>.45?' Missing engineering practices also make regressions likely: later changes can undo already working behavior.':''}</div></div><div class="sim-actions"><span class="sim-progress" data-progress="${side}" role="status" aria-live="polite"></span><button data-sim-reset="${side}" title="Reset only the iterative development progress; keep all scenario settings">Reset progress</button><button data-step="${side}" title="Advance the development simulation by exactly one iteration">Single step</button><button data-rerun="${side}" title="Start a new path with an initial batch of steps; continue with Single step until the target is reached">Run another path</button></div>`}
|
||
function coverageIndicator(r){if(r.overlap>.001)return `<span class="pct overlap-pct" title="Overlap: shared AI + human engineering coverage">↔ ${Math.round(r.overlap*100)}%</span>`;return `<span class="pct gap-pct" title="Gap: engineering concern not reliably covered by either AI or human">△ ${Math.round(r.gap*100)}%</span>`}
|
||
function coverage(m){return `<div class="coverage-note">Gray does not mean “nothing happens”. It means that neither side reliably assures that engineering concern. Purple is shared AI + human coverage; explicit practices can increase coverage by focusing attention.</div><div class="coverage-list">${m.rows.map(r=>`<div class="coverage-detail"><div class="data-row"><div class="label" title="${r.aspect.label}">${r.aspect.label}${r.explicit?' · ✓':''}</div>${bar(covTypes(r.aiCoverage,r.humanCoverage),'coveragebar')}</div>${coverageIndicator(r)}</div>`).join('')}</div><div class="legend"><span><i class="sw ai"></i>AI coverage</span><span><i class="sw overlap"></i>Shared coverage</span><span><i class="sw gap"></i>Uncontrolled gap</span><span><i class="sw human"></i>Human coverage</span></div>`}
|
||
function renderScenario(side,resetSimulation=false){
|
||
const el=document.querySelector(`.scenario[data-side="${side}"]`),s=states[side],m=compute(s);s.metrics=m;
|
||
if(resetSimulation||s.simProgress==null)s.simProgress=0;
|
||
el.querySelector('.scenario-name').textContent=s.name;el.querySelector('.preset').innerHTML=options(s.preset);
|
||
el.querySelector('[data-pane="profile"]').innerHTML=profile(s,m);
|
||
el.querySelector('[data-pane="practices"]').innerHTML=practices(s);
|
||
el.querySelector('[data-pane="iterations"]').innerHTML=iterations(side,m);
|
||
el.querySelector('[data-pane="coverage"]').innerHTML=coverage(m);
|
||
bind(side);setPane(el);draw(side);compare()
|
||
}
|
||
function bind(side){
|
||
const el=document.querySelector(`.scenario[data-side="${side}"]`),s=states[side];
|
||
el.querySelectorAll('[data-field]').forEach(inp=>{
|
||
const field=inp.dataset.field;
|
||
// Do not rebuild the panel while dragging/using cursor keys. That would destroy focus.
|
||
inp.addEventListener('input',()=>{
|
||
const v=Number(inp.value);
|
||
inp.closest('label').querySelector('output').textContent=`${v}%`;
|
||
});
|
||
inp.addEventListener('change',()=>{
|
||
s[field]=Number(inp.value);
|
||
s.preset='custom';s.name='Custom';s.simProgress=null;
|
||
renderScenario(side,true);
|
||
const fresh=document.querySelector(`.scenario[data-side="${side}"] [data-field="${field}"]`);
|
||
if(fresh){fresh.focus();}
|
||
});
|
||
});
|
||
el.querySelectorAll('[data-practice]').forEach(inp=>inp.addEventListener('change',()=>{s.practices[inp.dataset.practice]=inp.checked;s.preset='custom';s.name='Custom';s.simProgress=null;renderScenario(side,true)}));
|
||
el.querySelector('.preset').addEventListener('change',e=>{if(e.target.value!=='custom')applyPreset(side,e.target.value)});
|
||
el.querySelector('.reset').addEventListener('click',()=>applyPreset(side,initial[side]));
|
||
el.querySelector('.copy').addEventListener('click',e=>{const to=e.currentTarget.dataset.to,c=clone(s);c.name=`Copy of ${s.name}`;c.preset='custom';c.seed=(states[to]?.seed||3000)+1;c.simProgress=null;states[to]=c;renderScenario(to,true)});
|
||
const reset=el.querySelector(`[data-sim-reset="${side}"]`);if(reset)reset.addEventListener('click',()=>{s.simProgress=0;draw(side)});
|
||
const step=el.querySelector(`[data-step="${side}"]`);if(step)step.addEventListener('click',()=>{if(!s.targetReached){s.simProgress=(s.simProgress||0)+1;draw(side)}});
|
||
const rr=el.querySelector(`[data-rerun="${side}"]`);if(rr)rr.addEventListener('click',()=>{s.seed=(s.seed||1)+97;s.simProgress=s.metrics.iterations;draw(side)})
|
||
}
|
||
function setPane(el){el.querySelectorAll('.tab-pane').forEach(p=>p.classList.toggle('active',p.dataset.pane===activeTab))}
|
||
function compare(){if(!states.left?.metrics||!states.right?.metrics)return;const A=states.left.metrics,B=states.right.metrics;document.querySelector('#cmpRisk').textContent=`A ${Math.round(A.risk*100)}% · B ${Math.round(B.risk*100)}%`;document.querySelector('#cmpEff').textContent=`A ${efficiencyDisplay(A).value} · B ${efficiencyDisplay(B).value}`;document.querySelector('#cmpSpeed').textContent=`A ${speedDisplay(A).value} · B ${speedDisplay(B).value}`;document.querySelector('#cmpGap').textContent=`A ${Math.round(A.gap*100)}% · B ${Math.round(B.gap*100)}%`}
|
||
function rng(seed){let s=(seed>>>0)||1;return()=>{s=(1664525*s+1013904223)>>>0;return s/4294967296}}
|
||
function draw(side){
|
||
const el=document.querySelector(`.scenario[data-side="${side}"]`),canvas=el.querySelector(`canvas[data-sim="${side}"]`);
|
||
if(!canvas)return;
|
||
const state=states[side],m=state.metrics,ctx=canvas.getContext('2d'),W=canvas.width,H=canvas.height;
|
||
const pathRnd=rng(state.seed||1),targetRnd=rng((state.seed||1)+7919);
|
||
ctx.clearRect(0,0,W,H);
|
||
|
||
const start={x:W*.12,y:H*.78};
|
||
let progress=state.simProgress??0;
|
||
const targetTolerance=18;
|
||
|
||
// The understood target itself moves as the team learns. Corrections are large early
|
||
// and become progressively smaller; this applies to every scenario, not just Vibe Coding.
|
||
const initialTarget={
|
||
x:W*(.69+targetRnd()*.16),
|
||
y:H*(.20+targetRnd()*.19)
|
||
};
|
||
const targetHistory=[initialTarget];
|
||
// Reflect at plot boundaries so large discoveries do not stick to an edge.
|
||
const reflect=(value,min,max)=>{
|
||
const span=max-min,period=2*span;
|
||
const offset=((value-min)%period+period)%period;
|
||
return min+(offset<=span?offset:period-offset);
|
||
};
|
||
const baseTargetStep=m.targetShift*Math.min(W,H)*.60;
|
||
let heading=targetRnd()*Math.PI*2;
|
||
for(let i=1;i<=progress;i++){
|
||
// Keep the first three discoveries strong, then gradually reduce their amplitude.
|
||
heading+=(targetRnd()-.5)*2.25;
|
||
const amplitude=baseTargetStep*Math.pow(m.targetDecay,Math.max(0,i-3))*(.72+targetRnd()*.56);
|
||
const previous=targetHistory[i-1];
|
||
targetHistory.push({
|
||
x:reflect(previous.x+Math.cos(heading)*amplitude,72,W-72),
|
||
y:reflect(previous.y+Math.sin(heading)*amplitude,72,H-72)
|
||
});
|
||
}
|
||
const targetAt=step=>targetHistory[Math.max(0,Math.min(step,targetHistory.length-1))];
|
||
|
||
let p={...start};const pts=[{...p}];
|
||
const diag=Math.hypot(W,H),baseStep=m.stepSize*diag;
|
||
for(let i=0;i<progress;i++){
|
||
const target=targetAt(i);
|
||
const dx=target.x-p.x,dy=target.y-p.y,d=Math.max(1,Math.hypot(dx,dy));
|
||
const nx=dx/d,ny=dy/d,px=-ny,py=nx;
|
||
|
||
// Weak regression protection permits changes larger than the remaining distance,
|
||
// which makes overshooting and circling around the target possible.
|
||
const maxNominal=baseStep*(1+m.regression*.36);
|
||
const nom=Math.max(11,Math.min(d*(1+m.regression*.40),maxNominal));
|
||
const conv=.34+.66*m.convergence;
|
||
const noise=(pathRnd()-.5)*2*m.spread*(86+46*m.regression);
|
||
const longitudinal=(pathRnd()-.5)*m.spread*(38+30*m.regression);
|
||
const ang=(pathRnd()-.5)*2*m.drift*(1+.42*m.regression);
|
||
const dx2=Math.cos(ang)*nx-Math.sin(ang)*ny,dy2=Math.sin(ang)*nx+Math.cos(ang)*ny;
|
||
|
||
p={
|
||
x:p.x+dx2*nom*conv+px*noise+nx*longitudinal,
|
||
y:p.y+dy2*nom*conv+py*noise+ny*longitudinal
|
||
};
|
||
|
||
// Regression event: a later change can break previously achieved functionality.
|
||
// The kick becomes especially visible near the target, where a naive model would
|
||
// otherwise converge unrealistically quickly.
|
||
if(pathRnd()<m.regression*.55){
|
||
const proximity=1-clamp(d/(diag*.58));
|
||
const kick=baseStep*m.regression*(.16+.52*proximity)*(.50+pathRnd()*.65);
|
||
const kickAngle=pathRnd()*Math.PI*2;
|
||
p.x+=Math.cos(kickAngle)*kick;
|
||
p.y+=Math.sin(kickAngle)*kick;
|
||
}
|
||
|
||
p.x=clamp(p.x,18,W-18);p.y=clamp(p.y,18,H-18);pts.push({...p});
|
||
const learnedTarget=targetAt(i+1);
|
||
if(Math.hypot(p.x-learnedTarget.x,p.y-learnedTarget.y)<=targetTolerance){
|
||
progress=i+1;
|
||
break;
|
||
}
|
||
}
|
||
|
||
state.simProgress=progress;
|
||
state.targetReached=progress>0&&Math.hypot(p.x-targetAt(progress).x,p.y-targetAt(progress).y)<=targetTolerance;
|
||
const stepButton=el.querySelector(`[data-step="${side}"]`);
|
||
if(stepButton)stepButton.disabled=state.targetReached;
|
||
const progressLabel=el.querySelector(`[data-progress="${side}"]`);
|
||
if(progressLabel)progressLabel.textContent=`${progress} steps · ${state.targetReached?'Target reached':'Target not yet reached'}`;
|
||
|
||
// Draw only target positions learned so far; future discoveries remain invisible.
|
||
const visibleTargets=targetHistory.slice(0,progress+1);
|
||
if(visibleTargets.length>1){
|
||
ctx.save();ctx.setLineDash([4,5]);ctx.beginPath();ctx.moveTo(visibleTargets[0].x,visibleTargets[0].y);
|
||
for(let i=1;i<visibleTargets.length;i++)ctx.lineTo(visibleTargets[i].x,visibleTargets[i].y);
|
||
ctx.strokeStyle='rgba(128,100,162,.48)';ctx.lineWidth=1.7;ctx.stroke();ctx.setLineDash([]);
|
||
visibleTargets.slice(0,-1).forEach((t,i)=>{ctx.beginPath();ctx.arc(t.x,t.y,3.1,0,Math.PI*2);ctx.fillStyle=`rgba(128,100,162,${.22+.38*(i/Math.max(1,visibleTargets.length-1))})`;ctx.fill()});
|
||
ctx.restore();
|
||
}
|
||
|
||
const currentTarget=targetAt(progress);
|
||
ctx.save();ctx.lineWidth=1.5;
|
||
for(let i=4;i>=1;i--){ctx.beginPath();ctx.arc(currentTarget.x,currentTarget.y,i*18,0,Math.PI*2);ctx.strokeStyle=`rgba(20,127,142,${.10+i*.05})`;ctx.stroke()}
|
||
ctx.beginPath();ctx.arc(currentTarget.x,currentTarget.y,4.2,0,Math.PI*2);ctx.fillStyle='#0d6674';ctx.fill();ctx.restore();
|
||
|
||
ctx.save();ctx.beginPath();ctx.moveTo(pts[0].x,pts[0].y);for(let i=1;i<pts.length;i++)ctx.lineTo(pts[i].x,pts[i].y);ctx.strokeStyle='rgba(20,127,142,.46)';ctx.lineWidth=2;ctx.stroke();
|
||
pts.forEach((pt,i)=>{
|
||
const isLast=i===pts.length-1;
|
||
ctx.beginPath();
|
||
ctx.arc(pt.x,pt.y,isLast?5:4,0,Math.PI*2);
|
||
if(isLast){
|
||
ctx.fillStyle='#147f8e';
|
||
ctx.fill();
|
||
} else {
|
||
ctx.fillStyle='#ffffff';
|
||
ctx.fill();
|
||
ctx.strokeStyle='rgba(20,127,142,.82)';
|
||
ctx.lineWidth=1.8;
|
||
ctx.stroke();
|
||
}
|
||
if(i>0){
|
||
ctx.font='10px system-ui';
|
||
ctx.fillStyle='rgba(70,80,86,.72)';
|
||
ctx.fillText(String(i),pt.x+6,pt.y-5);
|
||
}
|
||
});ctx.restore();
|
||
}
|
||
document.querySelectorAll('.global-tabs button').forEach(btn=>btn.addEventListener('click',()=>{
|
||
activeTab=btn.dataset.tab;
|
||
document.querySelectorAll('.global-tabs button').forEach(b=>b.classList.toggle('active',b===btn));
|
||
document.querySelectorAll('.scenario').forEach(setPane);
|
||
if(activeTab==='iterations'){
|
||
states.left.simProgress=0;
|
||
states.right.simProgress=0;
|
||
requestAnimationFrame(()=>{draw('left');draw('right')});
|
||
}
|
||
}));applyPreset('left',initial.left);applyPreset('right',initial.right);
|
||
})();
|
||
</script>
|
||
<iframe id="staircase-view" title="Engineering Activities by Software Criticality" hidden srcdoc="<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Engineering Activities by Software Criticality</title>
|
||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f2f9fa%22%2F%3E%3Cpath%20d%3D%22M12%2048V38H26V27H40V16H52V48Z%22%20fill%3D%22%23147f8e%22%2F%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2216%22%20r%3D%227%22%20fill%3D%22%23d58b32%22%20stroke%3D%22%23f2f9fa%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E">
|
||
<style>
|
||
:root {
|
||
--petrol:#147f8e;
|
||
--petrol-dark:#0d6674;
|
||
--petrol-soft:#dceff1;
|
||
--petrol-faint:#f3f9fa;
|
||
--human:#d58b32;
|
||
--human-soft:#fff0df;
|
||
--both:#8064a2;
|
||
--both-soft:#f1e7ef;
|
||
--auto:#65727a;
|
||
--auto-soft:#e9edef;
|
||
--ink:#20272c;
|
||
--muted:#68727a;
|
||
--line:#c9d2d6;
|
||
--empty:#f3f5f6;
|
||
}
|
||
*{box-sizing:border-box}
|
||
body{
|
||
margin:0;background:#f6f8f9;color:var(--ink);
|
||
font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
|
||
}
|
||
.wrap{max-width:1480px;margin:0 auto;padding:30px 22px 42px}
|
||
header{text-align:center;max-width:1050px;margin:0 auto 22px}
|
||
h1{margin:0 0 8px;font-size:clamp(30px,4vw,46px);line-height:1.05;letter-spacing:-.025em}
|
||
header p{margin:0;color:var(--muted);font-size:15px}
|
||
.rule{width:88px;height:4px;margin:14px auto 0;border-radius:999px;background:var(--petrol)}
|
||
.card{
|
||
position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;
|
||
box-shadow:0 10px 28px rgba(24,49,57,.08);overflow:hidden
|
||
}
|
||
.scroll{overflow-x:auto}
|
||
table{
|
||
width:100%;min-width:1000px;border-collapse:separate;border-spacing:0;table-layout:fixed
|
||
}
|
||
col.activity-col{width:250px}
|
||
th,td{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
|
||
tr:last-child td,tfoot th{border-bottom:0}
|
||
th:last-child,td:last-child{border-right:0}
|
||
thead th{
|
||
padding:12px 10px;background:linear-gradient(180deg,#fff,var(--petrol-faint));
|
||
color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em
|
||
}
|
||
thead th:first-child{text-align:left;color:var(--petrol-dark)}
|
||
tbody th{
|
||
position:relative;padding:12px 14px 12px 47px;text-align:left;background:#fbfcfc;font-weight:760
|
||
}
|
||
tbody th small{
|
||
display:block;margin-top:2px;color:var(--muted);font-size:11px;font-weight:500
|
||
}
|
||
.level{
|
||
position:absolute;left:14px;top:50%;transform:translateY(-50%);
|
||
width:24px;height:22px;border-radius:6px;display:grid;place-items:center;
|
||
background:var(--petrol-soft);color:var(--petrol-dark);font-size:10px;font-weight:850
|
||
}
|
||
tbody tr:last-child .level{background:#e8f4f5;box-shadow:inset 0 0 0 1px #a7d4d9}
|
||
td{height:52px;padding:5px;background:#fff;text-align:center;vertical-align:middle}
|
||
.cell{
|
||
position:relative;width:100%;height:100%;min-height:38px;
|
||
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
|
||
border-radius:8px;cursor:help;outline:none
|
||
}
|
||
.cell:focus-visible{box-shadow:0 0 0 3px rgba(20,127,142,.22)}
|
||
.cell.none{background:var(--empty);color:#b6bec2}
|
||
.cell.optional{background:#f9fbfb;border:1px dashed #8dbac0}
|
||
.cell.suggested{background:#f4f9fa;border:1px solid #84afb5}
|
||
.cell.required{background:#eef7f8;border:2px solid var(--petrol)}
|
||
.req{font-weight:850;font-size:12px;color:var(--ink)}
|
||
.cell.none .req{color:#b6bec2}
|
||
.actor{
|
||
display:inline-flex;align-items:center;justify-content:center;
|
||
min-width:56px;padding:2px 7px;border-radius:999px;
|
||
font-size:10px;font-weight:850;line-height:1.3;white-space:nowrap
|
||
}
|
||
.actor-ai{background:var(--petrol);color:#fff}
|
||
.actor-human{background:var(--human);color:#fff}
|
||
.actor-both{
|
||
color:#fff;
|
||
background:repeating-linear-gradient(135deg,var(--both) 0 7px,#8f6686 7px 9px,var(--both) 9px 16px)
|
||
}
|
||
.actor-auto{background:var(--auto);color:#fff}
|
||
|
||
tfoot th{padding:13px 10px 15px;background:#f8fafb;text-align:center;vertical-align:top}
|
||
tfoot th:first-child{text-align:left;color:var(--petrol-dark)}
|
||
.axis-title{font-size:10px;text-transform:uppercase;letter-spacing:.075em;color:var(--muted)}
|
||
.software{
|
||
display:block;margin-top:4px;color:var(--ink);font-size:12px;line-height:1.22;
|
||
text-transform:none;letter-spacing:0
|
||
}
|
||
.software small{display:block;margin-top:4px;color:var(--muted);font-size:10.5px;font-weight:500}
|
||
|
||
.legends{
|
||
display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:15px 18px;
|
||
border-top:1px solid var(--line);background:#fbfcfc
|
||
}
|
||
.legend-group{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px 16px}
|
||
.legend-title{color:var(--petrol-dark);font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:850}
|
||
.legend-item{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;cursor:help}
|
||
.req-swatch{width:20px;height:16px;border-radius:5px}
|
||
.req-swatch.none{background:var(--empty);border:1px solid #dfe4e6}
|
||
.req-swatch.optional{background:#f9fbfb;border:1px dashed #8dbac0}
|
||
.req-swatch.suggested{background:#f4f9fa;border:1px solid #84afb5}
|
||
.req-swatch.required{background:#eef7f8;border:2px solid var(--petrol)}
|
||
.actor-swatch{
|
||
min-width:24px;height:16px;border-radius:999px;border:1px solid rgba(32,39,44,.12)
|
||
}
|
||
.actor-swatch.ai{background:var(--petrol)}
|
||
.actor-swatch.human{background:var(--human)}
|
||
.actor-swatch.both{background:repeating-linear-gradient(135deg,var(--both) 0 6px,#8f6686 6px 8px,var(--both) 8px 14px)}
|
||
.actor-swatch.auto{background:var(--auto)}
|
||
|
||
.note{max-width:1120px;margin:14px auto 0;color:var(--muted);text-align:center;font-size:12px}
|
||
.note strong{color:var(--petrol-dark)}
|
||
|
||
.custom-tooltip{
|
||
position:fixed;z-index:1000;max-width:330px;padding:8px 10px;border-radius:8px;
|
||
background:#20272c;color:#fff;font-size:11.5px;line-height:1.4;
|
||
box-shadow:0 8px 22px rgba(0,0,0,.22);pointer-events:none;opacity:0;
|
||
transform:translateY(4px);transition:opacity .12s ease,transform .12s ease
|
||
}
|
||
.custom-tooltip.show{opacity:1;transform:translateY(0)}
|
||
|
||
@media(max-width:850px){
|
||
.legends{grid-template-columns:1fr}
|
||
}
|
||
@media(max-width:700px){
|
||
.wrap{padding:18px 10px 30px}
|
||
}
|
||
@media(prefers-reduced-motion:reduce){
|
||
.custom-tooltip{transition:none}
|
||
}
|
||
|
||
[hidden]{display:none!important}
|
||
.view-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}
|
||
.view-heading h2{margin:0;font-size:22px;color:var(--accent-dark)}
|
||
.nav-arrow{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:1px solid #c6cdd1;border-radius:9px;background:#e9edef;color:#4e5961;text-decoration:none;font:26px/1 system-ui;cursor:pointer}
|
||
.nav-arrow:hover{background:#dce3e7;border-color:#8b9ba3;color:#0d6674}
|
||
.nav-arrow:focus-visible{outline:3px solid #147f8e;outline-offset:3px}
|
||
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:18px 0 0;padding:14px 2px 0;border-top:1px solid #d7dde0;color:var(--muted);font-size:12px}.site-footer a{color:inherit;text-decoration:none}.site-footer a:hover,.site-footer a:focus-visible{color:var(--petrol-dark);text-decoration:underline}.site-footer-right{display:flex;align-items:center;gap:7px;white-space:nowrap}@media(max-width:620px){.site-footer{align-items:flex-start;flex-direction:column}.site-footer-right{align-self:flex-start}}
|
||
header{max-width:none}
|
||
.stair-heading{position:relative;padding:0 56px;margin-bottom:10px;font-size:clamp(25px,3.3vw,42px);line-height:1.05}
|
||
.stair-heading h1{margin:0;font-size:inherit;line-height:inherit}
|
||
.stair-heading .nav-arrow{position:absolute;left:0;top:clamp(13.125px,1.7325vw,22.05px);transform:translateY(-50%)}
|
||
@media(max-width:700px){.stair-heading{padding:0 0 0 54px}.stair-heading h1{text-align:left}}
|
||
.stair-heading .forward-arrow{left:auto;right:0}@media(max-width:700px){.stair-heading{padding-right:56px}}</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<header>
|
||
<div class="stair-heading"><a class="nav-arrow" href="#practices" id="back-to-practices" aria-label="Back to Engineering Practices" title="Back to Engineering Practices">←</a><h1>Engineering Activities by Software Criticality</h1><a class="nav-arrow forward-arrow" href="#workflow" title="My Agentic AI Workflow" aria-label="Zum Agentic AI Workflow">→</a></div>
|
||
<p>Engineering rigor increases with required assurance, impact and blast radius — while authorship can shift between AI and humans. Automated checks refer to who writes or configures them.</p>
|
||
<div class="rule"></div>
|
||
</header>
|
||
|
||
<section class="card">
|
||
<div class="scroll">
|
||
<table aria-label="Engineering activities and primary actors by software type">
|
||
<colgroup><col class="activity-col"><col><col><col><col><col><col><col></colgroup>
|
||
<thead>
|
||
<tr>
|
||
<th>Engineering Activity ↑</th>
|
||
<th colspan="7">Increasing required assurance, impact and blast radius →</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><th><i class="level">11</i>Security Audit<small>Threat model, permissions, misuse cases, sensitive flows</small></th><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell optional tooltip-target" tabindex="0" data-tip="Optional · AI + Human — use when the frontend feature has a meaningful security impact." aria-label="Optional · AI + Human — use when the frontend feature has a meaningful security impact."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell suggested tooltip-target" tabindex="0" data-tip="Suggested · AI + Human — Suggested: normally worthwhile, but the scope can stay pragmatic. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Suggested · AI + Human — Suggested: normally worthwhile, but the scope can stay pragmatic. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td></tr><tr><th><i class="level">10</i>Architecture Review<small>Boundaries, coupling, data flow, long-term structure</small></th><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell optional tooltip-target" tabindex="0" data-tip="Optional · AI + Human — Optional: use selectively when the concern is relevant. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Optional · AI + Human — Optional: use selectively when the concern is relevant. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell suggested tooltip-target" tabindex="0" data-tip="Suggested · AI + Human — Suggested: normally worthwhile, but the scope can stay pragmatic. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Suggested · AI + Human — Suggested: normally worthwhile, but the scope can stay pragmatic. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td></tr><tr><th><i class="level">9</i>Performance / Resilience Review<small>Latency, resource use, failure modes, recovery</small></th><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell optional tooltip-target" tabindex="0" data-tip="Optional · AI — Optional: use selectively when the concern is relevant. Primarily performed by AI. Human involvement may still exist, but is not the main execution path." aria-label="Optional · AI — Optional: use selectively when the concern is relevant. Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><span class="actor actor-ai">AI</span></div></td><td><div class="cell suggested tooltip-target" tabindex="0" data-tip="Suggested · AI + Human — Suggested: normally worthwhile, but the scope can stay pragmatic. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Suggested · AI + Human — Suggested: normally worthwhile, but the scope can stay pragmatic. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td></tr><tr><th><i class="level">8</i>Production Code Review<small>Inspection of implementation choices and maintainability</small></th><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell optional tooltip-target" tabindex="0" data-tip="Optional · AI + Human — for a frontend, an AI review covers the generated code; a human spot-checks it and reviews security-sensitive changes." aria-label="Optional · AI + Human — for a frontend, an AI review covers the generated code; a human spot-checks it and reviews security-sensitive changes."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell suggested tooltip-target" tabindex="0" data-tip="Suggested · AI + Human — Suggested: normally worthwhile, but the scope can stay pragmatic. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Suggested · AI + Human — Suggested: normally worthwhile, but the scope can stay pragmatic. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · Human — Required: treat this as a systematic engineering activity for this software type. Primarily performed by a human." aria-label="Required · Human — Required: treat this as a systematic engineering activity for this software type. Primarily performed by a human."><span class="actor actor-human">Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · Human — Required: treat this as a systematic engineering activity for this software type. Primarily performed by a human." aria-label="Required · Human — Required: treat this as a systematic engineering activity for this software type. Primarily performed by a human."><span class="actor actor-human">Human</span></div></td></tr><tr><th><i class="level">7</i>API / Contract Review<small>Semantics, compatibility, data contracts, external behavior</small></th><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell optional tooltip-target" tabindex="0" data-tip="Optional · AI — Optional: use selectively when the concern is relevant. Primarily performed by AI. Human involvement may still exist, but is not the main execution path." aria-label="Optional · AI — Optional: use selectively when the concern is relevant. Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><span class="actor actor-ai">AI</span></div></td><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not applicable: a frontend defines no API or data contract of its own; the backend it calls reviews that contract." aria-label="Not applicable: a frontend defines no API or data contract of its own; the backend it calls reviews that contract."><span class="req">n/a</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td></tr><tr><th><i class="level">6</i>Integration / Unit Tests<small>Technical correctness below user-visible behavior</small></th><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell optional tooltip-target" tabindex="0" data-tip="Optional · AI — Optional: use selectively when the concern is relevant. Primarily performed by AI. Human involvement may still exist, but is not the main execution path." aria-label="Optional · AI — Optional: use selectively when the concern is relevant. Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><span class="actor actor-ai">AI</span></div></td><td><div class="cell optional tooltip-target" tabindex="0" data-tip="Optional · AI — Optional: use selectively when the concern is relevant. Primarily performed by AI. Human involvement may still exist, but is not the main execution path." aria-label="Optional · AI — Optional: use selectively when the concern is relevant. Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><span class="actor actor-ai">AI</span></div></td><td><div class="cell suggested tooltip-target" tabindex="0" data-tip="Suggested · AI — Suggested: normally worthwhile, but the scope can stay pragmatic. Primarily performed by AI. Human involvement may still exist, but is not the main execution path." aria-label="Suggested · AI — Suggested: normally worthwhile, but the scope can stay pragmatic. Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><span class="actor actor-ai">AI</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI — Required: treat this as a systematic engineering activity for this software type. Primarily performed by AI. Human involvement may still exist, but is not the main execution path." aria-label="Required · AI — Required: treat this as a systematic engineering activity for this software type. Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><span class="actor actor-ai">AI</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td></tr><tr><th><i class="level">5</i>Behavior / Scenario Tests<small>Business scenarios, acceptance behavior, regression protection</small></th><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell optional tooltip-target" tabindex="0" data-tip="Optional · AI — Optional: use selectively when the concern is relevant. Primarily performed by AI. Human involvement may still exist, but is not the main execution path." aria-label="Optional · AI — Optional: use selectively when the concern is relevant. Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><span class="actor actor-ai">AI</span></div></td><td><div class="cell suggested tooltip-target" tabindex="0" data-tip="Suggested · AI — Suggested: normally worthwhile, but the scope can stay pragmatic. Primarily performed by AI. Human involvement may still exist, but is not the main execution path." aria-label="Suggested · AI — Suggested: normally worthwhile, but the scope can stay pragmatic. Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><span class="actor actor-ai">AI</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI — Required: treat this as a systematic engineering activity for this software type. AI derives the UI scenarios from the acceptance criteria that the human has checked. Primarily performed by AI. Human involvement may still exist, but is not the main execution path." aria-label="Required · AI — Required: treat this as a systematic engineering activity for this software type. AI derives the UI scenarios from the acceptance criteria that the human has checked. Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><span class="actor actor-ai">AI</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td></tr><tr><th><i class="level">4</i>Automated Quality Checks<small>Linting, coding style, complexity, static analysis, project rules</small></th><td><div class="cell none tooltip-target" tabindex="0" data-tip="Not normally used for this software type." aria-label="Not normally used for this software type."><span class="req">—</span></div></td><td><div class="cell optional tooltip-target" tabindex="0" data-tip="Optional · AI — Optional: use selectively when the concern is relevant. AI authors or configures the checks; deterministic tools execute them." aria-label="Optional · AI — Optional: use selectively when the concern is relevant. AI authors or configures the checks; deterministic tools execute them."><span class="actor actor-ai">AI</span></div></td><td><div class="cell suggested tooltip-target" tabindex="0" data-tip="Suggested · AI — Suggested: normally worthwhile, but the scope can stay pragmatic. AI authors or configures the checks; deterministic tools execute them." aria-label="Suggested · AI — Suggested: normally worthwhile, but the scope can stay pragmatic. AI authors or configures the checks; deterministic tools execute them."><span class="actor actor-ai">AI</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI — Required: treat this as a systematic engineering activity for this software type. AI authors or configures the checks; deterministic tools execute them." aria-label="Required · AI — Required: treat this as a systematic engineering activity for this software type. AI authors or configures the checks; deterministic tools execute them."><span class="actor actor-ai">AI</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI — Required: treat this as a systematic engineering activity for this software type. AI authors or configures the checks; deterministic tools execute them." aria-label="Required · AI — Required: treat this as a systematic engineering activity for this software type. AI authors or configures the checks; deterministic tools execute them."><span class="actor actor-ai">AI</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI — Required: treat this as a systematic engineering activity for this software type. AI authors or configures the checks; deterministic tools execute them." aria-label="Required · AI — Required: treat this as a systematic engineering activity for this software type. AI authors or configures the checks; deterministic tools execute them."><span class="actor actor-ai">AI</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. AI and humans author or configure the checks; deterministic tools execute them." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. AI and humans author or configure the checks; deterministic tools execute them."><span class="actor actor-both">AI + Human</span></div></td></tr><tr><th><i class="level">3</i>Specification / Acceptance Criteria<small>What should be built and what counts as done</small></th><td><div class="cell optional tooltip-target" tabindex="0" data-tip="Optional · Human — for a tiny visualization, the prompt or feature description may be the complete specification." aria-label="Optional · Human — for a tiny visualization, the prompt or feature description may be the complete specification."><span class="actor actor-human">Human</span></div></td><td><div class="cell suggested tooltip-target" tabindex="0" data-tip="Suggested · Human — Suggested: normally worthwhile, but the scope can stay pragmatic. Primarily performed by a human." aria-label="Suggested · Human — Suggested: normally worthwhile, but the scope can stay pragmatic. Primarily performed by a human."><span class="actor actor-human">Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td></tr><tr><th><i class="level">2</i>Problem / Domain Analysis<small>Understand the user need and the domain before building</small></th><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · Human — even a Vibe-Coded visualization needs a human who understands the problem or domain goal." aria-label="Required · Human — even a Vibe-Coded visualization needs a human who understands the problem or domain goal."><span class="actor actor-human">Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · Human — Required: treat this as a systematic engineering activity for this software type. Primarily performed by a human." aria-label="Required · Human — Required: treat this as a systematic engineering activity for this software type. Primarily performed by a human."><span class="actor actor-human">Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · Human — Required: treat this as a systematic engineering activity for this software type. Primarily performed by a human." aria-label="Required · Human — Required: treat this as a systematic engineering activity for this software type. Primarily performed by a human."><span class="actor actor-human">Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully." aria-label="Required · AI + Human — Required: treat this as a systematic engineering activity for this software type. Shared engineering activity: AI and human both contribute meaningfully."><span class="actor actor-both">AI + Human</span></div></td></tr><tr><th><i class="level">1</i>Production Coding<small>Create the production implementation</small></th><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI — Required: treat this as a systematic engineering activity for this software type. Primarily performed by AI. Human involvement may still exist, but is not the main execution path." aria-label="Required · AI — Required: treat this as a systematic engineering activity for this software type. Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><span class="actor actor-ai">AI</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI — Required: treat this as a systematic engineering activity for this software type. Primarily performed by AI. Human involvement may still exist, but is not the main execution path." aria-label="Required · AI — Required: treat this as a systematic engineering activity for this software type. Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><span class="actor actor-ai">AI</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI — Required: treat this as a systematic engineering activity for this software type. Primarily performed by AI. Human involvement may still exist, but is not the main execution path." aria-label="Required · AI — Required: treat this as a systematic engineering activity for this software type. Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><span class="actor actor-ai">AI</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI — Required: treat this as a systematic engineering activity for this software type. Primarily performed by AI. Human involvement may still exist, but is not the main execution path." aria-label="Required · AI — Required: treat this as a systematic engineering activity for this software type. Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><span class="actor actor-ai">AI</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI — Required: treat this as a systematic engineering activity for this software type. Primarily performed by AI. Human involvement may still exist, but is not the main execution path." aria-label="Required · AI — Required: treat this as a systematic engineering activity for this software type. Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><span class="actor actor-ai">AI</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · AI + Human — AI-generated production code is allowed, but human engineering involvement is expected." aria-label="Required · AI + Human — AI-generated production code is allowed, but human engineering involvement is expected."><span class="actor actor-both">AI + Human</span></div></td><td><div class="cell required tooltip-target" tabindex="0" data-tip="Required · Human — production code is written by a human. AI may still assist with analysis, design discussion, tests, review and tooling." aria-label="Required · Human — production code is written by a human. AI may still assist with analysis, design discussion, tests, review and tooling."><span class="actor actor-human">Human</span></div></td></tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<th><span class="axis-title">Software type →</span></th>
|
||
<th><span class="axis-title">Low</span><span class="software">Disposable Visualization / Tiny SPA<small>One-off explainer or tiny app; cheap to replace.</small></span></th><th><span class="axis-title">Low–medium</span><span class="software">Helper Tool / Script<small>Small utility with limited lifetime and blast radius.</small></span></th><th><span class="axis-title">Medium</span><span class="software">Prototype<small>Explores product or technical ideas; not yet production software.</small></span></th><th><span class="axis-title">Medium–high</span><span class="software">Frontend<small>User-facing production software with specifications and regression tests.</small></span></th><th><span class="axis-title">High</span><span class="software">Backend<small>Persistent domain logic, APIs, integrations and shared data.</small></span></th><th><span class="axis-title">Critical</span><span class="software">Critical Backend<small>Security, integrity, availability or long-term correctness matter strongly.</small></span></th><th><span class="axis-title">Highest assurance</span><span class="software">Critical Systems<small>Kernel, DNS resolver, authentication or trust infrastructure.</small></span></th>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="legends">
|
||
<div class="legend-group">
|
||
<span class="legend-title">Requirement</span>
|
||
<span class="legend-item tooltip-target" tabindex="0" data-tip="Not normally used for this software type."><i class="req-swatch none"></i>Not normally used</span>
|
||
<span class="legend-item tooltip-target" tabindex="0" data-tip="Optional: use selectively when the concern is relevant."><i class="req-swatch optional"></i>Optional</span>
|
||
<span class="legend-item tooltip-target" tabindex="0" data-tip="Suggested: normally worthwhile, but the scope can stay pragmatic."><i class="req-swatch suggested"></i>Suggested</span>
|
||
<span class="legend-item tooltip-target" tabindex="0" data-tip="Required: treat this as a systematic engineering activity for this software type."><i class="req-swatch required"></i>Required</span>
|
||
</div>
|
||
|
||
<div class="legend-group">
|
||
<span class="legend-title">Authored by</span>
|
||
<span class="legend-item tooltip-target" tabindex="0" data-tip="Primarily performed by AI. Human involvement may still exist, but is not the main execution path."><i class="actor-swatch ai"></i>AI</span>
|
||
<span class="legend-item tooltip-target" tabindex="0" data-tip="Primarily performed by a human."><i class="actor-swatch human"></i>Human</span>
|
||
<span class="legend-item tooltip-target" tabindex="0" data-tip="Shared engineering activity: AI and human both contribute meaningfully."><i class="actor-swatch both"></i>AI + Human</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<p class="note">
|
||
<strong>Coding is the foundational engineering activity, not a quality control.</strong>
|
||
<br>The final column deliberately models a policy where production code for critical systems is human-written,
|
||
while AI can still contribute to analysis, design, tests, reviews and tooling.
|
||
</p>
|
||
<footer class="site-footer">
|
||
<div class="site-footer-left">(C) 2026 <a href="https://michael.hoennig.de/" rel="author" target="_top">Michael Hönnig</a></div>
|
||
<div class="site-footer-right">
|
||
<a href="https://michael.hoennig.de/en/imprint/" target="_top">Imprint</a>
|
||
<span aria-hidden="true">-</span>
|
||
<a href="https://michael.hoennig.de/en/privacy-policy/" target="_top">Privacy</a>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<div class="custom-tooltip" id="tooltip" role="tooltip"></div>
|
||
|
||
<script>
|
||
(() => {
|
||
const tooltip = document.getElementById('tooltip');
|
||
let active = null;
|
||
|
||
function position(target) {
|
||
const r = target.getBoundingClientRect();
|
||
const t = tooltip.getBoundingClientRect();
|
||
let left = r.left + r.width / 2 - t.width / 2;
|
||
left = Math.max(10, Math.min(window.innerWidth - t.width - 10, left));
|
||
let top = r.top - t.height - 9;
|
||
if (top < 8) top = r.bottom + 9;
|
||
tooltip.style.left = `${left}px`;
|
||
tooltip.style.top = `${top}px`;
|
||
}
|
||
|
||
function show(target) {
|
||
const text = target.dataset.tip;
|
||
if (!text) return;
|
||
active = target;
|
||
tooltip.textContent = text;
|
||
tooltip.classList.add('show');
|
||
requestAnimationFrame(() => position(target));
|
||
}
|
||
|
||
function hide(target) {
|
||
if (target && active !== target) return;
|
||
tooltip.classList.remove('show');
|
||
active = null;
|
||
}
|
||
|
||
document.querySelectorAll('.tooltip-target').forEach(el => {
|
||
el.addEventListener('mouseenter', () => show(el));
|
||
el.addEventListener('mouseleave', () => hide(el));
|
||
el.addEventListener('focus', () => show(el));
|
||
el.addEventListener('blur', () => hide(el));
|
||
});
|
||
|
||
window.addEventListener('scroll', () => active && position(active), true);
|
||
window.addEventListener('resize', () => active && position(active));
|
||
})();
|
||
</script>
|
||
<script>
|
||
document.getElementById('back-to-practices').addEventListener('click',event=>{event.preventDefault();parent.postMessage({type:'show-practices'},'*')});
|
||
const reportHeight=()=>parent.postMessage({type:'stair-height',height:document.querySelector('.wrap').getBoundingClientRect().height},'*');
|
||
new ResizeObserver(reportHeight).observe(document.querySelector('.wrap'));
|
||
window.addEventListener('load',reportHeight);
|
||
document.addEventListener('keydown',event=>{if(event.key==='Escape')document.getElementById('tooltip').classList.remove('show')});
|
||
</script><script>document.querySelector('.forward-arrow').addEventListener('click',e=>{e.preventDefault();parent.postMessage({type:'show-workflow'},'*')});</script></body>
|
||
</html>
|
||
"></iframe>
|
||
<iframe id="workflow-view" title="My Agentic AI Workflow" hidden style="width:100%;height:1600px;border:0;display:block" srcdoc="<!doctype html><html lang="de"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>My Agentic AI Workflow — Vibe Engineering</title><link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f2f9fa%22%2F%3E%3Cpath%20d%3D%22M12%2048V38H26V27H40V16H52V48Z%22%20fill%3D%22%23147f8e%22%2F%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2216%22%20r%3D%227%22%20fill%3D%22%23d58b32%22%20stroke%3D%22%23f2f9fa%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E"><style>
|
||
:root{--accent:#147f8e;--dark:#0d6674;--soft:#dceff1;--faint:#f2f9fa;--human:#d58b32;--ink:#20262b;--muted:#677078;--line:#d2d9dd;--page:#f6f8f9;--shadow:0 8px 24px rgba(27,45,52,.08)}*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--ink);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.wrap{max-width:1480px;margin:auto;padding:28px 22px 40px}h1,h2,h3,p{margin-top:0}.hero{text-align:center;margin:4px 0 24px}.hero h1{font-size:clamp(30px,4.1vw,48px);line-height:1.05;letter-spacing:-.025em;margin-bottom:10px}.hero p{color:var(--muted);margin-bottom:0}.rule{height:4px;width:84px;background:var(--accent);border-radius:9px;margin:14px auto}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.legend{display:flex;flex-wrap:wrap;gap:16px;color:var(--muted);font-size:12px}.legend span{display:flex;align-items:center;gap:7px}.dot{width:11px;height:11px;border-radius:50%;background:var(--accent)}.dot.human{background:var(--human)}button{font:inherit;background:white;border:1px solid #b9c2c7;border-radius:8px;padding:7px 11px;cursor:pointer;color:var(--dark)}button:hover{background:var(--faint)}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.panel{background:white;border:1px solid #c9d0d4;border-radius:14px;box-shadow:var(--shadow);overflow:hidden}.panel-head{background:linear-gradient(180deg,#fff,var(--faint));padding:15px 18px;border-bottom:1px solid var(--line)}.panel-head h2{font-size:19px;margin-bottom:3px}.eyebrow{color:var(--dark);font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:800}.panel-head p{color:var(--muted);margin-bottom:0;font-size:13px}.intro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px}.step{background:#fff;border:1px solid var(--line);border-left:4px solid var(--human);border-radius:9px;min-width:0}.step.ai{border-left-color:var(--accent)}summary{cursor:pointer;padding:12px 32px 12px 13px;position:relative;list-style:none}summary::-webkit-details-marker{display:none}summary:after{content:'+';position:absolute;right:13px;top:13px;color:var(--muted);font-size:19px}details[open]>summary:after{content:'−'}summary strong{display:block;font-size:15px;margin:3px 0}.actor{color:#8b5819;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.ai .actor{color:var(--dark)}.desc{display:block;font-size:12px;color:var(--muted)}.detail{border-top:1px solid #e5e9eb;padding:12px 14px;font-size:13px;color:#47545b}.detail ul{padding-left:19px;margin-bottom:0}.guide{margin-top:18px;border:1px solid #9cc7cd;background:var(--faint);border-radius:12px;padding:15px 18px;display:flex;gap:24px;align-items:center;justify-content:space-between}.guide h2{font-size:18px;color:var(--dark);margin:0 0 3px}.guide p{margin:0;color:var(--muted);font-size:13px}.guide a{color:var(--dark)}.cycle{white-space:nowrap;font-size:12px;color:var(--dark);font-weight:700}.decision{text-align:center;padding:18px 10px}.decision strong{display:block;font-size:16px}.decision small{color:var(--muted)}.decision:before{content:'↓';display:block;font-size:24px;color:var(--accent)}.paths{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.path-body{padding:16px;display:grid;gap:10px}.path-body>.step:not(:first-child):before{content:'↓';display:block;height:18px;text-align:center;color:var(--accent);margin-top:-3px}.path-body>.step:not(:first-child){margin-top:9px}.review{border:1px dashed #d5aa6d;border-radius:9px;background:#fffaf3;padding:12px 14px;font-size:12px}.review strong{display:block;color:#8b5819;margin-bottom:4px}.merge{background:transparent;color:var(--dark);border:1px solid var(--accent);border-radius:9px;padding:10px 14px;text-align:center;font-weight:800}.loop-label{padding:8px 12px;background:var(--faint);border-radius:7px;color:var(--dark);font-size:12px;font-weight:700}.rfc-end{border-top:1px solid var(--line);padding:12px 4px 0;color:var(--muted);font-size:12px}.rfc-end strong{display:block;color:var(--ink);margin-bottom:4px}.return{text-align:center;font-size:12px;color:var(--dark)}.support{margin-top:18px}.support-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px}.support details{background:#f7f9fa;border:1px solid var(--line);border-radius:9px}.support summary strong{font-size:14px}.sequence{padding-left:20px;margin:0}.sequence li+li{margin-top:8px}.note{text-align:center;color:var(--muted);font-size:12px;margin:18px auto 0;max-width:900px}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:18px 0 0;padding:14px 2px 0;border-top:1px solid #d7dde0;color:var(--muted);font-size:12px}.site-footer a{color:inherit;text-decoration:none}.site-footer a:hover{text-decoration:underline}.site-footer-right{display:flex;gap:7px} @media(max-width:850px){.intro,.support-grid{grid-template-columns:1fr}.guide{align-items:flex-start;flex-direction:column;gap:8px}}@media(max-width:620px){.wrap{padding:18px 10px 28px}.paths{grid-template-columns:1fr}.toolbar{align-items:flex-start}.legend{gap:6px 12px}.site-footer{flex-direction:column;align-items:flex-start}.cycle{white-space:normal}}@media print{body{background:white}.wrap{max-width:none;padding:0}.toolbar{display:none}.panel{box-shadow:none}.paths{grid-template-columns:1fr 1fr}.step{break-inside:avoid}.support-grid{grid-template-columns:1fr}.hero h1{font-size:30px}}
|
||
|
||
.info-trigger{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:#fff;border:1px solid #b9cbd0;border-radius:8px;color:var(--dark);font-size:12px;font-weight:700}.info-trigger::after{content:'i';display:inline-grid;place-items:center;width:15px;height:15px;border:1px solid currentColor;border-radius:50%;font-size:10px}.glossary{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 16px}.glossary-label{font-size:12px;color:var(--muted);margin-right:3px}dialog{width:min(580px,calc(100% - 32px));max-height:85vh;padding:0;border:1px solid #b9cbd0;border-radius:14px;color:var(--ink);background:white;box-shadow:0 20px 70px #20262b40}dialog::backdrop{background:rgba(25,40,47,.38)}.popup-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:20px 22px;background:var(--faint);border-bottom:1px solid var(--line)}.popup-head h2{margin:0;font-size:22px}.popup-head p{margin:4px 0 0;color:var(--muted);font-size:13px}.popup-close{font-size:22px;line-height:1;padding:6px 10px}.popup-body{padding:18px 22px 22px}.popup-body h3{font-size:14px;margin:18px 0 6px;color:var(--dark)}.popup-body p{margin:0 0 10px}.popup-body ul{padding-left:20px;margin:6px 0}.popup-body li{margin:7px 0}.lifecycle{padding:12px;border-left:3px solid var(--accent);background:var(--faint);font-size:13px}.popup-note{font-size:12px;color:var(--muted)}
|
||
.info-trigger{display:inline-grid;place-items:center;vertical-align:middle;width:17px;height:17px;padding:0;margin:0 3px;border-radius:50%;font:700 10px/1 system-ui;background:transparent}.info-trigger::after{content:none}.hero{position:relative;padding:0 56px}.nav-arrow{position:absolute;left:0;top:clamp(15.75px,2.1525vw,25.2px);transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;border:1px solid #c6cdd1;border-radius:9px;background:#e9edef;color:#4e5961;text-decoration:none;font:26px/1 system-ui}.nav-arrow:hover{background:#dce3e7}@media(max-width:620px){.hero{padding:0 0 0 56px;text-align:left}}</style></head><body><main class="wrap"><header class="hero"><a class="nav-arrow" href="#engineering-activities" aria-label="Zur Engineering-Treppe" title="Engineering Activities by Software Criticality">←</a><h1>My Agentic AI Workflow</h1><p>Vom ersten Dialog zum geprüften Merge — geführt durch Werkbaum, PSP und Lean-Path.</p><div class="rule"></div></header><div class="toolbar"><div class="legend" aria-label="Legende: Führung"><span><i class="dot human"></i>Mensch führt</span><span><i class="dot"></i>Agentic AI führt</span><span>+ Details aufklappen</span></div><button id="expand" type="button">Alle Details öffnen</button></div>
|
||
<section class="panel"><header class="panel-head"><span class="eyebrow">Gemeinsamer Einstieg</span><h2>Verstehen, strukturieren, ausrichten</h2></header><div class="intro"><details class="step human"><summary><span class="actor">Mensch führt</span><strong>Idee & Dialog</strong><span class="desc">Problem, Hintergrund und Möglichkeiten ausloten.</span></summary><div class="detail">Meist am Smartphone im Chat mit Claude oder ChatGPT. Die KI hilft, Anforderungen und Alternativen zu erkunden.</div></details><details class="step ai"><summary><span class="actor">KI führt</span><strong>Werkbaum & RFC<button type="button" class="info-trigger" data-info="rfc" aria-label="RFC erläutern" aria-haspopup="dialog">i</button> entwerfen</strong><span class="desc">PSP und Lean-Path als Vorschlag ausarbeiten.</span></summary><div class="detail">Ein Frontier-Modell erstellt den Werkbaum und bei Bedarf ein RFC<button type="button" class="info-trigger" data-info="rfc" aria-label="RFC erläutern" aria-haspopup="dialog">i</button> mit Abwägungen. Der Mensch bestimmt Ziele und Rahmenbedingungen.</div></details><details class="step human"><summary><span class="actor">Mensch führt</span><strong>Werkbaum überarbeiten</strong><span class="desc">Struktur und Umsetzungspfad am Computer schärfen.</span></summary><div class="detail">In Diskussion mit der KI, zunächst mit einem Mid-Tier-Modell. Der Werkbaum bleibt der Leitfaden für die folgenden Arbeitspakete.</div></details></div></section>
|
||
<section class="guide" aria-label="Übergeordneter Leitfaden"><div><h2>Werkbaum · PSP & Lean-Path</h2><p>Übergeordneter Leitfaden für beide Pfade: Arbeitspaket auswählen, konkretisieren und den Fortschritt zurückführen. <a href="https://werkbaum.javagil.de" target="_blank" rel="noopener">Werkbaum-Editor öffnen ↗</a></p></div><span class="cycle">↻ Nach jedem Merge zurück zum Werkbaum</span></section>
|
||
<div class="decision"><strong>Wie umfangreich, komplex und kritisch ist das Arbeitspaket?</strong><small>Reversibilität gehört zur Kritikalität — etwa bei Datenbankmigrationen.</small></div>
|
||
<div class="paths"><section class="panel"><header class="panel-head"><span class="eyebrow">Anforderungen: klein · einfach · unkritisch</span><h2>Kompakter Pfad</h2><p>Ein klarer Auftrag, direkte Umsetzung und kurzer Review.</p></header><div class="path-body"><details class="step ai"><summary><span class="actor">KI führt</span><strong>Goal-Prompt erarbeiten</strong><span class="desc">Auftrag formulieren und überarbeiten.</span></summary><div class="detail">Ziele, Nicht-Ziele, Hintergrund, Kompatibilität, Akzeptanzkriterien und Risiken aus den Anforderungen übernehmen. Der Mensch prüft die Ausrichtung.</div></details><details class="step ai"><summary><span class="actor">KI führt</span><strong>Branch umsetzen</strong><span class="desc">Das ausgewählte Werkbaum-Arbeitspaket bearbeiten und Status laufend aktualisieren.</span></summary><div class="detail">AGENTS.md und weitere Dokumentation bilden die Arbeitsgrundlage. Bei Unklarheiten Rückfragen klären; bei zunehmender Komplexität zum Frontier-Modell wechseln.</div></details><details class="step human"><summary><span class="actor">Mensch führt</span><strong>Kurzer PR<button type="button" class="info-trigger" data-info="pr" aria-label="PR erläutern" aria-haspopup="dialog">i</button>-Review</strong><span class="desc">Ergebnis und Änderungsumfang auf Plausibilität prüfen.</span></summary><div class="detail">Auch hier führen Auffälligkeiten zur Klärung oder Nacharbeit. Zeigen sich höhere Risiken, in den strukturierten Pfad wechseln.</div></details><div class="review"><strong>↻ Bei Auffälligkeiten zurück in die Bearbeitung</strong>Begründung und Evidenz prüfen → akzeptieren oder nacharbeiten lassen → erneut reviewen. Bei höherer Komplexität oder Kritikalität in den strukturierten Pfad wechseln.</div><div class="merge">✓ Review bestanden → Merge</div><div class="return">↻ Zum Werkbaum: nächstes Arbeitspaket wählen</div></div></section>
|
||
<section class="panel"><header class="panel-head"><span class="eyebrow">Anforderungen: groß · komplex · kritisch</span><h2>Strukturierter Pfad</h2><p>Ein RFC<button type="button" class="info-trigger" data-info="rfc" aria-label="RFC erläutern" aria-haspopup="dialog">i</button> wird in einer Folge von CR<button type="button" class="info-trigger" data-info="cr" aria-label="CR erläutern" aria-haspopup="dialog">i</button>/PR<button type="button" class="info-trigger" data-info="pr" aria-label="PR erläutern" aria-haspopup="dialog">i</button>-Paaren abgearbeitet.</p></header><div class="path-body"><div class="loop-label">↻ Je CR<button type="button" class="info-trigger" data-info="cr" aria-label="CR erläutern" aria-haspopup="dialog">i</button>/PR<button type="button" class="info-trigger" data-info="pr" aria-label="PR erläutern" aria-haspopup="dialog">i</button>-Paar: Zuschnitt → Szenarien → Umsetzung → Review → Merge</div><details class="step human"><summary><span class="actor">Mensch führt · KI unterstützt</span><strong>CR<button type="button" class="info-trigger" data-info="cr" aria-label="CR erläutern" aria-haspopup="dialog">i</button> gemeinsam zuschneiden</strong><span class="desc">Aus dem Werkbaum ein prüfbares Arbeitspaket ableiten.</span></summary><div class="detail">Der Mensch schneidet den CR<button type="button" class="info-trigger" data-info="cr" aria-label="CR erläutern" aria-haspopup="dialog">i</button> in Diskussion mit der KI zu. <ul><li>Ziele und Nicht-Ziele</li><li>Hintergrund und Kompatibilitätsanforderungen</li><li>Akzeptanzkriterien und relevante Risiken</li></ul>Ein eigener Branch und PR<button type="button" class="info-trigger" data-info="pr" aria-label="PR erläutern" aria-haspopup="dialog">i</button> je CR<button type="button" class="info-trigger" data-info="cr" aria-label="CR erläutern" aria-haspopup="dialog">i</button>.<p style="margin:12px 0 0"> </p></div></details><details class="step human"><summary><span class="actor">Mensch führt</span><strong>BDD-Szenarien → Behaviour-Tests</strong><span class="desc">Erwartetes Verhalten vor der Umsetzung konkretisieren.</span></summary><div class="detail">Szenarien aus dem CR<button type="button" class="info-trigger" data-info="cr" aria-label="CR erläutern" aria-haspopup="dialog">i</button> ableiten und in Behaviour-Tests überführen. Die menschliche Führung sichert die fachliche Ausrichtung; KI kann unterstützen.</div></details><details class="step ai"><summary><span class="actor">KI führt</span><strong>CR<button type="button" class="info-trigger" data-info="cr" aria-label="CR erläutern" aria-haspopup="dialog">i</button> umsetzen</strong><span class="desc">Branch entlang des Werkbaums bearbeiten und Status laufend aktualisieren.</span></summary><div class="detail">Testsuites, Checks und Regeln begleiten die Bearbeitung. Rückfragen und Modellwechsel stehen während der Umsetzung zur Verfügung.</div></details><details class="step human"><summary><span class="actor">Mensch führt</span><strong>Intensiver PR<button type="button" class="info-trigger" data-info="pr" aria-label="PR erläutern" aria-haspopup="dialog">i</button>-Review</strong><span class="desc">Aufgabe, Lösung und Änderungsumfang abgleichen.</span></summary><div class="detail">Ist der Umfang plausibel? Sind aufgabenfremde Änderungen enthalten? Code, Tests und Änderungen an Guardrails<button type="button" class="info-trigger" data-info="guardrails" aria-label="Guardrails erläutern" aria-haspopup="dialog">i</button> prüfen. LoC sind ein Anlass zum Hinsehen, kein Qualitätsnachweis.</div></details><div class="review"><strong>↻ Alarm im Review?</strong>Begründung und Evidenz einfordern → menschlich bewerten.<br>Überzeugend: akzeptieren. Sonst: Nacharbeit und erneuter Review.</div><div class="merge">✓ Review bestanden → Merge je CR<button type="button" class="info-trigger" data-info="cr" aria-label="CR erläutern" aria-haspopup="dialog">i</button></div><div class="return">↻ Weitere CRs offen? Zum Werkbaum zurückkehren und das nächste CR<button type="button" class="info-trigger" data-info="cr" aria-label="CR erläutern" aria-haspopup="dialog">i</button>/PR<button type="button" class="info-trigger" data-info="pr" aria-label="PR erläutern" aria-haspopup="dialog">i</button>-Paar zuschneiden.</div><div class="rfc-end"><strong>RFC<button type="button" class="info-trigger" data-info="rfc" aria-label="RFC erläutern" aria-haspopup="dialog">i</button> vollständig abgearbeitet?</strong>Das RFC<button type="button" class="info-trigger" data-info="rfc" aria-label="RFC erläutern" aria-haspopup="dialog">i</button>-Dokument wird entfernt. Die CR<button type="button" class="info-trigger" data-info="cr" aria-label="CR erläutern" aria-haspopup="dialog">i</button>- und PR<button type="button" class="info-trigger" data-info="pr" aria-label="PR erläutern" aria-haspopup="dialog">i</button>-Dokumente bleiben erhalten.<p style="margin:10px 0 0"></p></div></div></section></div>
|
||
<section class="panel support"><header class="panel-head"><span class="eyebrow">Während der Bearbeitung</span><h2>Klärung, Guardrails<button type="button" class="info-trigger" data-info="guardrails" aria-label="Guardrails erläutern" aria-haspopup="dialog">i</button> & Modellwechsel</h2><p>Begleiten beide Pfade, sobald sie benötigt werden.</p></header><div class="support-grid">
|
||
<details><summary><strong>Rückfragen klären</strong><span class="desc">Multiple-Choice → Nebenchat → eigene Entscheidung</span></summary><div class="detail"><ol class="sequence"><li>KI stellt eine Multiple-Choice-Rückfrage.</li><li>Mensch prüft: Sind die Konsequenzen klar?</li><li>Bei Bedarf Optionen im Nebenchat ausleuchten; wiederholen, bis die Entscheidung klar ist.</li><li>Option wählen oder das eigene Ergebnis über „Other“ zurückgeben.</li><li>Agent setzt die Bearbeitung fort.</li></ol></div></details>
|
||
<details><summary><strong>Guardrails<button type="button" class="info-trigger" data-info="guardrails" aria-label="Guardrails erläutern" aria-haspopup="dialog">i</button> & Arbeitsgrundlage</strong><span class="desc">Testsuites · Checks · Regeln · AGENTS.md</span></summary><div class="detail">Testsuites, Analyse und Limits sowie Regeln in DE/EN begleiten die Umsetzung durchgehend. AGENTS.md und weitere Dokumentation geben den Arbeitsrahmen vor.<p style="margin:10px 0 0">Guardrails<button type="button" class="info-trigger" data-info="guardrails" aria-label="Guardrails erläutern" aria-haspopup="dialog">i</button> werden laufend angepasst, meist vom Menschen ausgehend. Änderungen durch den Agenten werden vom Menschen reviewed.</p><p style="margin:12px 0 0"></p></div></details>
|
||
<details><summary><strong>Modell eskalieren</strong><span class="desc">Mid-Tier → Frontier bei zunehmender Komplexität</span></summary><div class="detail">Für die erste Ausarbeitung von Werkbaum und RFC<button type="button" class="info-trigger" data-info="rfc" aria-label="RFC erläutern" aria-haspopup="dialog">i</button> kommt ein Frontier-Modell zum Einsatz. Die weitere Bearbeitung kann mit Mid-Tier starten. Wird sie zu komplex oder fährt sich fest, wird zum Frontier-Modell gewechselt.</div></details>
|
||
</div></section><p class="note">Die Farben zeigen, wer einen Schritt führt; Unterstützung durch den jeweils anderen bleibt möglich. Der dargestellte Workflow endet beim Merge.</p><footer class="site-footer">
|
||
<div class="site-footer-left">(C) 2026 <a href="https://michael.hoennig.de/" rel="author" target="_top">Michael Hönnig</a></div>
|
||
<div class="site-footer-right">
|
||
<a href="https://michael.hoennig.de/en/imprint/" target="_top">Imprint</a>
|
||
<span aria-hidden="true">-</span>
|
||
<a href="https://michael.hoennig.de/en/privacy-policy/" target="_top">Privacy</a>
|
||
</div>
|
||
</footer></main><dialog id="info-rfc" aria-labelledby="title-rfc" aria-describedby="sub-rfc"><header class="popup-head"><div><h2 id="title-rfc">RFC</h2><p id="sub-rfc">Request for Comments · Übergreifender Lösungsentwurf</p></div><button type="button" class="popup-close" aria-label="Erklärung schließen" autofocus>×</button></header><div class="popup-body"><p>Das RFC-Dokument beschreibt eine größere Änderung und die Abwägungen dahinter. Es ergänzt den Werkbaum als fachliche und technische Diskussionsgrundlage.</p><h3>Was gehört hinein?</h3><ul><li>Problem, Zielbild und Hintergrund</li><li>Lösungsansatz, Alternativen und Abwägungen</li><li>Übergreifende Randbedingungen und Risiken</li></ul><h3>Rolle in diesem Workflow</h3><div class="lifecycle">RFC → Folge von CR/PR-Paaren → vollständig umgesetzt → RFC-Dokument entfernen</div><p style="margin-top:12px">Die CR- und PR-Dokumente bleiben erhalten. Entscheidungen, die weiterhin gebraucht werden, sollten vor dem Entfernen in dauerhafte Dokumentation übernommen werden.</p><p class="popup-note">Das Entfernen ist eine Konvention dieses Workflows; RFC-Dokumente werden nicht grundsätzlich überall gelöscht. Bei Versionsverwaltung bleibt die Historie erhalten.</p></div></dialog><dialog id="info-cr" aria-labelledby="title-cr" aria-describedby="sub-cr"><header class="popup-head"><div><h2 id="title-cr">CR</h2><p id="sub-cr">Change Request · Konkreter Änderungsauftrag</p></div><button type="button" class="popup-close" aria-label="Erklärung schließen" autofocus>×</button></header><div class="popup-body"><p>Ein CR grenzt ein Arbeitspaket aus dem Werkbaum beziehungsweise RFC so ab, dass es umgesetzt und geprüft werden kann. Der Mensch schneidet es in Diskussion mit der KI zu.</p><h3>Was steht im CR-Dokument?</h3><ul><li>Ziele und ausdrücklich ausgeschlossene Nicht-Ziele</li><li>Hintergrund und besondere Hinweise, etwa zur Kompatibilität</li><li>Akzeptanzkriterien und relevante Risiken</li><li>BDD-Szenarien zur Konkretisierung des erwarteten Verhaltens</li></ul><h3>Rolle in diesem Workflow</h3><div class="lifecycle">Ein CR → eigener Branch und PR → Review und Merge → CR-Dokument bleibt erhalten</div><p style="margin-top:12px">Der CR hält den Auftrag fest. Der zugehörige PR macht die Umsetzung prüfbar.</p></div></dialog><dialog id="info-pr" aria-labelledby="title-pr" aria-describedby="sub-pr"><header class="popup-head"><div><h2 id="title-pr">PR</h2><p id="sub-pr">Pull Request · Umsetzung zur Prüfung</p></div><button type="button" class="popup-close" aria-label="Erklärung schließen" autofocus>×</button></header><div class="popup-body"><p>Der PR bündelt die vorgeschlagenen Änderungen eines Branches und macht sie vor dem Merge reviewbar. Er gehört hier jeweils zu einem CR.</p><h3>PR und PR-Dokument</h3><p>Der PR umfasst die Codeänderungen und deren Review. Das zugehörige PR-Dokument hält die Umsetzung nachvollziehbar fest; es ersetzt nicht die Prüfung des Diffs.</p><ul><li>Bezug zum CR und Zusammenfassung der Lösung</li><li>Wesentliche Umsetzungsentscheidungen und Abweichungen</li><li>Validierung, Testergebnisse und geklärte Review-Punkte</li></ul><h3>Rolle in diesem Workflow</h3><div class="lifecycle">Umsetzung → Review ↔ Nacharbeit → Merge → PR-Dokument bleibt erhalten</div><p style="margin-top:12px" class="popup-note">Die genannten Inhalte sind eine Orientierung für das Dokument, keine Vorgabe für ein bestimmtes Hosting-System oder Dateiformat.</p></div></dialog><dialog id="info-guardrails" aria-labelledby="title-guardrails" aria-describedby="sub-guardrails"><header class="popup-head"><div><h2 id="title-guardrails">Guardrails</h2><p id="sub-guardrails">Leitplanken · Regeln, Prüfungen und Arbeitsgrenzen</p></div><button type="button" class="popup-close" aria-label="Erklärung schließen" autofocus>×</button></header><div class="popup-body"><p>Guardrails geben der Bearbeitung einen Rahmen und helfen, unerwünschte Änderungen oder Fehler zu erkennen. Manche sind automatisch durchsetzbar, andere benötigen menschliche Prüfung.</p><h3>Arten und Beispiele</h3><ul><li><strong>Verhalten prüfen:</strong> Behaviour-, Unit- und Integrationstests kontrollieren erwartete Ergebnisse und Regressionen.</li><li><strong>Qualität automatisch prüfen:</strong> etwa statische Analyse, Typprüfung, Formatierung, Abhängigkeitschecks und definierte Limits.</li><li><strong>Arbeitsregeln festhalten:</strong> AGENTS.md und weitere Dokumentation beschreiben Konventionen, Projektwissen und Vorgaben in DE/EN.</li><li><strong>Handlungsgrenzen setzen:</strong> etwa erlaubte Änderungen und Freigaben für sensible Aktionen, soweit im Projekt festgelegt.</li><li><strong>Menschlich kontrollieren:</strong> Review bewertet fachliche Passung, Änderungsumfang und Auffälligkeiten.</li></ul><h3>Wer passt sie an?</h3><p>Meist geht die Anpassung vom Menschen aus. Ändert der Agent die Guardrails, werden diese Änderungen vom Menschen reviewed.</p><div class="lifecycle">Schriftliche Regeln leiten an. Automatische Checks prüfen definierte Eigenschaften. Menschlicher Review beurteilt den Kontext.</div></div></dialog><script>
|
||
const toggle=document.getElementById('expand');
|
||
const details=[...document.querySelectorAll('details')];
|
||
function sync(){const allOpen=details.every(item=>item.open);toggle.textContent=allOpen?'Alle Details schließen':'Alle Details öffnen';}
|
||
toggle.addEventListener('click',()=>{const open=!details.every(item=>item.open);details.forEach(item=>item.open=open);sync();});
|
||
details.forEach(item=>item.addEventListener('toggle',sync));
|
||
|
||
document.querySelectorAll('[data-info]').forEach(button=>button.addEventListener('click',event=>{event.preventDefault();event.stopPropagation();document.getElementById('info-'+button.dataset.info).showModal();}));
|
||
document.querySelectorAll('dialog').forEach(dialog=>{
|
||
dialog.querySelector('.popup-close').addEventListener('click',()=>dialog.close());
|
||
dialog.addEventListener('click',event=>{if(event.target===dialog){const r=dialog.getBoundingClientRect();if(event.clientX<r.left||event.clientX>r.right||event.clientY<r.top||event.clientY>r.bottom)dialog.close();}});
|
||
});
|
||
</script><script>
|
||
document.querySelector('.nav-arrow').addEventListener('click',e=>{e.preventDefault();parent.postMessage({type:'show-staircase'},'*')});
|
||
const reportHeight=()=>parent.postMessage({type:'workflow-height',height:document.querySelector('.wrap').getBoundingClientRect().height},'*');
|
||
new ResizeObserver(reportHeight).observe(document.querySelector('.wrap'));
|
||
window.addEventListener('load',reportHeight);
|
||
</script></body></html>"></iframe>
|
||
<script>
|
||
(()=>{
|
||
const app=document.querySelector('.devapp'),stair=document.getElementById('staircase-view'),workflow=document.getElementById('workflow-view');
|
||
const tabs=[...document.querySelectorAll('.global-tabs button')];
|
||
function route(){
|
||
const isStair=location.hash==='#engineering-activities',isWorkflow=location.hash==='#workflow';
|
||
app.hidden=isStair||isWorkflow;stair.hidden=!isStair;workflow.hidden=!isWorkflow;
|
||
if(!app.hidden){const tab=tabs.find(b=>'#'+b.dataset.tab===location.hash);if(tab&&!tab.classList.contains('active'))tab.click();}
|
||
}
|
||
tabs.forEach(b=>b.addEventListener('click',()=>history.replaceState(null,'','#'+b.dataset.tab)));
|
||
window.addEventListener('hashchange',()=>{route();window.scrollTo(0,0);const target=!stair.hidden?stair:!workflow.hidden?workflow:document.getElementById('practices-heading');target.focus({preventScroll:true});});
|
||
window.addEventListener('message',e=>{
|
||
const fromStair=e.source===stair.contentWindow,fromWorkflow=e.source===workflow.contentWindow;
|
||
if(!fromStair&&!fromWorkflow)return;
|
||
const d=e.data;
|
||
if(fromStair&&d?.type==='show-practices')location.hash='practices';
|
||
if(fromStair&&d?.type==='show-workflow')location.hash='workflow';
|
||
if(fromWorkflow&&d?.type==='show-staircase')location.hash='engineering-activities';
|
||
if(Number.isFinite(d?.height)&&d.height>0){
|
||
if(fromStair&&d.type==='stair-height')stair.style.height=Math.ceil(d.height)+'px';
|
||
if(fromWorkflow&&d.type==='workflow-height')workflow.style.height=Math.ceil(d.height)+'px';
|
||
}
|
||
});
|
||
route();
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|