[eric] tool-ui: widgets fill the bubble width instead of self-capping at half size

frontend/src/app/pages/AgentChat/tool-ui/LinksWidget.tsx

@@ -16,7 +16,7 @@ function hostOf(url: string): string {
 function LinksWidget({ props }: { props: LinksProps }): React.ReactElement {
   const c = useClaudeTokens();
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, maxWidth: 420 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, width: '100%' }}>
       {props.links.map((l, i) => (
         <Box
           key={`${i}-${l.url.slice(0, 40)}`}

frontend/src/app/pages/AgentChat/tool-ui/PlanWidget.tsx

@@ -19,7 +19,7 @@ function PlanWidget({ props }: { props: PlanProps }): React.ReactElement {
   return (
     <Box
       sx={{
-        width: 320,
+        width: '100%',
         borderRadius: '14px',
         border: `1px solid ${c.border.subtle}`,
         bgcolor: c.bg.elevated,

frontend/src/app/pages/AgentChat/tool-ui/StatsWidget.tsx

@@ -10,7 +10,7 @@ import type { StatsProps } from './showUiPayload';
 function StatsWidget({ props }: { props: StatsProps }): React.ReactElement {
   const c = useClaudeTokens();
   return (
-    <Box sx={{ maxWidth: 460 }}>
+    <Box sx={{ width: '100%' }}>
       {props.title && (
         <Typography sx={{ fontSize: '0.875rem', fontWeight: 600, color: c.text.primary, mb: 1 }}>
           {props.title}

frontend/src/app/pages/AgentChat/tool-ui/WeatherWidget.tsx

@@ -33,8 +33,7 @@ function WeatherWidget({ props, ambient }: { props: WeatherProps; ambient?: bool
   }));
 
   return (
-    // 4:3 card; the vendored strip reveals at 245px height and its day icons at 280px, so width must be >= 374 for the full frame look.
-    <div className={`tool-ui-scope${mode === 'dark' ? ' dark' : ''}`} style={{ width: 384, maxWidth: '100%' }}>
+    <div className={`tool-ui-scope${mode === 'dark' ? ' dark' : ''}`} style={{ width: '100%' }}>
       <AnimatedWeatherWidget
         version="3.1"
         id={`weather-${props.location}`}

frontend/src/toolui/VendoredToolUi.tsx

@@ -73,7 +73,6 @@ const SkeletonBlock: React.FC<{ name: string }> = ({ name }) => (
     style={{
       height: skeletonHeightFor(name),
       width: '100%',
-      maxWidth: 520,
       borderRadius: 12,
       background: 'rgba(127,127,127,0.12)',
       animation: 'toolui-skeleton-pulse 1.4s ease-in-out infinite',

frontend/src/toolui/toolui.css

@@ -85,6 +85,13 @@
     display: block;
   }
 }
+/* Vendored roots cap themselves at 448-576px, which reads half-sized in the chat column; unlayered
+   beats the utilities layer, so the scope's direct child always fills the bubble. */
+.tool-ui-scope > * {
+  width: 100%;
+  max-width: none;
+  min-width: 0;
+}
 .tool-ui-scope {
   color: var(--foreground);
   /* The app's chat voice is a serif at a 19.2px root; generated UI needs the crisp product-sans