From 39b9e215c907052a12da0f32af367498058105c6 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 22 Jun 2026 22:42:01 +0000 Subject: [PATCH 1/4] fix(hero): constant-width agent box, no mobile horizontal wiggle, chips light up - AgentConsole: let long trace values wrap to the next line instead of white-space: nowrap, so the longest tool-call no longer forces the box (and the page) wider than the viewport. Token/arrow stay on one line; value wraps with min-width:0 + overflow-wrap. Cursor moved inline so it trails the wrapped text. - Tag the s2 planning subtasks with the rSkills they reference so chips light up immediately during planning instead of staying dark through the ~9-line preamble; add a soft glow to the active chip. - Harden against horizontal overflow: overflow-x: clip on html, min-width:0 on the agent box and hero grid children. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01CAz4QSPTces2wrGbUP65tG --- src/components/AgentConsole.css | 14 ++++++++++---- src/components/AgentConsole.jsx | 20 +++++++++++--------- src/components/Hero.css | 4 ++++ src/styles/global.css | 1 + 4 files changed, 26 insertions(+), 13 deletions(-) diff --git a/src/components/AgentConsole.css b/src/components/AgentConsole.css index 7fd83f0..caaa45b 100644 --- a/src/components/AgentConsole.css +++ b/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); @@ -69,18 +70,22 @@ 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 +119,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) { diff --git a/src/components/AgentConsole.jsx b/src/components/AgentConsole.jsx index 73d1aad..73c8424 100644 --- a/src/components/AgentConsole.jsx +++ b/src/components/AgentConsole.jsx @@ -8,13 +8,13 @@ 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.subtask[1]", val: "navigate → kitchen", skill: "navigate" }, + { tok: "s2.subtask[2]", val: "locate · CocaCola bottle", skill: "locate" }, + { tok: "s2.subtask[3]", val: "ExecuteRSkill(grasp) · bottle", skill: "grasp" }, + { tok: "s2.subtask[4]", val: "locate glass · ExecuteRSkill(pour)", skill: "pour" }, + { tok: "s2.subtask[5]", val: "ExecuteRSkill(open_door, place, close_door) · fridge", skill: "open_door" }, + { tok: "s2.subtask[6]", val: "recall glass · navigate user", skill: "recall" }, + { tok: "s2.subtask[7]", val: "ExecuteRSkill(handover) · glass", skill: "handover" }, // 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" }, @@ -141,8 +141,10 @@ export default function AgentConsole() {
{l.tok} ▸ - {l.typed} - {cur && idx === rows.length - 1 && } + + {l.typed} + {cur && idx === rows.length - 1 && } +
))} diff --git a/src/components/Hero.css b/src/components/Hero.css index f90d928..56fcd28 100644 --- a/src/components/Hero.css +++ b/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; diff --git a/src/styles/global.css b/src/styles/global.css index d6e2f89..d7fba64 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -11,6 +11,7 @@ html { scroll-behavior: smooth; + overflow-x: clip; } body { From e0e6be3460befa08579b2ec43642133ada4e5a17 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 22 Jun 2026 22:47:26 +0000 Subject: [PATCH 2/4] fix(hero): light a 'plan' chip during the S2 reasoning preamble MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Instead of flashing execution rSkill chips (grasp, pour, …) while the agent is still planning, add a dedicated 'plan' chip that stays lit through the s2.reason / s2.subtask preamble (and on replan). Keeps the ~11s planning phase meaningful without implying skills have fired. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01CAz4QSPTces2wrGbUP65tG --- src/components/AgentConsole.jsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/AgentConsole.jsx b/src/components/AgentConsole.jsx index 73c8424..18b6215 100644 --- a/src/components/AgentConsole.jsx +++ b/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: "navigate" }, - { tok: "s2.subtask[2]", val: "locate · CocaCola bottle", skill: "locate" }, - { tok: "s2.subtask[3]", val: "ExecuteRSkill(grasp) · bottle", skill: "grasp" }, - { tok: "s2.subtask[4]", val: "locate glass · ExecuteRSkill(pour)", skill: "pour" }, - { tok: "s2.subtask[5]", val: "ExecuteRSkill(open_door, place, close_door) · fridge", skill: "open_door" }, - { tok: "s2.subtask[6]", val: "recall glass · navigate user", skill: "recall" }, - { tok: "s2.subtask[7]", val: "ExecuteRSkill(handover) · glass", skill: "handover" }, + { 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() { From 1aabfbbf7f99b76659e622cc92f5cee7e73a8737 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 22 Jun 2026 22:50:44 +0000 Subject: [PATCH 3/4] fix(hero): fix agent trace height so the box doesn't jump vertically With wrapping enabled, tall (wrapped) lines pushed the trace past its min-height and short lines let it shrink back, so the box bobbed up/down on mobile as the displayed sentence changed. Use a constant trace height with overflow:hidden (newest line anchored to the bottom, older lines clipped at the top, with a soft top fade) so the box height stays fixed. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01CAz4QSPTces2wrGbUP65tG --- src/components/AgentConsole.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/AgentConsole.css b/src/components/AgentConsole.css index caaa45b..58f4faa 100644 --- a/src/components/AgentConsole.css +++ b/src/components/AgentConsole.css @@ -57,7 +57,8 @@ .agent-trace { padding: 16px 18px; - min-height: 224px; + height: 224px; + overflow: hidden; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; @@ -65,6 +66,8 @@ 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; From b163ddfafe114bab203d501baa358af1e9c89271 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 22 Jun 2026 22:55:29 +0000 Subject: [PATCH 4/4] fix(rskills): wrap long YAML lines so ros_action manifest doesn't overflow The ros_action manifest's name line ('OpenRAL/rskill-nav2-navigate-to-pose') is longer than the yaml panel, and white-space: pre + overflow-x: auto made it scroll/overflow horizontally (other kinds have shorter names so never hit it). Switch the code block to pre-wrap + overflow-wrap so long values wrap to the next line, and add min-width:0 to the split columns as an overflow guard. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01CAz4QSPTces2wrGbUP65tG --- src/components/RSkills.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/RSkills.css b/src/components/RSkills.css index 60696ab..777c2d4 100644 --- a/src/components/RSkills.css +++ b/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);