feat: add option to "frame" open tool results

js/src/chat/ToolGroup.tsx

@@ -181,6 +181,8 @@ function ToolCallRow({
   heterogeneous: boolean
 }): ReactNode {
   const [open, setOpen] = useExpandable(item.expanded)
+  const framed =
+    open && item.status === "success" && item.openStyle === "framed"
   const label = toolCallLabel(item, segmentTitle, false)
   const statusClass =
     item.status === "error"
@@ -203,7 +205,12 @@ function ToolCallRow({
   const contentId = `tool-call${useId()}`
 
   return (
-    <li className="shiny-chat-tool-call-row" role="listitem">
+    <li
+      className={`shiny-chat-tool-call-row${
+        framed ? " shiny-chat-tool-call-row--framed" : ""
+      }`}
+      role="listitem"
+    >
       <button
         type="button"
         className="shiny-chat-tool-call-row__summary"
@@ -325,14 +332,16 @@ function ToolGroupRow({
   bodyId: string
 }): ReactNode {
   const { identity, single, anyRunning, failedCount, heterogeneous } = row
+  const framed =
+    expanded && single?.status === "success" && single.openStyle === "framed"
   const label = single && toolCallLabel(single, identity.title, true)
   const glyph = glyphHtml(toolGroupGlyph(row))
 
   return (
     <div
       className={`shiny-chat-tool-group shiny-chat-tool-group--${
         single ? "single" : "multi"
-      }`}
+      }${framed ? " shiny-chat-tool-group--framed" : ""}`}
     >
       <button
         type="button"

js/src/chat/chat-tools.scss

@@ -698,10 +698,29 @@ shinychat-raw-html {
   list-style: none;
   margin: 0;
   padding: 0;
+  position: relative;
 
   &[hidden] {
     display: none;
   }
+
+  // The group header's own drill-in rule: a straight vertical line under the
+  // header's glyph, running the full height of the call list down through the
+  // final tool result. A pseudo-element rather than a border so the rows'
+  // geometry is untouched. The x-position follows the same convention as the
+  // leaf cards' rules (see the __detail padding below): the line's inline
+  // start edge sits on the glyph's center.
+  &::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--_row-pad) + var(--_row-glyph-width) / 2);
+    width: $shiny-chat-tool-detail-rule;
+    background-color: var(--bs-border-color);
+    // Match the dimming the rows and leaf cards get, so the line reads as the
+    // same subordinate-activity chrome rather than a stronger rule.
+    opacity: var(--_activity-opacity);
+  }
 }
 
 .shiny-chat-tool-call-row {
@@ -819,6 +838,69 @@ shinychat-raw-html {
   padding-inline-start: calc(var(--_row-pad) + var(--_row-glyph-width) / 2);
 }
 
+.shiny-chat-tool-group--framed,
+.shiny-chat-tool-call-row--framed {
+  border: var(--bs-card-border-width, 1px) solid var(--bs-card-border-color);
+  border-radius: var(--bs-border-radius, 4px);
+  overflow: hidden;
+}
+
+.shiny-chat-tool-group--framed > .shiny-chat-tool-group__row,
+.shiny-chat-tool-call-row--framed > .shiny-chat-tool-call-row__summary {
+  border-radius: 0;
+  border-bottom: var(--bs-card-border-width, 1px) solid
+    var(--bs-card-border-color);
+  background-color: rgba(var(--bs-emphasis-color-rgb), 0.05);
+
+  &:hover,
+  &:focus-visible {
+    background-color: rgba(var(--bs-emphasis-color-rgb), 0.1);
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+}
+
+// Opening a framed call row must not move or widen the box the collapsed row
+// occupied: the indent moves from the summary (zeroed below) onto the frame
+// itself, so the frame's border box is exactly the collapsed row's border box.
+.shiny-chat-tool-call-row--framed {
+  margin-inline-start: var(--_row-indent);
+}
+
+.shiny-chat-tool-call-row--framed > .shiny-chat-tool-call-row__summary {
+  margin-left: 0;
+  width: 100%;
+}
+
+.shiny-chat-tool-group--framed > .shiny-chat-tool-call-row__detail,
+.shiny-chat-tool-call-row--framed > .shiny-chat-tool-call-row__detail {
+  padding-inline-start: 0;
+
+  > .shiny-tool-card:not([fullscreen]) {
+    margin: 0;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+
+    > .card-body {
+      padding-inline-start: var(--bs-card-spacer-x, 1rem);
+    }
+
+    > .card-footer {
+      padding: var(--bs-card-cap-padding-y, 0.5rem)
+        var(--bs-card-cap-padding-x, 1rem);
+      border-top: var(--bs-card-border-width, 1px) solid
+        var(--bs-card-border-color);
+    }
+  }
+}
+
+.shiny-chat-tool-call-row--framed + .shiny-chat-tool-call-row--framed {
+  margin-top: 0.5rem;
+}
+
 @keyframes shiny-chat-tool-detail-reveal {
   from {
     opacity: 0;

js/src/chat/tool-model.ts

@@ -5,6 +5,7 @@ import {
   isRoutableContentType,
   parseToolEvents,
   type ToolEvent,
+  type ToolResultOpenStyle,
 } from "./tool-protocol"
 
 /** How a loop's tool calls are aggregated in the condensed view. */
@@ -45,6 +46,7 @@ export interface ToolCallItem {
   requestCall?: string
   showRequest?: boolean
   fullScreen?: boolean
+  openStyle?: ToolResultOpenStyle
   expanded?: boolean
   /**
    * Internal wire provenance: the server wrapped an author's custom UI in a
@@ -132,6 +134,7 @@ function applyEvent(
   if (event.footer !== undefined) item.footer = event.footer
   item.showRequest = event.showRequest
   item.fullScreen = event.fullScreen
+  item.openStyle = event.openStyle
   item.expanded = event.expanded
   item.customDisplay = event.customDisplay
   item.resolveIndex = event.start

js/src/chat/tool-protocol.ts

@@ -43,6 +43,8 @@ export interface ToolRequestEvent extends ToolEventSource {
   arguments?: string
 }
 
+export type ToolResultOpenStyle = "minimal" | "framed"
+
 export interface ToolResultEvent extends ToolEventSource {
   kind: "result"
   title?: string
@@ -55,6 +57,7 @@ export interface ToolResultEvent extends ToolEventSource {
   requestCall?: string
   showRequest: boolean
   fullScreen: boolean
+  openStyle: ToolResultOpenStyle
   expanded: boolean
   customDisplay: boolean
   footer?: string
@@ -240,6 +243,7 @@ function normalizeToolElement(element: ParsedToolElement): ToolEvent {
       : {}),
     showRequest: attrTruthy(attrs, "show-request"),
     fullScreen: attrTruthy(attrs, "full-screen"),
+    openStyle: attrs["open-style"] === "framed" ? "framed" : "minimal",
     expanded: attrTruthy(attrs, "expanded"),
     customDisplay: attrTruthy(attrs, "custom-display"),
     ...(attrs["footer"] !== undefined ? { footer: attrs["footer"] } : {}),

js/tests/chat/ToolGroup.test.tsx

@@ -77,6 +77,124 @@ describe("ToolGroup", () => {
     expect(container.querySelector(".shiny-tool-card")).toBeTruthy()
   })
 
+  it("frames an expanded successful single framed result", () => {
+    const { container } = render(
+      <ToolGroup
+        group={group({
+          title: "Rendered chart",
+          calls: [
+            call({
+              requestId: "chart",
+              openStyle: "framed",
+              value: "chart output",
+              valueType: "text",
+              footer: "<span>Chart footer</span>",
+            }),
+          ],
+        })}
+      />,
+    )
+    const groupEl = container.querySelector(".shiny-chat-tool-group")!
+    const row = container.querySelector(".shiny-chat-tool-group__row")!
+
+    expect(groupEl.classList.contains("shiny-chat-tool-group--framed")).toBe(
+      false,
+    )
+
+    fireEvent.click(row)
+
+    expect(groupEl.classList.contains("shiny-chat-tool-group--framed")).toBe(
+      true,
+    )
+    expect(groupEl.querySelectorAll(".shiny-tool-card")).toHaveLength(1)
+    expect(groupEl.querySelector(".card-footer")?.textContent).toBe(
+      "Chart footer",
+    )
+  })
+
+  it("frames only an expanded successful framed call in a multi-call group", () => {
+    const { container } = render(
+      <ToolGroup
+        group={group({
+          title: "Rendered charts",
+          calls: [
+            call({
+              requestId: "chart",
+              label: "revenue",
+              openStyle: "framed",
+              value: "chart output",
+              valueType: "text",
+            }),
+            call({
+              requestId: "table",
+              label: "summary",
+              value: "table output",
+              valueType: "text",
+            }),
+          ],
+        })}
+      />,
+    )
+    const groupEl = container.querySelector(".shiny-chat-tool-group")!
+
+    fireEvent.click(
+      container.querySelector(".shiny-chat-tool-group__row") as Element,
+    )
+    const rows = container.querySelectorAll(".shiny-chat-tool-call-row")
+    fireEvent.click(rows[0]!.querySelector("button") as Element)
+
+    expect(groupEl.classList.contains("shiny-chat-tool-group--framed")).toBe(
+      false,
+    )
+    expect(
+      rows[0]!.classList.contains("shiny-chat-tool-call-row--framed"),
+    ).toBe(true)
+    expect(
+      rows[1]!.classList.contains("shiny-chat-tool-call-row--framed"),
+    ).toBe(false)
+  })
+
+  it("does not frame an expanded error result", () => {
+    const { container } = render(
+      <ToolGroup
+        group={group({
+          title: "Rendered charts",
+          calls: [
+            call({
+              requestId: "failed-chart",
+              label: "revenue",
+              openStyle: "framed",
+              status: "error",
+              value: "chart failed",
+              valueType: "text",
+            }),
+            call({
+              requestId: "table",
+              label: "summary",
+              value: "table output",
+              valueType: "text",
+            }),
+          ],
+        })}
+      />,
+    )
+
+    fireEvent.click(
+      container.querySelector(".shiny-chat-tool-group__row") as Element,
+    )
+    const errorRow = container.querySelectorAll(".shiny-chat-tool-call-row")[0]!
+    fireEvent.click(errorRow.querySelector("button") as Element)
+
+    expect(
+      container
+        .querySelector(".shiny-chat-tool-group")
+        ?.classList.contains("shiny-chat-tool-group--framed"),
+    ).toBe(false)
+    expect(
+      errorRow.classList.contains("shiny-chat-tool-call-row--framed"),
+    ).toBe(false)
+  })
+
   it("shows a title: label colon form for a single call with a label", () => {
     const { container } = render(
       <ToolGroup

js/tests/chat/tool-model.test.ts

@@ -7,13 +7,14 @@ import { parseToolEvents } from "../../src/chat/tool-protocol"
 
 const request = (id: string, title: string) =>
   `<shiny-tool-request request-id="${id}" tool-name="search" tool-title="${title}"></shiny-tool-request>`
-const result = (id: string, title: string) =>
-  `<shiny-tool-result request-id="${id}" tool-name="search" status="success" tool-title="${title}"></shiny-tool-result>`
+const result = (id: string, title: string, extraAttrs = "") =>
+  `<shiny-tool-result request-id="${id}" tool-name="search" status="success" tool-title="${title}" ${extraAttrs}></shiny-tool-result>`
 
 describe("tool lifecycle model", () => {
   it("pairs request and result elements into one settled call", () => {
     const events = parseToolEvents(
-      request("r1", "Searching") + result("r1", "Searched"),
+      request("r1", "Searching") +
+        result("r1", "Searched", 'open-style="framed"'),
       "markdown",
     )
     const calls = pairToolEvents(events, "0:0", 0)
@@ -25,6 +26,7 @@ describe("tool lifecycle model", () => {
       status: "success",
       definitionTitle: "Searching",
       title: "Searched",
+      openStyle: "framed",
     })
   })
 

js/tests/chat/tool-presentation.test.ts

@@ -90,6 +90,41 @@ describe("tool presentation projection", () => {
     })
   })
 
+  it("keeps a successful framed result in its activity row", () => {
+    const framed = call({
+      openStyle: "framed",
+      value: "forecast",
+      valueType: "text",
+    })
+
+    const presentation = projectToolGroup(group([framed]))
+
+    expect(presentation.row?.calls).toEqual([framed])
+    expect(presentation.standalonePayloads).toEqual([])
+  })
+
+  it("keeps custom-display migration authoritative over framed presentation", () => {
+    const customFramed = call({
+      customDisplay: true,
+      openStyle: "framed",
+      value: "<table></table>",
+      valueType: "html",
+    })
+
+    const presentation = projectToolGroup(group([customFramed]))
+
+    expect(presentation.row).toBeNull()
+    expect(presentation.standalonePayloads).toEqual([
+      {
+        key: "request-1",
+        call: customFramed,
+        value: "<table></table>",
+        valueType: "html",
+        showRequest: false,
+      },
+    ])
+  })
+
   it("keeps a running custom-display request in the activity row", () => {
     const running = call({
       status: "running",