@dotdrelle/wiki-manager 0.14.12 → 0.14.16

package/src/runtime/runner.js

@@ -7,6 +7,8 @@ import { createAssignmentManager } from '../orchestrator/assignmentManager.js';
 import { createAttemptManager } from '../orchestrator/attemptManager.js';
 import { createBudgetManager, BudgetExceededError } from '../orchestrator/budgetManager.js';
 import { createDispatcher } from '../orchestrator/dispatcher.js';
+import { approvalRequestForTask } from '../orchestrator/approvalPolicy.js';
+import { PENDING_STATUSES, tasksAwaitingApproval } from '../orchestrator/dependencyResolver.js';
 import { assertValidatedFragment } from '../orchestrator/planValidator.js';
 import { createResultAggregator } from '../orchestrator/resultAggregator.js';
 import { drainActive, resolvePlanConcurrency, startReadyTasks } from '../orchestrator/scheduler.js';
@@ -139,9 +141,14 @@ export async function runRuntimeAgenticWorkflow(agent, session, input, {
   // loop would re-ingest this run's own turns and duplicate them.
   const runConversationSeed = conversationSeed(session, currentInput);
 
+  // The conversational loop path ends with the agent's own natural-language
+  // reply; the deterministic parallel scheduler has no agent voice, so only
+  // that path gets a synthesized outcome summary (announceRunOutcome).
+  let usedParallelScheduler = false;
   while (true) {
     sanitizeSessionPlanForExecution(session, runId);
-    const result = shouldUseParallelScheduler(session.headlessPlan)
+    usedParallelScheduler = shouldUseParallelScheduler(session.headlessPlan);
+    const result = usedParallelScheduler
       ? await runRuntimeParallelPlan(agent, session, input, {
         signal,
         timeoutMs,
@@ -188,6 +195,7 @@ export async function runRuntimeAgenticWorkflow(agent, session, input, {
         emitRuntimeLog(session, 'runtime: run ended by user cancellation (no replan)');
         return { ok: false, result, cancelled: true };
       }
+      if (usedParallelScheduler) await announceRunOutcome(session, { runId, ok: false, signal });
       dispatchAgentEvent(session, createAgentEvent('run_error', {
         origin: 'runtime',
         runId,
@@ -267,6 +275,7 @@ export async function runRuntimeAgenticWorkflow(agent, session, input, {
       }
     }
 
+    if (usedParallelScheduler) await announceRunOutcome(session, { runId, ok: true, signal });
     dispatchAgentEvent(session, createAgentEvent('run_done', {
       origin: 'runtime',
       runId,
@@ -276,6 +285,62 @@ export async function runRuntimeAgenticWorkflow(agent, session, input, {
   }
 }
 
+// Emit ONE natural-language Donna message summarizing how the run finished,
+// instead of the client streaming a per-job line for every task. Uses the
+// workspace LLM to phrase it, degrading to a plain templated fact line if the
+// LLM is unavailable or errors — the run must never block on this summary.
+async function announceRunOutcome(session, { runId, ok, signal = null } = {}) {
+  const plan = Array.isArray(session.headlessPlan) ? session.headlessPlan : [];
+  if (plan.length === 0) return;
+  let failed = 0;
+  let cancelled = 0;
+  let completed = 0;
+  let firstError = null;
+  for (const step of plan) {
+    const status = String(step?.status ?? '').toLowerCase();
+    if (['failed', 'error', 'stalled'].includes(status)) {
+      failed += 1;
+      firstError ??= String(
+        step?.error?.message ?? step?.error?.code ?? step?.error
+        ?? step?.result?.error?.message ?? step?.result?.error?.code ?? '',
+      ).trim() || null;
+    } else if (['cancelled', 'canceled'].includes(status)) {
+      cancelled += 1;
+    } else if (['done', 'complete', 'completed', 'success', 'succeeded'].includes(status)) {
+      completed += 1;
+    }
+  }
+  const total = plan.length;
+  const factLine = ok && failed === 0
+    ? `Plan terminé avec succès — ${completed}/${total} tâche(s) réussie(s).`
+    : `Plan terminé en erreur — ${completed}/${total} tâche(s) réussie(s), ${failed} en erreur${cancelled ? `, ${cancelled} annulée(s)` : ''}.${firstError ? ` Première erreur : ${firstError}.` : ''}`;
+  let content = factLine;
+  const llm = session.llm;
+  if (llm && typeof llm.completeWithTools === 'function') {
+    try {
+      const result = await llm.completeWithTools({
+        system: [
+          'You are Donna, an orchestration assistant reporting a run result to the user.',
+          'Rephrase the outcome facts in ONE short, natural sentence, in the same language as the facts.',
+          'No lists, no headers, no raw job ids — just a concise human summary.',
+        ].join('\n'),
+        tools: [],
+        messages: [{ role: 'user', content: `Run outcome facts:\n${factLine}` }],
+        signal,
+      });
+      const phrased = String(result?.content ?? '').trim();
+      if (phrased) content = phrased;
+    } catch {
+      // Degrade to the templated fact line — never fail the run on the summary.
+    }
+  }
+  dispatchAgentEvent(session, createAgentEvent('assistant_message', {
+    origin: 'runtime',
+    runId,
+    payload: { content },
+  }));
+}
+
 export async function runRuntimeParallelPlan(agent, session, input, {
   signal = null,
   timeoutMs,
@@ -328,7 +393,6 @@ export async function runRuntimeParallelPlan(agent, session, input, {
   sanitizeSessionPlanForExecution(session, runId);
   ensurePlanProjection(session, runId);
   emitRuntimeLog(session, `scheduler: parallel plan enabled (concurrency ${limit})`);
-  let approvalNoticeSent = false;
   // Interactive approvals do NOT expire: the user has /approve, "valide
   // tout", /cancel and /run kill — an arbitrary timer only created mystery
   // failures. A deadline exists only when explicitly configured (headless
@@ -431,26 +495,60 @@ export async function runRuntimeParallelPlan(agent, session, input, {
           emitRuntimeLog(session, `scheduler: budget exceeded (${exceeded.reason})`);
           return { ok: false, budgetExceeded: true, reason: exceeded.reason, budget: exceeded, completed: sessionActivities(session), failures };
         }
-        const needingApproval = pending.filter((step) => step.requiresApproval === true);
+        // Only wait for a human when approval is the sole remaining blocker.
+        // A task whose dependency failed cannot become runnable by approving
+        // it; treating it as an approval wait leaves the run alive forever.
+        const approvalContext = {
+          runId,
+          workspace: session.workspace ?? null,
+          planRevision: session.planRevision ?? session.agentProjection?.planRevision ?? null,
+          tasks: session.headlessPlan ?? [],
+        };
+        // One snapshot of the approvals list, reused for both the
+        // awaiting-approval computation and the per-task dedup below so the two
+        // can never diverge mid-iteration.
+        const approvals = session.agentProjection?.approvals ?? session.approvals ?? [];
+        const needingApproval = tasksAwaitingApproval(approvalContext, { approvals });
         if (needingApproval.length > 0) {
           // The plan is only blocked on a HUMAN decision — wait for it
           // (bounded) instead of declaring the run stalled. Announce once in
           // the chat: users cannot approve what they never saw asked.
-          if (!approvalNoticeSent) {
-            approvalNoticeSent = true;
+          const newlyRequested = [];
+          for (const task of needingApproval) {
+            const taskId = String(task.id ?? task.taskId ?? task.step ?? '');
+            const alreadyRequested = approvals.some((approval) =>
+              approval.status === 'pending_approval'
+              && String(approval.taskId ?? approval.itemId ?? '') === taskId
+              && Number(approval.planRevision ?? approvalContext.planRevision) === Number(approvalContext.planRevision));
+            if (alreadyRequested) continue;
+            newlyRequested.push(task);
+            const request = approvalRequestForTask(task, {
+              runId,
+              workspaceId: session.workspace ?? null,
+              planRevision: approvalContext.planRevision,
+            });
+            dispatchAgentEvent(session, createAgentEvent('approval.requested', {
+              origin: 'runtime',
+              runId,
+              taskId: request.taskId,
+              workspace: session.workspace ?? null,
+              payload: request,
+            }));
+          }
+          if (newlyRequested.length > 0) {
             dispatchAgentEvent(session, createAgentEvent('assistant_message', {
               origin: 'runtime',
               runId,
               payload: {
                 content: [
-                  `⏸ Approbation requise avant exécution : ${needingApproval.length} tâche(s) mutante(s) en attente.`,
-                  ...needingApproval.slice(0, 5).map((step) => `  - ${step.description ?? step.id}`),
-                  needingApproval.length > 5 ? `  … et ${needingApproval.length - 5} autre(s).` : null,
+                  `⏸ Approbation requise avant exécution : ${newlyRequested.length} tâche(s) mutante(s) en attente.`,
+                  ...newlyRequested.slice(0, 5).map((step) => `  - ${step.description ?? step.id}`),
+                  newlyRequested.length > 5 ? `  … et ${newlyRequested.length - 5} autre(s).` : null,
                   'Réponds « valide tout » (ou tape /approve) pour lancer, « annule » pour abandonner.',
                 ].filter(Boolean).join('\n'),
               },
             }));
-            emitRuntimeLog(session, `scheduler: waiting for approval (${needingApproval.length} task(s))`);
+            emitRuntimeLog(session, `scheduler: waiting for approval (${newlyRequested.length} new task(s))`);
           }
           if (Date.now() < approvalDeadline) {
             await new Promise((resolveDelay) => setTimeout(resolveDelay, 500));
@@ -469,7 +567,9 @@ export async function runRuntimeParallelPlan(agent, session, input, {
           }));
           return { ok: false, stalled: true, reason: 'awaiting_approval', completed: sessionActivities(session), failures };
         }
-        const reason = pending.every((step) => approvalWaitingStatus(step.status)) ? 'awaiting_approval' : 'no_ready_plan_task';
+        // Any genuine approval-only block returned above. Remaining tasks are
+        // unschedulable for another reason (most commonly a failed dependency).
+        const reason = 'no_ready_plan_task';
         emitRuntimeLog(session, `scheduler: stalled (${reason})`);
         return { ok: false, stalled: true, reason, completed: sessionActivities(session), failures };
       }
@@ -585,11 +685,7 @@ function abortCancelledActiveTasks(session, active) {
 }
 
 function pendingSchedulerStatus(status) {
-  return ['pending', 'pending_approval', 'waiting_approval'].includes(String(status ?? ''));
-}
-
-function approvalWaitingStatus(status) {
-  return ['pending_approval', 'waiting_approval'].includes(String(status ?? ''));
+  return PENDING_STATUSES.has(String(status ?? ''));
 }
 
 // Scope the evaluator/replanner's view of "completed" activities to the
@@ -607,8 +703,25 @@ function failedTaskActivities(session) {
   return failedKeys.size > 0 ? all.filter((activity) => failedKeys.has(activity.key)) : all;
 }
 
-function ensurePlanProjection(session, runId) {
-  if (!session.headlessPlan || session.agentProjection?.plan) return;
+// Identity of a plan as displayed: the ordered list of task ids. Two plans
+// with the same tasks in the same order are the same plan for projection
+// purposes (statuses update through plan_step_updated, not a re-projection).
+function planIdentitySignature(plan) {
+  return Array.isArray(plan) ? plan.map(planTaskId).join('|') : '';
+}
+
+export function ensurePlanProjection(session, runId) {
+  if (!session.headlessPlan) return;
+  // Re-emit plan_set not only when the projection has no plan yet, but also
+  // when the session plan has CHANGED shape since the last projection. A
+  // chained run (e.g. /skill pipeline) sets a fresh headlessPlan for step 2
+  // while the projection still holds step 1's plan; the old guard
+  // (`agentProjection?.plan` truthy → skip) then left the UI stuck on the
+  // step 1 plan. Compare task identities and re-project when they differ.
+  const projected = session.agentProjection?.plan ?? null;
+  if (projected && planIdentitySignature(projected) === planIdentitySignature(session.headlessPlan)) {
+    return;
+  }
   dispatchAgentEvent(session, createAgentEvent('plan_set', {
     origin: 'runtime',
     runId,

package/src/runtime/runner.test.js

@@ -1,7 +1,38 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
 import { createAgentEvent, dispatchAgentEvent } from '../core/agentEvents.js';
-import { evaluateRuntimeRun, finishRuntimeRun, materializeTaskInputs, replanRuntimeRun, runRuntimeAgenticWorkflow, runRuntimeParallelPlan, shouldUseParallelScheduler } from './runner.js';
+import { ensurePlanProjection, evaluateRuntimeRun, finishRuntimeRun, materializeTaskInputs, replanRuntimeRun, runRuntimeAgenticWorkflow, runRuntimeParallelPlan, shouldUseParallelScheduler } from './runner.js';
+
+test('ensurePlanProjection re-projects when the chained plan changes shape (step 2)', () => {
+  const session = { agentEvents: [], agentProjection: null };
+  // Step 1: a fresh plan is projected.
+  session.headlessPlan = [{ id: 'a', description: 'ingest', status: 'pending' }];
+  ensurePlanProjection(session, 'run-1');
+  assert.deepEqual(
+    (session.agentProjection?.plan ?? []).map((step) => step.id),
+    ['a'],
+  );
+
+  // Step 1 completes in place — same plan shape, no re-projection needed.
+  session.headlessPlan = [{ id: 'a', description: 'ingest', status: 'done' }];
+  const eventsAfterStep1 = session.agentEvents.length;
+  ensurePlanProjection(session, 'run-1');
+  assert.equal(session.agentEvents.length, eventsAfterStep1, 'unchanged shape must not re-emit plan_set');
+
+  // Step 2 adds a task — the projection must now reflect the new plan.
+  session.headlessPlan = [
+    { id: 'a', description: 'ingest', status: 'done' },
+    { id: 'b', description: 'build', status: 'pending' },
+  ];
+  ensurePlanProjection(session, 'run-1');
+  assert.deepEqual(
+    (session.agentProjection?.plan ?? []).map((step) => step.id),
+    ['a', 'b'],
+    'step 2 plan must be projected instead of staying on step 1',
+  );
+  // Completed step 1 status is preserved through the re-projection.
+  assert.equal(session.agentProjection.plan.find((step) => step.id === 'a').status, 'done');
+});
 
 test('validated tasks waiting for approval stay in the scheduler instead of falling back to Donna', () => {
   assert.equal(shouldUseParallelScheduler([
@@ -781,6 +812,36 @@ test('runRuntimeParallelPlan fails cleanly when scheduler budget is exceeded', a
   assert.equal(session.headlessPlan[0].status, 'cancelled');
 });
 
+test('runRuntimeParallelPlan does not wait for approval behind a failed dependency', async () => {
+  const session = {
+    workspace: 'demo-workspace',
+    mcp: { tools: {} },
+    agentEvents: [],
+    headlessPlan: [
+      { ...plannedDoctorTask('a', []), status: 'failed' },
+      {
+        ...plannedDoctorTask('b', ['a']),
+        status: 'waiting_approval',
+        requiresApproval: true,
+        approvalClass: 'mutation',
+      },
+    ],
+  };
+
+  const result = await runRuntimeParallelPlan(
+    { invoke: async () => assert.fail('blocked work must not invoke an agent') },
+    session,
+    'Apply after failed plan',
+    { runId: 'run-failed-dependency', timeoutMs: 1000, maxTurns: 1 },
+  );
+
+  assert.equal(result.ok, false);
+  assert.equal(result.stalled, true);
+  assert.equal(result.reason, 'no_ready_plan_task');
+  assert.equal(session.agentEvents.some((event) => event.type === 'assistant_message'
+    && /Approbation requise/.test(event.payload?.content ?? '')), false);
+});
+
 test('runRuntimeParallelPlan retries a retryable task on a fallback agent', async () => {
   const executeServers = [];
   const session = {

package/src/runtime/server.js

@@ -6,6 +6,8 @@ import { normalizePlanPatch, rebasePlanPatch } from '../core/planPatch.js';
 import { validateContractInDev } from '../contracts/schemas.js';
 import { runtimeTokenFromEnv } from './auth.js';
 import { controlMessage } from './controlMessages.js';
+import { tasksAwaitingApproval } from '../orchestrator/dependencyResolver.js';
+import { approvalClassForTask } from '../orchestrator/approvalPolicy.js';
 
 export function startRuntimeServer({
   host = '127.0.0.1',
@@ -679,10 +681,19 @@ function readOnlyControlResponse(kind, classification, status, explanation, { ac
   };
 }
 
-function approvalRequestFromStatus(status) {
+export function approvalRequestFromStatus(status) {
   const runId = status.runId ?? status.runs?.find((run) => run.status === 'running' || run.status === 'pending_approval')?.id ?? null;
   const pending = (status.approvals ?? []).filter((approval) => approval.status === 'pending_approval');
-  const classes = [...new Set(pending.flatMap((approval) => readOptionalList(approval.approvalClasses ?? approval.approvalClass)))];
+  const waitingTasks = tasksAwaitingApproval({
+    runId,
+    workspace: status.workspace ?? null,
+    planRevision: status.planRevision ?? null,
+    tasks: status.plan ?? [],
+  }, { approvals: status.approvals ?? [] });
+  const classes = [...new Set([
+    ...pending.flatMap((approval) => readOptionalList(approval.approvalClasses ?? approval.approvalClass)),
+    ...waitingTasks.map((task) => approvalClassForTask(task)),
+  ].filter(Boolean))];
   return {
     workspace: status.workspace ?? null,
     workspaceId: status.workspace ?? null,

package/src/runtime/server.test.js

@@ -2,7 +2,7 @@ import assert from 'node:assert/strict';
 import test from 'node:test';
 import { createAgentEvent, dispatchAgentEvent } from '../core/agentEvents.js';
 import { createInteractiveSession, ensureInteractiveAssistantMessage } from '../cli/wiki-manager.js';
-import { runtimeState, startRuntimeServer as startRuntimeServerImpl } from './server.js';
+import { approvalRequestFromStatus, runtimeState, startRuntimeServer as startRuntimeServerImpl } from './server.js';
 
 // Most server tests exercise endpoint behavior rather than authentication. Keep
 // them independent from a developer's WIKI_MANAGER_RUNTIME_TOKEN environment;
@@ -11,6 +11,35 @@ function startRuntimeServer(options) {
   return startRuntimeServerImpl({ token: '', ...options });
 }
 
+test('approval fallback derives classes from waiting tasks when the approval queue is missing', () => {
+  const request = approvalRequestFromStatus({
+    workspace: 'acme',
+    runId: 'run-1',
+    planRevision: 4,
+    approvals: [],
+    plan: [
+      { id: 'apply', status: 'waiting_approval', requiresApproval: true, approvalClass: 'mutation' },
+      { id: 'export', status: 'waiting_approval', requiresApproval: true, approvalClass: 'external-write' },
+    ],
+  });
+
+  assert.deepEqual(request.approvalClasses, ['mutation', 'external-write']);
+  assert.equal(request.scope, 'run');
+  assert.equal(request.planRevision, 4);
+});
+
+test('approval fallback excludes tasks blocked by failed dependencies', () => {
+  const request = approvalRequestFromStatus({
+    workspace: 'acme', runId: 'run-1', planRevision: 4, approvals: [],
+    plan: [
+      { id: 'failed-source', status: 'failed' },
+      { id: 'blocked-write', status: 'waiting_approval', requiresApproval: true, approvalClass: 'external-write', dependsOn: ['failed-source'] },
+    ],
+  });
+
+  assert.deepEqual(request.approvalClasses, ['default']);
+});
+
 test('interactive runtime sessions isolate canonical run state', () => {
   const mcp = { wiki: { status: 'connected' } };
   const session = createInteractiveSession({ session: {

package/src/shell/FileEditorDialog.tsx

@@ -83,9 +83,9 @@ export function FileEditorDialog(props: {
             {(message) => <text height={1} fg="#F87171">{message()}</text>}
           </Show>
           <box height={1} flexDirection="row">
-            <text fg="#111318" bg="#8BD5CA"> Save Ctrl+S </text>
+            <text fg="#111318" bg="#8BD5CA" onMouseUp={save}> Save Ctrl+S </text>
             <text fg="#7F8C8D">  </text>
-            <text fg="#D6DEE8" bg="#4B5563"> Cancel Esc </text>
+            <text fg="#D6DEE8" bg="#4B5563" onMouseUp={props.onCancel}> Cancel Esc </text>
           </box>
         </box>
       )}

package/src/shell/LeftPane.tsx

@@ -1,5 +1,6 @@
 /** @jsxImportSource @opentui/solid */
 import { For, createEffect, createMemo, createSignal, onCleanup } from 'solid-js';
+import { StyledText, bg as styledBg, fg as styledFg, link as styledLink } from '@opentui/core';
 import { colorForRenderedLine, helpCommandParts, keyValueParts, renderPlainMarkdown } from './renderer';
 import { httpLinkParts, wrapHttpLinks } from './externalLinks.js';
 
@@ -49,8 +50,20 @@ function wrapLine(line: string, width: number) {
 }
 
 type Segment = { text: string; color: string; width?: number; bg?: string; url?: string };
+
+function styledSegments(segments: Segment[]) {
+  return new StyledText(segments.map((segment) => {
+    const text = segment.width ? segment.text.padEnd(segment.width) : segment.text;
+    let chunk = styledFg(segment.color)(text);
+    if (segment.bg) chunk = styledBg(segment.bg)(chunk);
+    if (segment.url) chunk = styledLink(segment.url)(chunk);
+    return chunk;
+  }));
+}
 type RenderedLine = {
   segments: Segment[];
+  role?: string;
+  userBubbleWidth?: number;
   status?: boolean;
   statusLeft?: string;
   statusRight?: string;
@@ -376,19 +389,35 @@ function statusColumns(line: string): { left: string; right: string } {
   return { left: left || ' ', right };
 }
 
+// Consecutive messages that render under the same header ([shell]/[user]/
+// [donna]) are grouped: only the first one shows the label + separator, so a
+// run of same-type messages doesn't repeat the header on every entry.
+function headerGroupKey(role: string) {
+  return isDonnaRole(role) ? 'donna' : roleLabel(role);
+}
+
 function conversationLines(messages: Array<{ role: string; content: string }>, columns: number): RenderedLine[] {
-  return messages.flatMap((message) => {
+  return messages.flatMap((message, index) => {
     const raw = String(message.content || '');
+    const previous = index > 0 ? messages[index - 1] : null;
+    const showHeader = !previous || headerGroupKey(previous.role) !== headerGroupKey(message.role);
+    const headerLines: RenderedLine[] = showHeader
+      ? [
+          { segments: messageHeaderSegments(message.role, columns), copyContent: raw },
+          { segments: [{ text: ' ', color: '#D6DEE8' }] },
+        ]
+      : [];
+    const contentColumns = message.role === 'user' ? Math.max(12, Math.floor(columns * 0.6) - 2) : columns;
     if (isStatusOutput(message)) {
-      return [
-        { segments: messageHeaderSegments(message.role, columns), copyContent: raw },
-        { segments: [{ text: ' ', color: '#D6DEE8' }] },
+      const statusLines: RenderedLine[] = [
+        ...headerLines,
         ...raw.split('\n').map((line) => {
           const { left, right } = statusColumns(line || ' ');
           return { status: true, statusLeft: left, statusRight: right, segments: [] };
         }),
         { segments: [{ text: ' ', color: '#D6DEE8' }] },
       ];
+      return statusLines.map((line) => ({ ...line, role: message.role }));
     }
     let inFence = false;
     const lines: Array<{ text: string; isCode: boolean }> = [];
@@ -399,12 +428,19 @@ function conversationLines(messages: Array<{ role: string; content: string }>, c
       if (/^\s*(`{3,}|~{3,})/.test(line)) { inFence = !inFence; continue; }
       lines.push({ text: line, isCode: inFence });
     }
-    return [
-      { segments: messageHeaderSegments(message.role, columns), copyContent: raw },
-      { segments: [{ text: ' ', color: '#D6DEE8' }] },
-      ...renderMarkdownLines(lines, message.role, columns),
+    const renderedBody = renderMarkdownLines(lines, message.role, contentColumns);
+    const userBubbleWidth = message.role === 'user'
+      ? Math.min(
+          Math.max(1, ...renderedBody.map((line) => line.segments.reduce((sum, segment) => sum + segment.text.length, 0))) + 2,
+          Math.max(12, Math.floor(columns * 0.6)),
+        )
+      : undefined;
+    const bodyLines: RenderedLine[] = [
+      ...headerLines,
+      ...renderedBody.map((line) => ({ ...line, userBubbleWidth })),
       { segments: [{ text: ' ', color: '#D6DEE8' }] },
     ];
+    return bodyLines.map((line) => ({ ...line, role: message.role }));
   });
 }
 
@@ -462,6 +498,21 @@ export function ConversationView(props: {
               </For>
               <text fg="#4B5563" content={COPY_BTN} onMouseUp={() => props.onCopy?.(line.copyContent!)} />
             </box>
+          ) : line.role === 'user' && line.userBubbleWidth ? (
+            <box height={1} flexDirection="row" overflow="hidden">
+              <box flexGrow={1} />
+              <box
+                width={line.userBubbleWidth}
+                height={1}
+                flexDirection="row"
+                flexShrink={1}
+                justifyContent="flex-start"
+                paddingX={1}
+                overflow="hidden"
+              >
+                <text>{styledSegments(line.segments)}</text>
+              </box>
+            </box>
           ) : line.status ? (
             <box height={1} flexDirection="row" gap={2} overflow="hidden">
               <box
@@ -499,13 +550,7 @@ export function ConversationView(props: {
             </box>
           ) : (
             <box height={1} flexDirection="row" overflow="hidden">
-              <For each={line.segments}>
-                {(seg: Segment) => (
-                  <text width={seg.width} fg={seg.color} bg={seg.bg}>
-                    {seg.url ? <a href={seg.url}>{seg.text}</a> : seg.text}
-                  </text>
-                )}
-              </For>
+              <text>{styledSegments(line.segments)}</text>
             </box>
           )
         )}