From f3e867b23813d64573e43e56917f8848350413d6 Mon Sep 17 00:00:00 2001
From: "pouriade.com" <did:plc:3sapfnszmvjc6wa4ml3ybkwb>
Date: Tue, 27 Oct 2026 22:32:45 -0700
Subject: [PATCH] Gather file runs before drawing a message's parts

withFileRuns groups side-by-side files into one row up front, so the
render no longer looks back or casts, and PartOf draws a part through
its view in the three places that did it by hand.
---
 .../conversation/components/PartsView.tsx     | 80 +++++++++++--------
 1 file changed, 45 insertions(+), 35 deletions(-)

diff --git a/apps/web/src/features/conversation/components/PartsView.tsx b/apps/web/src/features/conversation/components/PartsView.tsx
index 7d744f4..875c9a8 100644
--- a/apps/web/src/features/conversation/components/PartsView.tsx
+++ b/apps/web/src/features/conversation/components/PartsView.tsx
@@ -19,13 +19,19 @@ interface Props {
 
 type ContentBlock = Extract<Block, { kind: 'content' }>
 
-const isFile = (block: Block | undefined) =>
-  block?.kind === 'content' && kind(block.part) === 'filePart'
+/** A block, or a run of files side by side, which share a row. */
+type Row = Block | { kind: 'files'; key: string; files: ContentBlock[] }
 
-/** The run of files that starts at `start`. */
-function filesFrom(blocks: Block[], start: number): ContentBlock[] {
-  const end = blocks.findIndex((block, i) => i > start && !isFile(block))
-  return blocks.slice(start, end === -1 ? undefined : end) as ContentBlock[]
+/** The blocks with each run of files gathered into one row. */
+function withFileRuns(blocks: Block[]): Row[] {
+  const rows: Row[] = []
+  for (const block of blocks) {
+    const last = rows.at(-1)
+    if (block.kind !== 'content' || kind(block.part) !== 'filePart') rows.push(block)
+    else if (last?.kind === 'files') last.files.push(block)
+    else rows.push({ kind: 'files', key: block.key, files: [block] })
+  }
+  return rows
 }
 
 /**
@@ -36,58 +42,49 @@ function filesFrom(blocks: Block[], start: number): ContentBlock[] {
  */
 export function PartsView(props: Props) {
   const { blocks, sources } = groupParts(props.parts)
+  const rows = withFileRuns(blocks)
   return (
     <>
-      {blocks.map((block, i) => {
-        if (block.kind === 'steps') {
+      {rows.map((row, i) => {
+        const last = i === rows.length - 1
+        if (row.kind === 'steps') {
           // A finished reply's steps open from its footer, so only work still going shows. Steps
           // that are done stay mounted while the reply streams, hidden, so their clocks record how
           // long they ran.
           if (!props.live) return null
-          const current = i === blocks.length - 1
           return (
-            <div key={block.key} hidden={!current}>
+            <div key={row.key} hidden={!last}>
               <StepsView
-                steps={block.steps}
+                steps={row.steps}
                 record={props.record}
-                live={current}
+                live={last}
                 blobUrl={props.blobUrl}
                 scope={props.scope}
               />
             </div>
           )
         }
-        if (isFile(block)) {
-          // A run of files is drawn whole by its first.
-          if (isFile(blocks[i - 1])) return null
+        if (row.kind === 'files')
           return (
             <ul
-              key={block.key}
+              key={row.key}
               aria-label="Files"
               className="mb-1.5 flex flex-wrap in-data-[role=user]:justify-end gap-1.5"
             >
-              {filesFrom(blocks, i).map((file) => {
-                const View = viewFor(file.part)
-                return (
-                  <li key={file.key} className="flex min-w-0">
-                    {View && (
-                      <View part={file.part} record={props.record} blobUrl={props.blobUrl} />
-                    )}
-                  </li>
-                )
-              })}
+              {row.files.map((file) => (
+                <li key={file.key} className="flex min-w-0">
+                  <PartOf part={file.part} record={props.record} blobUrl={props.blobUrl} />
+                </li>
+              ))}
             </ul>
           )
-        }
-        const View = viewFor(block.part)
-        if (!View) return null
         return (
-          <View
-            key={block.key}
-            part={block.part}
+          <PartOf
+            key={row.key}
+            part={row.part}
             record={props.record}
             blobUrl={props.blobUrl}
-            live={props.live && i === blocks.length - 1}
+            live={props.live && last}
           />
         )
       })}
@@ -98,6 +95,20 @@ export function PartsView(props: Props) {
   )
 }
 
+interface PartOfProps {
+  part: Part
+  record: MessageRecord
+  blobUrl: BlobUrl
+  live?: boolean
+}
+
+/** A part through its view, or nothing for a kind no view draws. */
+function PartOf(props: PartOfProps) {
+  const View = viewFor(props.part)
+  if (!View) return null
+  return <View part={props.part} record={props.record} blobUrl={props.blobUrl} live={props.live} />
+}
+
 interface SourcesProps {
   sources: Part[]
   record: MessageRecord
@@ -121,13 +132,12 @@ function Sources(props: SourcesProps) {
         {/* A flex item is no list item, so the rows count themselves. */}
         <ol className="mt-2 flex flex-col gap-0.5 [counter-reset:source]">
           {props.sources.map((part) => {
-            const View = viewFor(part)
             return (
               <li
                 key={part.url as string}
                 className="flex w-fit min-w-0 max-w-full items-baseline gap-1.5 rounded-md bg-well px-2 py-1 text-caption transition-colors duration-(--dur-feedback) [counter-increment:source] before:flex-none before:text-muted before:tabular-nums before:content-[counter(source)] has-[a:hover]:bg-accent-soft"
               >
-                {View && <View part={part} record={props.record} blobUrl={props.blobUrl} />}
+                <PartOf part={part} record={props.record} blobUrl={props.blobUrl} />
               </li>
             )
           })}
-- 
knotmirror 0.0.1