fix(chat): improve realtime progress history

Author: jaromil

src/client/RelayApp.svelte

@@ -921,6 +921,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             <MessageList
               messages={chatView ? [...chatView.messages] : []}
               activities={chatView ? [...chatView.activities] : []}
+              activeTurnId={chatView?.activeTurnId ?? null}
               interactions={chatView ? [...chatView.interactions] : []}
               answers={userInputAnswers}
               onanswer={setUserInputAnswer}

src/client/features/chat/ActivityList.svelte

@@ -7,53 +7,83 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <script lang="ts">
   import type { HistoryActivity } from './activity-summary.js';
   import { presentActivity } from './activity-presentation.js';
-  let { activities }: { activities: HistoryActivity[] } = $props();
+  let {
+    activities,
+    variant = 'summary',
+  }: { activities: HistoryActivity[]; variant?: 'live' | 'summary' } = $props();
 
   let visibleActivities = $derived(
     activities.flatMap((activity) => {
       const presentation = presentActivity(activity);
-      return presentation ? [{ id: activity.id, ...presentation }] : [];
+      return presentation && presentation.kind.toLowerCase().replaceAll(' ', '') !== 'filechange'
+        ? [{ id: activity.id, ...presentation }]
+        : [];
     }),
   );
-  let hasInProgressActivity = $derived(
-    visibleActivities.some(
-      (activity) => activity.status !== 'completed' && activity.status !== 'failed',
-    ),
-  );
 </script>
 
 {#if visibleActivities.length}
-  <details id="chat-activity" open={hasInProgressActivity}>
-    <summary>activity</summary>
-    <ul class="activity-list">
-      {#each visibleActivities as activity (activity.id)}
-        <li
-          class="activity-row"
-          data-activity-kind={activity.kind.toLowerCase().replaceAll(' ', '-')}
-          data-activity-status={activity.status}
-        >
-          <small class="activity-type"
-            >{activity.kind}{activity.status ? ` · ${activity.status}` : ''}</small
+  {#if variant === 'summary'}
+    <details class="chat-activity">
+      <summary>activity <span aria-hidden="true">· {visibleActivities.length}</span></summary>
+      <ul class="activity-list">
+        {#each visibleActivities as activity (activity.id)}
+          <li
+            class="activity-row"
+            data-activity-kind={activity.kind.toLowerCase().replaceAll(' ', '-')}
+            data-activity-status={activity.status}
+          >
+            <small class="activity-type"
+              >{activity.kind}{activity.status ? ` · ${activity.status}` : ''}</small
+            >
+            <span class="activity-content">{activity.content}</span>
+          </li>
+        {/each}
+      </ul>
+    </details>
+  {:else}
+    <section class="live-activity" aria-label="Current activity">
+      <strong>activity</strong>
+      <ul class="activity-list">
+        {#each visibleActivities as activity (activity.id)}
+          <li
+            class="activity-row"
+            data-activity-kind={activity.kind.toLowerCase().replaceAll(' ', '-')}
+            data-activity-status={activity.status}
           >
-          <span class="activity-content">{activity.content}</span>
-        </li>
-      {/each}
-    </ul>
-  </details>
+            <small class="activity-type"
+              >{activity.kind}{activity.status ? ` · ${activity.status}` : ''}</small
+            >
+            <span class="activity-content">{activity.content}</span>
+          </li>
+        {/each}
+      </ul>
+    </section>
+  {/if}
 {/if}
 
 <style>
-  #chat-activity {
+  .chat-activity,
+  .live-activity {
     --activity-gap: 0.4rem;
     --activity-type-color: var(--theme-text-muted);
   }
 
-  #chat-activity > summary {
+  .chat-activity > summary {
     color: var(--activity-type-color);
     font-size: 0.875em;
     cursor: pointer;
   }
 
+  .live-activity {
+    margin-block-start: 0.5rem;
+  }
+
+  .live-activity > strong {
+    color: var(--activity-type-color);
+    font-size: 0.875em;
+  }
+
   .activity-list {
     display: grid;
     gap: var(--activity-gap);

src/client/features/chat/MessageList.svelte

@@ -17,6 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   type Props = {
     messages: ChatMessage[];
     activities: HistoryActivity[];
+    activeTurnId?: string | null;
     interactions?: ProjectedInteraction[];
     answers?: Record<string, string>;
     onanswer?(requestId: string, id: string, value: string): void;
@@ -28,6 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   let {
     messages,
     activities,
+    activeTurnId = null,
     interactions = [],
     answers = {},
     onanswer = () => {},
@@ -38,10 +40,18 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   }: Props = $props();
   let groups = $derived(groupMessages(messages));
   let expandedCommentary = $state<Record<string, boolean>>({});
-  let latestAnswerId = $derived(
-    groups.findLast((group) => group.kind === 'assistant' && group.answer)?.id,
-  );
   let promptGroups = $derived(groups.filter((group) => group.kind === 'user'));
+  let assistantGroups = $derived(groups.filter((group) => group.kind === 'assistant'));
+  let latestAssistantId = $derived(assistantGroups.at(-1)?.id);
+  let hasActiveAssistant = $derived(
+    Boolean(
+      activeTurnId &&
+      assistantGroups.some(
+        (group) =>
+          group.turnId === activeTurnId || (!group.turnId && group.id === latestAssistantId),
+      ),
+    ),
+  );
   let unassignedInteractions = $derived(
     interactions.filter(
       (interaction) =>
@@ -59,6 +69,36 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     if (group.kind !== 'user') return [];
     return interactions.filter((interaction) => ownerGroupId(interaction) === group.id);
   }
+  function turnActivities(group: (typeof groups)[number]): HistoryActivity[] {
+    if (group.kind !== 'assistant') return [];
+    return activities.filter((activity) =>
+      activity.turnId ? activity.turnId === group.turnId : group.id === latestAssistantId,
+    );
+  }
+  function currentActivities(): HistoryActivity[] {
+    return activities.filter((activity) =>
+      activity.turnId ? activity.turnId === activeTurnId : true,
+    );
+  }
+  function regularActivities(items: HistoryActivity[]): HistoryActivity[] {
+    return items.filter(
+      (activity) => !activity.label.toLowerCase().replaceAll(' ', '').startsWith('filechange'),
+    );
+  }
+  function fileChanges(items: HistoryActivity[]): Array<{ id: string; paths: string[] }> {
+    return items.flatMap((activity) =>
+      activity.label.toLowerCase().replaceAll(' ', '').startsWith('filechange')
+        ? [{ id: activity.id, paths: activity.detail.split('\n').filter(Boolean) }]
+        : [],
+    );
+  }
+  function isLive(group: (typeof groups)[number]): boolean {
+    return Boolean(
+      group.kind === 'assistant' &&
+      activeTurnId &&
+      (group.turnId === activeTurnId || (!group.turnId && group.id === latestAssistantId)),
+    );
+  }
 </script>
 
 {#snippet inline(parts: CommentaryPart[])}
@@ -73,6 +113,22 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   {/each}
 {/snippet}
 
+{#snippet changedFiles(items: HistoryActivity[])}
+  {@const changes = fileChanges(items)}
+  {#if changes.length}
+    <section class="file-changes" aria-label="Files changed">
+      <strong>files changed</strong>
+      <ul>
+        {#each changes as change (change.id)}
+          {#each change.paths as path (`${change.id}:${path}`)}
+            <li><code>{path}</code></li>
+          {/each}
+        {/each}
+      </ul>
+    </section>
+  {/if}
+{/snippet}
+
 {#snippet content(text: string)}
   {#each renderCommentary(text) as block, blockIndex (blockIndex)}
     {#if block.kind === 'code'}
@@ -129,24 +185,11 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           {ondecision}
           {onretry}
         />
-      {:else if group.answer}
+      {:else if group.answer !== null}
+        {@const ownedActivities = turnActivities(group)}
         <section class="answer-turn">
           <div class="entry-heading">
-            <strong>answer</strong>
-            {#if group.commentary}
-              <button
-                class="commentary-toggle"
-                type="button"
-                aria-expanded={Boolean(expandedCommentary[group.id])}
-                aria-controls={`commentary-${group.id}`}
-                onclick={() => (expandedCommentary[group.id] = !expandedCommentary[group.id])}
-              >
-                <span aria-hidden="true">{expandedCommentary[group.id] ? '⌄' : '>'}</span>commentary
-              </button>
-            {/if}
-            {#if group.id === latestAnswerId}
-              <ActivityList {activities} />
-            {/if}
+            <strong>{isLive(group) ? 'working' : 'answer'}</strong>
             {#if group.occurredAt}
               <time datetime={new Date(group.occurredAt).toISOString()}>
                 {formatMessageTime(group.occurredAt)}
@@ -156,22 +199,57 @@ SPDX-License-Identifier: AGPL-3.0-or-later
               </time>
             {/if}
           </div>
-          {#if group.commentary && expandedCommentary[group.id]}
+          {#if isLive(group)}
+            {#if group.commentary}
+              <div class="commentary-content live-commentary">
+                {@render content(group.commentary)}
+              </div>
+            {/if}
+            <ActivityList activities={regularActivities(ownedActivities)} variant="live" />
+          {:else if group.commentary || regularActivities(ownedActivities).length}
+            <div class="answer-history">
+              {#if group.commentary}
+                <button
+                  class="commentary-toggle"
+                  type="button"
+                  aria-expanded={Boolean(expandedCommentary[group.id])}
+                  aria-controls={`commentary-${group.id}`}
+                  onclick={() => (expandedCommentary[group.id] = !expandedCommentary[group.id])}
+                >
+                  <span aria-hidden="true">{expandedCommentary[group.id] ? '⌄' : '›'}</span>
+                  commentary
+                </button>
+              {/if}
+              <ActivityList activities={regularActivities(ownedActivities)} />
+            </div>
+          {/if}
+          {#if !isLive(group) && group.commentary && expandedCommentary[group.id]}
             <div class="commentary-content" id={`commentary-${group.id}`}>
               {@render content(group.commentary)}
             </div>
           {/if}
+          {@render changedFiles(ownedActivities)}
           <div class="entry-content">{@render content(group.answer)}</div>
         </section>
-      {:else if group.commentary}
-        <section class="commentary-turn">
+      {:else if group.commentary !== null}
+        {@const ownedActivities = turnActivities(group)}
+        <section class={isLive(group) ? 'progress-turn' : 'commentary-turn'}>
           <div class="entry-heading">
+            <strong>{isLive(group) ? 'working' : 'commentary'}</strong>
+          </div>
+          {#if isLive(group)}
+            {#if group.commentary}
+              <div class="entry-content">{@render content(group.commentary)}</div>
+            {/if}
+            <ActivityList activities={regularActivities(ownedActivities)} variant="live" />
+          {:else}
             <details>
               <summary>commentary</summary>
               {@render content(group.commentary)}
             </details>
-            <ActivityList {activities} />
-          </div>
+            <ActivityList activities={regularActivities(ownedActivities)} />
+          {/if}
+          {@render changedFiles(ownedActivities)}
         </section>
       {/if}
     </li>
@@ -189,6 +267,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       />
     </li>
   {/if}
+  {#if activeTurnId && !hasActiveAssistant && currentActivities().length}
+    <li class="progress-item">
+      <section class="progress-turn">
+        <div class="entry-heading"><strong>working</strong></div>
+        <ActivityList activities={regularActivities(currentActivities())} variant="live" />
+        {@render changedFiles(currentActivities())}
+      </section>
+    </li>
+  {/if}
 </ol>
 
 <style>
@@ -224,13 +311,22 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   }
 
   .commentary-turn,
+  .progress-turn,
   .commentary-content {
     padding: 0.5rem 0.625rem;
     background: var(--theme-surface-subtle);
     border-inline-start: 0.25rem solid var(--theme-info);
     border-radius: 0.375rem;
   }
 
+  .live-commentary {
+    background: transparent;
+  }
+
+  .progress-turn {
+    background: transparent;
+  }
+
   .entry-heading {
     display: flex;
     align-items: baseline;
@@ -253,6 +349,33 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     font-size: 0.875em;
   }
 
+  .answer-history {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.25rem 0.75rem;
+    margin-block: 0.2rem 0.35rem;
+  }
+
+  .file-changes {
+    margin-block: 0.5rem;
+    padding: 0.5rem 0.625rem;
+    background: var(--theme-surface-subtle);
+    border-inline-start: 0.25rem solid var(--theme-success);
+    border-radius: 0.375rem;
+  }
+
+  .file-changes > strong {
+    font-size: 0.875em;
+  }
+
+  .file-changes ul {
+    display: grid;
+    gap: 0.15rem;
+    margin: 0.25rem 0 0;
+    padding-inline-start: 1.25rem;
+  }
+
   .commentary-content {
     margin-block: 0.25rem 0.5rem;
   }