feat(health-report-decoder): add health icons and improve UI styling

Add 5 new health-themed SVG icons for the health report decoder feature:
- gym, medicine-bottle, i-utensils, medical-records, fever and psychology icons

Update two artifact block components:
1. SystemIgnitionBlock: add text styling and semantic markup for better readability
2. TravelNotesBlock: add styled text highlights and updated caption text

Add dynamic icon rendering to LifeContextBlock to show relevant icons for each health context field
Improve layout responsiveness and styling for ReportTriageBlock including better table handling and text formatting

Author: Sayhi-bzb

agent-html/artifacts/health-report-decoder/life-context.block.tsx

@@ -11,6 +11,53 @@ import {
 
 import { lifeContextFields } from "./data"
 
+const lifeContextIconByLabel: Record<string, { label: string; src: string }> = {
+  家庭病史: {
+    label: "病史记录图标",
+    src: "/__agent-html/public/health-report-decoder/healthicons/medical-records.svg",
+  },
+  近期感染: {
+    label: "发热感染图标",
+    src: "/__agent-html/public/health-report-decoder/healthicons/fever.svg",
+  },
+  睡眠与压力: {
+    label: "心理压力图标",
+    src: "/__agent-html/public/health-report-decoder/healthicons/psychology.svg",
+  },
+  用药与补充剂: {
+    label: "用药图标",
+    src: "/__agent-html/public/health-report-decoder/healthicons/medicine-bottle.svg",
+  },
+  运动: {
+    label: "运动图标",
+    src: "/__agent-html/public/health-report-decoder/healthicons/gym.svg",
+  },
+  饮食与饮酒: {
+    label: "饮食图标",
+    src: "/__agent-html/public/health-report-decoder/healthicons/i-utensils.svg",
+  },
+}
+
+function LifeContextIcon({ fieldLabel }: { fieldLabel: string }) {
+  const icon = lifeContextIconByLabel[fieldLabel]
+
+  if (!icon) {
+    return null
+  }
+
+  return (
+    <span
+      aria-label={icon.label}
+      className="size-6 shrink-0 bg-current text-muted-foreground [mask-position:center] [mask-repeat:no-repeat] [mask-size:contain]"
+      role="img"
+      style={{
+        WebkitMaskImage: `url(${icon.src})`,
+        maskImage: `url(${icon.src})`,
+      }}
+    />
+  )
+}
+
 export function LifeContextBlock() {
   return (
     <section className="canvas-stack-lg">
@@ -36,7 +83,12 @@ export function LifeContextBlock() {
           <TableBody>
             {lifeContextFields.map((field) => (
               <TableRow key={field.label}>
-                <TableCell className="font-medium">{field.label}</TableCell>
+                <TableCell className="font-medium">
+                  <span className="canvas-wrap-sm items-center">
+                    <LifeContextIcon fieldLabel={field.label} />
+                    {field.label}
+                  </span>
+                </TableCell>
                 <TableCell>{field.prompt}</TableCell>
                 <TableCell>{field.record}</TableCell>
               </TableRow>

agent-html/artifacts/health-report-decoder/report-triage.block.tsx

@@ -28,24 +28,27 @@ export function ReportTriageBlock() {
   )
 
   return (
-    <section className="canvas-stack-lg">
-      <div className="canvas-stack-sm">
+    <section className="canvas-stack-lg w-full">
+      <div className="canvas-stack-sm w-full min-w-0">
         <div className="canvas-wrap-sm items-center">
           <Badge variant="secondary">体检后的小记录</Badge>
           <Badge variant="outline">{sampleReport.context}</Badge>
         </div>
         <h1 className="canvas-text-title">这次先记三件事。</h1>
         <p className="canvas-text-body text-muted-foreground">
-          不急着给自己下结论。先把需要问、需要复查、需要下次对照的项目放在同一页。
+          不急着给自己下结论。先把<span className="font-medium text-foreground">需要问</span>
+          {"、"}
+          <span className="font-medium text-warning">需要复查</span>
+          {"、"}需要下次对照的项目放在同一页。
         </p>
       </div>
 
-      <div className="grid gap-6 overflow-hidden rounded-md bg-background md:grid-cols-[0.78fr_1.22fr]">
-        <aside className="canvas-stack-md border-b md:border-b-0">
+      <div className="grid w-full min-w-0 gap-6 overflow-hidden rounded-md bg-background md:grid-cols-[0.62fr_1.38fr]">
+        <aside className="canvas-stack-md w-full min-w-0 border-b md:border-b-0">
           <div className="canvas-stack-xs">
             <Badge variant="secondary">这次先看</Badge>
             <p className="canvas-text-caption text-muted-foreground">
-              把红箭头先变成几个可处理的事项。
+              把<span className="text-destructive">红箭头</span>先变成几个可处理的事项。
             </p>
           </div>
 
@@ -61,7 +64,9 @@ export function ReportTriageBlock() {
                   </div>
                   <p className="canvas-text-body">{item.label}</p>
                   <p className="canvas-text-caption text-muted-foreground">
-                    {item.result}
+                    <span className="font-mono text-foreground">
+                      {item.result}
+                    </span>
                     {item.unit ? ` ${item.unit}` : ""} / {item.rawNote}
                   </p>
                 </div>
@@ -79,16 +84,17 @@ export function ReportTriageBlock() {
           </div>
         </aside>
 
-        <div className="canvas-stack-lg">
-          <div className="canvas-stack-xs">
+        <div className="canvas-stack-lg w-full min-w-0">
+          <div className="canvas-stack-xs w-full min-w-0">
             <Badge variant="secondary">报告摘录</Badge>
             <p className="canvas-text-caption text-muted-foreground">
-              原来的缩写、单位和参考范围保留，方便回看纸质报告。
+              原来的<span className="font-mono text-foreground">缩写</span>
+              {"、"}单位和参考范围保留，方便回看纸质报告。
             </p>
           </div>
 
-          <div className="overflow-x-auto rounded-md border bg-background">
-            <Table>
+          <div className="w-full min-w-0 overflow-x-auto rounded-md border bg-background">
+            <Table className="min-w-full">
               <TableHeader>
                 <TableRow>
                   <TableHead>代码</TableHead>
@@ -102,18 +108,14 @@ export function ReportTriageBlock() {
             {sampleReport.labItems.map((item) => (
               <TableRow key={item.code}>
                 <TableCell className="font-mono">{item.code}</TableCell>
-                <TableCell>
-                  <span className="whitespace-nowrap">{item.label}</span>
-                </TableCell>
+                <TableCell>{item.label}</TableCell>
                 <TableCell className="font-mono">
                   {item.result}
                   {item.unit ? (
                     <span className="text-muted-foreground"> {item.unit}</span>
                   ) : null}
                 </TableCell>
-                <TableCell className="font-mono text-xs">
-                  <span className="whitespace-nowrap">{item.referenceRange}</span>
-                </TableCell>
+                <TableCell className="font-mono text-xs">{item.referenceRange}</TableCell>
                 <TableCell>
                   {item.flag ? (
                     <StatusBadge status={statusFor(item.status).status}>
@@ -129,7 +131,7 @@ export function ReportTriageBlock() {
             </Table>
           </div>
 
-          <div className="canvas-grid-gap md:grid-cols-4">
+          <div className="canvas-grid-gap w-full min-w-0 sm:grid-cols-2">
             {statusOrder.map((status) => {
               const meta = statusMeta[status]
               const items = labItemsByStatus(status)

agent-html/artifacts/nasa-artemis-ii/system-ignition.block.tsx

@@ -40,12 +40,14 @@ export function SystemIgnitionBlock() {
             <StatusBadge status="warning">system ignition</StatusBadge>
           </div>
           <h2 className="canvas-text-heading">
-            A full deep-space system came alive from the ground.
+            A full <span className="text-ring">deep-space system</span> came
+            alive from the ground.
           </h2>
           <p className="canvas-text-body text-muted-foreground">
-            SLS, flame, smoke, tower structure, and mission environment appear
-            together. Launch is the entry point to the system, not the whole
-            story.
+            <span className="font-mono text-foreground">SLS</span>, flame,
+            smoke, tower structure, and mission environment appear together.{" "}
+            <strong className="font-medium text-foreground">Launch</strong> is
+            the entry point to the system, not the whole story.
           </p>
         </div>
 
@@ -57,7 +59,7 @@ export function SystemIgnitionBlock() {
               <article className="canvas-stack-xs" key={panel.label}>
                 <p className="canvas-wrap-sm items-center canvas-text-body">
                   <Icon data-icon="inline-start" />
-                  <span>{panel.label}</span>
+                  <span className="font-medium">{panel.label}</span>
                 </p>
                 <p className="canvas-text-caption text-muted-foreground">
                   {panel.summary}

agent-html/artifacts/tokyo-three-speeds/travel-notes.block.tsx

@@ -67,9 +67,12 @@ export function TravelNotesBlock() {
           A useful Tokyo day is not the one that proves the most.
         </h2>
         <p className="canvas-text-body text-muted-foreground">
-          Day 3 works best as a travel note instead of a checklist. Pick one
-          anchor, let the route stay short, and treat unfinished places as part
-          of the design rather than a failure of planning.
+          <span className="text-foreground">Day 3</span> works best as a travel
+          note instead of a checklist. Pick{" "}
+          <strong className="font-medium text-foreground">one anchor</strong>,
+          let the route stay short, and treat{" "}
+          <em className="text-foreground">unfinished places</em> as part of the
+          design rather than a failure of planning.
         </p>
       </div>
 
@@ -80,7 +83,12 @@ export function TravelNotesBlock() {
           </div>
           <figcaption className="canvas-stack-xs">
             <Badge variant="outline">unfinished route</Badge>
-            <p className="canvas-text-body">{openDoodle.caption}</p>
+            <p className="canvas-text-body">
+              Leave one street, shelf, or garden path{" "}
+              <em className="text-muted-foreground">unresolved</em> so the next
+              visit already has{" "}
+              <strong className="font-medium">a beginning</strong>.
+            </p>
           </figcaption>
         </figure>
 
@@ -89,7 +97,7 @@ export function TravelNotesBlock() {
             <article className="canvas-stack-sm border-l pl-4" key={note.label}>
               <p className="canvas-wrap-sm items-center canvas-text-body">
                 <note.Icon data-icon="inline-start" />
-                <span>{note.label}</span>
+                <span className="font-medium">{note.label}</span>
               </p>
               <p className="canvas-text-caption text-muted-foreground">
                 {note.text}