@open-mercato/ui 0.6.1-develop.3291.1.6fad645fd0 → 0.6.1

package/src/ai/AiChat.tsx

@@ -49,6 +49,7 @@ import {
 } from './useAiChat'
 import { useAiChatUpload } from './useAiChatUpload'
 import { useAiShortcuts } from './useAiShortcuts'
+import { LoopTracePanel, type LoopTracePanelTrace } from './LoopTracePanel'
 
 // Cap inline previews so we do not blow past localStorage quota (~5MB on most
 // browsers). Images larger than this still upload + send to the LLM as inline
@@ -95,7 +96,8 @@ function writeModelPickerValue(agentId: string, value: ModelPickerValue | null):
 
 interface ModelsApiResponse {
   agentId: string
-  allowRuntimeModelOverride: boolean
+  allowRuntimeOverride: boolean
+  allowRuntimeModelOverride?: boolean
   defaultProviderId: string | null
   defaultModelId: string | null
   defaultProviderName?: string | null
@@ -105,12 +107,13 @@ interface ModelsApiResponse {
 
 function useAgentModels(agent: string): {
   providers: ModelPickerProvider[]
+  allowRuntimeOverride: boolean
   allowRuntimeModelOverride: boolean
   defaultLabel: string | null
   loaded: boolean
 } {
   const [providers, setProviders] = React.useState<ModelPickerProvider[]>([])
-  const [allowRuntimeModelOverride, setAllowRuntimeModelOverride] = React.useState(false)
+  const [allowRuntimeOverride, setAllowRuntimeOverride] = React.useState(false)
   const [defaultLabel, setDefaultLabel] = React.useState<string | null>(null)
   const [loaded, setLoaded] = React.useState(false)
 
@@ -123,7 +126,9 @@ function useAgentModels(agent: string): {
         setLoaded(true)
         return
       }
-      setAllowRuntimeModelOverride(result.result.allowRuntimeModelOverride)
+      const effectiveAllowRuntimeOverride =
+        result.result.allowRuntimeOverride ?? result.result.allowRuntimeModelOverride ?? false
+      setAllowRuntimeOverride(effectiveAllowRuntimeOverride)
       setProviders(result.result.providers)
       setDefaultLabel(
         result.result.defaultProviderName && result.result.defaultModelName
@@ -136,19 +141,13 @@ function useAgentModels(agent: string): {
     })
   }, [agent])
 
-  return { providers, allowRuntimeModelOverride, defaultLabel, loaded }
-}
-
-function firstAvailableModelPickerValue(
-  providers: ModelPickerProvider[],
-): ModelPickerValue | null {
-  for (const provider of providers) {
-    const model = provider.models[0]
-    if (model) {
-      return { providerId: provider.id, modelId: model.id }
-    }
+  return {
+    providers,
+    allowRuntimeOverride,
+    allowRuntimeModelOverride: allowRuntimeOverride,
+    defaultLabel,
+    loaded,
   }
-  return null
 }
 
 function isModelPickerValueAvailable(
@@ -263,6 +262,13 @@ export interface AiChatProps {
    * `debug` is falsy.
    */
   debugPromptSections?: AiChatDebugPromptSection[]
+  /**
+   * Optional loop trace from the last completed turn. When present and
+   * `debug` is truthy, renders a `LoopTracePanel` inside the debug panel.
+   * Populated by the host from the dispatcher SSE `loop-finish` event
+   * (wired in l4.4). Ignored when `debug` is falsy.
+   */
+  loopTrace?: LoopTracePanelTrace
   /** Suggested prompts shown in the empty / welcome state. */
   suggestions?: AiChatSuggestion[]
   /** Context items shown as pills above the transcript (e.g. selected products). */
@@ -381,6 +387,10 @@ function ToolCallList({ toolCalls }: { toolCalls: AiChatToolCallSnapshot[] }) {
   if (!toolCalls || toolCalls.length === 0) return null
   return (
     <div className="space-y-1" data-ai-chat-tool-calls="">
+      <div className="flex items-center justify-between px-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+        <span>{t('ai_assistant.chat.agentTasksTitle', 'Agent tasks')}</span>
+        <span>{toolCalls.length}</span>
+      </div>
       {toolCalls.map((call) => {
         const isOpen = openId === call.id
         const isError = call.state === 'error'
@@ -828,6 +838,7 @@ export function AiChat({
   uiParts: uiPartsProp,
   debugTools,
   debugPromptSections,
+  loopTrace,
   conversationId,
   suggestions,
   contextItems,
@@ -892,6 +903,7 @@ export function AiChat({
 
   const {
     providers: modelProviders,
+    allowRuntimeOverride,
     allowRuntimeModelOverride,
     defaultLabel: modelDefaultLabel,
     loaded: modelProvidersLoaded,
@@ -902,15 +914,15 @@ export function AiChat({
   )
 
   const effectiveModelPickerValue = React.useMemo(() => {
-    if (!modelProvidersLoaded || !allowRuntimeModelOverride || modelProviders.length === 0) {
+    if (!modelProvidersLoaded || !allowRuntimeOverride || modelProviders.length === 0) {
       return null
     }
     if (modelPickerValue && isModelPickerValueAvailable(modelPickerValue, modelProviders)) {
       return modelPickerValue
     }
-    return firstAvailableModelPickerValue(modelProviders)
+    return null
   }, [
-    allowRuntimeModelOverride,
+    allowRuntimeOverride,
     modelPickerValue,
     modelProviders,
     modelProvidersLoaded,
@@ -930,9 +942,8 @@ export function AiChat({
       return
     }
     if (modelPickerValue && !isModelPickerValueAvailable(modelPickerValue, modelProviders)) {
-      const fallback = firstAvailableModelPickerValue(modelProviders)
-      setModelPickerValue(fallback)
-      writeModelPickerValue(agent, fallback)
+      setModelPickerValue(null)
+      writeModelPickerValue(agent, null)
     }
   }, [
     agent,
@@ -979,7 +990,9 @@ export function AiChat({
   //   (d) streaming, and the last visible event was a finished tool call
   //       — the model is reasoning about the result before emitting more
   //       text or kicking off the next tool
-  //   (e) streaming, but no delta has landed in the last ~300 ms (idle gap)
+  // Once visible text/reasoning exists and no tool is pending, hide the
+  // placeholder even if the network stream stays open for a tail event. That
+  // avoids showing "Thinking..." under an already usable answer.
   const lastAssistant = React.useMemo(() => {
     for (let index = chat.messages.length - 1; index >= 0; index -= 1) {
       const candidate = chat.messages[index]
@@ -1014,29 +1027,16 @@ export function AiChat({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lastAssistant])
 
-  const lastStreamUpdateRef = React.useRef<number>(Date.now())
   const lastSnapshotRef = React.useRef<string>('')
   const [, setStreamTick] = React.useState(0)
 
   React.useEffect(() => {
     if (assistantStreamSnapshot !== lastSnapshotRef.current) {
       lastSnapshotRef.current = assistantStreamSnapshot
-      lastStreamUpdateRef.current = Date.now()
       setStreamTick((value) => value + 1)
     }
   }, [assistantStreamSnapshot])
 
-  React.useEffect(() => {
-    if (!isStreaming && !isSubmitting) return
-    const interval = window.setInterval(() => {
-      setStreamTick((value) => value + 1)
-    }, 200)
-    return () => window.clearInterval(interval)
-  }, [isStreaming, isSubmitting])
-
-  const idleDuringStream =
-    isStreaming && Date.now() - lastStreamUpdateRef.current >= 300
-
   const showThinkingIndicator =
     isSubmitting ||
     (isStreaming &&
@@ -1044,8 +1044,7 @@ export function AiChat({
         !hasAnyVisibleSignal ||
         hasPendingToolCall ||
         // Tool just returned and the model hasn't started speaking yet.
-        (hasCompletedToolCall && !trimmedContent) ||
-        idleDuringStream
+        (hasCompletedToolCall && !trimmedContent)
       ))
 
   const activeRegistry = registry ?? defaultAiUiPartRegistry
@@ -1429,7 +1428,7 @@ export function AiChat({
             >
               <Paperclip className="size-4" aria-hidden />
             </IconButton>
-            {allowRuntimeModelOverride && modelProviders.length > 0 ? (
+            {allowRuntimeOverride && modelProviders.length > 0 ? (
               <ModelPicker
                 agentId={agent}
                 value={effectiveModelPickerValue}
@@ -1499,6 +1498,7 @@ export function AiChat({
         <AiChatDebugPanel
           tools={debugTools}
           promptSections={debugPromptSections}
+          loopTrace={loopTrace ?? chat.lastLoopTrace ?? undefined}
           lastRequestDebug={chat.lastRequestDebug}
           lastResponseDebug={chat.lastResponseDebug}
           status={chat.status}
@@ -1512,6 +1512,7 @@ export function AiChat({
 interface DebugPanelProps {
   tools?: AiChatDebugTool[]
   promptSections?: AiChatDebugPromptSection[]
+  loopTrace?: LoopTracePanelTrace
   lastRequestDebug: { url: string; body: unknown } | null
   lastResponseDebug: { status: number; text: string } | null
   status: 'idle' | 'submitting' | 'streaming'
@@ -1521,6 +1522,7 @@ interface DebugPanelProps {
 function AiChatDebugPanel({
   tools,
   promptSections,
+  loopTrace,
   lastRequestDebug,
   lastResponseDebug,
   status,
@@ -1536,6 +1538,10 @@ function AiChatDebugPanel({
         {t('ai_assistant.chat.debug.panelTitle', 'Debug panel')}
       </div>
 
+      {loopTrace ? (
+        <LoopTracePanel trace={loopTrace} />
+      ) : null}
+
       <details className="rounded border border-border bg-background" data-ai-chat-debug-section="tools" open>
         <summary className="cursor-pointer px-2 py-1 font-semibold">
           {t('ai_assistant.chat.debug.toolsSection', 'Resolved tools')}

package/src/ai/AiIcon.tsx

@@ -0,0 +1,12 @@
+import { Sparkles, type LucideProps } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export function AiIcon({ className, ...props }: LucideProps) {
+  return (
+    <Sparkles
+      aria-hidden
+      {...props}
+      className={cn(className, 'text-brand-violet')}
+    />
+  )
+}

package/src/ai/LoopDisabledBanner.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import * as React from 'react'
+import { ShieldOff } from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '../primitives/alert'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+/**
+ * Banner displayed when the tenant kill switch (`loop_disabled = true`) is
+ * active for the current agent. Rendered on the playground page and on
+ * `<AiChat>` headers so operators are not blindsided (R11 mitigation, Phase 3
+ * of spec `2026-04-28-ai-agents-agentic-loop-controls`).
+ *
+ * The agent still completes turns but as single-step runs. The banner is
+ * informational only — operators must visit the Loop policy section of the
+ * AI assistant settings to re-enable the loop.
+ */
+export function LoopDisabledBanner({ agentId }: { agentId?: string }) {
+  const t = useT()
+  return (
+    <Alert
+      variant="warning"
+      icon={<ShieldOff aria-hidden="true" />}
+      data-ai-loop-disabled-banner
+      data-ai-loop-disabled-agent-id={agentId}
+    >
+      <AlertTitle>
+        {t('ai_assistant.loop.disabledBanner.title', 'Agent loop disabled by tenant policy')}
+      </AlertTitle>
+      <AlertDescription>
+        {t(
+          'ai_assistant.loop.disabledBanner.description',
+          'The agentic loop has been disabled for this agent by a tenant administrator. Each turn runs as a single model call. To re-enable the loop, update the Loop policy in AI assistant settings.',
+        )}
+      </AlertDescription>
+    </Alert>
+  )
+}

package/src/ai/LoopTracePanel.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import * as React from 'react'
+import { ChevronDown, ChevronRight, Wrench } from 'lucide-react'
+
+export interface LoopTracePanelStepRecord {
+  stepIndex: number
+  modelId: string
+  toolCalls: Array<{
+    toolName: string
+    args: unknown
+    result?: unknown
+    error?: { code: string; message: string }
+    repairAttempted: boolean
+    durationMs: number
+  }>
+  textDelta: string
+  usage: { inputTokens: number; outputTokens: number }
+  finishReason: 'stop' | 'tool-calls' | 'length' | 'content-filter' | 'error'
+}
+
+export interface LoopTracePanelTrace {
+  agentId: string
+  turnId: string
+  steps: LoopTracePanelStepRecord[]
+  stopReason:
+    | 'step-count'
+    | 'has-tool-call'
+    | 'custom-stop'
+    | 'budget-tokens'
+    | 'budget-tool-calls'
+    | 'budget-wall-clock'
+    | 'tenant-disabled'
+    | 'finish-reason'
+    | 'abort'
+  totalDurationMs: number
+  totalUsage: { inputTokens: number; outputTokens: number }
+}
+
+type LoopStepRecord = LoopTracePanelStepRecord
+type LoopTrace = LoopTracePanelTrace
+
+function formatMs(ms: number): string {
+  if (ms < 1000) return `${ms}ms`
+  return `${(ms / 1000).toFixed(1)}s`
+}
+
+function LoopStepRow({ step }: { step: LoopStepRecord }) {
+  const [expanded, setExpanded] = React.useState(false)
+  const hasTools = step.toolCalls.length > 0
+
+  return (
+    <li className="border-b border-border last:border-0">
+      <button
+        type="button"
+        className="flex w-full items-center gap-2 px-2 py-1.5 text-xs hover:bg-muted/40"
+        onClick={() => setExpanded((prev) => !prev)}
+        aria-expanded={expanded}
+        aria-label={`Step ${step.stepIndex}`}
+      >
+        {expanded ? (
+          <ChevronDown className="size-3 shrink-0 text-muted-foreground" aria-hidden />
+        ) : (
+          <ChevronRight className="size-3 shrink-0 text-muted-foreground" aria-hidden />
+        )}
+        <span className="font-medium text-muted-foreground">Step {step.stepIndex}</span>
+        <span className="font-mono text-muted-foreground/60">{step.modelId}</span>
+        {hasTools ? (
+          <span className="ml-auto flex items-center gap-1 text-muted-foreground">
+            <Wrench className="size-3" aria-hidden />
+            {step.toolCalls.length}
+          </span>
+        ) : null}
+        <span className="ml-auto font-mono text-muted-foreground/60">{step.finishReason}</span>
+        <span className="font-mono text-muted-foreground/60">
+          {step.usage.inputTokens}↑ {step.usage.outputTokens}↓
+        </span>
+      </button>
+
+      {expanded ? (
+        <div className="bg-muted/20 px-4 pb-2 pt-1 text-xs">
+          {step.textDelta ? (
+            <div className="mb-2">
+              <div className="mb-0.5 font-semibold text-muted-foreground">Text</div>
+              <pre className="max-h-32 overflow-auto whitespace-pre-wrap rounded bg-background p-1.5 font-mono">
+                {step.textDelta}
+              </pre>
+            </div>
+          ) : null}
+          {hasTools ? (
+            <div>
+              <div className="mb-0.5 font-semibold text-muted-foreground">Tool calls</div>
+              <ul className="flex flex-col gap-1">
+                {step.toolCalls.map((tc, index) => (
+                  <li
+                    key={index}
+                    className="rounded border border-border bg-background p-1.5"
+                    data-loop-trace-tool-call={tc.toolName}
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="font-mono font-semibold">{tc.toolName}</span>
+                      {tc.durationMs ? (
+                        <span className="text-muted-foreground/60">{formatMs(tc.durationMs)}</span>
+                      ) : null}
+                      {tc.error ? (
+                        <span className="text-status-error-fg">error: {tc.error.code}</span>
+                      ) : null}
+                    </div>
+                    {tc.args !== undefined ? (
+                      <pre className="mt-1 max-h-24 overflow-auto whitespace-pre-wrap font-mono text-xs text-muted-foreground">
+                        {JSON.stringify(tc.args, null, 2)}
+                      </pre>
+                    ) : null}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </li>
+  )
+}
+
+export interface LoopTracePanelProps {
+  trace: LoopTracePanelTrace
+  className?: string
+}
+
+/**
+ * Collapsible playground / debug panel that renders a `LoopTrace` per turn.
+ * Collapsed by default; each step row is independently expandable.
+ *
+ * Phase 4 of spec `2026-04-28-ai-agents-agentic-loop-controls`.
+ */
+export function LoopTracePanel({ trace, className }: LoopTracePanelProps) {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <section
+      className={`rounded-md border border-border bg-background text-xs${className ? ` ${className}` : ''}`}
+      data-ai-loop-trace-panel={trace.agentId}
+    >
+      <button
+        type="button"
+        className="flex w-full items-center gap-2 px-3 py-2 hover:bg-muted/40"
+        onClick={() => setOpen((prev) => !prev)}
+        aria-expanded={open}
+        aria-controls="loop-trace-steps"
+      >
+        {open ? (
+          <ChevronDown className="size-3 shrink-0 text-muted-foreground" aria-hidden />
+        ) : (
+          <ChevronRight className="size-3 shrink-0 text-muted-foreground" aria-hidden />
+        )}
+        <span className="font-semibold text-muted-foreground">Loop trace</span>
+        <span className="ml-1 font-mono text-muted-foreground/60">
+          {trace.steps.length} step{trace.steps.length !== 1 ? 's' : ''}
+        </span>
+        <span
+          className="ml-auto font-mono text-muted-foreground/60"
+          data-loop-trace-stop-reason={trace.stopReason}
+        >
+          {trace.stopReason}
+        </span>
+        <span className="font-mono text-muted-foreground/60">{formatMs(trace.totalDurationMs)}</span>
+        <span className="font-mono text-muted-foreground/60">
+          {trace.totalUsage.inputTokens + trace.totalUsage.outputTokens} tok
+        </span>
+      </button>
+
+      {open ? (
+        <ul id="loop-trace-steps" className="border-t border-border" role="list">
+          {trace.steps.map((step) => (
+            <LoopStepRow key={step.stepIndex} step={step} />
+          ))}
+          {trace.steps.length === 0 ? (
+            <li className="px-3 py-2 text-muted-foreground">No steps recorded.</li>
+          ) : null}
+        </ul>
+      ) : null}
+    </section>
+  )
+}

package/src/ai/ModelPicker.tsx

@@ -47,7 +47,7 @@ export interface ModelPickerProps {
  * - Does NOT expose a baseURL input (R6 mitigation: only provider+model selection from the
  *   curated catalog is exposed to end users).
  * - localStorage persistence keyed by agentId is handled by the consumer (AiChat / 4b.2).
- * - When allowRuntimeModelOverride is false the consumer should not render this component
+ * - When allowRuntimeOverride is false the consumer should not render this component
  *   at all; this component itself does no gating.
  */
 export function ModelPicker({