Promote dev → main

src/components/AgentConsole.css

@@ -2,6 +2,7 @@
   position: relative;
   width: 100%;
   max-width: 430px;
+  min-width: 0;
   margin: 0 auto;
   background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
   border: 1px solid var(--hair-2);
@@ -56,31 +57,38 @@
 
 .agent-trace {
   padding: 16px 18px;
-  min-height: 224px;
+  height: 224px;
+  overflow: hidden;
   font-family: var(--mono);
   font-size: 12.5px;
   line-height: 1.55;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   gap: 6px;
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
+  mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
 }
 .tr-line {
   display: flex;
   align-items: baseline;
   gap: 9px;
-  white-space: nowrap;
+  min-width: 0;
 }
 .tr-tok {
   color: var(--text-2);
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 .tr-arrow {
   color: var(--muted);
+  flex-shrink: 0;
 }
 .tr-val {
   color: #fff;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 .tr-line.ok .tr-val {
   color: var(--text);
@@ -114,12 +122,13 @@
   border: 1px solid var(--hair-2);
   border-radius: 6px;
   padding: 4px 9px;
-  transition: color 0.2s, border-color 0.2s, background 0.2s;
+  transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
 }
 .chip.on {
   color: #0b0c10;
   background: #fff;
   border-color: #fff;
+  box-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
 }
 
 @media (max-width: 920px) {

src/components/AgentConsole.jsx

@@ -7,14 +7,14 @@ import "./AgentConsole.css";
 const TRACE = [
   // S2 planning
   { tok: "audio.transcribe",    val: '"bring me a coke"',                    skill: null },
-  { tok: "s2.reason",           val: "building plan · 7 subtasks",           skill: null },
-  { tok: "s2.subtask[1]",       val: "navigate → kitchen",                   skill: null },
-  { tok: "s2.subtask[2]",       val: "locate · CocaCola bottle",             skill: null },
-  { tok: "s2.subtask[3]",       val: "ExecuteRSkill(grasp) · bottle",        skill: null },
-  { tok: "s2.subtask[4]",       val: "locate glass · ExecuteRSkill(pour)",   skill: null },
-  { tok: "s2.subtask[5]",       val: "ExecuteRSkill(open_door, place, close_door) · fridge", skill: null },
-  { tok: "s2.subtask[6]",       val: "recall glass · navigate user",         skill: null },
-  { tok: "s2.subtask[7]",       val: "ExecuteRSkill(handover) · glass",      skill: null },
+  { tok: "s2.reason",           val: "building plan · 7 subtasks",           skill: "plan" },
+  { tok: "s2.subtask[1]",       val: "navigate → kitchen",                   skill: "plan" },
+  { tok: "s2.subtask[2]",       val: "locate · CocaCola bottle",             skill: "plan" },
+  { tok: "s2.subtask[3]",       val: "ExecuteRSkill(grasp) · bottle",        skill: "plan" },
+  { tok: "s2.subtask[4]",       val: "locate glass · ExecuteRSkill(pour)",   skill: "plan" },
+  { tok: "s2.subtask[5]",       val: "ExecuteRSkill(open_door, place, close_door) · fridge", skill: "plan" },
+  { tok: "s2.subtask[6]",       val: "recall glass · navigate user",         skill: "plan" },
+  { tok: "s2.subtask[7]",       val: "ExecuteRSkill(handover) · glass",      skill: "plan" },
   // Navigate to kitchen
   { tok: "spatial_mem.recall",  val: "kitchen → pose (12.3, 4.1) ✓",        skill: "recall", ok: true },
   { tok: "LifecycleTransition", val: "navigate → ACTIVE",                    skill: "navigate" },
@@ -33,7 +33,7 @@ const TRACE = [
   { tok: "ExecuteRSkill",       val: 'grasp("CocaCola")',                     skill: "grasp" },
   { tok: "robometer",           val: "0.61 ↑ · grip unstable",               skill: "robometer" },
   { tok: "failure.bus",         val: "grasp slipped · grip=0.21",            skill: null },
-  { tok: "s2.reason",           val: "replan · grip angle +15°",             skill: null },
+  { tok: "s2.reason",           val: "replan · grip angle +15°",             skill: "plan" },
   { tok: "ExecuteRSkill",       val: 'grasp("CocaCola") · retry',            skill: "grasp" },
   { tok: "robometer",           val: "0.89 ↑ · grip stable ✓",               skill: "robometer", ok: true },
   // Find glass + pour
@@ -70,7 +70,7 @@ const TRACE = [
   { tok: "dataset.append",      val: "episode +1 ↗",                         skill: null },
   { tok: "otel.span",           val: "trace flushed",                        skill: null },
 ];
-const CHIPS = ["detect", "vlm", "locate", "navigate", "grasp", "open_door", "close_door", "pour", "place", "recall", "robometer", "safety", "handover"];
+const CHIPS = ["plan", "detect", "vlm", "locate", "navigate", "grasp", "open_door", "close_door", "pour", "place", "recall", "robometer", "safety", "handover"];
 const MAX = 6;
 
 export default function AgentConsole() {
@@ -141,8 +141,10 @@ export default function AgentConsole() {
           <div className={`tr-line${l.ok ? " ok" : ""}`} key={idx}>
             <span className="tr-tok">{l.tok}</span>
             <span className="tr-arrow">▸</span>
-            <span className="tr-val">{l.typed}</span>
-            {cur && idx === rows.length - 1 && <span className="tr-cursor" />}
+            <span className="tr-val">
+              {l.typed}
+              {cur && idx === rows.length - 1 && <span className="tr-cursor" />}
+            </span>
           </div>
         ))}
       </div>

src/components/Hero.css

@@ -47,6 +47,10 @@
   flex-wrap: wrap;
 }
 
+.hero-copy,
+.hero-vis {
+  min-width: 0;
+}
 .hero-vis {
   display: flex;
   justify-content: center;

src/components/RSkills.css

@@ -4,6 +4,10 @@
   gap: clamp(32px, 5vw, 64px);
   align-items: center;
 }
+.split-copy,
+.split-vis {
+  min-width: 0;
+}
 .split-copy p {
   color: var(--text-2);
   margin: 18px 0 22px;
@@ -43,7 +47,7 @@
 }
 .yaml pre {
   padding: 20px;
-  overflow-x: auto;
+  overflow: hidden;
 }
 .yaml code {
   font-family: var(--mono);
@@ -53,7 +57,8 @@
   background: none;
   padding: 0;
   display: block;
-  white-space: pre;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 .yk {
   color: var(--text-2);

src/styles/global.css

@@ -11,6 +11,7 @@
 
 html {
   scroll-behavior: smooth;
+  overflow-x: clip;
 }
 
 body {