diff --git a/apps/docs/scripts/check-built-site.mjs b/apps/docs/scripts/check-built-site.mjs
index 512d4f93..936fa889 100644
--- a/apps/docs/scripts/check-built-site.mjs
+++ b/apps/docs/scripts/check-built-site.mjs
@@ -178,37 +178,6 @@ for (const [locale, html] of [
     throw new Error(`${locale} homepage is missing the CLI terminal playback.`);
   }
 
-  for (const surface of [
-    'hero',
-    'code-intelligence',
-    'hitl',
-    'progressive-api',
-    'runtime-tool',
-    'cross-session-context',
-  ]) {
-    if (!html.includes(`data-a3s-code-tui="${surface}"`)) {
-      throw new Error(
-        `${locale} homepage is missing the shared A3S Code TUI shell for ${surface}.`,
-      );
-    }
-  }
-
-  const tuiChromeCount = html.match(/data-tui-region="chrome"/g)?.length ?? 0;
-  const tuiPromptCount = html.match(/data-tui-region="prompt"/g)?.length ?? 0;
-  const tuiTranscriptCount =
-    html.match(/data-tui-region="transcript"/g)?.length ?? 0;
-  const tuiFooterCount = html.match(/data-tui-region="footer"/g)?.length ?? 0;
-  if (
-    tuiChromeCount !== 6 ||
-    tuiPromptCount !== 6 ||
-    tuiTranscriptCount !== 6 ||
-    tuiFooterCount !== 6
-  ) {
-    throw new Error(
-      `${locale} homepage must render six complete A3S Code TUI shells; got chrome=${tuiChromeCount}, prompt=${tuiPromptCount}, transcript=${tuiTranscriptCount}, footer=${tuiFooterCount}.`,
-    );
-  }
-
   for (const [scenario, command] of [
     ['code', 'a3s code'],
     ['web', 'a3s web'],
diff --git a/apps/docs/theme/capabilities.css b/apps/docs/theme/capabilities.css
index a086d4f6..3bb9c982 100644
--- a/apps/docs/theme/capabilities.css
+++ b/apps/docs/theme/capabilities.css
@@ -326,218 +326,87 @@
 }
 
 .code-capability-demo {
-  --tui-status: var(--card-accent);
   position: relative;
   z-index: 2;
-  display: block;
   min-width: 0;
-  height: auto;
   margin-top: auto;
   overflow: hidden;
-  border-color: rgba(91, 104, 126, 0.6);
-  border-radius: 14px;
-  background:
-    linear-gradient(180deg, rgba(15, 18, 25, 0.94), rgba(8, 10, 14, 0.97)),
-    var(--cli-terminal);
-  box-shadow:
-    0 22px 54px rgba(0, 0, 0, 0.34),
-    0 0 0 1px rgba(var(--card-rgb), 0.025),
-    inset 0 1px rgba(255, 255, 255, 0.045);
+  border: 1px solid rgba(var(--card-rgb), 0.24);
+  border-radius: 12px;
+  background: rgba(5, 8, 13, 0.82);
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
   font-family: var(--cli-mono);
 }
 
 .code-capability-card.is-context .code-capability-demo {
   width: 100%;
-  min-width: 0;
   margin-top: 0;
   flex: 1;
 }
 
-.code-capability-demo::after {
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(var(--card-rgb), 0.76) 35%,
-    rgba(var(--card-rgb), 0.42) 66%,
-    transparent
-  );
-  box-shadow: 0 0 14px rgba(var(--card-rgb), 0.28);
+.code-capability-demo svg {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
 }
 
-.code-capability-demo > header {
+.code-capability-demo__chrome {
   display: grid;
-  min-height: 43px;
-  padding: 0 13px;
-  border-bottom-color: var(--cli-terminal-line);
+  min-height: 39px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--cap-line);
+  background: rgba(255, 255, 255, 0.022);
   align-items: center;
-  gap: 8px;
   grid-template-columns: 1fr auto 1fr;
 }
 
-.code-capability-demo > header code {
-  color: #7e8898;
-  font-size: 8px;
-  letter-spacing: 0.03em;
-  text-transform: none;
-}
-
-.code-capability-demo > header em {
-  color: var(--tui-status);
-  font-size: 7px;
-}
-
-.code-capability-demo > header em::before {
-  background: currentcolor;
-  box-shadow: 0 0 9px rgba(var(--card-rgb), 0.72);
-}
-
-.a3s-code-tui__modes {
-  min-height: 45px;
-  padding: 8px 10px;
-  gap: 4px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.a3s-code-tui__modes > span {
+.code-capability-demo__chrome > span {
   display: flex;
-  min-width: 0;
-  min-height: 27px;
-  padding: 0 7px;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  align-items: center;
-  justify-content: center;
-  color: #626b79;
-  font-size: 7px;
-  font-weight: 660;
   gap: 5px;
-  letter-spacing: 0.05em;
-  white-space: nowrap;
-}
-
-.a3s-code-tui__modes > span small {
-  color: #454d59;
-  font-size: 6px;
-}
-
-.a3s-code-tui__modes > span.is-active {
-  border-color: rgba(var(--card-rgb), 0.34);
-  background:
-    linear-gradient(135deg, rgba(var(--card-rgb), 0.12), transparent),
-    rgba(255, 255, 255, 0.018);
-  color: #d5dfed;
-}
-
-.a3s-code-tui__modes > span.is-active small {
-  color: var(--card-accent);
-}
-
-.code-capability-demo .a3s-code-tui__viewport {
-  height: auto;
-  min-height: 258px;
-  padding: 20px 18px 14px;
-}
-
-.code-capability-demo .a3s-code-tui__prompt {
-  min-width: 0;
-  min-height: 32px;
-  padding: 0 10px;
-  overflow: hidden;
-  border: 1px solid rgba(var(--card-rgb), 0.22);
-  border-radius: 7px;
-  background: rgba(var(--card-rgb), 0.045);
-  font-size: 8px;
-  gap: 7px;
 }
 
-.code-capability-demo .a3s-code-tui__prompt > span {
-  color: var(--card-accent);
-  text-shadow: 0 0 12px rgba(var(--card-rgb), 0.34);
-}
-
-.code-capability-demo .a3s-code-tui__prompt code {
-  overflow: hidden;
-  color: #c5cedb;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.code-capability-demo__chrome > span i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #343c49;
 }
 
-.code-capability-demo .cli-terminal__cursor {
-  width: 4px;
-  height: 11px;
-  background: var(--card-accent);
-  box-shadow: 0 0 9px rgba(var(--card-rgb), 0.46);
+.code-capability-demo__chrome > span i:first-child {
+  background: #d9656c;
 }
 
-.a3s-code-tui__transcript {
-  min-width: 0;
+.code-capability-demo__chrome > span i:nth-child(2) {
+  background: #d7a857;
 }
 
-.code-capability-demo .a3s-code-tui__transcript {
-  margin-top: 11px;
+.code-capability-demo__chrome > span i:last-child {
+  background: #55bb83;
 }
 
-.a3s-code-tui__result {
-  display: flex;
-  min-width: 0;
-  min-height: 34px;
-  margin-top: 11px;
-  padding: 0 10px;
-  border: 1px solid rgba(60, 207, 145, 0.18);
-  border-radius: 7px;
-  align-items: center;
-  background: rgba(60, 207, 145, 0.04);
-  color: #9fc8b3;
+.code-capability-demo__chrome > code {
+  color: #718096;
   font-size: 7px;
-  gap: 8px;
-  opacity: 0.3;
-  animation: code-tui-result 8s ease-in-out infinite;
-}
-
-.a3s-code-tui__result svg {
-  width: 13px;
-  height: 13px;
-  color: var(--cli-green);
-  flex: 0 0 auto;
-  fill: none;
-  stroke: currentcolor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 1.8;
-}
-
-.a3s-code-tui__result span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.code-capability-demo .a3s-code-tui__footer {
-  min-height: 48px;
-  padding: 0 13px;
-}
-
-.code-capability-demo .a3s-code-tui__footer > div {
-  min-width: 0;
-  overflow: hidden;
-}
-
-.code-capability-demo .a3s-code-tui__footer > div code {
-  overflow: hidden;
-  max-width: 240px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
-.a3s-code-tui__metrics {
+.code-capability-demo__chrome > b {
   display: flex;
   align-items: center;
-  color: #586170;
-  font-size: 7px;
-  gap: 8px;
+  justify-self: end;
+  gap: 5px;
+  color: var(--card-accent);
+  font-size: 6px;
+  letter-spacing: 0.08em;
 }
 
-.a3s-code-tui__metrics b {
-  color: #747e8d;
-  font-weight: 500;
+.code-capability-demo__chrome > b i {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--card-accent);
+  box-shadow: 0 0 7px rgba(var(--card-rgb), 0.74);
 }
diff --git a/apps/docs/theme/capability-demos.css b/apps/docs/theme/capability-demos.css
index f636f558..45c0bd0f 100644
--- a/apps/docs/theme/capability-demos.css
+++ b/apps/docs/theme/capability-demos.css
@@ -1,63 +1,134 @@
-.code-capability-demo svg {
-  fill: none;
-  stroke: currentcolor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 1.8;
+/* Code Intelligence */
+.code-intelligence-demo {
+  min-height: 326px;
 }
 
-/* Code Intelligence */
-.code-intelligence-demo__request {
-  display: grid;
-  min-height: 47px;
-  padding: 8px 10px;
-  border-top: 1px solid rgba(151, 170, 203, 0.11);
-  border-bottom: 1px solid rgba(151, 170, 203, 0.11);
+.code-intelligence-demo__tabs {
+  display: flex;
+  height: 33px;
+  padding-left: 11px;
+  overflow: hidden;
+  border-bottom: 1px solid var(--cap-line);
+}
+
+.code-intelligence-demo__tabs span {
+  display: flex;
+  min-width: 82px;
+  padding: 0 10px;
+  border-right: 1px solid var(--cap-line);
   align-items: center;
-  gap: 9px;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  color: #586476;
+  font-size: 7px;
 }
 
-.code-intelligence-demo__request > svg {
-  width: 14px;
-  height: 14px;
-  color: var(--card-accent);
+.code-intelligence-demo__tabs span.is-active {
+  border-top: 1px solid var(--card-accent);
+  background: rgba(var(--card-rgb), 0.08);
+  color: #b6c3d6;
+}
+
+.code-intelligence-demo__body {
+  position: relative;
+  display: grid;
+  height: 116px;
+  padding: 17px 16px 14px 10px;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.018),
+    transparent 42%
+  );
+  grid-template-columns: 30px minmax(0, 1fr);
 }
 
-.code-intelligence-demo__request > div {
+.code-intelligence-demo__gutter {
   display: flex;
-  min-width: 0;
+  align-items: flex-end;
   flex-direction: column;
-  gap: 3px;
+  gap: 5px;
+  color: #3f4958;
+  font-size: 7px;
+  line-height: 1.45;
 }
 
-.code-intelligence-demo__request small {
-  color: #64738a;
-  font-size: 6px;
-  letter-spacing: 0.08em;
+.code-intelligence-demo__body pre {
+  min-width: 0;
+  margin: 0;
+  padding: 0 0 0 13px;
+  overflow: hidden;
+  background: transparent;
+  color: #8e9caf;
+  font-size: 8px;
+  line-height: 1.95;
+  white-space: pre;
+}
+
+.code-intelligence-demo__body pre span:first-child {
+  color: #bc9cff;
+}
+
+.code-intelligence-demo__body pre b {
+  padding: 1px 2px;
+  border-radius: 3px;
+  background: rgba(var(--card-rgb), 0.17);
+  color: #c2d9ff;
+  font-weight: 600;
+  animation: code-intelligence-symbol 8s ease-in-out infinite;
+}
+
+.code-intelligence-demo__cursor {
+  position: absolute;
+  top: 15px;
+  left: 39px;
+  width: calc(100% - 55px);
+  height: 20px;
+  border-left: 1px solid var(--card-accent);
+  background: linear-gradient(
+    90deg,
+    rgba(var(--card-rgb), 0.09),
+    transparent 68%
+  );
+  animation: code-intelligence-line 8s ease-in-out infinite;
+}
+
+.code-intelligence-demo__command {
+  display: flex;
+  width: calc(100% - 24px);
+  min-height: 36px;
+  margin: 9px 12px 0;
+  padding: 0 11px;
+  border: 1px solid rgba(var(--card-rgb), 0.27);
+  border-radius: 7px;
+  background: rgba(10, 15, 23, 0.95);
+  align-items: center;
+  gap: 5px;
+  color: var(--card-accent);
+  font-size: 9px;
 }
 
-.code-intelligence-demo__request b {
+.code-intelligence-demo__command code {
+  display: inline-block;
+  max-width: 0;
   overflow: hidden;
-  color: #aebbd0;
-  font-size: 8px;
-  font-weight: 500;
-  text-overflow: ellipsis;
+  color: #dce6f4;
   white-space: nowrap;
+  animation: code-intelligence-type 8s steps(11, end) infinite;
 }
 
-.code-intelligence-demo__request em {
-  color: var(--card-accent);
-  font-size: 6px;
-  font-style: normal;
-  letter-spacing: 0.08em;
-  animation: code-capability-status 2.8s ease-in-out infinite;
+.code-intelligence-demo__command > i {
+  width: 5px;
+  height: 13px;
+  background: var(--card-accent);
+  animation: code-capability-caret 0.9s steps(2, end) infinite;
 }
 
 .code-intelligence-demo__result {
   display: grid;
-  min-height: 57px;
-  padding: 8px 10px;
+  min-height: 48px;
+  margin: 8px 12px 0;
+  padding: 7px 10px;
+  border: 1px solid rgba(var(--card-rgb), 0.2);
+  border-radius: 7px;
+  background: rgba(var(--card-rgb), 0.05);
   align-items: center;
   gap: 9px;
   opacity: 0.42;
@@ -66,16 +137,23 @@
   animation: code-demo-resolve 8s ease-in-out infinite;
 }
 
-.code-intelligence-demo__result > span {
-  color: #4f5b6e;
-  font-size: 10px;
+.code-intelligence-demo__result > svg:first-child {
+  width: 15px;
+  height: 15px;
+  color: var(--card-accent);
+}
+
+.code-intelligence-demo__result > svg:last-child {
+  width: 14px;
+  height: 14px;
+  color: #58d9a1;
 }
 
-.code-intelligence-demo__result > div {
+.code-intelligence-demo__result div {
   display: flex;
   min-width: 0;
   flex-direction: column;
-  gap: 4px;
+  gap: 3px;
 }
 
 .code-intelligence-demo__result b {
@@ -91,17 +169,23 @@
   white-space: nowrap;
 }
 
-.code-intelligence-demo__result svg {
-  width: 14px;
-  height: 14px;
-  color: var(--cli-green);
+.code-intelligence-demo__evidence {
+  padding: 8px 13px 10px;
+  color: #556174;
+  font-size: 6px;
+  text-align: right;
 }
 
 /* Human-in-the-loop */
+.code-hitl-demo {
+  min-height: 334px;
+  padding: 16px;
+}
+
 .code-hitl-demo__title {
   display: grid;
-  min-height: 34px;
-  padding: 0 4px 10px;
+  min-height: 36px;
+  padding-bottom: 12px;
   border-bottom: 1px solid var(--cap-line);
   align-items: center;
   gap: 8px;
@@ -109,14 +193,14 @@
 }
 
 .code-hitl-demo__title svg {
-  width: 15px;
-  height: 15px;
+  width: 16px;
+  height: 16px;
   color: var(--card-accent);
 }
 
 .code-hitl-demo__title b {
   color: #e7ebf2;
-  font-size: 8px;
+  font-size: 9px;
 }
 
 .code-hitl-demo__title > span {
@@ -131,10 +215,10 @@
 
 .code-hitl-demo__call {
   display: flex;
-  min-height: 64px;
-  padding: 10px 4px 8px;
+  min-height: 76px;
+  padding: 12px 3px 10px;
   flex-direction: column;
-  gap: 4px;
+  gap: 5px;
 }
 
 .code-hitl-demo__call span {
@@ -145,8 +229,8 @@
 .code-hitl-demo__call code {
   overflow-wrap: anywhere;
   color: #dce5f2;
-  font-size: 8px;
-  line-height: 1.45;
+  font-size: 9px;
+  line-height: 1.5;
 }
 
 .code-hitl-demo__call small {
@@ -157,19 +241,19 @@
 .code-hitl-demo__options {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 5px;
 }
 
 .code-hitl-demo__options > div {
   display: grid;
-  min-height: 29px;
+  min-height: 31px;
   padding: 0 8px;
   border: 1px solid rgba(139, 151, 170, 0.13);
   border-radius: 5px;
-  align-items: center;
   background: rgba(255, 255, 255, 0.016);
-  color: #8490a0;
+  align-items: center;
   gap: 7px;
+  color: #8490a0;
   opacity: 0.58;
   transform: translateX(-3px);
   grid-template-columns: 12px 12px minmax(0, 1fr);
@@ -194,7 +278,7 @@
 
 .code-hitl-demo__options b {
   overflow: hidden;
-  font-size: 7px;
+  font-size: 8px;
   font-weight: 500;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -204,14 +288,76 @@
   color: #df6f76;
 }
 
+.code-hitl-demo__outcome {
+  display: flex;
+  min-height: 30px;
+  margin-top: 9px;
+  border-top: 1px solid var(--cap-line);
+  align-items: flex-end;
+  gap: 7px;
+  color: #58d9a1;
+  font-size: 7px;
+  opacity: 0.35;
+  animation: code-hitl-outcome 8s ease-in-out infinite;
+}
+
+.code-hitl-demo__outcome svg {
+  width: 12px;
+  height: 12px;
+}
+
 /* Progressive tool API */
+.code-progressive-demo {
+  min-height: 334px;
+  padding: 15px;
+}
+
+.code-progressive-demo__prompt {
+  display: grid;
+  min-height: 70px;
+  padding: 11px;
+  border: 1px solid rgba(var(--card-rgb), 0.2);
+  border-radius: 8px;
+  background: rgba(var(--card-rgb), 0.05);
+  align-items: center;
+  gap: 4px 9px;
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+.code-progressive-demo__prompt svg {
+  width: 16px;
+  height: 16px;
+  color: var(--card-accent);
+  grid-row: 1 / span 2;
+}
+
+.code-progressive-demo__prompt span {
+  color: #766a95;
+  font-size: 6px;
+  letter-spacing: 0.09em;
+}
+
+.code-progressive-demo__prompt b {
+  overflow: hidden;
+  color: #cbc3e1;
+  font-size: 8px;
+  font-weight: 500;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.code-progressive-demo__registry {
+  margin-top: 10px;
+}
+
 .code-progressive-demo__registry > div:first-child {
   display: flex;
-  min-height: 29px;
+  min-height: 28px;
   align-items: center;
+  gap: 7px;
   color: #667286;
   font-size: 7px;
-  gap: 7px;
 }
 
 .code-progressive-demo__registry > div:first-child svg {
@@ -222,7 +368,7 @@
 
 .code-progressive-demo__row {
   display: grid;
-  min-height: 38px;
+  min-height: 36px;
   border-top: 1px solid rgba(151, 170, 203, 0.11);
   align-items: center;
   gap: 8px;
@@ -253,214 +399,38 @@
 }
 
 .code-progressive-demo__row:nth-child(2) b {
-  color: var(--cli-green);
+  color: #58d9a1;
 }
 
 .code-progressive-demo__row:nth-child(3) b {
   color: var(--card-accent);
 }
 
-/* Login-gated Runtime fan-out */
-.code-runtime-demo__gate {
+.code-progressive-demo__result {
   display: flex;
-  min-height: 31px;
-  padding: 0 9px;
-  border-bottom: 1px solid var(--cap-line);
-  align-items: center;
-  background: rgba(var(--card-rgb), 0.045);
-  color: var(--card-accent);
-  font-size: 7px;
+  min-height: 30px;
+  margin-top: 6px;
+  border-top: 1px solid var(--cap-line);
+  align-items: flex-end;
   gap: 8px;
-  opacity: 0.45;
-  animation: code-runtime-gate 9s ease-in-out infinite;
-}
-
-.code-runtime-demo__gate code {
-  overflow: hidden;
-  color: #7ca994;
+  color: #9b8aca;
   font-size: 7px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-.code-runtime-demo__submitted {
+.code-progressive-demo__result > span {
   display: flex;
-  min-height: 34px;
-  padding: 0 9px;
-  align-items: center;
-  color: #697c72;
-  font-size: 7px;
-  gap: 8px;
-  animation: code-runtime-submit 9s ease-in-out infinite;
-}
-
-.code-runtime-demo__submitted svg {
-  width: 13px;
-  height: 13px;
-  color: var(--card-accent);
-}
-
-.code-runtime-demo__tasks {
-  padding: 0 8px;
-}
-
-.code-runtime-demo__tasks > div {
-  position: relative;
-  display: grid;
-  min-height: 39px;
-  border-top: 1px solid rgba(151, 170, 203, 0.1);
-  align-items: center;
-  gap: 9px;
-  grid-template-columns: 20px minmax(0, auto) 1fr 42px;
-}
-
-.code-runtime-demo__tasks span {
-  color: #4f695b;
-  font-size: 7px;
-}
-
-.code-runtime-demo__tasks b {
+  width: 24px;
+  height: 5px;
   overflow: hidden;
-  color: #9fb1a8;
-  font-size: 8px;
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  border-radius: 999px;
+  background: rgba(var(--card-rgb), 0.14);
 }
 
-.code-runtime-demo__tasks > div > i {
-  height: 1px;
-  background: linear-gradient(
-    90deg,
-    rgba(var(--card-rgb), 0.48),
-    rgba(var(--card-rgb), 0.05)
-  );
-  transform: scaleX(0.08);
+.code-progressive-demo__result i {
+  width: 100%;
+  border-radius: inherit;
+  background: var(--card-accent);
+  transform: scaleX(0.26);
   transform-origin: left;
-  animation: code-runtime-progress 9s ease-in-out infinite;
-  animation-delay: calc(var(--task-index) * 420ms);
-}
-
-.code-runtime-demo__tasks small {
-  position: absolute;
-  right: 0;
-  color: #56655c;
-  font-size: 7px;
-  opacity: 0;
-}
-
-.code-runtime-demo__tasks .is-queued {
-  animation: code-runtime-queued 9s ease-in-out infinite;
-  animation-delay: calc(var(--task-index) * 420ms);
-}
-
-.code-runtime-demo__tasks .is-running {
-  color: var(--card-accent);
-  animation: code-runtime-running 9s ease-in-out infinite;
-  animation-delay: calc(var(--task-index) * 420ms);
-}
-
-.code-runtime-demo__tasks .is-done {
-  color: var(--cli-green);
-  animation: code-runtime-done 9s ease-in-out infinite;
-  animation-delay: calc(var(--task-index) * 420ms);
-}
-
-/* Cross-session context */
-.code-context-demo__hits > div {
-  display: grid;
-  min-height: 62px;
-  padding: 8px 10px;
-  border-top: 1px solid rgba(151, 170, 203, 0.11);
-  align-items: center;
-  gap: 10px;
-  opacity: 0.62;
-  transform: translateY(2px);
-  grid-template-columns: 19px minmax(0, 1fr);
-  animation: code-context-hit 9s ease-in-out infinite;
-  animation-delay: calc(var(--hit-index) * 130ms);
-}
-
-.code-context-demo__hits > div:first-child {
-  border: 1px solid rgba(var(--card-rgb), 0.24);
-  border-radius: 7px;
-  background: rgba(var(--card-rgb), 0.055);
-  animation-name: code-context-selected;
-}
-
-.code-context-demo__hits > div > span {
-  color: var(--card-accent);
-  font-size: 7px;
-}
-
-.code-context-demo__hits p {
-  display: grid;
-  min-width: 0;
-  margin: 0;
-  gap: 2px 9px;
-  grid-template-columns: auto minmax(0, 1fr);
-}
-
-.code-context-demo__hits small {
-  color: #5c7983;
-  font-size: 7px;
-}
-
-.code-context-demo__hits b {
-  overflow: hidden;
-  color: #b5c6cc;
-  font-size: 8px;
-  font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.code-context-demo__hits em {
-  overflow: hidden;
-  color: #65777e;
-  font-size: 7px;
-  font-style: normal;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  grid-column: 1 / -1;
-}
-
-.code-context-demo__actions {
-  display: grid;
-  margin-top: 9px;
-  gap: 7px;
-  grid-template-columns: 1fr 1fr;
-}
-
-.code-context-demo__actions > span {
-  display: flex;
-  min-width: 0;
-  min-height: 43px;
-  padding: 7px 9px;
-  border: 1px solid rgba(var(--card-rgb), 0.16);
-  border-radius: 7px;
-  justify-content: center;
-  background: rgba(255, 255, 255, 0.018);
-  flex-direction: column;
-  gap: 4px;
-  opacity: 0.42;
-  animation: code-context-action 9s ease-in-out infinite;
-}
-
-.code-context-demo__actions > span:last-child {
-  animation-delay: 520ms;
-}
-
-.code-context-demo__actions code {
-  color: var(--card-accent);
-  font-size: 8px;
-}
-
-.code-context-demo__actions b {
-  overflow: hidden;
-  color: #6e8189;
-  font-size: 7px;
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  animation: code-api-budget 8s ease-in-out infinite;
 }
diff --git a/apps/docs/theme/capability-motion.css b/apps/docs/theme/capability-motion.css
index 75a0de7d..8ac54072 100644
--- a/apps/docs/theme/capability-motion.css
+++ b/apps/docs/theme/capability-motion.css
@@ -10,26 +10,56 @@
   }
 }
 
-@keyframes code-demo-resolve {
+@keyframes code-capability-caret {
+  50% {
+    opacity: 0;
+  }
+}
+
+@keyframes code-intelligence-symbol {
+  0%,
+  18% {
+    background: transparent;
+    color: #bc9cff;
+  }
+  28%,
+  100% {
+    background: rgba(111, 159, 240, 0.17);
+    color: #c2d9ff;
+  }
+}
+
+@keyframes code-intelligence-line {
   0%,
   16% {
-    opacity: 0.42;
-    transform: translateY(4px);
+    opacity: 0;
+    transform: translateY(21px);
   }
-  30%,
+  28%,
   100% {
     opacity: 1;
     transform: translateY(0);
   }
 }
 
-@keyframes code-tui-result {
+@keyframes code-intelligence-type {
   0%,
-  68% {
-    opacity: 0.3;
+  30% {
+    max-width: 0;
+  }
+  48%,
+  100% {
+    max-width: 92px;
+  }
+}
+
+@keyframes code-demo-resolve {
+  0%,
+  48% {
+    opacity: 0.42;
     transform: translateY(4px);
   }
-  82%,
+  62%,
   100% {
     opacity: 1;
     transform: translateY(0);
@@ -68,6 +98,17 @@
   }
 }
 
+@keyframes code-hitl-outcome {
+  0%,
+  60% {
+    opacity: 0.25;
+  }
+  74%,
+  100% {
+    opacity: 1;
+  }
+}
+
 @keyframes code-api-route {
   0%,
   20% {
@@ -79,6 +120,19 @@
   }
 }
 
+@keyframes code-api-budget {
+  0%,
+  26% {
+    opacity: 0.42;
+    transform: scaleX(1);
+  }
+  52%,
+  100% {
+    opacity: 1;
+    transform: scaleX(0.36);
+  }
+}
+
 @keyframes code-runtime-gate {
   0%,
   10% {
@@ -151,6 +205,17 @@
   }
 }
 
+@keyframes code-runtime-complete {
+  0%,
+  76% {
+    opacity: 0.24;
+  }
+  90%,
+  100% {
+    opacity: 1;
+  }
+}
+
 @keyframes code-context-hit {
   0%,
   18% {
@@ -263,14 +328,20 @@
     font-size: clamp(28px, 8vw, 38px);
   }
 
-  .code-capability-demo,
+  .code-capability-demo {
+    margin-top: 32px;
+  }
+
   .code-capability-card.is-context .code-capability-demo {
     margin-top: 32px;
   }
 
-  .code-capability-demo .a3s-code-tui__viewport {
+  .code-intelligence-demo,
+  .code-hitl-demo,
+  .code-progressive-demo,
+  .code-runtime-demo,
+  .code-context-demo {
     min-height: 0;
-    padding: 17px 14px 12px;
   }
 }
 
@@ -289,22 +360,27 @@
     display: none;
   }
 
-  .a3s-code-tui__modes > span {
-    padding: 0 3px;
-    font-size: 6px;
-    gap: 2px;
-    letter-spacing: 0.01em;
+  .code-capability-demo__chrome {
+    grid-template-columns: 1fr auto;
   }
 
-  .a3s-code-tui__modes > span small {
+  .code-capability-demo__chrome > code {
     display: none;
   }
 
-  .code-capability-demo .a3s-code-tui__footer > div code {
-    max-width: 135px;
+  .code-intelligence-demo__body pre {
+    font-size: 7px;
+  }
+
+  .code-hitl-demo {
+    padding: 13px;
   }
 
-  .code-hitl-demo__options b,
+  .code-hitl-demo__options b {
+    font-size: 6px;
+  }
+
+  .code-progressive-demo__prompt b,
   .code-progressive-demo__row code {
     font-size: 6px;
   }
@@ -317,6 +393,10 @@
     display: none;
   }
 
+  .code-context-demo {
+    padding: 11px;
+  }
+
   .code-context-demo__hits p {
     grid-template-columns: 1fr;
   }
@@ -335,18 +415,23 @@
   .code-capability-card,
   .code-capability-link svg,
   .code-capability-meta > small i,
-  .code-capability-demo .cli-terminal__cursor,
-  .code-intelligence-demo__request em,
+  .code-intelligence-demo__body pre b,
+  .code-intelligence-demo__cursor,
+  .code-intelligence-demo__command code,
+  .code-intelligence-demo__command > i,
   .code-intelligence-demo__result,
   .code-hitl-demo__options > div,
+  .code-hitl-demo__outcome,
   .code-progressive-demo__row > i,
+  .code-progressive-demo__result i,
   .code-runtime-demo__gate,
   .code-runtime-demo__submitted,
   .code-runtime-demo__tasks > div > i,
   .code-runtime-demo__tasks small,
+  .code-runtime-demo__complete,
+  .code-context-demo__query i,
   .code-context-demo__hits > div,
-  .code-context-demo__actions > span,
-  .a3s-code-tui__result {
+  .code-context-demo__actions > span {
     animation: none !important;
     transition: none !important;
   }
@@ -355,26 +440,32 @@
     transform: none;
   }
 
-  .code-capability-demo .cli-terminal__cursor {
-    display: none;
-  }
-
+  .code-intelligence-demo__cursor,
   .code-intelligence-demo__result,
   .code-hitl-demo__options > div,
+  .code-hitl-demo__outcome,
   .code-runtime-demo__gate,
   .code-runtime-demo__submitted,
+  .code-runtime-demo__complete,
   .code-context-demo__hits > div,
-  .code-context-demo__actions > span,
-  .a3s-code-tui__result {
+  .code-context-demo__actions > span {
     opacity: 1;
     transform: none;
   }
 
+  .code-intelligence-demo__command code {
+    max-width: 92px;
+  }
+
   .code-progressive-demo__row > i,
   .code-runtime-demo__tasks > div > i {
     transform: scaleX(1);
   }
 
+  .code-progressive-demo__result i {
+    transform: scaleX(0.36);
+  }
+
   .code-runtime-demo__tasks .is-queued,
   .code-runtime-demo__tasks .is-running {
     opacity: 0;
diff --git a/apps/docs/theme/capability-runtime-demos.css b/apps/docs/theme/capability-runtime-demos.css
new file mode 100644
index 00000000..2e941555
--- /dev/null
+++ b/apps/docs/theme/capability-runtime-demos.css
@@ -0,0 +1,313 @@
+/* Login-gated Runtime fan-out */
+.code-runtime-demo {
+  min-height: 382px;
+}
+
+.code-runtime-demo__gate {
+  display: flex;
+  min-height: 34px;
+  padding: 0 13px;
+  border-bottom: 1px solid var(--cap-line);
+  background: rgba(var(--card-rgb), 0.045);
+  align-items: center;
+  gap: 8px;
+  color: var(--card-accent);
+  opacity: 0.45;
+  animation: code-runtime-gate 9s ease-in-out infinite;
+}
+
+.code-runtime-demo__gate span {
+  font-size: 8px;
+}
+
+.code-runtime-demo__gate code {
+  color: #7ca994;
+  font-size: 8px;
+}
+
+.code-runtime-demo__call {
+  display: flex;
+  min-height: 62px;
+  padding: 10px 13px;
+  border-bottom: 1px solid var(--cap-line);
+  align-items: center;
+  gap: 9px;
+}
+
+.code-runtime-demo__call svg {
+  width: 16px;
+  height: 16px;
+  color: var(--card-accent);
+  flex: 0 0 auto;
+}
+
+.code-runtime-demo__call code {
+  overflow-wrap: anywhere;
+  color: #b8cbc2;
+  font-size: 8px;
+  line-height: 1.5;
+}
+
+.code-runtime-demo__submitted {
+  display: flex;
+  min-height: 37px;
+  padding: 0 13px;
+  align-items: center;
+  gap: 8px;
+  color: #697c72;
+  font-size: 7px;
+  animation: code-runtime-submit 9s ease-in-out infinite;
+}
+
+.code-runtime-demo__submitted svg {
+  width: 13px;
+  height: 13px;
+  color: var(--card-accent);
+}
+
+.code-runtime-demo__tasks {
+  padding: 0 12px;
+}
+
+.code-runtime-demo__tasks > div {
+  position: relative;
+  display: grid;
+  min-height: 43px;
+  border-top: 1px solid rgba(151, 170, 203, 0.1);
+  align-items: center;
+  gap: 9px;
+  grid-template-columns: 20px minmax(0, auto) 1fr 42px;
+}
+
+.code-runtime-demo__tasks span {
+  color: #4f695b;
+  font-size: 7px;
+}
+
+.code-runtime-demo__tasks b {
+  overflow: hidden;
+  color: #9fb1a8;
+  font-size: 8px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.code-runtime-demo__tasks > div > i {
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    rgba(var(--card-rgb), 0.48),
+    rgba(var(--card-rgb), 0.05)
+  );
+  transform: scaleX(0.08);
+  transform-origin: left;
+  animation: code-runtime-progress 9s ease-in-out infinite;
+  animation-delay: calc(var(--task-index) * 420ms);
+}
+
+.code-runtime-demo__tasks small {
+  position: absolute;
+  right: 0;
+  color: #56655c;
+  font-size: 7px;
+  opacity: 0;
+}
+
+.code-runtime-demo__tasks .is-queued {
+  animation: code-runtime-queued 9s ease-in-out infinite;
+  animation-delay: calc(var(--task-index) * 420ms);
+}
+
+.code-runtime-demo__tasks .is-running {
+  color: var(--card-accent);
+  animation: code-runtime-running 9s ease-in-out infinite;
+  animation-delay: calc(var(--task-index) * 420ms);
+}
+
+.code-runtime-demo__tasks .is-done {
+  color: #58d9a1;
+  animation: code-runtime-done 9s ease-in-out infinite;
+  animation-delay: calc(var(--task-index) * 420ms);
+}
+
+.code-runtime-demo__complete {
+  display: flex;
+  min-height: 37px;
+  margin: 0 12px;
+  border-top: 1px solid rgba(151, 170, 203, 0.1);
+  align-items: center;
+  gap: 7px;
+  color: #58d9a1;
+  font-size: 7px;
+  opacity: 0.32;
+  animation: code-runtime-complete 9s ease-in-out infinite;
+}
+
+.code-runtime-demo__complete svg {
+  width: 13px;
+  height: 13px;
+}
+
+.code-runtime-demo__footer {
+  padding: 0 13px 10px;
+  color: #48574e;
+  font-size: 7px;
+  text-align: right;
+}
+
+/* Cross-session context */
+.code-context-demo {
+  min-height: 407px;
+  padding: 14px;
+}
+
+.code-context-demo__query {
+  display: flex;
+  min-height: 43px;
+  padding: 0 12px;
+  border: 1px solid rgba(var(--card-rgb), 0.24);
+  border-radius: 8px;
+  background: rgba(var(--card-rgb), 0.055);
+  align-items: center;
+  gap: 8px;
+}
+
+.code-context-demo__query span {
+  color: var(--card-accent);
+  font-size: 12px;
+}
+
+.code-context-demo__query code {
+  overflow: hidden;
+  color: #d4e3e9;
+  font-size: 9px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.code-context-demo__query i {
+  width: 5px;
+  height: 13px;
+  background: var(--card-accent);
+  animation: code-capability-caret 0.9s steps(2, end) infinite;
+}
+
+.code-context-demo__hits {
+  margin-top: 10px;
+}
+
+.code-context-demo__hits > div {
+  display: grid;
+  min-height: 67px;
+  padding: 8px 10px;
+  border-top: 1px solid rgba(151, 170, 203, 0.11);
+  align-items: center;
+  gap: 10px;
+  opacity: 0.62;
+  transform: translateY(2px);
+  grid-template-columns: 19px minmax(0, 1fr);
+  animation: code-context-hit 9s ease-in-out infinite;
+  animation-delay: calc(var(--hit-index) * 130ms);
+}
+
+.code-context-demo__hits > div:first-child {
+  border: 1px solid rgba(var(--card-rgb), 0.24);
+  border-radius: 7px;
+  background: rgba(var(--card-rgb), 0.055);
+  animation-name: code-context-selected;
+}
+
+.code-context-demo__hits > div > span {
+  color: var(--card-accent);
+  font-size: 7px;
+}
+
+.code-context-demo__hits p {
+  display: grid;
+  min-width: 0;
+  margin: 0;
+  gap: 2px 9px;
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+.code-context-demo__hits small {
+  color: #5c7983;
+  font-size: 7px;
+}
+
+.code-context-demo__hits b {
+  overflow: hidden;
+  color: #b5c6cc;
+  font-size: 8px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.code-context-demo__hits em {
+  overflow: hidden;
+  color: #65777e;
+  font-size: 7px;
+  font-style: normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  grid-column: 1 / -1;
+}
+
+.code-context-demo__actions {
+  display: grid;
+  margin-top: 10px;
+  gap: 7px;
+  grid-template-columns: 1fr 1fr;
+}
+
+.code-context-demo__actions > span {
+  display: flex;
+  min-width: 0;
+  min-height: 45px;
+  padding: 8px 10px;
+  border: 1px solid rgba(var(--card-rgb), 0.16);
+  border-radius: 7px;
+  background: rgba(255, 255, 255, 0.018);
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  opacity: 0.42;
+  animation: code-context-action 9s ease-in-out infinite;
+}
+
+.code-context-demo__actions > span:last-child {
+  animation-delay: 520ms;
+}
+
+.code-context-demo__actions code {
+  color: var(--card-accent);
+  font-size: 8px;
+}
+
+.code-context-demo__actions b {
+  overflow: hidden;
+  color: #6e8189;
+  font-size: 7px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.code-context-demo__safety {
+  display: flex;
+  min-height: 30px;
+  margin-top: 8px;
+  border-top: 1px solid var(--cap-line);
+  align-items: flex-end;
+  gap: 7px;
+  color: #536d77;
+  font-size: 7px;
+}
+
+.code-context-demo__safety svg {
+  width: 11px;
+  height: 11px;
+  color: var(--card-accent);
+}
diff --git a/apps/docs/theme/components/A3sCodeTui.tsx b/apps/docs/theme/components/A3sCodeTui.tsx
deleted file mode 100644
index e77617a1..00000000
--- a/apps/docs/theme/components/A3sCodeTui.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { forwardRef, type ReactNode } from 'react';
-
-export type A3sCodeTuiSurface =
-  | 'hero'
-  | 'code-intelligence'
-  | 'hitl'
-  | 'progressive-api'
-  | 'runtime-tool'
-  | 'cross-session-context';
-
-interface A3sCodeTuiProps {
-  ariaHidden?: boolean;
-  ariaLabel?: string;
-  assistiveText?: string;
-  children: ReactNode;
-  className?: string;
-  controls?: ReactNode;
-  footerAction?: ReactNode;
-  footerLead: ReactNode;
-  footerMeta: ReactNode;
-  prompt: ReactNode;
-  promptActive?: boolean;
-  promptPrefix?: ReactNode;
-  showcase?: boolean;
-  status: string;
-  summary?: ReactNode;
-  surface: A3sCodeTuiSurface;
-  phase?: string;
-  title: string;
-  toolbar?: ReactNode;
-}
-
-function classNames(...values: Array<string | false | undefined>) {
-  return values.filter(Boolean).join(' ');
-}
-
-export const A3sCodeTui = forwardRef<HTMLElement, A3sCodeTuiProps>(
-  function A3sCodeTui(
-    {
-      ariaHidden = false,
-      ariaLabel,
-      assistiveText,
-      children,
-      className,
-      controls,
-      footerAction,
-      footerLead,
-      footerMeta,
-      prompt,
-      promptActive = false,
-      promptPrefix = '›',
-      showcase = false,
-      status,
-      summary,
-      surface,
-      phase,
-      title,
-      toolbar,
-    },
-    ref,
-  ) {
-    return (
-      <aside
-        ref={ref}
-        aria-hidden={ariaHidden || undefined}
-        aria-label={ariaHidden ? undefined : ariaLabel}
-        className={classNames('cli-terminal', 'a3s-code-tui', className)}
-        data-a3s-code-tui={surface}
-        data-cli-terminal-showcase={showcase || undefined}
-        data-phase={phase}
-      >
-        <header data-tui-region="chrome">
-          <span aria-hidden="true">
-            <i />
-            <i />
-            <i />
-          </span>
-          <code>{title}</code>
-          <div className="cli-terminal__header-actions">
-            <em>{status}</em>
-            {controls}
-          </div>
-        </header>
-
-        {toolbar}
-
-        <div className="cli-terminal__body a3s-code-tui__viewport">
-          <p
-            className="cli-terminal__prompt a3s-code-tui__prompt"
-            data-tui-region="prompt"
-          >
-            <span>{promptPrefix}</span>
-            <code>
-              {prompt}
-              {promptActive ? <i className="cli-terminal__cursor" /> : null}
-            </code>
-          </p>
-
-          <div
-            className="a3s-code-tui__transcript"
-            data-tui-region="transcript"
-          >
-            {children}
-          </div>
-
-          {summary}
-        </div>
-
-        <footer
-          className="cli-terminal__footer a3s-code-tui__footer"
-          data-tui-region="footer"
-        >
-          <div>
-            <b>{footerLead}</b>
-            <i aria-hidden="true" />
-            <code>{footerMeta}</code>
-          </div>
-          {footerAction}
-        </footer>
-
-        {assistiveText ? (
-          <p className="cli-visually-hidden" aria-live="polite">
-            {assistiveText}
-          </p>
-        ) : null}
-      </aside>
-    );
-  },
-);
diff --git a/apps/docs/theme/components/CliTerminalShowcase.tsx b/apps/docs/theme/components/CliTerminalShowcase.tsx
index fd1a7e0b..3f35c16f 100644
--- a/apps/docs/theme/components/CliTerminalShowcase.tsx
+++ b/apps/docs/theme/components/CliTerminalShowcase.tsx
@@ -10,7 +10,6 @@ import {
   cliTerminalScenarios as scenarios,
   type CliTerminalLocale,
 } from './cli-terminal-content';
-import { A3sCodeTui } from './A3sCodeTui';
 
 type TerminalPhase = 'typing' | 'output' | 'complete';
 
@@ -174,42 +173,81 @@ export function CliTerminalShowcase({ locale }: { locale: CliTerminalLocale }) {
         : ui.running;
 
   return (
-    <A3sCodeTui
+    <aside
       ref={rootRef}
-      ariaLabel={ui.region}
-      assistiveText={`${activeScenario.command}. ${activeScenario.summary[locale]}.`}
-      className="cli-terminal--hero"
-      controls={
-        <button
-          aria-label={playing ? ui.pause : ui.play}
-          disabled={reducedMotion}
-          onClick={() => setPlaying((current) => !current)}
-          title={reducedMotion ? ui.reduced : playing ? ui.pause : ui.play}
-          type="button"
-        >
-          <span aria-hidden="true">{playing ? 'Ⅱ' : '▶'}</span>
-        </button>
-      }
-      footerAction={
-        <button
-          aria-label={ui.replayLabel}
-          disabled={reducedMotion}
-          onClick={restart}
-          title={reducedMotion ? ui.reduced : ui.replayLabel}
-          type="button"
-        >
-          <ReplayIcon />
-          {ui.replay}
-        </button>
-      }
-      footerLead={`${String(activeIndex + 1).padStart(2, '0')} / ${String(scenarios.length).padStart(2, '0')}`}
-      footerMeta={activeScenario.label}
-      prompt={activeScenario.command.slice(0, typedCharacters)}
-      promptActive={phase === 'typing' && !reducedMotion}
-      promptPrefix="$"
-      showcase
-      status={status}
-      summary={
+      className="cli-terminal"
+      data-cli-terminal-showcase="true"
+      data-phase={phase}
+      aria-label={ui.region}
+    >
+      <header>
+        <span aria-hidden="true">
+          <i />
+          <i />
+          <i />
+        </span>
+        <code>{activeScenario.command}</code>
+        <div className="cli-terminal__header-actions">
+          <em>{status}</em>
+          <button
+            aria-label={playing ? ui.pause : ui.play}
+            disabled={reducedMotion}
+            onClick={() => setPlaying((current) => !current)}
+            title={reducedMotion ? ui.reduced : playing ? ui.pause : ui.play}
+            type="button"
+          >
+            <span aria-hidden="true">{playing ? 'Ⅱ' : '▶'}</span>
+          </button>
+        </div>
+      </header>
+
+      <nav className="cli-terminal__scenarios" aria-label={ui.scenario}>
+        {scenarios.map((scenario, index) => (
+          <button
+            aria-label={`${scenario.label}: ${scenario.command}`}
+            aria-pressed={index === activeIndex}
+            className={index === activeIndex ? 'is-active' : undefined}
+            data-command={scenario.command}
+            data-terminal-scenario={scenario.id}
+            key={scenario.id}
+            onClick={() => selectScenario(index)}
+            title={scenario.command}
+            type="button"
+          >
+            <span>{String(index + 1).padStart(2, '0')}</span>
+            {scenario.label}
+          </button>
+        ))}
+      </nav>
+
+      <div className="cli-terminal__body" aria-hidden="true">
+        <p className="cli-terminal__prompt">
+          <span>$</span>
+          <code>
+            {activeScenario.command.slice(0, typedCharacters)}
+            {phase === 'typing' && !reducedMotion ? (
+              <i className="cli-terminal__cursor" />
+            ) : null}
+          </code>
+        </p>
+
+        <ol className="cli-terminal__output">
+          {activeScenario.output.map((line, index) => (
+            <li
+              className={[
+                `is-${line.tone}`,
+                index < visibleLines ? 'is-visible' : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+              key={`${activeScenario.id}-${line.label.en}`}
+            >
+              <span>{line.label[locale]}</span>
+              <code>{line.value[locale]}</code>
+            </li>
+          ))}
+        </ol>
+
         <div
           className={[
             'cli-terminal__summary',
@@ -221,47 +259,30 @@ export function CliTerminalShowcase({ locale }: { locale: CliTerminalLocale }) {
           <i>✓</i>
           <span>{activeScenario.summary[locale]}</span>
         </div>
-      }
-      surface="hero"
-      phase={phase}
-      title={activeScenario.command}
-      toolbar={
-        <nav className="cli-terminal__scenarios" aria-label={ui.scenario}>
-          {scenarios.map((scenario, index) => (
-            <button
-              aria-label={`${scenario.label}: ${scenario.command}`}
-              aria-pressed={index === activeIndex}
-              className={index === activeIndex ? 'is-active' : undefined}
-              data-command={scenario.command}
-              data-terminal-scenario={scenario.id}
-              key={scenario.id}
-              onClick={() => selectScenario(index)}
-              title={scenario.command}
-              type="button"
-            >
-              <span>{String(index + 1).padStart(2, '0')}</span>
-              {scenario.label}
-            </button>
-          ))}
-        </nav>
-      }
-    >
-      <ol className="cli-terminal__output">
-        {activeScenario.output.map((line, index) => (
-          <li
-            className={[
-              `is-${line.tone}`,
-              index < visibleLines ? 'is-visible' : '',
-            ]
-              .filter(Boolean)
-              .join(' ')}
-            key={`${activeScenario.id}-${line.label.en}`}
-          >
-            <span>{line.label[locale]}</span>
-            <code>{line.value[locale]}</code>
-          </li>
-        ))}
-      </ol>
-    </A3sCodeTui>
+      </div>
+
+      <footer className="cli-terminal__footer">
+        <div aria-label={ui.progress}>
+          <b>{String(activeIndex + 1).padStart(2, '0')}</b>
+          <span>/ {String(scenarios.length).padStart(2, '0')}</span>
+          <i aria-hidden="true" />
+          <code>{activeScenario.label}</code>
+        </div>
+        <button
+          aria-label={ui.replayLabel}
+          disabled={reducedMotion}
+          onClick={restart}
+          title={reducedMotion ? ui.reduced : ui.replayLabel}
+          type="button"
+        >
+          <ReplayIcon />
+          {ui.replay}
+        </button>
+      </footer>
+
+      <p className="cli-visually-hidden" aria-live="polite">
+        {activeScenario.command}. {activeScenario.summary[locale]}.
+      </p>
+    </aside>
   );
 }
diff --git a/apps/docs/theme/components/CodeCapabilities.tsx b/apps/docs/theme/components/CodeCapabilities.tsx
index d8b5e546..21ed2cf6 100644
--- a/apps/docs/theme/components/CodeCapabilities.tsx
+++ b/apps/docs/theme/components/CodeCapabilities.tsx
@@ -1,6 +1,5 @@
 import { withBase } from '@rspress/core/runtime';
-import type { CSSProperties, ReactNode } from 'react';
-import { A3sCodeTui, type A3sCodeTuiSurface } from './A3sCodeTui';
+import type { CSSProperties } from 'react';
 import {
   codeCapabilityContent,
   type CapabilityLocale,
@@ -57,78 +56,6 @@ function CapabilityLink({
   );
 }
 
-function TuiModeBar() {
-  return (
-    <div className="cli-terminal__scenarios a3s-code-tui__modes">
-      <span className="is-active">
-        <small>01</small>
-        DEFAULT
-      </span>
-      <span>
-        <small>02</small>
-        GPT-5.6
-      </span>
-      <span>
-        <small>03</small>
-        EFFORT HIGH
-      </span>
-    </div>
-  );
-}
-
-function TuiMetrics() {
-  return (
-    <span className="a3s-code-tui__metrics">
-      <b>↑ 0</b>
-      <b>↓ 0</b>
-    </span>
-  );
-}
-
-function CapabilityTuiDemo({
-  children,
-  className,
-  footer,
-  prompt,
-  status,
-  summary,
-  summaryIcon = 'check',
-  surface,
-}: {
-  children: ReactNode;
-  className: string;
-  footer: string;
-  prompt: string;
-  status: string;
-  summary: string;
-  summaryIcon?: IconName;
-  surface: Exclude<A3sCodeTuiSurface, 'hero'>;
-}) {
-  return (
-    <A3sCodeTui
-      ariaHidden
-      className={`code-capability-demo ${className}`}
-      footerAction={<TuiMetrics />}
-      footerLead="DEFAULT"
-      footerMeta={footer}
-      prompt={prompt}
-      promptActive
-      status={status}
-      summary={
-        <div className="a3s-code-tui__result">
-          <CapabilityIcon name={summaryIcon} />
-          <span>{summary}</span>
-        </div>
-      }
-      surface={surface}
-      title="a3s code · ~/workspace"
-      toolbar={<TuiModeBar />}
-    >
-      {children}
-    </A3sCodeTui>
-  );
-}
-
 export function CodeCapabilitiesMarkdown({
   locale,
 }: {
@@ -193,31 +120,70 @@ export function CodeCapabilities({ locale }: { locale: CapabilityLocale }) {
               />
             </div>
 
-            <CapabilityTuiDemo
-              className="code-intelligence-demo"
-              footer={content.intelligence.evidence}
-              prompt={content.intelligence.command}
-              status="LSP READY"
-              summary={content.intelligence.evidence}
-              surface="code-intelligence"
+            <div
+              className="code-capability-demo code-intelligence-demo"
+              aria-hidden="true"
             >
-              <div className="code-intelligence-demo__request">
-                <CapabilityIcon name="search" />
-                <div>
-                  <small>code_navigation</small>
-                  <b>definition · saved file</b>
+              <div className="code-capability-demo__chrome">
+                <span>
+                  <i />
+                  <i />
+                  <i />
+                </span>
+                <code>{content.intelligence.windowTitle}</code>
+                <b>
+                  <i /> LSP READY
+                </b>
+              </div>
+              <div className="code-intelligence-demo__tabs">
+                {content.intelligence.tabs.map((tab, index) => (
+                  <span
+                    className={index === 1 ? 'is-active' : undefined}
+                    key={tab}
+                  >
+                    {tab}
+                  </span>
+                ))}
+              </div>
+              <div className="code-intelligence-demo__body">
+                <div className="code-intelligence-demo__gutter">
+                  <span>146</span>
+                  <span>147</span>
+                  <span>148</span>
+                  <span>149</span>
                 </div>
-                <em>RUNNING</em>
+                <pre>
+                  <code>
+                    <span>
+                      pub struct <b>{content.intelligence.symbol}</b> {'{'}
+                    </span>
+                    {'\n'}
+                    <span> workspace: Arc&lt;WorkspaceServices&gt;,</span>
+                    {'\n'}
+                    <span> tools: Arc&lt;ToolExecutor&gt;,</span>
+                    {'\n'}
+                    <span>{'}'}</span>
+                  </code>
+                </pre>
+                <div className="code-intelligence-demo__cursor" />
+              </div>
+              <div className="code-intelligence-demo__command">
+                <span>›</span>
+                <code>{content.intelligence.command}</code>
+                <i />
               </div>
               <div className="code-intelligence-demo__result">
-                <span>└</span>
+                <CapabilityIcon name="search" />
                 <div>
                   <b>{content.intelligence.symbol}</b>
                   <code>{content.intelligence.location}</code>
                 </div>
                 <CapabilityIcon name="check" />
               </div>
-            </CapabilityTuiDemo>
+              <div className="code-intelligence-demo__evidence">
+                {content.intelligence.evidence}
+              </div>
+            </div>
           </article>
 
           <article className="code-capability-card is-hitl">
@@ -237,13 +203,9 @@ export function CodeCapabilities({ locale }: { locale: CapabilityLocale }) {
               />
             </div>
 
-            <CapabilityTuiDemo
-              className="code-hitl-demo"
-              footer={content.hitl.risk}
-              prompt={content.hitl.command}
-              status="ASK"
-              summary={content.hitl.outcome}
-              surface="hitl"
+            <div
+              className="code-capability-demo code-hitl-demo"
+              aria-hidden="true"
             >
               <div className="code-hitl-demo__title">
                 <CapabilityIcon name="shield" />
@@ -275,7 +237,11 @@ export function CodeCapabilities({ locale }: { locale: CapabilityLocale }) {
                   </div>
                 ))}
               </div>
-            </CapabilityTuiDemo>
+              <div className="code-hitl-demo__outcome">
+                <CapabilityIcon name="check" />
+                {content.hitl.outcome}
+              </div>
+            </div>
           </article>
 
           <article className="code-capability-card is-progressive">
@@ -295,15 +261,15 @@ export function CodeCapabilities({ locale }: { locale: CapabilityLocale }) {
               />
             </div>
 
-            <CapabilityTuiDemo
-              className="code-progressive-demo"
-              footer={content.progressive.registry}
-              prompt={content.progressive.prompt}
-              status="DISCLOSING"
-              summary={content.progressive.result}
-              summaryIcon="spark"
-              surface="progressive-api"
+            <div
+              className="code-capability-demo code-progressive-demo"
+              aria-hidden="true"
             >
+              <div className="code-progressive-demo__prompt">
+                <CapabilityIcon name="spark" />
+                <span>TURN INTENT</span>
+                <b>{content.progressive.prompt}</b>
+              </div>
               <div className="code-progressive-demo__registry">
                 <div>
                   <CapabilityIcon name="database" />
@@ -321,7 +287,13 @@ export function CodeCapabilities({ locale }: { locale: CapabilityLocale }) {
                   </div>
                 ))}
               </div>
-            </CapabilityTuiDemo>
+              <div className="code-progressive-demo__result">
+                <span>
+                  <i />
+                </span>
+                {content.progressive.result}
+              </div>
+            </div>
           </article>
 
           <article className="code-capability-card is-runtime">
@@ -341,18 +313,29 @@ export function CodeCapabilities({ locale }: { locale: CapabilityLocale }) {
               />
             </div>
 
-            <CapabilityTuiDemo
-              className="code-runtime-demo"
-              footer={content.runtime.footer}
-              prompt={content.runtime.call}
-              status="STREAMING"
-              summary={content.runtime.complete}
-              surface="runtime-tool"
+            <div
+              className="code-capability-demo code-runtime-demo"
+              aria-hidden="true"
             >
+              <div className="code-capability-demo__chrome">
+                <span>
+                  <i />
+                  <i />
+                  <i />
+                </span>
+                <code>{content.runtime.windowTitle}</code>
+                <b>
+                  <i /> STREAMING
+                </b>
+              </div>
               <div className="code-runtime-demo__gate">
                 <span>✓</span>
                 <code>{content.runtime.gate}</code>
               </div>
+              <div className="code-runtime-demo__call">
+                <CapabilityIcon name="runtime" />
+                <code>{content.runtime.call}</code>
+              </div>
               <div className="code-runtime-demo__submitted">
                 <CapabilityIcon name="branch" />
                 {content.runtime.submitted}
@@ -372,7 +355,13 @@ export function CodeCapabilities({ locale }: { locale: CapabilityLocale }) {
                   </div>
                 ))}
               </div>
-            </CapabilityTuiDemo>
+              <div className="code-runtime-demo__complete">
+                <CapabilityIcon name="check" /> {content.runtime.complete}
+              </div>
+              <div className="code-runtime-demo__footer">
+                {content.runtime.footer}
+              </div>
+            </div>
           </article>
 
           <article className="code-capability-card is-context">
@@ -392,15 +381,15 @@ export function CodeCapabilities({ locale }: { locale: CapabilityLocale }) {
               />
             </div>
 
-            <CapabilityTuiDemo
-              className="code-context-demo"
-              footer={content.context.safety}
-              prompt={content.context.query}
-              status="RECALL"
-              summary={content.context.safety}
-              summaryIcon="shield"
-              surface="cross-session-context"
+            <div
+              className="code-capability-demo code-context-demo"
+              aria-hidden="true"
             >
+              <div className="code-context-demo__query">
+                <span>›</span>
+                <code>{content.context.query}</code>
+                <i />
+              </div>
               <div className="code-context-demo__hits">
                 {content.context.hits.map(
                   ([index, meta, title, snippet], hitIndex) => (
@@ -428,7 +417,10 @@ export function CodeCapabilities({ locale }: { locale: CapabilityLocale }) {
                   <b>{content.context.saved}</b>
                 </span>
               </div>
-            </CapabilityTuiDemo>
+              <div className="code-context-demo__safety">
+                <CapabilityIcon name="shield" /> {content.context.safety}
+              </div>
+            </div>
           </article>
         </div>
       </div>
diff --git a/apps/docs/theme/components/code-capability-content.ts b/apps/docs/theme/components/code-capability-content.ts
index f136e326..46bf8721 100644
--- a/apps/docs/theme/components/code-capability-content.ts
+++ b/apps/docs/theme/components/code-capability-content.ts
@@ -15,7 +15,9 @@ export const codeCapabilityContent = {
       description:
         '原生 symbols、定义、引用、实现和诊断，在 Agent 工具、`/ide` 与 Monaco 之间共享同一套 saved-file 契约。',
       href: '/code/code-intelligence',
+      windowTitle: 'workspace / 语义导航',
       command: ':definition',
+      tabs: ['agent.rs', 'session.rs', 'tools.rs'],
       symbol: 'SessionBuilder',
       location: 'src/agent/session.rs:148',
       evidence: 'saved rev 184 · 12 个引用 · 0 个诊断',
@@ -28,7 +30,6 @@ export const codeCapabilityContent = {
       description:
         '越过边界的调用会在副作用发生前暂停。用户可以只批准本次调用、记录精确规则，或拒绝并给出新指引。',
       href: '/code/capabilities#human-in-the-loop',
-      command: '! git push origin main',
       prompt: '需要授权',
       run: 'Bash(git push origin main)',
       risk: '外部副作用 · 修改远程 Git',
@@ -66,6 +67,7 @@ export const codeCapabilityContent = {
       description:
         '登录后，`runtime` 可以把独立任务提交给远程 Worker，流式展示 Batch 进度，并返回完整或明确标记为 partial 的结果。',
       href: '/code/capabilities#runtime-tool',
+      windowTitle: 'runtime / release-research',
       gate: '/login → runtime 已注册',
       call: 'runtime({ tasks: ["risk", "upgrade", "notes"], worker: "release-research" })',
       submitted: '已提交 3 个并行子任务',
@@ -123,7 +125,9 @@ export const codeCapabilityContent = {
       description:
         'Native symbols, definitions, references, implementations, and diagnostics share one saved-file contract across agent tools, `/ide`, and Monaco.',
       href: '/code/code-intelligence',
+      windowTitle: 'workspace / semantic navigation',
       command: ':definition',
+      tabs: ['agent.rs', 'session.rs', 'tools.rs'],
       symbol: 'SessionBuilder',
       location: 'src/agent/session.rs:148',
       evidence: 'saved rev 184 · 12 references · 0 diagnostics',
@@ -136,7 +140,6 @@ export const codeCapabilityContent = {
       description:
         'Boundary-crossing calls pause before side effects. The person approves one invocation, records a precise rule, or denies it with guidance.',
       href: '/code/capabilities#human-in-the-loop',
-      command: '! git push origin main',
       prompt: 'Permission required',
       run: 'Bash(git push origin main)',
       risk: 'external side effect · mutating Git',
@@ -174,6 +177,7 @@ export const codeCapabilityContent = {
       description:
         'After login, `runtime` submits independent tasks to remote workers, streams batch progress, and returns complete or explicitly partial results.',
       href: '/code/capabilities#runtime-tool',
+      windowTitle: 'runtime / release-research',
       gate: '/login → runtime registered',
       call: 'runtime({ tasks: ["risk", "upgrade", "notes"], worker: "release-research" })',
       submitted: '3 parallel subtasks submitted',
diff --git a/apps/docs/theme/index.tsx b/apps/docs/theme/index.tsx
index 8894f08e..aef38b45 100644
--- a/apps/docs/theme/index.tsx
+++ b/apps/docs/theme/index.tsx
@@ -3,6 +3,7 @@ import './home.css';
 import './terminal-showcase.css';
 import './capabilities.css';
 import './capability-demos.css';
+import './capability-runtime-demos.css';
 import './capability-motion.css';
 import './responsive.css';