/* =========================================================================== ArticlePrinciples.jsx — Principles 1-5 with their interactive artifacts ===========================================================================*/ /* ---------- Principle 1: Don't go deep. Stay simple. -----------------------*/ const PrincipleOne = () => { return (
PRINCIPLE 01

Don't go deep. Stay simple.

Yesterday Qwen3.5. Today Qwen3.6. Tomorrow something else. The temptation is to go deep: pick a model, fine-tune it, build complex orchestration around its quirks. That's how you get stuck.

This isn't only about models. It applies to every layer of your stack: framework, vector DB, orchestration, agent runtime. None of these are durable choices in 2026. The half-life of "best-in-class" is about three months.

So build with tools that are understandable, manageable, and fault-tolerant. Two simple tests for whether you've gone too far: a new teammate can't reason about a component on their first day, or something breaks at 11 PM and you can't debug it without paging a senior engineer.

"Simple" doesn't mean stripped-down. It means the right capability, with predictable failure modes and operational headroom. We knew on day one we'd need to support 2,000 people, so the portal had to scale cleanly to that load, not cleverly. It needed proven deployments at 10x our user count so we'd know where the cliff was before we hit it. And it had to support MCP out of the box, because AI without access to your internal systems is just a chat.

We picked OpenWebUI. Johannes Gutenberg University Mainz was already running it for 30,000+ students and 5,000+ employees. That validation mattered more than feature lists. At the time of the decision it was the best option for our requirements. As far as I can tell, it still is.

When something better comes along, we swap. The skills, the data, the user habits stay.
); }; window.PrincipleOne = PrincipleOne; /* The half-life slider: drag a "month" cursor; deep-bet rows decay, simple rows survive */ const StackHalfLife = () => { const [m, setM] = React.useState(0); // months elapsed 0..12 const layers = [ {name: 'Model', deep: 'fine-tuned Qwen3.5 with custom RLHF', simple: 'any tool-calling model · pluggable', life: 2}, {name: 'Framework', deep: 'LangGraph + custom orchestrator', simple: 'plain functions · plain MCP', life: 4}, {name: 'Vector DB', deep: 'sharded Weaviate cluster', simple: 'pgvector in our existing Postgres', life: 5}, {name: 'Agent runtime', deep: 'Autogen + bespoke memory layer', simple: 'one Docker container per chat', life: 3}, {name: 'Portal', deep: 'home-rolled chat UI', simple: 'OpenWebUI (proven at 30k+)', life: 12}, ]; return (
stack half-life simulator drag the month cursor → SIMULATING
month {m === 0 ? '0 (today)' : `+${m}`} setM(+e.target.value)} className="range" style={{flex: 1, maxWidth: 380}} /> {m === 12 ? 'a year later' : ''}
036912
layer
deep bet · custom
simple · understandable
{layers.map((L, i) => { const decay = Math.max(0, 1 - m / Math.max(L.life, 1)); const dead = m > L.life; return (
{L.name}
{L.deep} {dead && obsolete}
{L.simple} still here
); })}
▸ when a deep bet dies, you rewrite. when a simple layer is replaced, the skills, data, and user habits stay.
); }; window.StackHalfLife = StackHalfLife; /* ---------- Principle 2: Build the ecosystem, not the product. ------------*/ const PrincipleTwo = () => { return (
PRINCIPLE 02

Build the ecosystem, not the product.

Your user touches your AI in many places: the portal, the team chat, the IDE, the cloud workspace, the bot in a messenger. Each of those is a surface. Most companies build them as separate products, and that's the mistake.

The skills they build, the MCP connectors they configure, the memory they accumulate, their context. All of it should follow them across every surface. A skill made in the portal should run in the chat bot. A connection set up in the cloud workspace should work for the autonomous agent at night. Memory of one conversation should inform the next, regardless of where it happens.

This compounds. Each new surface multiplies the value of every existing skill, and each new skill makes every surface more useful. Without that, you end up with a portfolio of disconnected products and you wonder why nobody uses them.

There's also a simple math problem here. If I went and built a great IDP pipeline myself, I might save the company $250K a year. That's a real number. But I'm one engineer. I cannot personally build the thousand small workflows that 1,100 people need every day. Nobody can.

The ecosystem can. Each user automates the friction that's specific to their job, the kind no centralized team would ever bother to solve. As those workflows accumulate, you get the foundation for the next layer: coordination across teams, signal for leaders, focused management of what people are doing with AI.

That's how Coordination, Sivulka's first pillar, actually emerges in practice. Not imposed from the top, but grown from an ecosystem with enough usage to coordinate.

The unit of work is no longer "the chatbot" or "the IDE plugin." It's the user's accumulated capability, and your job is to make sure they carry it everywhere.
); }; window.PrincipleTwo = PrincipleTwo; /* Compounding-leverage inventory: a real skill (counterparty check) accrues invocations across surfaces and users; the math compounds in real time. */ const EcosystemMap = () => { const SURFACES = ['Portal', 'Slack bot', 'IDE', 'Cloud workspace', 'Night agent', 'Web embed']; const USERS = ['j.miller · risk', 'd.cohen · sales', 'm.parker · legal', 'e.johnson · ops', 'k.reed · finance', 'a.walker · audit', 'l.foster · ops', 's.nelson · sales', 'r.bailey · legal', 'n.greene · finance']; const ACTIONS = [ 'pulled INN from invoice', 'fetched company card · gov registry', 'crossed with internal blacklist', 'checked litigation history', 'pulled bank statement summary', 'flagged sanctions overlap', 'wrote 1-page risk memo', 'attached supporting docs', 'queued for night re-check', 'exported PDF report', ]; const [events, setEvents] = React.useState([]); // newest first const [tick, setTick] = React.useState(0); React.useEffect(() => { // seed a couple so the panel isn't empty const seed = Array.from({length: 4}, (_, i) => ({ id: -i - 1, t: '—', surface: SURFACES[i % SURFACES.length], user: USERS[i % USERS.length], action: ACTIONS[i % ACTIONS.length], })); setEvents(seed); let n = 0; const id = setInterval(() => { n++; const now = new Date(); const t = `${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}`; const ev = { id: n, t, surface: SURFACES[Math.floor(Math.random() * SURFACES.length)], user: USERS[Math.floor(Math.random() * USERS.length)], action: ACTIONS[Math.floor(Math.random() * ACTIONS.length)], }; setEvents(prev => [ev, ...prev].slice(0, 14)); setTick(n); }, 1100); return () => clearInterval(id); }, []); // compounding math (animated) const skills = 1; const surfaces = 6; const users = Math.min(1100, 40 + tick * 28); const perDay = Math.min(18, 4 + tick * 0.35); const leverage = Math.round(skills * surfaces * users * perDay); return (
skill.counterparty_check · live invocation log one skill · accruing across surfaces & users RECORDING
{/* LEFT — inventory log */}
time
surface
user · role
what the skill did
{events.map((e, i) => (
{e.t}
{e.surface}
{e.user}
{e.action}
))}
{/* RIGHT — compounding math */}
compounding leverage
skills {skills}
× surfaces {surfaces}
× users reached {users.toLocaleString()}
× invocations / user / day {perDay.toFixed(1)}
= work / day {leverage.toLocaleString()}
▸ one engineer building the same workflow as a one-off:
~$250K / yr saved, ceiling.
▸ same workflow shipped as a skill on the ecosystem:
{leverage.toLocaleString()} runs / day · no ceiling.
▸ a skill made in the portal runs in the chat bot. a connection set up in the cloud workspace works for the night agent. each new surface multiplies every existing skill.
◇ illustrative · synthetic data · the math is real, the log is generated for this article
); }; window.EcosystemMap = EcosystemMap; /* ---------- Principle 3: Make logging in the hardest step. -----------------*/ const PrincipleThree = () => { return (
PRINCIPLE 03

Make logging in the hardest step.

Be honest with yourself about your users. They struggle with passwords. They file helpdesk tickets when their VPN reconnects. Most of them have never opened a terminal in their life.

Now imagine telling them to install Claude Code. Install Node.js first. Set up an MCP server. Configure their API keys. Edit a JSON file. Restart, get the path wrong, debug.

You've already lost.

The barrier to entry isn't a feature on your roadmap. It is the feature. If a user can log in and immediately do something useful (read a document, draft an email, generate a report, ask their data a question), you've won. Everything else is power-user territory.

For power users, give them a ceiling: a cloud workspace with Claude Code pre-installed, MCPs auto-mounted, skills available, no setup. They go deep on their own terms. They don't need to drag everyone else through their toolchain.

Low floor. High ceiling. No middle for people to get stuck in.
); }; window.PrincipleThree = PrincipleThree; /* The two-path interactive: DIY install vs Coder + custom template */ const FloorCeiling = () => { const [path, setPath] = React.useState('template'); // 'diy' | 'template' const [step, setStep] = React.useState(0); const [ok, setOk] = React.useState(false); const diy = [ {t: 'Install Node.js · Python · uv', ok: true}, {t: 'Install Claude Code', ok: true}, {t: 'Get an API key, set env vars', ok: true}, {t: 'Edit ~/.claude/config.json', fail: 'JSON syntax error'}, {t: 'Stand up your own MCP servers', fail: 'connection refused · port 7777'}, {t: 'Wire up secrets, SSO, gateway', fail: 'expired token · contact IT'}, {t: 'Hope it restarts cleanly tomorrow', fail: ''}, ]; const template = [ {t: 'Open Coder · pick custom template', ok: true}, {t: 'Workspace boots · Claude Code ready', ok: true}, {t: 'LiteLLM gateway · already wired', ok: true}, {t: 'Internal MCP servers · auto-mounted', ok: true}, {t: 'Skills library · already mounted', ok: true}, {t: '✓ consuming in ~60 sec', ok: true, done: true}, ]; const list = path === 'diy' ? diy : template; React.useEffect(() => { setStep(0); setOk(false); let i = 0; const id = setInterval(() => { i++; if (i >= list.length) { clearInterval(id); setOk(path === 'template'); return; } setStep(i); }, 750); return () => clearInterval(id); }, [path]); return (
same user · two onboarding paths what we shipped vs. what we avoided RUNNING
{/* path selector */}
{[ {k: 'diy', label: 'DIY install · Claude Code + your own MCPs'}, {k: 'template', label: 'Coder · custom template (skills · LiteLLM · MCPs pre-wired)'} ].map(o => ( ))}
{/* staircase */}
steps to first useful action
{list.map((s, i) => { const active = i === step; const reached = i < step || (i === step && (s.ok || s.done)); const failed = active && s.fail !== undefined; return (
step ? .35 : 1, transition: 'all .3s ease' }}> {failed ? '!' : reached ? '✓' : i + 1} {s.t} {failed && {s.fail || 'stuck'}}
); })}
{/* outcome */}
outcome {path === 'diy' ? (
Stuck assembling a setup.
Hours spent on plumbing before the first useful prompt. Most users won't make it past step 4. The ones who do still own a fragile config.
→ time spent on plumbing: hours
→ time consuming AI: ~0
→ drift across users: high
) : (
Consuming in ~60 seconds.
Pick a template. The workspace boots with the gateway, MCPs and skills already wired. They start using AI instead of installing it.
→ time spent on plumbing: ~0
→ time to first useful prompt: ~60 sec
→ drift across users: none — same template
)}
low floor · open template → consuming
high ceiling · Claude Code, full toolchain in the same workspace
no middle · nothing to assemble by hand
); }; window.FloorCeiling = FloorCeiling;