diff --git a/website/scripts/check-built-site.mjs b/website/scripts/check-built-site.mjs
index d5af620..b262302 100644
--- a/website/scripts/check-built-site.mjs
+++ b/website/scripts/check-built-site.mjs
@@ -66,6 +66,20 @@ const sharedTuiRegionMarkers = [
   'data-tui-region="footer"',
 ];
 
+const realCapabilityTuiMarkers = [
+  'data-real-tui-scene="hitl"',
+  'a3s-real-user-message',
+  'a3s-real-tool-line',
+  '◇ high',
+  'default mode',
+];
+
+const obsoleteCapabilityUiMarkers = [
+  'a3s-capability-player-intro',
+  'a3s-capability-tui-plan',
+  'HUMAN APPROVAL REQUIRED',
+];
+
 for (const homepage of ['index.html', 'en/index.html']) {
   const html = await readFile(path.join(outputRoot, homepage), 'utf8');
   for (const marker of capabilityMarkers) {
@@ -84,6 +98,22 @@ for (const homepage of ['index.html', 'en/index.html']) {
       );
     }
   }
+
+  for (const marker of realCapabilityTuiMarkers) {
+    if (!html.includes(marker)) {
+      throw new Error(
+        `${homepage} is missing real capability TUI marker: ${marker}`,
+      );
+    }
+  }
+
+  for (const marker of obsoleteCapabilityUiMarkers) {
+    if (html.includes(marker)) {
+      throw new Error(
+        `${homepage} still renders obsolete capability UI: ${marker}`,
+      );
+    }
+  }
 }
 
 const brokenReferences = [];
diff --git a/website/scripts/check-doc-accuracy.mjs b/website/scripts/check-doc-accuracy.mjs
index a8b695c..136673a 100644
--- a/website/scripts/check-doc-accuracy.mjs
+++ b/website/scripts/check-doc-accuracy.mjs
@@ -88,6 +88,7 @@ const [
   rspressConfig,
   homeLayout,
   tuiRuntimeDemo,
+  tuiWelcomeBanner,
 ] = await Promise.all([
   readFile(path.join(repositoryRoot, 'core', 'Cargo.toml'), 'utf8'),
   readFile(path.join(repositoryRoot, 'sdk', 'node', 'package.json'), 'utf8'),
@@ -105,6 +106,10 @@ const [
     path.join(websiteRoot, 'theme', 'components', 'TuiRuntimeDemo.tsx'),
     'utf8',
   ),
+  readFile(
+    path.join(websiteRoot, 'theme', 'components', 'TuiWelcomeBanner.tsx'),
+    'utf8',
+  ),
 ]);
 
 const sourceVersions = new Map([
@@ -166,7 +171,7 @@ if (JSON.stringify(versions) !== JSON.stringify(configuredVersions)) {
   );
 }
 if (
-  ![homeLayout, tuiRuntimeDemo].some((source) =>
+  ![homeLayout, tuiRuntimeDemo, tuiWelcomeBanner].some((source) =>
     source.includes(`a3s-code ${manifest.current}`),
   )
 ) {
diff --git a/website/theme/capability-responsive.css b/website/theme/capability-responsive.css
index 454d5e3..f3ecb6a 100644
--- a/website/theme/capability-responsive.css
+++ b/website/theme/capability-responsive.css
@@ -1,6 +1,6 @@
 @media (max-width: 1100px) {
   .a3s-capability-console {
-    grid-template-columns: 230px minmax(0, 1fr);
+    grid-template-columns: 225px minmax(0, 1fr);
   }
 
   .a3s-capability-selector > button {
@@ -15,10 +15,8 @@
     height: 31px;
   }
 
-  .a3s-capability-player-intro {
-    align-items: flex-start;
-    grid-template-columns: 1fr;
-    gap: 14px;
+  .a3s-real-tool-line > header {
+    grid-template-columns: 15px auto minmax(0, 1fr);
   }
 }
 
@@ -66,10 +64,6 @@
   .a3s-capability-selector > button > em {
     display: none;
   }
-
-  .a3s-capability-player-stage {
-    min-height: 390px;
-  }
 }
 
 @media (max-width: 640px) {
@@ -101,103 +95,183 @@
     font-size: 10px;
   }
 
-  .a3s-capability-player-intro {
-    gap: 9px;
+  .a3s-capability-player > .a3s-tui-terminal {
+    padding: 14px 11px 8px;
   }
 
-  .a3s-capability-player-intro h3 {
-    font-size: 16px;
+  .a3s-capability-player.is-fullscreen > .a3s-tui-terminal {
+    padding: 5px;
   }
 
-  .a3s-capability-player-stage {
-    min-height: 360px;
+  .a3s-real-transcript {
+    gap: 14px;
   }
 
-  .a3s-capability-scene {
-    min-height: 350px;
-    padding: 0;
+  .a3s-real-user-message {
+    padding: 11px 10px;
   }
 
-  .a3s-capability-call,
-  .a3s-runtime-tool-call {
-    grid-template-columns: auto minmax(0, 1fr);
+  .a3s-real-user-message > p,
+  .a3s-real-tool-line > header > strong {
+    font-size: 10.5px;
   }
 
-  .a3s-capability-call em {
-    display: none;
+  .a3s-real-tool-line > header > code {
+    font-size: 9.5px;
   }
 
-  .a3s-progressive-endpoint span {
+  .a3s-real-tool-line > div > p > code {
+    font-size: 9px;
+  }
+
+  .a3s-real-approval > ol > li > span,
+  .a3s-real-approval > ol > li > b,
+  .a3s-real-approval > ol > li > i,
+  .a3s-real-approval > ol > li > p,
+  .a3s-real-approval-detail > span,
+  .a3s-real-approval-detail > code {
+    font-size: 9.5px;
+  }
+
+  .a3s-real-runtime-tracker > header {
+    grid-template-columns: 13px minmax(0, 1fr);
+  }
+
+  .a3s-real-runtime-tracker > header > small {
+    padding-left: 20px;
+    grid-column: 1 / -1;
+  }
+
+  .a3s-real-runtime-tracker > div > p {
+    grid-template-columns: 13px auto minmax(0, 1fr);
+  }
+
+  .a3s-real-runtime-tracker > div > p > small {
     display: none;
   }
 
-  .a3s-progressive-steps > div {
-    grid-template-columns: 54px 14px minmax(0, 1fr);
+  .a3s-real-ide {
+    grid-template-rows: minmax(0, 1fr) 52px;
+    gap: 3px;
   }
 
-  .a3s-intelligence-workbench {
-    min-height: 0;
-    grid-template-columns: 1fr;
+  .a3s-real-ide-main,
+  .a3s-real-ide-footer {
+    gap: 3px;
   }
 
-  .a3s-intelligence-code {
-    border-right: 0;
-    border-bottom: 1px solid #29323c;
+  .a3s-real-ide-main {
+    grid-template-columns: minmax(105px, 0.31fr) minmax(0, 0.69fr);
   }
 
-  .a3s-intelligence-workbench > aside {
-    min-height: 174px;
+  .a3s-real-ide-frame {
+    border-radius: 5px;
+    grid-template-rows: 24px minmax(0, 1fr);
   }
 
-  .a3s-intelligence-workbench li {
-    min-height: 34px;
+  .a3s-real-ide-frame > header {
+    padding: 0 6px;
+    font-size: 8.5px;
   }
 
-  .a3s-capability-scene--intelligence {
-    min-height: 0;
+  .a3s-real-ide-tree > div {
+    padding: 4px 2px;
   }
 
-  .a3s-capability-scene--intelligence > footer {
-    flex-wrap: wrap;
+  .a3s-real-ide-tree p {
+    min-height: 23px;
+    padding: 0 3px;
+    grid-template-columns: 11px minmax(0, 1fr);
+    gap: 3px;
+    font-size: 8.5px;
   }
 
-  .a3s-capability-scene--intelligence > footer code {
-    display: none;
+  .a3s-real-ide-tree p:nth-child(n + 2) {
+    padding-left: 8px;
   }
 
-  .a3s-ctx-results > div {
-    grid-template-columns: 18px 48px minmax(0, 1fr);
+  .a3s-real-ide-code > p {
+    min-height: 24px;
+    grid-template-columns: 28px minmax(0, 1fr);
   }
 
-  .a3s-ctx-results > div small {
-    display: none;
+  .a3s-real-ide-code > p > span {
+    padding-right: 5px;
+    font-size: 8px;
   }
 
-  .a3s-ctx-actions {
-    grid-template-columns: 1fr;
+  .a3s-real-ide-code > p > code,
+  .a3s-real-ide-results > p {
+    font-size: 8.5px;
   }
 
-  .a3s-capability-tui-tag:nth-of-type(n + 4) {
-    display: none;
+  .a3s-real-ide-footer .a3s-real-ide-frame > p {
+    padding-right: 5px;
+    padding-left: 5px;
+    font-size: 7.5px;
+  }
+
+  .a3s-real-ctx-results > div > p {
+    grid-template-columns: 23px minmax(0, 1fr);
+  }
+
+  .a3s-real-ctx-results > div > p > b,
+  .a3s-real-ctx-results > div > p > strong,
+  .a3s-real-notice {
+    font-size: 9.5px;
+  }
+
+  .a3s-real-ctx-results > div > small,
+  .a3s-real-ctx-results > footer {
+    padding-left: 28px;
+    font-size: 8.5px;
+  }
+}
+
+@media (max-width: 390px) {
+  .a3s-real-approval > ol > li {
+    grid-template-columns: 10px 11px 12px minmax(0, 1fr);
+    gap: 3px;
+  }
+
+  .a3s-real-approval > ol > li > p {
+    font-size: 8.7px;
+  }
+
+  .a3s-real-tool-line > header {
+    grid-template-columns: 13px auto minmax(0, 1fr);
+    gap: 3px;
+  }
+
+  .a3s-real-tool-line > header > strong {
+    font-size: 9.5px;
+  }
+
+  .a3s-real-tool-line > header > code {
+    font-size: 8.7px;
+  }
+
+  .a3s-real-ide-main {
+    grid-template-columns: 96px minmax(0, 1fr);
+  }
+
+  .a3s-real-ide-footer {
+    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+  }
+
+  .a3s-real-ctx-results > div > p > strong,
+  .a3s-real-ctx-results > div > small {
+    white-space: normal;
+  }
+
+  .a3s-real-ctx-results > footer {
+    white-space: normal;
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .a3s-capability-player-stage,
-  .a3s-capability-tui-plan li.is-active > i,
-  .a3s-progressive-steps .is-active i,
-  .a3s-progressive-view.is-ready,
-  .a3s-runtime-batch > div.is-running > i b,
-  .a3s-ctx-actions > div.is-ready {
-    animation: none;
-  }
-
-  .a3s-capability-selector > button,
-  .a3s-capability-selector > button::after,
-  .a3s-capability-approval,
-  .a3s-progressive-steps > div,
-  .a3s-runtime-batch > div > i b,
-  .a3s-intelligence-workbench li {
-    transition: none;
+  .a3s-capability-console,
+  .a3s-capability-selector {
+    scroll-behavior: auto;
   }
 }
diff --git a/website/theme/capability-scenes.css b/website/theme/capability-scenes.css
index b128096..859266f 100644
--- a/website/theme/capability-scenes.css
+++ b/website/theme/capability-scenes.css
@@ -1,628 +1,607 @@
-.a3s-progressive-query {
+.a3s-real-transcript {
   display: flex;
-  min-height: 48px;
-  padding: 0 12px;
-  border: 1px solid #2d3742;
-  border-radius: 5px;
-  background: rgba(15, 20, 27, 0.88);
-  align-items: center;
-  gap: 12px;
-}
-
-.a3s-progressive-query span {
-  color: #77859a;
-  font-size: 7px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  min-width: 0;
+  height: 100%;
+  flex-direction: column;
+  gap: 18px;
+  font-family: var(--a3s-mono);
 }
 
-.a3s-progressive-query p {
+.a3s-real-user-message {
+  display: grid;
+  min-width: 0;
   margin: 0;
-  color: #d8dfe8;
-  font-size: 9px;
-}
-
-.a3s-progressive-endpoint {
-  display: flex;
-  margin: 13px 0 9px;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
+  padding: 13px 14px;
+  background: rgb(49, 53, 58);
+  color: rgb(220, 220, 220);
+  grid-template-columns: 14px minmax(0, 1fr);
+  align-items: start;
+  gap: 6px;
+  animation: a3s-real-row-in 180ms ease-out both;
 }
 
-.a3s-progressive-endpoint code {
-  color: #8b9dff;
-  font-size: 8px;
+.a3s-real-user-message > span {
+  color: rgb(220, 220, 220);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.55;
+  opacity: 0.72;
 }
 
-.a3s-progressive-endpoint span {
-  color: #617080;
-  font-size: 7px;
+.a3s-real-user-message > p {
+  min-width: 0;
+  margin: 0;
+  color: inherit;
+  font-size: 11.5px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
 }
 
-.a3s-progressive-steps {
-  overflow: hidden;
-  border: 1px solid #2a3440;
-  border-radius: 6px;
-  background: rgba(10, 14, 19, 0.9);
+.a3s-real-tool-stack {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 13px;
 }
 
-.a3s-progressive-steps > div {
+.a3s-real-tool-line {
   display: grid;
-  min-height: 48px;
-  padding: 0 12px;
-  border-bottom: 1px solid #252e38;
-  color: #596573;
-  grid-template-columns: 58px 18px minmax(0, 1fr);
-  align-items: center;
-  gap: 8px;
-  transition:
-    background 180ms ease,
-    color 180ms ease;
+  min-width: 0;
+  color: rgb(220, 220, 220);
+  gap: 4px;
+  animation: a3s-real-row-in 180ms ease-out both;
 }
 
-.a3s-progressive-steps > div:last-child {
-  border-bottom: 0;
+.a3s-real-tool-line > header {
+  display: grid;
+  min-width: 0;
+  min-height: 18px;
+  grid-template-columns: 15px auto minmax(0, 1fr);
+  align-items: baseline;
+  gap: 5px;
 }
 
-.a3s-progressive-steps > div.is-active {
-  background: rgba(139, 157, 255, 0.065);
-  color: #dce1ff;
+.a3s-real-tool-line > header > i {
+  color: rgb(120, 123, 125);
+  font-size: 12px;
+  font-style: normal;
+  text-align: center;
 }
 
-.a3s-progressive-steps > div.is-complete {
-  color: #919bad;
+.a3s-real-tool-line > header > strong {
+  color: rgb(220, 220, 220);
+  font-size: 11.5px;
+  font-weight: 650;
+  line-height: 1.45;
+  white-space: nowrap;
 }
 
-.a3s-progressive-steps b {
-  color: inherit;
-  font-size: 8px;
-  font-weight: 550;
+.a3s-real-tool-line > header > code {
+  overflow: hidden;
+  min-width: 0;
+  color: rgb(220, 220, 220);
+  font-family: inherit;
+  font-size: 11px;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.a3s-progressive-steps i {
-  width: 6px;
-  height: 6px;
-  border: 1px solid #45505e;
-  border-radius: 50%;
+.a3s-real-tool-line > div {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
 }
 
-.a3s-progressive-steps .is-active i {
-  border-color: #8b9dff;
-  background: #8b9dff;
-  box-shadow: 0 0 9px rgba(139, 157, 255, 0.6);
-  animation: a3s-capability-pulse 650ms ease-in-out infinite alternate;
+.a3s-real-tool-line > div > p {
+  display: grid;
+  min-width: 0;
+  min-height: 16px;
+  margin: 0;
+  color: rgb(120, 123, 125);
+  grid-template-columns: 24px minmax(0, 1fr);
+  gap: 2px;
 }
 
-.a3s-progressive-steps .is-complete i {
-  border-color: #6e79c8;
-  background: #4b568f;
+.a3s-real-tool-line > div > p > span {
+  color: rgb(95, 99, 104);
+  text-align: right;
 }
 
-.a3s-progressive-steps code {
+.a3s-real-tool-line > div > p > code {
   overflow: hidden;
   color: inherit;
-  font-size: 8px;
+  font-family: inherit;
+  font-size: 10.5px;
+  line-height: 1.45;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.a3s-progressive-view {
-  display: flex;
-  margin-top: 10px;
-  min-height: 48px;
-  padding: 0 12px;
-  border: 1px dashed #303947;
-  border-radius: 6px;
-  color: #5d6876;
-  align-items: center;
-  gap: 10px;
+.a3s-real-tool-line.is-active > header > i {
+  color: rgb(125, 182, 255);
+  animation: a3s-real-pulse 700ms ease-in-out infinite alternate;
 }
 
-.a3s-progressive-view > span {
-  display: grid;
-  width: 25px;
-  height: 25px;
-  border: 1px solid #303947;
-  border-radius: 5px;
-  place-items: center;
+.a3s-real-tool-line.is-success > header > i,
+.a3s-real-tool-line > div > p.is-success {
+  color: rgb(78, 201, 139);
 }
 
-.a3s-progressive-view > div {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+.a3s-real-tool-line.is-warning > header > i {
+  color: rgb(215, 168, 75);
 }
 
-.a3s-progressive-view small {
-  font-size: 6px;
-  letter-spacing: 0.08em;
+.a3s-real-tool-line.is-muted > header > i,
+.a3s-real-tool-line.is-muted > header > code {
+  color: rgb(120, 123, 125);
 }
 
-.a3s-progressive-view strong {
-  font-size: 8px;
-  font-weight: 520;
+.a3s-real-approval {
+  display: grid;
+  min-width: 0;
+  padding: 2px 0 5px;
+  color: rgb(220, 220, 220);
+  gap: 1px;
+  font-family: var(--a3s-mono);
+  animation: a3s-real-row-in 160ms ease-out both;
 }
 
-.a3s-progressive-view.is-ready {
-  border-color: rgba(139, 157, 255, 0.45);
-  background: rgba(139, 157, 255, 0.055);
-  color: #cbd2ff;
-  animation: a3s-capability-result-in 260ms ease-out;
+.a3s-real-approval > header,
+.a3s-real-approval-detail,
+.a3s-real-approval > footer {
+  padding-right: 2px;
+  padding-left: 2px;
 }
 
-.a3s-runtime-worker {
+.a3s-real-approval > header {
   display: flex;
-  min-height: 70px;
-  margin: 14px 0;
-  padding: 12px 14px;
-  border: 1px solid #2c3d3a;
-  border-radius: 6px;
-  background: rgba(15, 24, 23, 0.76);
+  min-height: 21px;
   align-items: center;
-  justify-content: space-between;
-}
-
-.a3s-runtime-worker > div {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.a3s-runtime-worker small {
-  color: #5b7d76;
-  font-size: 7px;
-  letter-spacing: 0.09em;
+  gap: 6px;
 }
 
-.a3s-runtime-worker strong {
-  color: #d9e8e4;
+.a3s-real-approval > header > span {
+  color: rgb(215, 168, 75);
   font-size: 12px;
-  font-weight: 590;
-}
-
-.a3s-runtime-worker code {
-  color: #6d817d;
-  font-size: 7px;
 }
 
-.a3s-runtime-worker > i {
-  width: 9px;
-  height: 9px;
-  border: 1px solid #53635f;
-  border-radius: 50%;
+.a3s-real-approval > header > strong {
+  color: rgb(220, 220, 220);
+  font-size: 11.5px;
+  font-weight: 650;
 }
 
-.a3s-runtime-worker > i.is-ready {
-  border-color: #55d1b3;
-  background: #55d1b3;
-  box-shadow: 0 0 13px rgba(85, 209, 179, 0.52);
-}
-
-.a3s-runtime-batch {
+.a3s-real-approval-detail {
   display: grid;
-  gap: 8px;
+  min-width: 0;
+  min-height: 20px;
+  margin: 0;
+  color: rgb(95, 99, 104);
+  grid-template-columns: 30px minmax(0, 1fr);
+  align-items: baseline;
+  gap: 4px;
 }
 
-.a3s-runtime-batch > div {
-  display: grid;
-  min-height: 58px;
-  padding: 0 12px;
-  border: 1px solid #29343d;
-  border-radius: 5px;
-  background: rgba(13, 18, 23, 0.82);
-  grid-template-columns: 24px minmax(0, 1fr) minmax(72px, 0.55fr);
-  align-items: center;
-  gap: 10px;
+.a3s-real-approval-detail > span,
+.a3s-real-approval-detail > code {
+  font-size: 10.5px;
+  line-height: 1.45;
 }
 
-.a3s-runtime-batch > div > span {
-  color: #4f5e6a;
-  font-size: 7px;
+.a3s-real-approval-detail > code {
+  overflow: hidden;
+  color: rgb(220, 220, 220);
+  font-family: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.a3s-runtime-batch p {
-  display: flex;
+.a3s-real-approval > ol {
+  display: grid;
   min-width: 0;
   margin: 0;
-  flex-direction: column;
-  gap: 3px;
+  padding: 0;
+  gap: 0;
+  list-style: none;
 }
 
-.a3s-runtime-batch strong {
-  overflow: hidden;
-  color: #aab6c0;
-  font-size: 8px;
-  font-weight: 530;
-  text-overflow: ellipsis;
+.a3s-real-approval > ol > li {
+  display: grid;
+  min-width: 0;
+  min-height: 22px;
+  padding: 1px 2px;
+  color: rgb(220, 220, 220);
+  grid-template-columns: 12px 13px 14px minmax(0, 1fr);
+  align-items: center;
+  gap: 4px;
 }
 
-.a3s-runtime-batch small {
-  color: #586674;
-  font-size: 7px;
+.a3s-real-approval > ol > li.is-selected {
+  background: rgb(42, 46, 52);
 }
 
-.a3s-runtime-batch > div > i {
-  display: block;
-  height: 3px;
-  overflow: hidden;
-  border-radius: 999px;
-  background: #28323b;
+.a3s-real-approval > ol > li > span,
+.a3s-real-approval > ol > li > b,
+.a3s-real-approval > ol > li > i,
+.a3s-real-approval > ol > li > p {
+  font-size: 10.5px;
+  line-height: 1.4;
 }
 
-.a3s-runtime-batch > div > i b {
-  display: block;
-  width: 8%;
-  height: 100%;
-  border-radius: inherit;
-  background: #57646f;
-  transition: width 420ms ease;
+.a3s-real-approval > ol > li > span,
+.a3s-real-approval > ol > li > b {
+  color: rgb(95, 99, 104);
+  font-weight: 400;
 }
 
-.a3s-runtime-batch > div.is-running > i b {
-  width: 68%;
-  background: #55d1b3;
-  animation: a3s-capability-runtime-progress 980ms ease-in-out infinite
-    alternate;
+.a3s-real-approval > ol > li > i {
+  color: rgb(95, 99, 104);
+  font-style: normal;
 }
 
-.a3s-runtime-batch > div.is-complete > i b {
-  width: 100%;
-  background: #55d1b3;
+.a3s-real-approval > ol > li:last-child > i {
+  color: rgb(224, 108, 117);
 }
 
-.a3s-runtime-batch > div.is-running small {
-  color: #72bea9;
+.a3s-real-approval > ol > li > p {
+  overflow: hidden;
+  margin: 0;
+  color: rgb(220, 220, 220);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.a3s-runtime-batch > div.is-complete small {
-  color: #63c49f;
+.a3s-real-approval > footer {
+  min-height: 18px;
+  padding-top: 2px;
+  color: rgb(95, 99, 104);
+  font-size: 9.5px;
+  line-height: 1.4;
 }
 
-.a3s-capability-scene--runtime > footer {
-  display: flex;
-  min-height: 36px;
-  margin-top: 12px;
-  padding: 0 12px;
-  border-top: 1px solid #28323b;
-  color: #66737f;
+.a3s-real-open-view {
+  display: grid;
+  min-width: 0;
+  min-height: 22px;
+  margin: 0;
+  color: rgb(220, 220, 220);
+  grid-template-columns: 15px 13px auto minmax(0, 1fr);
   align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  font-size: 7px;
+  gap: 5px;
+  font-family: var(--a3s-mono);
+  animation: a3s-real-row-in 180ms ease-out both;
 }
 
-.a3s-capability-scene--runtime > footer span {
-  color: #55d1b3;
+.a3s-real-open-view > i {
+  color: rgb(125, 182, 255);
+  font-style: normal;
+  text-align: center;
 }
 
-.a3s-capability-scene--runtime > footer p {
-  margin: 0;
+.a3s-real-open-view > span {
+  color: rgb(125, 182, 255);
 }
 
-.a3s-capability-scene--runtime > footer.is-ready p {
-  color: #9dd9c7;
+.a3s-real-open-view > strong {
+  color: rgb(220, 220, 220);
+  font-size: 11px;
+  font-weight: 650;
 }
 
-.a3s-capability-scene--intelligence {
-  padding: 0;
+.a3s-real-open-view > small {
+  color: rgb(120, 123, 125);
+  font-size: 10px;
 }
 
-.a3s-capability-scene--intelligence > header {
-  background: rgba(14, 19, 25, 0.94);
+.a3s-real-runtime-tracker {
+  padding-top: 4px;
+  padding-bottom: 2px;
+  border-top: 0;
 }
 
-.a3s-capability-scene--intelligence > header > span {
-  display: inline-flex;
-  color: #a9b5c0;
-  align-items: center;
-  gap: 7px;
-  font-size: 8px;
+.a3s-real-runtime-tracker > div > p.is-done > i {
+  color: rgb(78, 201, 139);
+  animation: none;
 }
 
-.a3s-capability-scene--intelligence > header > span i {
-  width: 6px;
-  height: 6px;
-  border-radius: 2px;
-  background: #d19956;
+.a3s-real-runtime-tracker > div > p.is-done > i::before {
+  content: '✓';
 }
 
-.a3s-intelligence-workbench {
-  display: grid;
-  min-height: 324px;
-  grid-template-columns: minmax(0, 1.25fr) minmax(170px, 0.75fr);
+.a3s-real-runtime-tracker > div > p.is-done > i {
+  font-size: 0;
 }
 
-.a3s-intelligence-code {
-  padding: 20px 0;
-  border-right: 1px solid #29323c;
-  background: rgba(10, 14, 19, 0.72);
+.a3s-real-runtime-tracker > div > p.is-done > i::before {
+  font-size: 11px;
 }
 
-.a3s-intelligence-code p {
+.a3s-real-ide {
   display: grid;
-  min-height: 30px;
-  margin: 0;
-  padding: 0 12px 0 0;
-  color: #aeb9c5;
-  grid-template-columns: 42px minmax(0, 1fr);
-  align-items: center;
-  font-size: 8px;
-}
-
-.a3s-intelligence-code p > span {
-  padding-right: 11px;
-  color: #465362;
-  text-align: right;
-  user-select: none;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  grid-template-rows: minmax(0, 1fr) 56px;
+  gap: 4px;
+  font-family: var(--a3s-mono);
+  animation: a3s-real-row-in 160ms ease-out both;
 }
 
-.a3s-intelligence-code p code {
-  overflow: hidden;
-  white-space: nowrap;
+.a3s-real-ide-main,
+.a3s-real-ide-footer {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  gap: 4px;
 }
 
-.a3s-intelligence-code p b {
-  color: #c099ef;
-  font-weight: 500;
+.a3s-real-ide-main {
+  grid-template-columns: minmax(154px, 0.34fr) minmax(0, 0.66fr);
 }
 
-.a3s-intelligence-code p mark {
-  background: transparent;
-  color: #74b9f4;
+.a3s-real-ide-footer {
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
 }
 
-.a3s-intelligence-code p.is-symbol {
-  background: rgba(102, 181, 255, 0.075);
-  box-shadow: inset 2px 0 #66b5ff;
+.a3s-real-ide-frame {
+  display: grid;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+  border: 1px solid rgb(52, 58, 64);
+  border-radius: 7px;
+  background: rgb(21, 25, 31);
+  grid-template-rows: 27px minmax(0, 1fr);
 }
 
-.a3s-intelligence-workbench > aside {
-  background: rgba(13, 18, 24, 0.9);
+.a3s-real-ide-editor {
+  border-color: rgba(125, 182, 255, 0.76);
 }
 
-.a3s-intelligence-command {
+.a3s-real-ide-frame > header {
   display: flex;
-  min-height: 38px;
-  padding: 0 12px;
-  border-bottom: 1px solid #29323c;
-  color: #66b5ff;
+  overflow: hidden;
+  min-width: 0;
+  padding: 0 10px;
+  border-bottom: 1px solid rgba(52, 58, 64, 0.72);
+  color: rgb(220, 220, 220);
   align-items: center;
-  gap: 5px;
-  font-size: 8px;
+  font-size: 10px;
+  font-weight: 560;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.a3s-intelligence-workbench > aside > strong {
-  display: block;
-  padding: 14px 12px 9px;
-  color: #768493;
-  font-size: 7px;
-  font-weight: 520;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+.a3s-real-ide-editor > header {
+  color: rgb(125, 182, 255);
 }
 
-.a3s-intelligence-workbench ul {
+.a3s-real-ide-tree > div {
+  overflow: hidden;
+  padding: 6px 5px;
+}
+
+.a3s-real-ide-tree p {
+  display: grid;
+  min-width: 0;
+  min-height: 25px;
   margin: 0;
   padding: 0 7px;
-  list-style: none;
+  color: rgb(120, 123, 125);
+  grid-template-columns: 14px minmax(0, 1fr);
+  align-items: center;
+  gap: 5px;
+  font-size: 10px;
 }
 
-.a3s-intelligence-workbench li {
-  display: flex;
-  min-height: 45px;
-  padding: 6px 8px;
-  border-bottom: 1px solid #252e37;
-  opacity: 0.22;
-  flex-direction: column;
-  justify-content: center;
-  gap: 3px;
-  transform: translateX(5px);
-  transition:
-    opacity 180ms ease,
-    transform 180ms ease;
+.a3s-real-ide-tree p:nth-child(n + 2) {
+  padding-left: 18px;
 }
 
-.a3s-intelligence-workbench li.is-visible {
-  opacity: 1;
-  transform: translateX(0);
+.a3s-real-ide-tree p.is-selected {
+  background: rgb(42, 46, 52);
+  color: rgb(220, 220, 220);
 }
 
-.a3s-intelligence-workbench li b {
-  color: #66b5ff;
-  font-size: 7px;
-  font-weight: 500;
+.a3s-real-ide-tree p > span {
+  color: rgb(110, 198, 217);
 }
 
-.a3s-intelligence-workbench li span {
+.a3s-real-ide-tree p > b {
   overflow: hidden;
-  color: #9eabb7;
-  font-size: 7px;
+  font-size: inherit;
+  font-weight: 480;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.a3s-capability-scene--intelligence > footer {
-  display: flex;
-  min-height: 46px;
-  padding: 0 12px;
-  border-top: 1px solid #29323c;
-  background: rgba(9, 13, 18, 0.94);
-  color: #64717e;
-  align-items: center;
-  gap: 13px;
-  font-size: 7px;
+.a3s-real-ide-code {
+  overflow: hidden;
+  min-height: 0;
+  padding: 7px 0;
 }
 
-.a3s-capability-scene--intelligence > footer > span {
-  display: inline-flex;
+.a3s-real-ide-code > p {
+  display: grid;
+  min-width: 0;
+  min-height: 27px;
+  margin: 0;
+  padding-right: 8px;
+  color: rgb(220, 220, 220);
+  grid-template-columns: 44px minmax(0, 1fr);
   align-items: center;
-  gap: 5px;
-}
-
-.a3s-capability-scene--intelligence > footer i.is-ready,
-.a3s-capability-scene--intelligence > footer span.is-ready i {
-  background: #55c892;
-  box-shadow: 0 0 8px rgba(85, 200, 146, 0.5);
 }
 
-.a3s-capability-scene--intelligence > footer span.is-ready {
-  color: #7cc9a6;
+.a3s-real-ide-code > p.is-current {
+  background: rgb(42, 46, 52);
 }
 
-.a3s-capability-scene--intelligence > footer code {
-  overflow: hidden;
-  margin-left: auto;
-  color: #526578;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.a3s-ctx-command {
-  grid-template-columns: auto minmax(0, 1fr);
+.a3s-real-ide-code > p > span {
+  padding-right: 10px;
+  color: rgb(95, 99, 104);
+  font-size: 9.5px;
+  text-align: right;
 }
 
-.a3s-ctx-command > span {
-  color: #c18cff;
+.a3s-real-ide-code > p.is-current > span {
+  color: rgb(125, 182, 255);
 }
 
-.a3s-ctx-results {
-  margin-top: 13px;
+.a3s-real-ide-code > p > code {
   overflow: hidden;
-  border: 1px solid #2c3541;
-  border-radius: 6px;
-  background: rgba(11, 15, 20, 0.9);
-}
-
-.a3s-ctx-results > header > span {
-  color: #a780d3;
-  font-size: 8px;
+  color: inherit;
+  font-family: inherit;
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: pre;
 }
 
-.a3s-ctx-results > div {
-  display: grid;
-  min-height: 52px;
-  padding: 7px 12px;
-  border-bottom: 1px solid #252e38;
-  color: #71808f;
-  grid-template-columns: 20px 56px minmax(70px, auto) minmax(0, 1fr);
-  align-items: center;
-  gap: 6px;
-  font-size: 7px;
-  transition:
-    background 180ms ease,
-    color 180ms ease;
+.a3s-real-ide-results {
+  overflow: hidden;
+  min-height: 0;
+  padding: 7px 5px;
 }
 
-.a3s-ctx-results > div:last-child {
-  border-bottom: 0;
+.a3s-real-ide-results > p {
+  min-height: 25px;
+  margin: 0;
+  padding: 5px 7px;
+  color: rgb(220, 220, 220);
+  font-size: 10px;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
 }
 
-.a3s-ctx-results > div.is-selected {
-  background: rgba(193, 140, 255, 0.08);
-  color: #dbc2f7;
-  box-shadow: inset 2px 0 #c18cff;
+.a3s-real-ide-results > p.is-selected {
+  background: rgb(42, 46, 52);
 }
 
-.a3s-ctx-results > div b {
-  color: #52606e;
-  font-weight: 500;
+.a3s-real-ide-results.is-loading > p {
+  color: rgb(120, 123, 125);
 }
 
-.a3s-ctx-results > div span {
-  color: inherit;
+.a3s-real-ide-footer .a3s-real-ide-frame {
+  grid-template-rows: 22px minmax(0, 1fr);
 }
 
-.a3s-ctx-results > div small {
-  color: #596675;
-  font-size: 7px;
+.a3s-real-ide-footer .a3s-real-ide-frame > header {
+  padding-right: 8px;
+  padding-left: 8px;
+  color: rgb(95, 99, 104);
+  font-size: 8.5px;
+  text-transform: lowercase;
 }
 
-.a3s-ctx-results > div p {
+.a3s-real-ide-footer .a3s-real-ide-frame > p {
   overflow: hidden;
+  min-width: 0;
   margin: 0;
-  color: inherit;
+  padding: 7px 8px 0;
+  color: rgb(120, 123, 125);
+  font-size: 8.5px;
+  line-height: 1.35;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.a3s-ctx-actions {
-  display: grid;
-  margin-top: 11px;
-  gap: 8px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+.a3s-real-ctx {
+  gap: 15px;
 }
 
-.a3s-ctx-actions > div {
+.a3s-real-ctx-results {
   display: grid;
-  min-height: 62px;
-  padding: 9px 10px;
-  border: 1px solid #2b3540;
-  border-radius: 5px;
-  color: #5f6c79;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-content: center;
-  gap: 4px 8px;
+  min-width: 0;
+  color: rgb(220, 220, 220);
+  gap: 3px;
+  font-family: var(--a3s-mono);
+  animation: a3s-real-row-in 180ms ease-out both;
 }
 
-.a3s-ctx-actions code {
-  color: #80718f;
-  font-size: 8px;
+.a3s-real-ctx-results > div {
+  display: grid;
+  min-width: 0;
+  gap: 1px;
 }
 
-.a3s-ctx-actions span {
-  color: #596674;
+.a3s-real-ctx-results > div > p {
+  display: grid;
+  min-width: 0;
+  min-height: 18px;
+  margin: 0;
+  color: inherit;
+  grid-template-columns: 28px minmax(0, 1fr);
+  align-items: baseline;
+  gap: 5px;
 }
 
-.a3s-ctx-actions p {
-  margin: 0;
-  grid-column: 1 / -1;
-  font-size: 7px;
+.a3s-real-ctx-results > div > p > b {
+  color: rgb(110, 198, 217);
+  font-size: 10.5px;
+  text-align: right;
 }
 
-.a3s-ctx-actions > div.is-ready {
-  border-color: rgba(193, 140, 255, 0.42);
-  background: rgba(193, 140, 255, 0.055);
-  color: #c9adde;
-  animation: a3s-capability-result-in 220ms ease-out;
+.a3s-real-ctx-results > div > p > strong {
+  overflow: hidden;
+  color: rgb(220, 220, 220);
+  font-size: 10.5px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.a3s-ctx-actions > div.is-ready code,
-.a3s-ctx-actions > div.is-ready span {
-  color: #c18cff;
+.a3s-real-ctx-results > div > small {
+  overflow: hidden;
+  min-width: 0;
+  padding-left: 33px;
+  color: rgb(120, 123, 125);
+  font-size: 9.5px;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.a3s-capability-scene--ctx > footer {
-  display: flex;
-  margin-top: 11px;
-  color: #5f516f;
-  flex-wrap: wrap;
-  gap: 6px;
+.a3s-real-ctx-results > footer {
+  overflow: hidden;
+  min-width: 0;
+  padding-top: 3px;
+  padding-left: 33px;
+  color: rgb(120, 123, 125);
+  font-size: 9.5px;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.a3s-capability-scene--ctx > footer span {
-  padding: 4px 6px;
-  border: 1px solid #332d3b;
-  border-radius: 3px;
-  background: rgba(16, 12, 20, 0.72);
-  font-size: 6px;
+.a3s-real-notice {
+  display: grid;
+  min-width: 0;
+  min-height: 20px;
+  margin: 0;
+  color: rgb(120, 123, 125);
+  grid-template-columns: 18px minmax(0, 1fr);
+  align-items: baseline;
+  gap: 3px;
+  font-family: var(--a3s-mono);
+  font-size: 10.5px;
+  line-height: 1.45;
+  animation: a3s-real-row-in 180ms ease-out both;
 }
 
-@keyframes a3s-capability-story-in {
-  from {
-    opacity: 0;
-    transform: translateY(5px);
-  }
+.a3s-real-notice > i {
+  font-style: normal;
+  text-align: right;
+}
 
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.a3s-real-notice.is-success,
+.a3s-real-notice.is-success > i {
+  color: rgb(78, 201, 139);
 }
 
-@keyframes a3s-capability-result-in {
+@keyframes a3s-real-row-in {
   from {
-    opacity: 0.3;
+    opacity: 0;
     transform: translateY(3px);
   }
 
@@ -632,9 +611,9 @@
   }
 }
 
-@keyframes a3s-capability-pulse {
+@keyframes a3s-real-pulse {
   from {
-    opacity: 0.55;
+    opacity: 0.42;
   }
 
   to {
@@ -642,16 +621,15 @@
   }
 }
 
-@keyframes a3s-capability-runtime-progress {
-  from {
-    opacity: 0.55;
-    transform: scaleX(0.74);
-    transform-origin: left;
-  }
-
-  to {
-    opacity: 1;
-    transform: scaleX(1);
-    transform-origin: left;
+@media (prefers-reduced-motion: reduce) {
+  .a3s-real-user-message,
+  .a3s-real-tool-line,
+  .a3s-real-approval,
+  .a3s-real-open-view,
+  .a3s-real-ide,
+  .a3s-real-ctx-results,
+  .a3s-real-notice,
+  .a3s-real-tool-line.is-active > header > i {
+    animation: none;
   }
 }
diff --git a/website/theme/capability-showcase.css b/website/theme/capability-showcase.css
index c40567b..526159a 100644
--- a/website/theme/capability-showcase.css
+++ b/website/theme/capability-showcase.css
@@ -31,65 +31,64 @@
 }
 
 .a3s-capability-console {
-  --capability-accent: #e5b769;
-  --capability-accent-rgb: 229, 183, 105;
+  --capability-accent: #d7a84b;
+  --capability-accent-rgb: 215, 168, 75;
+  --capability-progress: 1;
 
   position: relative;
   display: grid;
   min-height: 0;
   background: transparent;
   gap: 18px;
-  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.8fr);
-  transition: --capability-accent 240ms ease;
+  grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.8fr);
 }
 
 .a3s-capability-console::before {
   position: absolute;
   z-index: 0;
-  width: 520px;
-  height: 520px;
+  top: -190px;
+  right: -160px;
+  width: 500px;
+  height: 500px;
   border-radius: 50%;
   background: radial-gradient(
     circle,
-    rgba(var(--capability-accent-rgb), 0.1),
+    rgba(var(--capability-accent-rgb), 0.09),
     transparent 68%
   );
   content: '';
-  filter: blur(12px);
+  filter: blur(16px);
   pointer-events: none;
-  right: -170px;
-  top: -210px;
 }
 
 .a3s-capability-console.is-progressive {
-  --capability-accent: #8b9dff;
-  --capability-accent-rgb: 139, 157, 255;
+  --capability-accent: #7db6ff;
+  --capability-accent-rgb: 125, 182, 255;
 }
 
 .a3s-capability-console.is-runtime {
-  --capability-accent: #55d1b3;
-  --capability-accent-rgb: 85, 209, 179;
+  --capability-accent: #4ec98b;
+  --capability-accent-rgb: 78, 201, 139;
 }
 
 .a3s-capability-console.is-intelligence {
-  --capability-accent: #66b5ff;
-  --capability-accent-rgb: 102, 181, 255;
+  --capability-accent: #6ec6d9;
+  --capability-accent-rgb: 110, 198, 217;
 }
 
 .a3s-capability-console.is-ctx {
-  --capability-accent: #c18cff;
-  --capability-accent-rgb: 193, 140, 255;
+  --capability-accent: #b69bf1;
+  --capability-accent-rgb: 182, 155, 241;
 }
 
-.a3s-capability-console[data-stage='0'] {
-  --capability-progress: 1;
-}
 .a3s-capability-console[data-stage='1'] {
   --capability-progress: 2;
 }
+
 .a3s-capability-console[data-stage='2'] {
   --capability-progress: 3;
 }
+
 .a3s-capability-console[data-stage='3'] {
   --capability-progress: 4;
 }
@@ -101,7 +100,7 @@
   overflow: hidden;
   border: 1px solid #29313c;
   border-radius: 8px;
-  background: rgba(10, 13, 18, 0.82);
+  background: rgba(10, 13, 18, 0.84);
   flex-direction: column;
   box-shadow:
     0 28px 72px rgba(0, 0, 0, 0.28),
@@ -151,6 +150,11 @@
   color: #aab5c1;
 }
 
+.a3s-capability-selector > button:focus-visible {
+  outline: 1px solid rgba(var(--capability-accent-rgb), 0.72);
+  outline-offset: -3px;
+}
+
 .a3s-capability-selector > button.is-active {
   background:
     linear-gradient(
@@ -192,7 +196,7 @@
   width: 17px;
   height: 17px;
   fill: none;
-  stroke: currentColor;
+  stroke: currentcolor;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 1.5;
@@ -242,10 +246,11 @@
   height: 100%;
   background: var(--capability-accent);
   box-shadow: 0 0 8px rgba(var(--capability-accent-rgb), 0.7);
+  transition: width 220ms ease;
 }
 
 .a3s-capability-selector > button.is-active > em b {
-  width: calc((var(--capability-progress, 1) / 4) * 100%);
+  width: calc((var(--capability-progress) / 4) * 100%);
 }
 
 .a3s-capability-player.a3s-runtime-inspector {
@@ -254,12 +259,14 @@
   width: 100%;
   min-width: 0;
   min-height: 720px;
+  overflow: hidden;
   border-color: #343a40;
-  background: #15191f;
+  background: rgb(21, 25, 31);
 }
 
 .a3s-capability-player > .a3s-tui-terminal {
-  padding: 18px 20px 10px;
+  overflow: hidden;
+  padding: 20px 20px 12px;
   flex: 1 1 auto;
 }
 
@@ -267,284 +274,18 @@
   flex: 0 0 auto;
 }
 
-.a3s-capability-player-intro {
-  display: grid;
-  min-width: 0;
-  padding: 0 0 12px;
-  border-bottom: 1px solid #292f36;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: start;
-  gap: 18px;
-}
-
-.a3s-capability-player-intro > div {
-  max-width: 680px;
-}
-
-.a3s-capability-player-intro > div > span {
-  color: var(--capability-accent);
-  font-family: var(--a3s-mono);
-  font-size: 9px;
-  letter-spacing: 0.12em;
-}
-
-.a3s-capability-player-intro h3 {
-  margin: 5px 0 6px;
-  color: #edf2f7;
-  font-family: var(--a3s-mono);
-  font-size: clamp(16px, 1.8vw, 20px);
-  font-weight: 580;
-  letter-spacing: -0.015em;
-  line-height: 1.3;
-}
-
-.a3s-capability-player-intro p {
-  max-width: 650px;
-  margin: 0;
-  color: #8c97a4;
-  font-size: 10px;
-  line-height: 1.55;
-}
-
-.a3s-capability-player-intro > small {
-  display: inline-flex;
-  flex: 0 0 auto;
-  padding: 5px 7px;
-  border: 1px solid #2e3944;
-  border-radius: 999px;
-  background: rgba(10, 15, 20, 0.76);
-  color: #788694;
-  align-items: center;
-  gap: 6px;
-  font-family: var(--a3s-mono);
-  font-size: 7.5px;
-  white-space: nowrap;
-}
-
-.a3s-capability-player-intro > small i {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: var(--capability-accent);
-  box-shadow: 0 0 9px rgba(var(--capability-accent-rgb), 0.62);
-}
-
-.a3s-capability-player-stage {
-  min-height: 350px;
-  margin-top: 10px;
-  padding: 10px 0 0;
-  flex: 1 1 auto;
-  animation: a3s-capability-story-in 240ms ease-out;
-}
-
-.a3s-capability-tui-plan {
-  padding-bottom: 7px;
-}
-
-.a3s-capability-tui-plan li.is-active > i {
-  color: var(--capability-accent);
-}
-
-.a3s-capability-tui-plan li.is-done > i {
-  color: #4ec98b;
-}
-
-.a3s-capability-scene-wrap {
-  position: relative;
-  display: flex;
-  min-width: 0;
-  flex: 1 1 auto;
-}
-
-.a3s-capability-scene-wrap::after {
-  display: none;
-}
-
-.a3s-capability-scene {
-  width: 100%;
-  min-height: 100%;
-  padding: 2px 0;
-  color: #9da9b5;
-  font-family: var(--a3s-mono);
-}
-
-.a3s-capability-tui-meta {
-  margin-top: 8px;
-}
-
-.a3s-capability-tui-meta > span:first-child {
-  color: var(--capability-accent);
-}
-
-.a3s-capability-tui-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.a3s-capability-call,
-.a3s-runtime-tool-call,
-.a3s-ctx-command {
-  display: grid;
-  min-width: 0;
-  padding: 10px 12px;
-  border: 1px solid #2d3742;
-  border-radius: 5px;
-  background: rgba(15, 20, 27, 0.9);
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 10px;
-}
-
-.a3s-capability-call > span,
-.a3s-runtime-tool-call > span {
-  padding: 3px 6px;
-  border-radius: 3px;
-  background: rgba(var(--capability-accent-rgb), 0.1);
-  color: var(--capability-accent);
-  font-size: 8px;
-}
-
-.a3s-capability-call code,
-.a3s-runtime-tool-call code,
-.a3s-ctx-command code {
-  overflow: hidden;
-  color: #d3dbe4;
-  font-size: 9px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.a3s-capability-call em {
-  color: #637080;
-  font-size: 7px;
-  font-style: normal;
-}
-
-.a3s-capability-call em.is-warning {
-  color: #e0b367;
-}
-
-.a3s-capability-approval {
-  max-width: 470px;
-  margin: 18px auto 0;
-  overflow: hidden;
-  border: 1px solid #3a342b;
-  border-radius: 7px;
-  background: rgba(15, 17, 20, 0.96);
-  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.38);
-  opacity: 0.18;
-  transform: translateY(8px) scale(0.985);
-  transition:
-    opacity 220ms ease,
-    transform 220ms ease;
-}
-
-.a3s-capability-approval.is-visible {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-}
-
-.a3s-capability-approval > header,
-.a3s-ctx-results > header,
-.a3s-capability-scene--intelligence > header {
-  display: flex;
-  min-height: 36px;
-  padding: 0 12px;
-  border-bottom: 1px solid #2c333b;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.a3s-capability-approval > header > span {
-  color: #e0b367;
-  font-size: 8px;
-  letter-spacing: 0.08em;
-}
-
-.a3s-capability-approval > header > small,
-.a3s-ctx-results > header > small,
-.a3s-capability-scene--intelligence > header > small {
-  color: #616c79;
-  font-size: 7px;
-}
-
-.a3s-capability-approval > p {
-  display: grid;
-  margin: 0;
-  padding: 11px 13px;
-  border-bottom: 1px solid #282f37;
-  grid-template-columns: 38px minmax(0, 1fr);
-  gap: 8px;
-}
-
-.a3s-capability-approval > p small {
-  color: #65717f;
-  font-size: 8px;
-}
-
-.a3s-capability-approval > p code {
-  color: #d8dfe7;
-  font-size: 8px;
-}
-
-.a3s-capability-approval ol {
-  margin: 0;
+.a3s-capability-player.is-fullscreen > .a3s-tui-terminal {
   padding: 8px;
-  list-style: none;
-}
-
-.a3s-capability-approval li {
-  display: grid;
-  min-height: 30px;
-  padding: 0 8px;
-  border-radius: 3px;
-  color: #939eaa;
-  grid-template-columns: 22px minmax(0, 1fr);
-  align-items: center;
-  font-size: 8px;
 }
 
-.a3s-capability-approval li.is-selected {
-  background: rgba(229, 183, 105, 0.1);
-  color: #f0e2c8;
-}
-
-.a3s-capability-approval li b {
-  color: #5f6b78;
-  font-weight: 500;
-}
-
-.a3s-capability-approval li.is-selected b {
-  color: #e5b769;
-}
-
-.a3s-capability-approval > footer {
-  display: flex;
-  min-height: 34px;
-  padding: 0 12px;
-  border-top: 1px solid #2c333b;
-  background: #0c1014;
-  color: #717d89;
-  align-items: center;
-  gap: 7px;
-  font-size: 7px;
-}
-
-.a3s-capability-approval > footer i,
-.a3s-capability-scene--intelligence > footer i {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: #7b8793;
-}
-
-.a3s-capability-approval > footer.is-resolved {
-  color: #78c49f;
+.a3s-tui-composer.is-hidden {
+  display: none;
 }
 
-.a3s-capability-approval > footer.is-resolved i {
-  background: #56c58b;
-  box-shadow: 0 0 8px rgba(86, 197, 139, 0.55);
+@media (prefers-reduced-motion: reduce) {
+  .a3s-capability-selector > button,
+  .a3s-capability-selector > button::after,
+  .a3s-capability-selector > button > em b {
+    transition: none;
+  }
 }
diff --git a/website/theme/components/A3sCodeTui.tsx b/website/theme/components/A3sCodeTui.tsx
index 8fa6538..a91030d 100644
--- a/website/theme/components/A3sCodeTui.tsx
+++ b/website/theme/components/A3sCodeTui.tsx
@@ -10,6 +10,7 @@ type A3sCodeTuiProps = {
   branch?: string;
   children: ReactNode;
   className?: string;
+  composerHidden?: boolean;
   composerMode?: A3sCodeTuiInputMode;
   composerStatus: string;
   composerSymbol?: string;
@@ -17,6 +18,7 @@ type A3sCodeTuiProps = {
   contextLabel: string;
   identity?: string;
   isPlaying: boolean;
+  modeGlyph?: string;
   modeLabel: string;
   model?: string;
   onPlayback: () => void;
@@ -41,6 +43,7 @@ export const A3sCodeTui = forwardRef<HTMLDivElement, A3sCodeTuiProps>(
       branch = 'git:(main)',
       children,
       className,
+      composerHidden = false,
       composerMode = 'default',
       composerStatus,
       composerSymbol = '❯',
@@ -48,6 +51,7 @@ export const A3sCodeTui = forwardRef<HTMLDivElement, A3sCodeTuiProps>(
       contextLabel,
       identity = 'a3s',
       isPlaying,
+      modeGlyph = '●',
       modeLabel,
       model = 'gpt-5 (128k context)',
       onPlayback,
@@ -66,8 +70,10 @@ export const A3sCodeTui = forwardRef<HTMLDivElement, A3sCodeTuiProps>(
           'a3s-runtime-inspector',
           'a3s-tui-player',
           isPlaying && 'is-running',
+          composerHidden && 'is-fullscreen',
           className,
         )}
+        data-composer-hidden={composerHidden || undefined}
         data-a3s-code-tui={surface}
         data-phase={phase}
         ref={ref}
@@ -98,7 +104,11 @@ export const A3sCodeTui = forwardRef<HTMLDivElement, A3sCodeTuiProps>(
         </section>
 
         <section
-          className="a3s-tui-composer"
+          aria-hidden={composerHidden || undefined}
+          className={classNames(
+            'a3s-tui-composer',
+            composerHidden && 'is-hidden',
+          )}
           data-input-mode={composerMode}
           data-tui-region="composer"
         >
@@ -119,7 +129,7 @@ export const A3sCodeTui = forwardRef<HTMLDivElement, A3sCodeTuiProps>(
           <div className="a3s-tui-input-rule" />
           <footer className="a3s-tui-footer" data-tui-region="footer">
             <span className="a3s-tui-mode">
-              <i aria-hidden="true">●</i>
+              <i aria-hidden="true">{modeGlyph}</i>
               {modeLabel}
             </span>
             <span className="a3s-tui-context">
diff --git a/website/theme/components/CapabilityIdeScene.tsx b/website/theme/components/CapabilityIdeScene.tsx
new file mode 100644
index 0000000..c15ad15
--- /dev/null
+++ b/website/theme/components/CapabilityIdeScene.tsx
@@ -0,0 +1,119 @@
+import { TuiWelcomeBanner } from './TuiWelcomeBanner';
+
+const codeRows = [
+  ['52', 'pub(crate) struct RuntimeTool {'],
+  ['53', '    session: OsSession,'],
+  ['54', '    client: Client,'],
+  ['55', '}'],
+  ['…', ''],
+  ['117', 'impl Tool for RuntimeTool {'],
+  ['118', '    fn name(&self) -> &str {'],
+  ['119', '        "runtime"'],
+  ['120', '    }'],
+];
+
+function IdeTree() {
+  return (
+    <section className="a3s-real-ide-frame a3s-real-ide-tree">
+      <header>▾ a3s</header>
+      <div>
+        <p>
+          <span>▾</span>
+          <b>src</b>
+        </p>
+        <p className="is-selected">
+          <span>◇</span>
+          <b>runtime_tool.rs</b>
+        </p>
+        <p>
+          <span>◇</span>
+          <b>session_llm.rs</b>
+        </p>
+        <p>
+          <span>▸</span>
+          <b>tui</b>
+        </p>
+        <p>
+          <span>◇</span>
+          <b>main.rs</b>
+        </p>
+        <p>
+          <span>◇</span>
+          <b>Cargo.toml</b>
+        </p>
+      </div>
+    </section>
+  );
+}
+
+function IdeEditor({ stage }: { stage: number }) {
+  const title =
+    stage === 1
+      ? '◇ src › runtime_tool.rs'
+      : stage === 2
+        ? '⌁ References · src/runtime_tool.rs'
+        : '⌁ References · src/runtime_tool.rs · rev 42';
+
+  return (
+    <section className="a3s-real-ide-frame a3s-real-ide-editor">
+      <header>{title}</header>
+      {stage === 1 ? (
+        <div className="a3s-real-ide-code">
+          {codeRows.map(([line, code]) => (
+            <p
+              className={line === '117' ? 'is-current' : ''}
+              key={`${line}-${code}`}
+            >
+              <span>{line}</span>
+              <code>{code}</code>
+            </p>
+          ))}
+        </div>
+      ) : stage === 2 ? (
+        <div className="a3s-real-ide-results is-loading">
+          <p className="is-selected">› Loading Code Intelligence…</p>
+        </div>
+      ) : (
+        <div className="a3s-real-ide-results">
+          <p className="is-selected">› src/runtime_tool.rs:117:15</p>
+          <p> src/runtime_tool.rs:188:6</p>
+          <p> src/tui/app/view.rs:413:22</p>
+          <p> src/runtime_tool/tests.rs:42:16</p>
+        </div>
+      )}
+    </section>
+  );
+}
+
+export function CapabilityIdeScene({ stage }: { stage: number }) {
+  if (stage === 0) {
+    return (
+      <div data-real-tui-scene="intelligence">
+        <TuiWelcomeBanner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="a3s-real-ide" data-real-tui-scene="intelligence">
+      <div className="a3s-real-ide-main">
+        <IdeTree />
+        <IdeEditor stage={stage} />
+      </div>
+      <div className="a3s-real-ide-footer">
+        <section className="a3s-real-ide-frame">
+          <header>details</header>
+          <p>◇ src › runtime_tool.rs · 428 lines · Rust</p>
+        </section>
+        <section className="a3s-real-ide-frame">
+          <header>controls</header>
+          <p>
+            {stage === 1
+              ? ':references'
+              : 'Saved version · ↑↓ select · Enter jump · Esc close'}
+          </p>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/website/theme/components/CapabilityShowcase.tsx b/website/theme/components/CapabilityShowcase.tsx
index 1522057..a871e4a 100644
--- a/website/theme/components/CapabilityShowcase.tsx
+++ b/website/theme/components/CapabilityShowcase.tsx
@@ -1,209 +1,12 @@
 import { useEffect, useRef, useState } from 'react';
-import { A3sCodeTui } from './A3sCodeTui';
-
-type Locale = 'zh' | 'en';
-
-type Localized = {
-  zh: string;
-  en: string;
-};
-
-type CapabilityKey =
-  'hitl' | 'progressive' | 'runtime' | 'intelligence' | 'ctx';
-
-type CapabilityStory = {
-  key: CapabilityKey;
-  index: string;
-  eyebrow: string;
-  title: Localized;
-  body: Localized;
-  prompt: Localized;
-  availability: Localized;
-  tags: string[];
-  stages: Localized[];
-};
-
-const sectionCopy = {
-  zh: {
-    eyebrow: 'A3S CODE / DISTINCTIVE CAPABILITIES',
-    title: '五个关键瞬间，看懂一次任务如何安全地变聪明',
-    body: '从执行前确认到代码语义，从按需发现平台能力到找回过去会话：选择一个场景，查看真实的交互顺序与边界。',
-    guide: '查看完整 TUI 指南',
-    select: '选择能力演示',
-    live: 'LIVE CAPABILITY',
-    play: '播放',
-    pause: '暂停',
-    replay: '重播',
-    step: '阶段',
-    working: '正在执行能力流程',
-    mode: 'Default',
-    context: 'ctx:12%',
-    workspace: '~/workspace/a3s',
-  },
-  en: {
-    eyebrow: 'A3S CODE / DISTINCTIVE CAPABILITIES',
-    title: 'Five decisive moments that make a coding run safer and smarter',
-    body: 'From approval before execution to code semantics, on-demand platform discovery, and past-session recall: select a capability to see its real interaction order and boundaries.',
-    guide: 'Read the complete TUI guide',
-    select: 'Select a capability demo',
-    live: 'LIVE CAPABILITY',
-    play: 'Play',
-    pause: 'Pause',
-    replay: 'Replay',
-    step: 'Stage',
-    working: 'Running capability flow',
-    mode: 'Default',
-    context: 'ctx:12%',
-    workspace: '~/workspace/a3s',
-  },
-};
-
-export const capabilityStories: CapabilityStory[] = [
-  {
-    key: 'hitl',
-    index: '01',
-    eyebrow: 'HITL',
-    title: {
-      zh: '越过执行边界前，由你决定',
-      en: 'You decide before a call crosses the boundary',
-    },
-    body: {
-      zh: '需要确认的调用会在执行前暂停，并展示规范化参数。你可以只允许一次、保留精确的会话或项目授权，或者拒绝并说明原因。',
-      en: 'Calls that need confirmation pause before execution and expose canonical arguments. Allow once, retain an exact session or project grant, or deny with a reason.',
-    },
-    prompt: {
-      zh: '测试通过后，将 main 分支推送到 origin',
-      en: 'Push main to origin after the tests pass',
-    },
-    availability: {
-      zh: 'Default 模式 · 风险感知',
-      en: 'Default mode · risk-aware',
-    },
-    tags: ['canonical args', 'exact grants', 'fail closed'],
-    stages: [
-      { zh: '识别边界', en: 'Classify boundary' },
-      { zh: '暂停并展示', en: 'Pause and explain' },
-      { zh: '选择授权范围', en: 'Choose grant scope' },
-      { zh: '记录决定', en: 'Record the decision' },
-    ],
-  },
-  {
-    key: 'progressive',
-    index: '02',
-    eyebrow: 'PROGRESSIVE API',
-    title: {
-      zh: '先发现，再只加载需要的 Schema',
-      en: 'Discover first, then load only the schema you need',
-    },
-    body: {
-      zh: '登录 A3S OS 后，通过一个按权限过滤的入口执行 list → search → describe → execute。模型无需把整个平台手册塞进上下文。',
-      en: 'After A3S OS login, one permission-filtered endpoint runs list → search → describe → execute. The model never needs the whole platform manual in context.',
-    },
-    prompt: {
-      zh: '部署发布知识包，并打开运行视图',
-      en: 'Deploy the release knowledge package and open its run view',
-    },
-    availability: {
-      zh: '登录后可用 · 权限过滤',
-      en: 'Available after login · permission-filtered',
-    },
-    tags: ['list', 'search', 'describe', 'execute'],
-    stages: [
-      { zh: '列出模块', en: 'List modules' },
-      { zh: '搜索操作', en: 'Search operations' },
-      { zh: '读取单个 Schema', en: 'Describe one schema' },
-      { zh: '执行并返回视图', en: 'Execute with a view' },
-    ],
-  },
-  {
-    key: 'runtime',
-    index: '03',
-    eyebrow: 'RUNTIME TOOL',
-    title: {
-      zh: '把独立输入交给远程 Worker 并行处理',
-      en: 'Send independent inputs to a remote worker in parallel',
-    },
-    body: {
-      zh: '登录后注册的 runtime 工具按 UUID 或名称解析 tool-kind Worker，提交 Function as a Service 批任务，流式呈现进度并聚合结果。',
-      en: 'The login-gated runtime tool resolves a tool-kind worker by UUID or name, submits a Function-as-a-Service batch, streams progress, and aggregates results.',
-    },
-    prompt: {
-      zh: '并行检查 core、Node 和 Python 发布包',
-      en: 'Check the core, Node, and Python releases in parallel',
-    },
-    availability: {
-      zh: '登录后注册 · 批量执行',
-      en: 'Registered after login · batch execution',
-    },
-    tags: ['worker resolve', 'batch', 'streaming'],
-    stages: [
-      { zh: '解析 Worker', en: 'Resolve worker' },
-      { zh: '提交三个输入', en: 'Submit three inputs' },
-      { zh: '流式追踪进度', en: 'Stream progress' },
-      { zh: '聚合结果', en: 'Aggregate results' },
-    ],
-  },
-  {
-    key: 'intelligence',
-    index: '04',
-    eyebrow: 'CODE INTELLIGENCE',
-    title: {
-      zh: 'Agent、TUI 与 Web 共享同一份代码语义',
-      en: 'Agent, TUI, and Web share one semantic code runtime',
-    },
-    body: {
-      zh: '基于已保存文件提供符号、定义、声明、引用、实现与诊断。Agent 工具、/ide 和 Monaco 使用同一运行时，脏缓冲区不会伪装成已发布语义。',
-      en: 'Saved files provide symbols, definitions, declarations, references, implementations, and diagnostics. Agent tools, /ide, and Monaco share the runtime; dirty buffers never masquerade as published semantics.',
-    },
-    prompt: {
-      zh: '查找 RuntimeTool 的引用并汇总诊断',
-      en: 'Find RuntimeTool references and collect diagnostics',
-    },
-    availability: {
-      zh: 'Rust · TypeScript / JavaScript',
-      en: 'Rust · TypeScript / JavaScript',
-    },
-    tags: ['saved files', 'navigation', 'diagnostics'],
-    stages: [
-      { zh: '启动语言服务', en: 'Start language service' },
-      { zh: '定位符号', en: 'Resolve symbol' },
-      { zh: '查找引用', en: 'Find references' },
-      { zh: '合并诊断', en: 'Collect diagnostics' },
-    ],
-  },
-  {
-    key: 'ctx',
-    index: '05',
-    eyebrow: 'CTX RECALL',
-    title: {
-      zh: '从过去会话找回决定，而不是重新猜测',
-      en: 'Recover decisions from past sessions instead of guessing again',
-    },
-    body: {
-      zh: '本地 ctx 可用时，/ctx 会搜索跨工具、跨会话的索引。命中窗口可以一次性附加到下一条消息，也可以携带来源保存为长期记忆。',
-      en: 'When the local ctx index is available, /ctx searches across tools and sessions. A hit can be attached once to the next turn or saved to long-term memory with provenance.',
-    },
-    prompt: {
-      zh: '/ctx RemoteUI view link',
-      en: '/ctx RemoteUI view link',
-    },
-    availability: {
-      zh: '本地索引 · 跨会话 · 可追溯',
-      en: 'Local index · cross-session · traceable',
-    },
-    tags: ['one-shot attach', 'source=ctx', 'memory backlink'],
-    stages: [
-      { zh: '搜索历史', en: 'Search history' },
-      { zh: '选择命中', en: 'Select a hit' },
-      { zh: '一次性附加', en: 'Attach once' },
-      { zh: '保存并保留来源', en: 'Save with provenance' },
-    ],
-  },
-];
-
-function value(localized: Localized, locale: Locale) {
-  return localized[locale];
-}
+import { CapabilityTuiDemo } from './CapabilityTuiDemo';
+import {
+  capabilityStories,
+  localized,
+  sectionCopy,
+  type CapabilityKey,
+  type Locale,
+} from './capability-stories';
 
 function CapabilityIcon({ story }: { story: CapabilityKey }) {
   const paths: Record<CapabilityKey, React.ReactNode> = {
@@ -249,402 +52,6 @@ function CapabilityIcon({ story }: { story: CapabilityKey }) {
   );
 }
 
-function StageRail({
-  locale,
-  stage,
-  story,
-}: {
-  locale: Locale;
-  stage: number;
-  story: CapabilityStory;
-}) {
-  return (
-    <section
-      aria-label={`${sectionCopy[locale].step} ${stage + 1} / 4`}
-      className="a3s-tui-plan a3s-capability-tui-plan"
-    >
-      <ol>
-        {story.stages.map((item, index) => {
-          const status =
-            index < stage ? 'done' : index === stage ? 'active' : 'pending';
-          const glyph =
-            status === 'done' ? '✔' : status === 'active' ? '◼' : '◻';
-
-          return (
-            <li className={`is-${status}`} key={item.en}>
-              <span aria-hidden="true">{index === 0 ? '⎿' : ''}</span>
-              <i aria-hidden="true">{glyph}</i>
-              <p>{value(item, locale)}</p>
-            </li>
-          );
-        })}
-      </ol>
-    </section>
-  );
-}
-
-function HitlScene({ locale, stage }: { locale: Locale; stage: number }) {
-  const options =
-    locale === 'zh'
-      ? [
-          '仅允许一次',
-          '本会话允许精确能力',
-          '向项目加入精确规则',
-          '拒绝并说明原因',
-        ]
-      : [
-          'Allow once',
-          'Allow exact capability for this session',
-          'Add exact capability rule to project',
-          'Deny and tell the agent why',
-        ];
-
-  return (
-    <div className="a3s-capability-scene a3s-capability-scene--hitl">
-      <div className="a3s-capability-call">
-        <span>bash</span>
-        <code>git push origin main</code>
-        <em className={stage > 0 ? 'is-warning' : ''}>
-          {stage === 0 ? 'classifying…' : 'external side effect · ASK'}
-        </em>
-      </div>
-      <div
-        className={`a3s-capability-approval ${stage > 0 ? 'is-visible' : ''}`}
-      >
-        <header>
-          <span>HUMAN APPROVAL REQUIRED</span>
-          <small>canonical arguments</small>
-        </header>
-        <p>
-          <small>Run</small>
-          <code>git push origin main</code>
-        </p>
-        <ol>
-          {options.map((option, index) => (
-            <li
-              className={stage >= 2 && index === 0 ? 'is-selected' : ''}
-              key={option}
-            >
-              <b>{index + 1}</b>
-              <span>{option}</span>
-            </li>
-          ))}
-        </ol>
-        <footer className={stage >= 3 ? 'is-resolved' : ''}>
-          <i aria-hidden="true" />
-          {stage >= 3
-            ? locale === 'zh'
-              ? '允许一次 · 决定已写入事件流'
-              : 'Allowed once · decision recorded in the event stream'
-            : locale === 'zh'
-              ? '工具尚未执行'
-              : 'Tool has not executed'}
-        </footer>
-      </div>
-    </div>
-  );
-}
-
-function ProgressiveScene({
-  locale,
-  stage,
-}: {
-  locale: Locale;
-  stage: number;
-}) {
-  const rows = [
-    ['list', '18 modules · knowledge · runtime · assets'],
-    ['search', 'knowledge.deploy'],
-    ['describe', '{ assetId: string, shaped?: boolean }'],
-    ['execute', 'viewUrl → Open view'],
-  ];
-
-  return (
-    <div className="a3s-capability-scene a3s-capability-scene--progressive">
-      <div className="a3s-progressive-query">
-        <span>{locale === 'zh' ? '意图' : 'intent'}</span>
-        <p>
-          {locale === 'zh'
-            ? '部署发布知识包，并打开运行视图'
-            : 'Deploy the release knowledge package and open its run view'}
-        </p>
-      </div>
-      <div className="a3s-progressive-endpoint">
-        <code>POST /api/v1/kernel/capabilities</code>
-        <span>signed in · permission filtered</span>
-      </div>
-      <div className="a3s-progressive-steps">
-        {rows.map(([action, result], index) => (
-          <div
-            className={
-              index < stage ? 'is-complete' : index === stage ? 'is-active' : ''
-            }
-            key={action}
-          >
-            <b>{action}</b>
-            <i aria-hidden="true" />
-            <code>{index <= stage ? result : '••••••••'}</code>
-          </div>
-        ))}
-      </div>
-      <div className={`a3s-progressive-view ${stage >= 3 ? 'is-ready' : ''}`}>
-        <span>↗</span>
-        <div>
-          <small>RemoteUI</small>
-          <strong>
-            {stage >= 3
-              ? 'Knowledge deployment · ready'
-              : 'waiting for shaped response'}
-          </strong>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function RuntimeScene({ locale, stage }: { locale: Locale; stage: number }) {
-  const jobs = [
-    ['core', 'a3s-code-core'],
-    ['node', '@a3s-lab/code'],
-    ['python', 'a3s-code'],
-  ];
-
-  return (
-    <div className="a3s-capability-scene a3s-capability-scene--runtime">
-      <div className="a3s-runtime-tool-call">
-        <span>runtime</span>
-        <code>{'{ worker: "release-checker", inputs: 3 }'}</code>
-      </div>
-      <div className="a3s-runtime-worker">
-        <div>
-          <small>TOOL-KIND WORKER</small>
-          <strong>release-checker</strong>
-          <code>
-            {stage > 0 ? 'resolved · worker_01HV…' : 'resolving by name…'}
-          </code>
-        </div>
-        <i aria-hidden="true" className={stage > 0 ? 'is-ready' : ''} />
-      </div>
-      <div className="a3s-runtime-batch">
-        {jobs.map(([key, name], index) => {
-          const complete = stage >= 3 || (stage >= 2 && index < 2);
-          const running = stage >= 1 && !complete;
-          return (
-            <div
-              className={complete ? 'is-complete' : running ? 'is-running' : ''}
-              key={key}
-            >
-              <span>{String(index + 1).padStart(2, '0')}</span>
-              <p>
-                <strong>{name}</strong>
-                <small>
-                  {complete ? 'passed' : running ? 'running' : 'queued'}
-                </small>
-              </p>
-              <i aria-hidden="true">
-                <b />
-              </i>
-            </div>
-          );
-        })}
-      </div>
-      <footer className={stage >= 3 ? 'is-ready' : ''}>
-        <span>{stage >= 3 ? '3 / 3' : `${Math.max(stage - 1, 0)} / 3`}</span>
-        <p>
-          {stage >= 3
-            ? locale === 'zh'
-              ? '聚合完成 · 3 个独立结果'
-              : 'Aggregate ready · 3 independent results'
-            : locale === 'zh'
-              ? '正在流式接收批任务进度'
-              : 'Streaming batch progress'}
-        </p>
-      </footer>
-    </div>
-  );
-}
-
-function IntelligenceScene({
-  locale,
-  stage,
-}: {
-  locale: Locale;
-  stage: number;
-}) {
-  return (
-    <div className="a3s-capability-scene a3s-capability-scene--intelligence">
-      <header>
-        <span>
-          <i /> src/runtime_tool.rs
-        </span>
-        <small>
-          {stage > 0 ? 'rust-analyzer · ready' : 'starting language service…'}
-        </small>
-      </header>
-      <div className="a3s-intelligence-workbench">
-        <div
-          className="a3s-intelligence-code"
-          aria-label="Saved Rust source preview"
-        >
-          <p>
-            <span>52</span>
-            <code>
-              <b>pub(crate) struct</b> <mark>RuntimeTool</mark> {'{'}
-            </code>
-          </p>
-          <p>
-            <span>53</span>
-            <code> session: OsSession,</code>
-          </p>
-          <p>
-            <span>54</span>
-            <code> client: Client,</code>
-          </p>
-          <p>
-            <span>55</span>
-            <code>{'}'}</code>
-          </p>
-          <p>
-            <span>···</span>
-            <code />
-          </p>
-          <p className={stage >= 1 ? 'is-symbol' : ''}>
-            <span>117</span>
-            <code>
-              <b>impl Tool for</b> <mark>RuntimeTool</mark> {'{'}
-            </code>
-          </p>
-          <p>
-            <span>118</span>
-            <code>
-              {' '}
-              <b>fn</b> name(&amp;self) → &amp;str
-            </code>
-          </p>
-        </div>
-        <aside>
-          <div className="a3s-intelligence-command">
-            <span>:</span>
-            <code>references</code>
-          </div>
-          <strong>
-            {locale === 'zh'
-              ? '引用 · 已保存版本'
-              : 'References · saved version'}
-          </strong>
-          <ul>
-            <li className={stage >= 2 ? 'is-visible' : ''}>
-              <b>117:15</b>
-              <span>impl Tool for RuntimeTool</span>
-            </li>
-            <li className={stage >= 2 ? 'is-visible' : ''}>
-              <b>188:6</b>
-              <span>impl RuntimeTool</span>
-            </li>
-            <li className={stage >= 2 ? 'is-visible' : ''}>
-              <b>413:22</b>
-              <span>RuntimeTool::new(session)</span>
-            </li>
-          </ul>
-        </aside>
-      </div>
-      <footer>
-        <span>
-          <i className={stage >= 1 ? 'is-ready' : ''} /> saved file semantics
-        </span>
-        <span className={stage >= 3 ? 'is-ready' : ''}>
-          {stage >= 3 ? '0 errors · 2 warnings' : 'diagnostics pending'}
-        </span>
-        <code>code_symbols · code_navigation · code_diagnostics</code>
-      </footer>
-    </div>
-  );
-}
-
-function CtxScene({ locale, stage }: { locale: Locale; stage: number }) {
-  const hits = [
-    ['A3S', '2026-07-28', 'Preserve shaped view responses'],
-    ['Codex', '2026-07-24', 'Runtime view fallback'],
-    ['Claude', '2026-07-19', 'Loop report contract'],
-  ];
-
-  return (
-    <div className="a3s-capability-scene a3s-capability-scene--ctx">
-      <div className="a3s-ctx-command">
-        <span>❯</span>
-        <code>/ctx RemoteUI view link</code>
-      </div>
-      <div className="a3s-ctx-results">
-        <header>
-          <span>
-            ⌕ {locale === 'zh' ? '跨会话搜索结果' : 'cross-session results'}
-          </span>
-          <small>local index · limit 8</small>
-        </header>
-        {hits.map(([provider, date, title], index) => (
-          <div
-            className={stage >= 1 && index === 1 ? 'is-selected' : ''}
-            key={title}
-          >
-            <b>{index + 1}.</b>
-            <span>{provider}</span>
-            <small>{date}</small>
-            <p>{title}</p>
-          </div>
-        ))}
-      </div>
-      <div className="a3s-ctx-actions">
-        <div className={stage >= 2 ? 'is-ready' : ''}>
-          <code>/ctx 2</code>
-          <span>{stage >= 2 ? '✓' : '○'}</span>
-          <p>
-            {locale === 'zh'
-              ? '下一条消息一次性附加'
-              : 'one-shot attach to next turn'}
-          </p>
-        </div>
-        <div className={stage >= 3 ? 'is-ready' : ''}>
-          <code>/ctx save 2</code>
-          <span>{stage >= 3 ? '✓' : '○'}</span>
-          <p>
-            {locale === 'zh'
-              ? '保存到记忆并保留回链'
-              : 'save to memory with backlink'}
-          </p>
-        </div>
-      </div>
-      <footer>
-        <span>source=ctx</span>
-        <span>ctx_event_id</span>
-        <span>ctx_session_id</span>
-      </footer>
-    </div>
-  );
-}
-
-function CapabilityScene({
-  locale,
-  stage,
-  story,
-}: {
-  locale: Locale;
-  stage: number;
-  story: CapabilityStory;
-}) {
-  switch (story.key) {
-    case 'hitl':
-      return <HitlScene locale={locale} stage={stage} />;
-    case 'progressive':
-      return <ProgressiveScene locale={locale} stage={stage} />;
-    case 'runtime':
-      return <RuntimeScene locale={locale} stage={stage} />;
-    case 'intelligence':
-      return <IntelligenceScene locale={locale} stage={stage} />;
-    case 'ctx':
-      return <CtxScene locale={locale} stage={stage} />;
-  }
-}
-
 export function CapabilityStoriesMarkdown({ locale }: { locale: Locale }) {
   const labels = sectionCopy[locale];
 
@@ -654,9 +61,9 @@ export function CapabilityStoriesMarkdown({ locale }: { locale: Locale }) {
       <p>{labels.body}</p>
       {capabilityStories.map((story) => (
         <section key={story.key}>
-          <h3>{value(story.title, locale)}</h3>
-          <p>{value(story.body, locale)}</p>
-          <p>{value(story.availability, locale)}</p>
+          <h3>{localized(story.title, locale)}</h3>
+          <p>{localized(story.body, locale)}</p>
+          <p>{localized(story.availability, locale)}</p>
         </section>
       ))}
     </section>
@@ -801,7 +208,7 @@ export function CapabilityShowcase({
               </i>
               <p>
                 <small>{item.eyebrow}</small>
-                <strong>{value(item.title, locale)}</strong>
+                <strong>{localized(item.title, locale)}</strong>
               </p>
               <em aria-hidden="true">
                 <b />
@@ -810,71 +217,15 @@ export function CapabilityShowcase({
           ))}
         </nav>
 
-        <A3sCodeTui
-          activity={
-            isPlaying && isVisible ? (
-              <>
-                <i aria-hidden="true">✶</i>
-                <span>{labels.working}</span>
-                <small>
-                  ({labels.step} {String(stage + 1).padStart(2, '0')} / 04)
-                </small>
-              </>
-            ) : undefined
-          }
-          ariaLabel={`${story.eyebrow}: ${value(story.title, locale)}`}
-          beforeInput={
-            <StageRail locale={locale} stage={stage} story={story} />
-          }
-          className={`a3s-capability-player is-${story.key}`}
-          composerStatus="◇ high"
-          composerText={value(story.prompt, locale)}
-          contextLabel={labels.context}
-          isPlaying={isPlaying && isVisible}
-          modeLabel={labels.mode}
+        <CapabilityTuiDemo
+          isPlaying={isPlaying}
+          isVisible={isVisible}
+          locale={locale}
           onPlayback={togglePlayback}
-          phase={`${story.key}-${stage + 1}`}
-          playbackLabel={
-            isPlaying ? labels.pause : stage === 3 ? labels.replay : labels.play
-          }
-          ref={hostRef}
-          showCursor={!reducedMotion}
-          surface={`capability-${story.key}`}
-          workspace={labels.workspace}
-        >
-          <div className="a3s-capability-player-intro">
-            <div>
-              <span>{story.eyebrow}</span>
-              <h3>{value(story.title, locale)}</h3>
-              <p>{value(story.body, locale)}</p>
-            </div>
-            <small>
-              <i />
-              {value(story.availability, locale)}
-            </small>
-          </div>
-
-          <p className="a3s-tui-meta a3s-capability-tui-meta">
-            <span>{labels.live}</span>
-            <i>·</i>
-            <span>{story.index} / 05</span>
-            {story.tags.map((tag) => (
-              <span className="a3s-capability-tui-tag" key={tag}>
-                <i>·</i>
-                {tag}
-              </span>
-            ))}
-          </p>
-
-          <div
-            className="a3s-tui-transcript a3s-capability-player-stage"
-            key={story.key}
-          >
-            <div className="a3s-capability-scene-wrap">
-              <CapabilityScene locale={locale} stage={stage} story={story} />
-            </div>
-          </div>
-        </A3sCodeTui>
+          reducedMotion={reducedMotion}
+          stage={stage}
+          story={story}
+        />
       </div>
     </section>
   );
diff --git a/website/theme/components/CapabilityTuiDemo.tsx b/website/theme/components/CapabilityTuiDemo.tsx
new file mode 100644
index 0000000..8da13b3
--- /dev/null
+++ b/website/theme/components/CapabilityTuiDemo.tsx
@@ -0,0 +1,466 @@
+import { A3sCodeTui } from './A3sCodeTui';
+import { CapabilityIdeScene } from './CapabilityIdeScene';
+import {
+  localized,
+  sectionCopy,
+  type CapabilityStory,
+  type Locale,
+} from './capability-stories';
+
+type ToolTone = 'active' | 'success' | 'warning' | 'muted';
+
+type ToolBranch = {
+  text: string;
+  tone?: 'success' | 'warning';
+};
+
+function UserMessage({ children }: { children: string }) {
+  return (
+    <article className="a3s-real-user-message">
+      <span aria-hidden="true">›</span>
+      <p>{children}</p>
+    </article>
+  );
+}
+
+function ToolLine({
+  action,
+  branches = [],
+  detail,
+  tone,
+}: {
+  action: string;
+  branches?: ToolBranch[];
+  detail?: string;
+  tone: ToolTone;
+}) {
+  return (
+    <article className={`a3s-real-tool-line is-${tone}`}>
+      <header>
+        <i aria-hidden="true">•</i>
+        <strong>{action}</strong>
+        {detail ? <code>{detail}</code> : null}
+      </header>
+      {branches.length > 0 ? (
+        <div>
+          {branches.map((branch, index) => (
+            <p
+              className={branch.tone ? `is-${branch.tone}` : ''}
+              key={branch.text}
+            >
+              <span aria-hidden="true">{index === 0 ? '└' : ' '}</span>
+              <code>{branch.text}</code>
+            </p>
+          ))}
+        </div>
+      ) : null}
+    </article>
+  );
+}
+
+function ApprovalPrompt({
+  label,
+  selected,
+}: {
+  label: string;
+  selected: number;
+}) {
+  const options = [
+    ['↵', 'Allow once'],
+    ['◎', 'Allow exact capability for this session'],
+    ['⌘', 'Add exact capability rule to project'],
+    ['⊘', 'Deny and tell the agent why'],
+  ];
+
+  return (
+    <section className="a3s-real-approval" aria-label="Permission required">
+      <header>
+        <span aria-hidden="true">◆</span>
+        <strong>Permission required</strong>
+      </header>
+      <p className="a3s-real-approval-detail">
+        <span>Run</span>
+        <code>{label}</code>
+      </p>
+      <ol>
+        {options.map(([glyph, option], index) => (
+          <li className={index === selected ? 'is-selected' : ''} key={option}>
+            <span aria-hidden="true">{index === selected ? '❯' : ''}</span>
+            <b>{index + 1}</b>
+            <i aria-hidden="true">{glyph}</i>
+            <p>{option}</p>
+          </li>
+        ))}
+      </ol>
+      <footer>Enter select · ↑↓ move · Esc deny</footer>
+    </section>
+  );
+}
+
+function HitlScene({ locale, stage }: { locale: Locale; stage: number }) {
+  const prompt = localized(
+    {
+      zh: '测试通过后，将 main 分支推送到 origin',
+      en: 'Push main to origin after the tests pass',
+    },
+    locale,
+  );
+
+  return (
+    <div className="a3s-real-transcript" data-real-tui-scene="hitl">
+      <UserMessage>{prompt}</UserMessage>
+      {stage === 0 ? (
+        <ToolLine
+          action="Preparing"
+          detail="git push origin main"
+          tone="muted"
+        />
+      ) : stage < 3 ? (
+        <ToolLine
+          action="Awaiting approval for"
+          detail="git push origin main"
+          tone="warning"
+        />
+      ) : (
+        <ToolLine
+          action="Ran"
+          branches={[
+            { text: 'To github.com:A3S-Lab/Code.git' },
+            { text: 'main -> main', tone: 'success' },
+          ]}
+          detail="git push origin main"
+          tone="success"
+        />
+      )}
+    </div>
+  );
+}
+
+const progressiveCalls = [
+  {
+    request: `curl … -d '{"action":"list"}'`,
+    result: 'knowledge · runtime · assets · workflows',
+  },
+  {
+    request: `curl … -d '{"action":"search","query":"knowledge deploy"}'`,
+    result: 'knowledge.deploy · score 0.94',
+  },
+  {
+    request: `curl … -d '{"action":"describe","operation":"deploy"}'`,
+    result: 'assetId:string · release:string · shaped:boolean',
+  },
+  {
+    request: `curl … -d '{"action":"execute","shaped":true,…}'`,
+    result: 'requestId req_01J… · view returned',
+  },
+];
+
+function OpenView() {
+  return (
+    <p className="a3s-real-open-view">
+      <i aria-hidden="true">•</i>
+      <span aria-hidden="true">↗</span>
+      <strong>Open view</strong>
+      <small>· click to open</small>
+    </p>
+  );
+}
+
+function ProgressiveScene({
+  locale,
+  stage,
+}: {
+  locale: Locale;
+  stage: number;
+}) {
+  const prompt = localized(
+    {
+      zh: '部署发布知识包，并打开运行视图',
+      en: 'Deploy the release knowledge package and open its run view',
+    },
+    locale,
+  );
+
+  return (
+    <div className="a3s-real-transcript" data-real-tui-scene="progressive">
+      <UserMessage>{prompt}</UserMessage>
+      <div className="a3s-real-tool-stack">
+        {progressiveCalls.slice(0, stage + 1).map((call, index) => {
+          const complete =
+            index < stage || stage === progressiveCalls.length - 1;
+          return (
+            <ToolLine
+              action={complete ? 'Ran' : 'Running'}
+              branches={complete ? [{ text: call.result }] : []}
+              detail={call.request}
+              key={call.request}
+              tone={complete ? 'success' : 'active'}
+            />
+          );
+        })}
+      </div>
+      {stage === 3 ? <OpenView /> : null}
+    </div>
+  );
+}
+
+function RuntimeScene({ locale, stage }: { locale: Locale; stage: number }) {
+  const prompt = localized(
+    {
+      zh: '并行检查 core、Node 和 Python 发布包',
+      en: 'Check the core, Node, and Python releases in parallel',
+    },
+    locale,
+  );
+
+  const runningBranches: ToolBranch[] = [
+    { text: 'worker release-checker -> 57989959-0b1d-41da-974c-31ad8101df37' },
+    { text: '3 parallel subtasks submitted (batch batch-01J…)' },
+  ];
+  if (stage >= 2) {
+    runningBranches.push({ text: '⏳ 1/3 done · 2 running · 0 queued' });
+  }
+
+  return (
+    <div className="a3s-real-transcript" data-real-tui-scene="runtime">
+      <UserMessage>{prompt}</UserMessage>
+      {stage === 0 ? (
+        <ToolLine
+          action="Awaiting approval for"
+          detail="3 tasks via release-checker: check core; check Node +1 more"
+          tone="warning"
+        />
+      ) : stage < 3 ? (
+        <ToolLine
+          action="Running Runtime"
+          branches={runningBranches}
+          detail="3 tasks via release-checker: check core; check Node +1 more"
+          tone="active"
+        />
+      ) : (
+        <ToolLine
+          action="Used Runtime"
+          branches={[
+            { text: '✓ task 1 · inv-core · completed', tone: 'success' },
+            { text: '✓ task 2 · inv-node · completed', tone: 'success' },
+            { text: '✓ task 3 · inv-python · completed', tone: 'success' },
+          ]}
+          detail="3/3 tasks via 57989959-0b1d-41da-974c-31ad8101df37"
+          tone="success"
+        />
+      )}
+    </div>
+  );
+}
+
+function RuntimeTracker({ locale, stage }: { locale: Locale; stage: number }) {
+  if (stage < 1 || stage > 2) return null;
+
+  const rows = [
+    ['runtime', 'check a3s-code-core release', stage === 2 ? 'done' : 'active'],
+    ['runtime', 'check @a3s-lab/code release', 'active'],
+    ['runtime', 'check a3s-code release', 'active'],
+  ] as const;
+  const running = rows.filter(([, , status]) => status === 'active').length;
+
+  return (
+    <section className="a3s-tui-agents a3s-real-runtime-tracker">
+      <header>
+        <span aria-hidden="true">•</span>
+        <strong>
+          {localized(
+            {
+              zh: '并行检查 core、Node 和 Python 发布包',
+              en: 'Check the core, Node, and Python releases in parallel',
+            },
+            locale,
+          )}
+        </strong>
+        <small>
+          {running} running · {3 - running}/3 done · 00:04
+        </small>
+      </header>
+      <div>
+        {rows.map(([name, task, status]) => (
+          <p className={`is-${status}`} key={task}>
+            <i aria-hidden="true">•</i>
+            <b>{name}</b>
+            <span>{task}</span>
+            <small>00:03 · ↓ 0.4k</small>
+          </p>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+const ctxHits = [
+  [
+    '1.',
+    'A3S · 2026-07-28 · Preserve shaped view responses',
+    'Execute responses keep the .view object so the host can surface Open view.',
+  ],
+  [
+    '2.',
+    'Codex · 2026-07-24 · Runtime view fallback',
+    'Resolve relative ViewLink URLs against the authenticated OS origin.',
+  ],
+  [
+    '3.',
+    'Claude · 2026-07-19 · Loop report contract',
+    'Keep the report artifact and its source requestId together.',
+  ],
+];
+
+function CtxResults() {
+  return (
+    <section className="a3s-real-ctx-results">
+      {ctxHits.map(([index, title, snippet]) => (
+        <div key={title}>
+          <p>
+            <b>{index}</b>
+            <strong>{title}</strong>
+          </p>
+          <small>{snippet}</small>
+        </div>
+      ))}
+      <footer>
+        ⧉ /ctx &lt;n&gt; attaches to next message · /ctx save &lt;n&gt; keeps as
+        memory
+      </footer>
+    </section>
+  );
+}
+
+function CtxScene({ stage }: { stage: number }) {
+  return (
+    <div className="a3s-real-transcript a3s-real-ctx" data-real-tui-scene="ctx">
+      {stage >= 1 ? <CtxResults /> : null}
+      {stage >= 2 ? (
+        <p className="a3s-real-notice is-success">
+          <i aria-hidden="true">✔</i>
+          context staged — it will be attached to your next message (one-shot)
+        </p>
+      ) : null}
+      {stage >= 3 ? (
+        <p className="a3s-real-notice is-success">
+          <i aria-hidden="true">✔</i>
+          saved to memory: Runtime view fallback · shows in /memory (source=ctx)
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function Scene({
+  locale,
+  stage,
+  story,
+}: {
+  locale: Locale;
+  stage: number;
+  story: CapabilityStory;
+}) {
+  switch (story.key) {
+    case 'hitl':
+      return <HitlScene locale={locale} stage={stage} />;
+    case 'progressive':
+      return <ProgressiveScene locale={locale} stage={stage} />;
+    case 'runtime':
+      return <RuntimeScene locale={locale} stage={stage} />;
+    case 'intelligence':
+      return <CapabilityIdeScene stage={stage} />;
+    case 'ctx':
+      return <CtxScene stage={stage} />;
+  }
+}
+
+function composerText(story: CapabilityStory, stage: number, locale: Locale) {
+  if (story.key === 'intelligence') return stage === 0 ? '/ide' : '';
+  if (story.key === 'ctx') {
+    if (stage === 0) return localized(story.prompt, locale);
+    if (stage === 1) return '/ctx 2';
+    if (stage === 2) return '/ctx save 2';
+  }
+  return '';
+}
+
+function isWorking(story: CapabilityStory, stage: number) {
+  if (story.key === 'hitl') return stage === 0;
+  if (story.key === 'progressive') return stage < 3;
+  if (story.key === 'runtime') return stage === 1 || stage === 2;
+  return false;
+}
+
+export function CapabilityTuiDemo({
+  isPlaying,
+  isVisible,
+  locale,
+  onPlayback,
+  reducedMotion,
+  stage,
+  story,
+}: {
+  isPlaying: boolean;
+  isVisible: boolean;
+  locale: Locale;
+  onPlayback: () => void;
+  reducedMotion: boolean;
+  stage: number;
+  story: CapabilityStory;
+}) {
+  const labels = sectionCopy[locale];
+  const working = isPlaying && isVisible && isWorking(story, stage);
+  const fullscreen = story.key === 'intelligence' && stage > 0;
+  const approval =
+    story.key === 'hitl' && stage > 0 && stage < 3 ? (
+      <ApprovalPrompt
+        label="Git(git push origin main)"
+        selected={stage === 1 ? 0 : 1}
+      />
+    ) : story.key === 'runtime' && stage === 0 ? (
+      <ApprovalPrompt
+        label="Runtime(3 tasks via release-checker: check core; check Node +1 more)"
+        selected={0}
+      />
+    ) : undefined;
+
+  return (
+    <A3sCodeTui
+      activity={
+        working ? (
+          <>
+            <i aria-hidden="true">✶</i>
+            <span>Working…</span>
+            <small>(00:04 · ↓ 1.2k tokens)</small>
+          </>
+        ) : undefined
+      }
+      afterFooter={
+        story.key === 'runtime' ? (
+          <RuntimeTracker locale={locale} stage={stage} />
+        ) : undefined
+      }
+      ariaLabel={`${story.eyebrow}: ${localized(story.title, locale)}`}
+      beforeInput={approval}
+      className={`a3s-capability-player is-${story.key}`}
+      composerHidden={fullscreen}
+      composerStatus="◇ high"
+      composerText={composerText(story, stage, locale)}
+      contextLabel={labels.context}
+      isPlaying={isPlaying && isVisible}
+      modeGlyph="⏵"
+      modeLabel="default mode"
+      onPlayback={onPlayback}
+      phase={`${story.key}-${stage + 1}`}
+      playbackLabel={
+        isPlaying ? labels.pause : stage === 3 ? labels.replay : labels.play
+      }
+      showCursor={!reducedMotion}
+      surface={`capability-${story.key}`}
+      workspace={labels.workspace}
+    >
+      <Scene locale={locale} stage={stage} story={story} />
+    </A3sCodeTui>
+  );
+}
diff --git a/website/theme/components/TuiRuntimeDemo.tsx b/website/theme/components/TuiRuntimeDemo.tsx
index 77cbfdd..a00d9b6 100644
--- a/website/theme/components/TuiRuntimeDemo.tsx
+++ b/website/theme/components/TuiRuntimeDemo.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { A3sCodeTui, type A3sCodeTuiInputMode } from './A3sCodeTui';
 import type { HomeLabels } from './home-copy';
+import { TuiWelcomeBanner } from './TuiWelcomeBanner';
 
 const tuiDemoPhases = [
   'slash',
@@ -44,65 +45,6 @@ const tuiDemoStatusGlyph: Record<TuiDemoStatus, string> = {
   active: '◼',
   done: '✔',
 };
-const tuiMascot = [
-  '     .-^-.',
-  '    /_____\\',
-  '    ( o o )',
-  '  |  /|_|\\  _',
-  ' -+- |   | |#|',
-  '  |  |___| \\#/',
-  '     /   \\',
-].join('\n');
-const tuiWordmarkGlyphs = {
-  A: ['01110', '10001', '10001', '11111', '10001', '10001', '10001'],
-  '3': ['11110', '00001', '00001', '01110', '00001', '00001', '11110'],
-  S: ['01111', '10000', '10000', '01110', '00001', '00001', '11110'],
-  C: ['01111', '10000', '10000', '10000', '10000', '10000', '01111'],
-  O: ['01110', '10001', '10001', '10001', '10001', '10001', '01110'],
-  D: ['11110', '10001', '10001', '10001', '10001', '10001', '11110'],
-  E: ['11111', '10000', '10000', '11110', '10000', '10000', '11111'],
-} as const;
-
-const tuiWordmarkVector = (() => {
-  const commands: string[] = [];
-  let offset = 0;
-
-  for (const character of 'A3S CODE') {
-    if (character === ' ') {
-      offset += 3;
-      continue;
-    }
-
-    const glyph =
-      tuiWordmarkGlyphs[character as keyof typeof tuiWordmarkGlyphs];
-    glyph.forEach((row, y) => {
-      [...row].forEach((cell, x) => {
-        if (cell === '1') commands.push(`M${offset + x} ${y}h1v1h-1z`);
-      });
-    });
-    offset += 6;
-  }
-
-  return {
-    path: commands.join(''),
-    width: Math.max(offset - 1, 1),
-  };
-})();
-
-function TuiWordmark() {
-  return (
-    <svg
-      aria-hidden="true"
-      className="a3s-tui-wordmark"
-      focusable="false"
-      preserveAspectRatio="xMinYMid meet"
-      viewBox={`0 0 ${tuiWordmarkVector.width} 7`}
-    >
-      <path d={tuiWordmarkVector.path} />
-    </svg>
-  );
-}
-
 export function RuntimeExecutionFlow({ labels }: { labels: HomeLabels }) {
   const playerRef = useRef<HTMLDivElement>(null);
   const hasStartedRef = useRef(false);
@@ -389,22 +331,7 @@ export function RuntimeExecutionFlow({ labels }: { labels: HomeLabels }) {
       surface="hero"
       workspace={labels.tuiWorkspace}
     >
-      <div className="a3s-tui-welcome" aria-label="A3S Code">
-        <pre aria-hidden="true" className="a3s-tui-mascot">
-          {tuiMascot}
-        </pre>
-        <TuiWordmark />
-      </div>
-      <p className="a3s-tui-meta">
-        <span>a3s-code v6.6.0</span>
-        <i>·</i>
-        <span>openai/gpt-5</span>
-        <i>·</i>
-        <span>12 skills</span>
-        <i>·</i>
-        <span>{labels.tuiWorkspace}</span>
-      </p>
-      <p className="a3s-tui-tip">{labels.tuiTip}</p>
+      <TuiWelcomeBanner workspace={labels.tuiWorkspace} />
 
       <div className="a3s-tui-transcript" aria-live="off">
         {activeIndex > tuiDemoIndex.compose ? (
diff --git a/website/theme/components/TuiWelcomeBanner.tsx b/website/theme/components/TuiWelcomeBanner.tsx
new file mode 100644
index 0000000..d55458d
--- /dev/null
+++ b/website/theme/components/TuiWelcomeBanner.tsx
@@ -0,0 +1,89 @@
+const tuiMascot = [
+  '     .-^-.',
+  '    /_____\\',
+  '    ( o o )',
+  '  |  /|_|\\  _',
+  ' -+- |   | |#|',
+  '  |  |___| \\#/',
+  '     /   \\',
+].join('\n');
+
+const tuiWordmarkGlyphs = {
+  A: ['01110', '10001', '10001', '11111', '10001', '10001', '10001'],
+  '3': ['11110', '00001', '00001', '01110', '00001', '00001', '11110'],
+  S: ['01111', '10000', '10000', '01110', '00001', '00001', '11110'],
+  C: ['01111', '10000', '10000', '10000', '10000', '10000', '01111'],
+  O: ['01110', '10001', '10001', '10001', '10001', '10001', '01110'],
+  D: ['11110', '10001', '10001', '10001', '10001', '10001', '11110'],
+  E: ['11111', '10000', '10000', '11110', '10000', '10000', '11111'],
+} as const;
+
+const tuiWordmarkVector = (() => {
+  const commands: string[] = [];
+  let offset = 0;
+
+  for (const character of 'A3S CODE') {
+    if (character === ' ') {
+      offset += 3;
+      continue;
+    }
+
+    const glyph =
+      tuiWordmarkGlyphs[character as keyof typeof tuiWordmarkGlyphs];
+    glyph.forEach((row, y) => {
+      [...row].forEach((cell, x) => {
+        if (cell === '1') commands.push(`M${offset + x} ${y}h1v1h-1z`);
+      });
+    });
+    offset += 6;
+  }
+
+  return {
+    path: commands.join(''),
+    width: Math.max(offset - 1, 1),
+  };
+})();
+
+function TuiWordmark() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="a3s-tui-wordmark"
+      focusable="false"
+      preserveAspectRatio="xMinYMid meet"
+      viewBox={`0 0 ${tuiWordmarkVector.width} 7`}
+    >
+      <path d={tuiWordmarkVector.path} />
+    </svg>
+  );
+}
+
+export function TuiWelcomeBanner({
+  workspace = '~/workspace/a3s',
+}: {
+  workspace?: string;
+}) {
+  return (
+    <>
+      <div className="a3s-tui-welcome" aria-label="A3S Code">
+        <pre aria-hidden="true" className="a3s-tui-mascot">
+          {tuiMascot}
+        </pre>
+        <TuiWordmark />
+      </div>
+      <p className="a3s-tui-meta">
+        <span>a3s-code v6.6.0</span>
+        <i>·</i>
+        <span>openai/gpt-5</span>
+        <i>·</i>
+        <span>12 skills</span>
+        <i>·</i>
+        <span>{workspace}</span>
+      </p>
+      <p className="a3s-tui-tip">
+        Type a message · / for commands · Shift+Tab cycles mode · Ctrl+C twice
+        to exit
+      </p>
+    </>
+  );
+}
diff --git a/website/theme/components/capability-stories.ts b/website/theme/components/capability-stories.ts
new file mode 100644
index 0000000..736a1cb
--- /dev/null
+++ b/website/theme/components/capability-stories.ts
@@ -0,0 +1,189 @@
+export type Locale = 'zh' | 'en';
+
+export type Localized = {
+  zh: string;
+  en: string;
+};
+
+export type CapabilityKey =
+  'hitl' | 'progressive' | 'runtime' | 'intelligence' | 'ctx';
+
+export type CapabilityStory = {
+  key: CapabilityKey;
+  index: string;
+  eyebrow: string;
+  title: Localized;
+  body: Localized;
+  prompt: Localized;
+  availability: Localized;
+  stages: Localized[];
+};
+
+export const sectionCopy = {
+  zh: {
+    eyebrow: 'A3S CODE / DISTINCTIVE CAPABILITIES',
+    title: '五个关键瞬间，看懂一次任务如何安全地变聪明',
+    body: '从执行前确认到代码语义，从按需发现平台能力到找回过去会话：选择一个场景，查看真实 A3S Code TUI 中的交互顺序与边界。',
+    guide: '查看完整 TUI 指南',
+    select: '选择能力演示',
+    play: '播放',
+    pause: '暂停',
+    replay: '重播',
+    context: 'ctx:12%',
+    workspace: '~/workspace/a3s',
+  },
+  en: {
+    eyebrow: 'A3S CODE / DISTINCTIVE CAPABILITIES',
+    title: 'Five decisive moments that make a coding run safer and smarter',
+    body: 'From approval before execution to code semantics, on-demand platform discovery, and past-session recall: select a scenario to see the real interaction order and boundaries in the A3S Code TUI.',
+    guide: 'Read the complete TUI guide',
+    select: 'Select a capability demo',
+    play: 'Play',
+    pause: 'Pause',
+    replay: 'Replay',
+    context: 'ctx:12%',
+    workspace: '~/workspace/a3s',
+  },
+};
+
+export const capabilityStories: CapabilityStory[] = [
+  {
+    key: 'hitl',
+    index: '01',
+    eyebrow: 'HITL',
+    title: {
+      zh: '越过执行边界前，由你决定',
+      en: 'You decide before a call crosses the boundary',
+    },
+    body: {
+      zh: '需要确认的调用会在执行前暂停，并展示规范化参数。你可以只允许一次、保留精确的会话或项目授权，或者拒绝并说明原因。',
+      en: 'Calls that need confirmation pause before execution and expose canonical arguments. Allow once, retain an exact session or project grant, or deny with a reason.',
+    },
+    prompt: {
+      zh: '测试通过后，将 main 分支推送到 origin',
+      en: 'Push main to origin after the tests pass',
+    },
+    availability: {
+      zh: 'Default 模式 · 风险感知',
+      en: 'Default mode · risk-aware',
+    },
+    stages: [
+      { zh: '准备精确调用', en: 'Prepare the exact call' },
+      { zh: '执行前暂停', en: 'Pause before execution' },
+      { zh: '选择授权范围', en: 'Choose the grant scope' },
+      { zh: '继续执行或拒绝', en: 'Resume or deny' },
+    ],
+  },
+  {
+    key: 'progressive',
+    index: '02',
+    eyebrow: 'PROGRESSIVE API',
+    title: {
+      zh: '先发现，再只加载需要的 Schema',
+      en: 'Discover first, then load only the schema you need',
+    },
+    body: {
+      zh: '登录 A3S OS 后，通过一个按权限过滤的入口执行 list → search → describe → execute。模型无需把整个平台手册塞进上下文。',
+      en: 'After A3S OS login, one permission-filtered endpoint runs list → search → describe → execute. The model never needs the whole platform manual in context.',
+    },
+    prompt: {
+      zh: '部署发布知识包，并打开运行视图',
+      en: 'Deploy the release knowledge package and open its run view',
+    },
+    availability: {
+      zh: '登录后可用 · 权限过滤',
+      en: 'Available after login · permission-filtered',
+    },
+    stages: [
+      { zh: '列出模块', en: 'List modules' },
+      { zh: '搜索操作', en: 'Search operations' },
+      { zh: '读取单个 Schema', en: 'Describe one schema' },
+      { zh: '执行并返回视图', en: 'Execute with a view' },
+    ],
+  },
+  {
+    key: 'runtime',
+    index: '03',
+    eyebrow: 'RUNTIME TOOL',
+    title: {
+      zh: '把独立输入交给远程 Worker 并行处理',
+      en: 'Send independent inputs to a remote worker in parallel',
+    },
+    body: {
+      zh: '登录后注册的 runtime 工具按 UUID 或名称解析 tool-kind Worker，提交 Function as a Service 批任务，流式呈现进度并聚合结果。',
+      en: 'The login-gated runtime tool resolves a tool-kind worker by UUID or name, submits a Function-as-a-Service batch, streams progress, and aggregates results.',
+    },
+    prompt: {
+      zh: '并行检查 core、Node 和 Python 发布包',
+      en: 'Check the core, Node, and Python releases in parallel',
+    },
+    availability: {
+      zh: '登录后注册 · 批量执行',
+      en: 'Registered after login · batch execution',
+    },
+    stages: [
+      { zh: '确认远程调用', en: 'Authorize the remote call' },
+      { zh: '解析 Worker 并提交', en: 'Resolve the worker and submit' },
+      { zh: '流式追踪进度', en: 'Stream progress' },
+      { zh: '聚合结果', en: 'Aggregate results' },
+    ],
+  },
+  {
+    key: 'intelligence',
+    index: '04',
+    eyebrow: 'CODE INTELLIGENCE',
+    title: {
+      zh: 'Agent、TUI 与 Web 共享同一份代码语义',
+      en: 'Agent, TUI, and Web share one semantic code runtime',
+    },
+    body: {
+      zh: '基于已保存文件提供符号、定义、声明、引用、实现与诊断。Agent 工具、/ide 和 Monaco 使用同一运行时，脏缓冲区不会伪装成已发布语义。',
+      en: 'Saved files provide symbols, definitions, declarations, references, implementations, and diagnostics. Agent tools, /ide, and Monaco share the runtime; dirty buffers never masquerade as published semantics.',
+    },
+    prompt: {
+      zh: '/ide',
+      en: '/ide',
+    },
+    availability: {
+      zh: 'Rust · TypeScript / JavaScript',
+      en: 'Rust · TypeScript / JavaScript',
+    },
+    stages: [
+      { zh: '打开内置 IDE', en: 'Open the built-in IDE' },
+      { zh: '输入语义命令', en: 'Enter a semantic command' },
+      { zh: '查询已保存版本', en: 'Query the saved version' },
+      { zh: '选择并跳转结果', en: 'Select and jump to a result' },
+    ],
+  },
+  {
+    key: 'ctx',
+    index: '05',
+    eyebrow: 'CTX RECALL',
+    title: {
+      zh: '从过去会话找回决定，而不是重新猜测',
+      en: 'Recover decisions from past sessions instead of guessing again',
+    },
+    body: {
+      zh: '本地 ctx 可用时，/ctx 会搜索跨工具、跨会话的索引。命中窗口可以一次性附加到下一条消息，也可以携带来源保存为长期记忆。',
+      en: 'When the local ctx index is available, /ctx searches across tools and sessions. A hit can be attached once to the next turn or saved to long-term memory with provenance.',
+    },
+    prompt: {
+      zh: '/ctx RemoteUI view link',
+      en: '/ctx RemoteUI view link',
+    },
+    availability: {
+      zh: '本地索引 · 跨会话 · 可追溯',
+      en: 'Local index · cross-session · traceable',
+    },
+    stages: [
+      { zh: '搜索历史', en: 'Search history' },
+      { zh: '查看命中', en: 'Inspect the matches' },
+      { zh: '一次性附加', en: 'Attach once' },
+      { zh: '保存并保留来源', en: 'Save with provenance' },
+    ],
+  },
+];
+
+export function localized(value: Localized, locale: Locale) {
+  return value[locale];
+}
diff --git a/website/theme/components/home-copy.ts b/website/theme/components/home-copy.ts
index 805de75..7c4eccf 100644
--- a/website/theme/components/home-copy.ts
+++ b/website/theme/components/home-copy.ts
@@ -61,7 +61,6 @@ export const copy = {
     flowPlayOnce: '播放一次',
     tuiWorkspace: '~/workspace/a3s',
     tuiMode: 'default',
-    tuiTip: '输入消息 · / 打开命令 · Shift+Tab 切换模式 · Ctrl+C 两次退出',
     tuiSlashInput: '/effort',
     tuiSlashEffort: '调整推理强度',
     tuiSlashModel: '切换模型与 Provider',
@@ -174,8 +173,6 @@ export const copy = {
     flowPlayOnce: 'PLAY ONCE',
     tuiWorkspace: '~/workspace/a3s',
     tuiMode: 'default',
-    tuiTip:
-      'Type a message · / for commands · Shift+Tab cycles mode · Ctrl+C twice to exit',
     tuiSlashInput: '/effort',
     tuiSlashEffort: 'adjust model effort',
     tuiSlashModel: 'switch model and provider',