fix(tui): show queued prompt admissions (#34771)

packages/tui/src/context/data.tsx

@@ -194,6 +194,19 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
         case "session.next.prompted": {
           setStore("session", "status", event.data.sessionID, "running")
           message.update(event.data.sessionID, (draft, index) => {
+            const position = index.get(event.data.messageID)
+            const existing = position === undefined ? undefined : draft[position]
+            if (existing?.type === "user") {
+              existing.text = event.data.prompt.text
+              existing.files = event.data.prompt.files
+              existing.agents = event.data.prompt.agents
+              existing.time.created = event.data.timestamp
+              if (existing.metadata?.queued === true) {
+                delete existing.metadata.queued
+                if (Object.keys(existing.metadata).length === 0) existing.metadata = undefined
+              }
+              return
+            }
             message.append(draft, index, {
               id: event.data.messageID,
               type: "user",
@@ -206,6 +219,17 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
           break
         }
         case "session.next.prompt.admitted":
+          message.update(event.data.sessionID, (draft, index) => {
+            message.append(draft, index, {
+              id: event.data.messageID,
+              type: "user",
+              text: event.data.prompt.text,
+              files: event.data.prompt.files,
+              agents: event.data.prompt.agents,
+              metadata: { queued: true },
+              time: { created: event.data.timestamp },
+            })
+          })
           break
         case "session.next.context.updated":
           message.update(event.data.sessionID, (draft, index) => {
@@ -590,15 +614,21 @@ export const { use: useData, provider: DataProvider } = createSimpleContext({
             return position === undefined ? undefined : messages?.[position]
           },
           async refresh(sessionID: string) {
+            const live = [...(store.session.message[sessionID] ?? [])]
             setStore("session", "message", sessionID, [])
             messageIndex.set(sessionID, new Map())
             const loaded = mutable(
               (await sdk.api.message.list({ sessionID, limit: 200, order: "desc" })).data,
             ).toReversed()
-            const live = store.session.message[sessionID] ?? []
+            const loadedIDs = new Set(loaded.map((message) => message.id))
             const liveByID = new Map(live.map((message) => [message.id, message]))
-            const messages = [...loaded.map((message) => liveByID.get(message.id) ?? message), ...live]
-              .filter((message, index, messages) => messages.findIndex((item) => item.id === message.id) === index)
+            const messages = [
+              ...loaded.map((message) => {
+                if (message.type === "user") return message
+                return liveByID.get(message.id) ?? message
+              }),
+              ...live.filter((message) => !loadedIDs.has(message.id)),
+            ]
               .toSorted((a, b) => a.time.created - b.time.created)
             messageIndex.set(sessionID, new Map(messages.map((message, index) => [message.id, index])))
             setStore("session", "message", sessionID, messages)

packages/tui/src/routes/session/index.tsx

@@ -22,7 +22,7 @@ import { useData } from "../../context/data"
 import { SplitBorder } from "../../ui/border"
 import { useTuiPaths, useTuiTerminalEnvironment } from "../../context/runtime"
 import { Spinner } from "../../component/spinner"
-import { createSyntaxStyleMemo, generateSubtleSyntax, useTheme } from "../../context/theme"
+import { createSyntaxStyleMemo, generateSubtleSyntax, selectedForeground, useTheme } from "../../context/theme"
 import { BoxRenderable, ScrollBoxRenderable, addDefaultParsers, TextAttributes, RGBA } from "@opentui/core"
 import { Prompt, type PromptRef } from "../../component/prompt"
 import type {
@@ -1319,11 +1319,15 @@ function RevertMessage(props: {
 
 function UserMessage(props: { message: SessionMessageUser }) {
   const ctx = use()
+  const data = useData()
   const local = useLocal()
   const files = createMemo(() => props.message.files ?? [])
   const { theme } = useTheme()
   const [hover, setHover] = createSignal(false)
-  const color = createMemo(() => local.agent.color(useData().session.get(ctx.sessionID)?.agent ?? "build"))
+  const color = createMemo(() => local.agent.color(data.session.get(ctx.sessionID)?.agent ?? "build"))
+  const queued = createMemo(() => props.message.metadata?.queued === true)
+  const queuedFg = createMemo(() => selectedForeground(theme, color()))
+  const metadataVisible = createMemo(() => queued() || ctx.showTimestamps())
   const dialog = useDialog()
   const renderer = useRenderer()
 
@@ -1356,7 +1360,7 @@ function UserMessage(props: { message: SessionMessageUser }) {
           <Show when={files().length}>
             <box
               flexDirection="row"
-              paddingBottom={ctx.showTimestamps() ? 1 : 0}
+              paddingBottom={metadataVisible() ? 1 : 0}
               paddingTop={1}
               gap={1}
               flexWrap="wrap"
@@ -1379,9 +1383,18 @@ function UserMessage(props: { message: SessionMessageUser }) {
               </For>
             </box>
           </Show>
-          <Show when={ctx.showTimestamps()}>
+          <Show
+            when={queued()}
+            fallback={
+              <Show when={ctx.showTimestamps()}>
+                <text fg={theme.textMuted}>
+                  <span style={{ fg: theme.textMuted }}>{Locale.todayTimeOrDateTime(props.message.time.created)}</span>
+                </text>
+              </Show>
+            }
+          >
             <text fg={theme.textMuted}>
-              <span style={{ fg: theme.textMuted }}>{Locale.todayTimeOrDateTime(props.message.time.created)}</span>
+              <span style={{ bg: color(), fg: queuedFg(), bold: true }}> QUEUED </span>
             </text>
           </Show>
         </box>

packages/tui/src/routes/session/rows.ts

@@ -116,6 +116,7 @@ export function createSessionRows(sessionID: Accessor<string>) {
     if (event.data.sessionID === sessionID()) appendMessage(event.data.messageID)
   }
   const subscriptions = [
+    data.on("session.next.prompt.admitted", message),
     data.on("session.next.prompted", message),
     data.on("session.next.context.updated", message),
     data.on("session.next.synthetic", message),