Read a flow name, a port name and an honest docstring

Give the Home flow-activity name cell a `sm:min-w-32` floor beside its
`max-w-0` cap, so an ordinary name reads in full where there is room
while the phone keeps today's truncation. Name the bar widget's nested
reading by its port rather than its qualified message. Correct
`MarkdownWidget`'s docstring to the subset it actually renders.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SKL7sUgNWhukDEz95vSMQv

frontend/src/components/Dashboard/BarWidget.tsx

@@ -1,3 +1,4 @@
+import { displayName, flowOf } from "@/components/Flow/deriveEdges"
 import { useLiveValue } from "@/components/Flow/liveStore"
 import { cn } from "@/lib/utils"
 import type { WidgetProps } from "./widgets"
@@ -28,6 +29,9 @@ export function BarWidget({ widget }: WidgetProps) {
   const cfg = config(widget)
   const message = text(cfg.message)
   const nested = text(cfg.inner)
+  // The panel already carries the widget's title, so the caption names the
+  // reading by its port rather than repeating the flow it comes from.
+  const innerName = nested ? displayName(flowOf(nested), nested) : ""
   const outer = useLiveValue(message || undefined)
   const inner = useLiveValue(nested || undefined)
   if (!message)
@@ -56,7 +60,7 @@ export function BarWidget({ widget }: WidgetProps) {
       role="img"
       aria-label={
         nested
-          ? `${write(value)} of ${max}${unit}, ${write(innerValue)} of it from ${nested}`
+          ? `${write(value)} of ${max}${unit}, ${write(innerValue)} of it from ${innerName}`
           : `${write(value)} of ${max}${unit}`
       }
     >
@@ -89,7 +93,7 @@ export function BarWidget({ widget }: WidgetProps) {
       </div>
       {innerValue === null ? null : (
         <p className="truncate text-xs text-muted-foreground">
-          {nested} {write(innerValue)}
+          {innerName} {write(innerValue)}
         </p>
       )}
     </div>

frontend/src/components/Dashboard/widgets.tsx

@@ -382,7 +382,8 @@ function GaugeWidget({ widget }: WidgetProps) {
 }
 
 /**
- * A very small markdown subset: headings, bold, code, links, list items.
+ * A very small markdown subset, read a line at a time: headings and list items.
+ * Inline spans — bold, code, links — are not parsed and read as written.
  *
  * Enough for the labels and notes a dashboard carries, and not worth a parser.
  */

frontend/src/components/Health/HealthOverview.tsx

@@ -185,10 +185,12 @@ export function HealthOverview({
             <tbody>
               {(flows ?? []).map((row: FlowRollup) => (
                 <tr key={row.flow} className="border-t border-border">
-                  <td className="max-w-0 py-2 pr-3">
+                  <td className="max-w-0 py-2 pr-3 sm:min-w-32">
                     {/* `max-w-0` is what lets a cell truncate at all: without
                         it the table sizes to the longest name and pushes the
-                        page sideways. */}
+                        page sideways. The floor beside it keeps an ordinary
+                        name readable where there is room for one; a phone has
+                        none to spare, so it starts at `sm` like the trend. */}
                     <Link
                       to="/flows/$flowName"
                       params={{ flowName: row.flow }}