chrome-devtools-frontend 1.0.1669021 → 1.0.1672557

package/front_end/models/trace/insights/ModernHTTP.ts

@@ -7,7 +7,7 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import type * as Lantern from '../lantern/lantern.js';
-import type * as Types from '../types/types.js';
+import * as Types from '../types/types.js';
 
 import {
   InsightCategory,
@@ -199,7 +199,7 @@ function computeWasteWithGraph(
 
 function computeMetricSavings(
     http1Requests: Types.Events.SyntheticNetworkRequest[], context: InsightSetContext): MetricSavings|undefined {
-  if (!context.navigation || !context.lantern) {
+  if (!context.navigation || !('lantern' in context) || !context.lantern) {
     return;
   }
 
@@ -234,7 +234,11 @@ export function generateInsight(data: Handlers.Types.HandlerData, context: Insig
   const contextRequests = data.NetworkRequests.byTime.filter(isWithinContext);
 
   const entityMappings = data.NetworkRequests.entityMappings;
-  const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? data.Meta.mainFrameURL;
+  let firstPartyUrl = data.Meta.mainFrameURL;
+  if (context.navigation && !Types.Events.isSoftNavigationStart(context.navigation)) {
+    firstPartyUrl = context.navigation.args.data?.documentLoaderURL ?? firstPartyUrl;
+  }
+
   const firstPartyEntity = Handlers.Helpers.getEntityForUrl(firstPartyUrl, entityMappings);
   const http1Requests = determineHttp1Requests(contextRequests, entityMappings, firstPartyEntity ?? null);
 

package/front_end/models/trace/insights/NetworkDependencyTree.ts

@@ -674,7 +674,7 @@ export function isNetworkDependencyTreeInsight(model: InsightModel): model is Ne
 
 export function generateInsight(
     data: Handlers.Types.HandlerData, context: InsightSetContext): NetworkDependencyTreeInsightModel {
-  if (!context.navigation) {
+  if (!context.navigation || !('navigationId' in context)) {
     return finalize({
       rootNodes: [],
       maxTime: 0 as Types.Timing.Micro,

package/front_end/models/trace/insights/RenderBlocking.ts

@@ -178,7 +178,7 @@ function finalize(partialModel: PartialInsightModel<RenderBlockingInsightModel>)
 
 export function generateInsight(
     data: Handlers.Types.HandlerData, context: InsightSetContext): RenderBlockingInsightModel {
-  if (!context.navigation) {
+  if (!context.navigation || !('navigationId' in context)) {
     return finalize({
       renderBlockingRequests: [],
     });

package/front_end/models/trace/insights/ThirdParties.ts

@@ -6,7 +6,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as ThirdPartyWeb from '../../../third_party/third-party-web/third-party-web.js';
 import * as Extras from '../extras/extras.js';
 import * as Handlers from '../handlers/handlers.js';
-import type * as Types from '../types/types.js';
+import * as Types from '../types/types.js';
 
 import {
   InsightCategory,
@@ -82,7 +82,10 @@ export function generateInsight(
     data: Handlers.Types.HandlerData, context: InsightSetContext): ThirdPartiesInsightModel {
   const entitySummaries = Extras.ThirdParties.summarizeByThirdParty(data as Handlers.Types.HandlerData, context.bounds);
 
-  const firstPartyUrl = context.navigation?.args.data?.documentLoaderURL ?? data.Meta.mainFrameURL;
+  let firstPartyUrl = data.Meta.mainFrameURL;
+  if (context.navigation && !Types.Events.isSoftNavigationStart(context.navigation)) {
+    firstPartyUrl = context.navigation.args.data?.documentLoaderURL ?? firstPartyUrl;
+  }
   const firstPartyEntity = ThirdPartyWeb.ThirdPartyWeb.getEntity(firstPartyUrl) ||
       Handlers.Helpers.makeUpEntity(data.Renderer.entityMappings.createdEntityCache, firstPartyUrl);
 

package/front_end/models/trace/insights/types.ts

@@ -11,7 +11,8 @@ import type * as Models from './Models.js';
 /**
  * Context for the portion of the trace an insight should look at.
  */
-export type InsightSetContext = InsightSetContextWithoutNavigation|InsightSetContextWithNavigation;
+export type InsightSetContext =
+    InsightSetContextWithoutNavigation|InsightSetContextWithNavigation|InsightSetContextWithSoftNavigation;
 
 export interface InsightSetContextWithoutNavigation {
   options: Types.Configuration.ParseOptions;
@@ -29,6 +30,13 @@ export interface InsightSetContextWithNavigation {
   lantern?: LanternContext;
 }
 
+export interface InsightSetContextWithSoftNavigation {
+  options: Types.Configuration.ParseOptions;
+  bounds: Types.Timing.TraceWindowMicro;
+  frameId: string;
+  navigation: Types.Events.SoftNavigationStart;
+}
+
 export interface LanternContext {
   requests: Array<Lantern.Types.NetworkRequest<Types.Events.SyntheticNetworkRequest>>;
   graph: Lantern.Graph.Node<Types.Events.SyntheticNetworkRequest>;
@@ -93,10 +101,7 @@ export type InsightModel<UIStrings extends Record<string, string> = Record<strin
        */
       wastedBytes?: number,
       frameId?: string,
-      /**
-       * If this insight is attached to a navigation, this stores its ID.
-       */
-      navigation?: Types.Events.NavigationStart,
+      navigation?: Types.Events.NavigationStart | Types.Events.SoftNavigationStart,
       /** This is lazily-generated because some insights may create many overlays. */
       createOverlays?: () => Types.Overlays.Overlay[],
     };
@@ -120,7 +125,7 @@ export interface InsightSet {
   model: InsightModels;
   /** Contains errors for all insights that had an internal error. */
   modelErrors: InsightModelErrors;
-  navigation?: Types.Events.NavigationStart;
+  navigation?: Types.Events.NavigationStart|Types.Events.SoftNavigationStart;
 }
 
 /**

package/front_end/models/trace/types/Configuration.ts

@@ -42,6 +42,10 @@ export interface Configuration {
    * from the model, but the contents will be empty.
    */
   enableAnimationsFrameHandler: boolean;
+  /**
+   * Whether soft-navs are used in the model/insights.
+   */
+  enableSoftNavigation: boolean;
 }
 
 export const defaults = (): Configuration => ({
@@ -49,6 +53,7 @@ export const defaults = (): Configuration => ({
   debugMode: false,
   maxInvalidationEventsPerEvent: 20,
   enableAnimationsFrameHandler: false,
+  enableSoftNavigation: true,
 });
 
 /**

package/front_end/models/trace_source_maps_resolver/SourceMapsResolver.ts

@@ -46,7 +46,9 @@ export class SourceMapsResolver extends EventTarget {
       parsedTrace: Trace.TraceModel.ParsedTrace,
       entityMapper?: Trace.EntityMapper.EntityMapper,
       debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
-          Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance(),
+          // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
+      Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance(),
+      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       targetManager: SDK.TargetManager.TargetManager = SDK.TargetManager.TargetManager.instance(),
   ) {
     super();

package/front_end/models/workspace/IgnoreListManager.ts

@@ -92,7 +92,9 @@ export class IgnoreListManager extends Common.ObjectWrapper.ObjectWrapper<EventT
       Root.DevToolsContext.globalInstance().set(
           IgnoreListManager,
           new IgnoreListManager(
+              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
               opts.settings ?? Common.Settings.Settings.instance(),
+              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
               opts.targetManager ?? SDK.TargetManager.TargetManager.instance()));
     }
 

package/front_end/models/workspace/UISourceCode.ts

@@ -503,6 +503,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.#disableEdit;
   }
 
+  // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
   isIgnoreListed(ignoreListManager: IgnoreListManager = IgnoreListManager.instance()): boolean {
     return ignoreListManager.isUserOrSourceMapIgnoreListedUISourceCode(this);
   }
@@ -608,6 +609,7 @@ export class UILocation {
     return this.columnNumber - other.columnNumber;
   }
 
+  // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
   isIgnoreListed(ignoreListManager: IgnoreListManager = IgnoreListManager.instance()): boolean {
     return this.uiSourceCode.isIgnoreListed(ignoreListManager);
   }

package/front_end/models/workspace_diff/WorkspaceDiff.ts

@@ -326,9 +326,13 @@ export function workspaceDiff({forceNew}: {forceNew?: boolean} = {}): WorkspaceD
     Root.DevToolsContext.globalInstance().set(
         WorkspaceDiffImpl,
         new WorkspaceDiffImpl(
+            // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
             Workspace.Workspace.WorkspaceImpl.instance(),
+            // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
             Persistence.Persistence.PersistenceImpl.instance(),
+            // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
             Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance(),
+            // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
             Common.Settings.Settings.instance(),
             ));
   }

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -734,8 +734,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
               void this.#startConversation(text, imageInput, multimodalInputType);
             };
 
-            const seenSetting =
-                Common.Settings.Settings.instance().moduleSetting('ai-assistance-v2-opt-in-change-dialog-seen');
+            const seenSetting = Common.Settings.Settings.instance().resolve(
+                AiAssistanceModel.AiUtils.aiAssistanceV2OptInChangeDialogSeenSettingDescriptor);
             if (!seenSetting.get()) {
               OptInChangeDialog.show({
                 onGotIt: () => {
@@ -1751,7 +1751,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         parts: [],
         id: crypto.randomUUID(),
       };
-      let step: Step = {isLoading: true};
+      let step: Step = {state: {type: 'in_progress'}};
 
       /**
        * Commits the step to props only if necessary.
@@ -1771,7 +1771,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       let announcedAnswerLoading = false;
       let announcedAnswerReady = false;
       for await (const data of items) {
-        step.requestApproval = undefined;
         switch (data.type) {
           case AiAssistanceModel.AiAgent.ResponseType.USER_QUERY: {
             this.#messages.push({
@@ -1797,7 +1796,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.QUERYING: {
-            step = {isLoading: true};
+            step = {state: {type: 'in_progress'}};
             if (!systemMessage.parts.length) {
               commitStep();
             }
@@ -1808,7 +1807,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             step.title = lockedString(UIStringsNotTranslate.analyzingData);
             step.contextDetails = data.details;
             step.widgets = data.widgets;
-            step.isLoading = false;
+            step.state = {type: 'completed'};
             commitStep();
             break;
           }
@@ -1818,7 +1817,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.THOUGHT: {
-            step.isLoading = false;
+            step.state = {type: 'completed'};
             step.thought = data.thought;
             commitStep();
             break;
@@ -1837,24 +1836,25 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.SIDE_EFFECT: {
-            step.isLoading = false;
             step.code ??= data.code;
-            step.requestApproval = {
-              description: data.description,
-              onAnswer: (result: boolean) => {
-                data.confirm(result);
-                step.requestApproval = undefined;
-                this.requestUpdate();
+            step.state = {
+              type: 'needs_approval',
+              sideEffectDialog: {
+                description: data.description,
+                onAnswer: (result: boolean) => {
+                  data.confirm(result);
+                  step.state = {type: 'completed'};
+                  this.requestUpdate();
+                },
               },
             };
             commitStep();
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.ACTION: {
-            step.isLoading = false;
+            step.state = data.canceled ? {type: 'canceled'} : {type: 'completed'};
             step.code ??= data.code;
             step.output ??= data.output;
-            step.canceled = data.canceled;
             step.widgets ??= data.widgets;
             commitStep();
             break;
@@ -1890,12 +1890,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             // TODO(crbug.com/463323934): Remove specially handling this case.
             if (systemMessage.parts.length > 1) {
               const firstPart = systemMessage.parts[0];
-              if (firstPart.type === 'step' && firstPart.step.isLoading && !firstPart.step.thought &&
+              if (firstPart.type === 'step' && firstPart.step.state.type === 'in_progress' && !firstPart.step.thought &&
                   !firstPart.step.code && !firstPart.step.contextDetails) {
                 systemMessage.parts.shift();
               }
             }
-            step.isLoading = false;
+            step.state = {type: 'completed'};
             break;
           }
           case AiAssistanceModel.AiAgent.ResponseType.ERROR: {
@@ -1905,9 +1905,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
               const lastStep = lastPart.step;
               // Mark the last step as cancelled to make the UI feel better.
               if (data.error === AiAssistanceModel.AiAgent.ErrorType.ABORT) {
-                lastStep.canceled = true;
+                lastStep.state = {type: 'canceled'};
                 // If error happens while the step is still loading remove it.
-              } else if (lastStep.isLoading) {
+              } else if (lastStep.state.type === 'in_progress') {
                 systemMessage.parts.pop();
               }
             }
@@ -1923,10 +1923,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
           case AiAssistanceModel.AiAgent.ResponseType.CONTEXT_CHANGE: {
             this.#handleConversationContextChange(data.context);
-            step.isLoading = false;
+            step.state = {type: 'completed'};
             step.widgets = data.widgets;
             commitStep();
-            step = {isLoading: true};
+            step = {state: {type: 'in_progress'}};
             break;
           }
         }

package/front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -166,13 +166,6 @@ Common.Settings.registerSettingExtension({
   },
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.AI,
-  settingName: 'ai-assistance-v2-opt-in-change-dialog-seen',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: false,
-});
-
 UI.ActionRegistration.registerActionExtension({
   actionId: 'freestyler.main-menu',
   contextTypes(): [] {

package/front_end/panels/ai_assistance/components/ChatInput.ts

@@ -802,6 +802,10 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
     const imageInput = !this.#imageInput?.isLoading && this.#imageInput?.data ?
         {inlineData: {data: this.#imageInput.data, mimeType: this.#imageInput.mimeType}} :
         undefined;
+    const text = this.#textAreaRef.value?.value?.trim() ?? '';
+    if (!text && !imageInput) {
+      return;
+    }
     this.onTextSubmit(this.#textAreaRef.value?.value ?? '', imageInput, this.#imageInput?.inputType);
     this.#imageInput = undefined;
     this.#historyOffset = -1;

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -423,23 +423,65 @@ const UIStringsNotTranslate = {
   inspectedFileNames: 'Inspected file names',
 } as const;
 
+/**
+ * Payload and confirmation handler for side-effect operations requiring user approval.
+ */
+export interface ConfirmSideEffectDialog {
+  /**
+   * Human-readable description explaining the pending side-effect action, or null if omitted.
+   */
+  description: string|null;
+  /**
+   * Callback invoked when the user resolves the dialog (true to confirm, false to decline).
+   */
+  onAnswer: (result: boolean) => void;
+}
+
+/**
+ * Represents the execution state of an individual agent action step:
+ * - `in_progress`: The step is actively querying context or parsing stream content.
+ * - `needs_approval`: The step is awaiting user confirmation for a side-effecting operation.
+ * - `canceled`: The step was canceled before execution.
+ * - `completed`: The step completed execution successfully.
+ */
+export type StepState = {
+  type: 'in_progress',
+}|{type: 'needs_approval', sideEffectDialog: ConfirmSideEffectDialog}|{type: 'canceled'}|{type: 'completed'};
+
+/**
+ * Represents an individual execution step within an agent response.
+ */
 export interface Step {
-  isLoading: boolean;
+  /**
+   * The current lifecycle state of this step.
+   */
+  state: StepState;
+  /**
+   * The agent's intermediate thought or rationale for taking this step.
+   */
   thought?: string;
+  /**
+   * The human-readable title describing the step action.
+   */
   title?: string;
+  /**
+   * Executable JavaScript code generated or executed in this step.
+   */
   code?: string;
+  /**
+   * Raw string output or data returned by code execution.
+   */
   output?: string;
+  /**
+   * Visual widgets rendered alongside this step (e.g. core web vitals, network traces).
+   */
   widgets?: AiWidget[];
-  canceled?: boolean;
-  requestApproval?: ConfirmSideEffectDialog;
+  /**
+   * Context item details gathered or inspected during this step.
+   */
   contextDetails?: [AiAssistanceModel.AiAgent.ContextDetail, ...AiAssistanceModel.AiAgent.ContextDetail[]];
 }
 
-export interface ConfirmSideEffectDialog {
-  description: string|null;
-  onAnswer: (result: boolean) => void;
-}
-
 export const enum ChatMessageEntity {
   MODEL = 'model',
   USER = 'user',
@@ -651,7 +693,7 @@ export function titleForStep(step: Step): string {
 }
 
 function renderTitle(step: Step): Lit.LitTemplate {
-  const paused = step.requestApproval && !step.canceled ?
+  const paused = step.state.type === 'needs_approval' ?
       html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` :
       Lit.nothing;
 
@@ -665,8 +707,9 @@ function renderStepCode(step: Step): Lit.LitTemplate {
 
   // If there is no "output" yet, it means we didn't execute the code yet (e.g. maybe it is still waiting for confirmation from the user)
   // thus we show "Code to execute" text rather than "Code executed" text on the heading of the code block.
-  const codeHeadingText = (step.output && !step.canceled) ? lockedString(UIStringsNotTranslate.codeExecuted) :
-                                                            lockedString(UIStringsNotTranslate.codeToExecute);
+  const codeHeadingText = (step.output && step.state.type !== 'canceled') ?
+      lockedString(UIStringsNotTranslate.codeExecuted) :
+      lockedString(UIStringsNotTranslate.codeToExecute);
 
   // If there is output, we don't show notice on this code block and instead show
   // it in the data returned code block.
@@ -705,7 +748,8 @@ function renderStepDetails({
   markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
-  const sideEffects = isLast && step.requestApproval ? renderSideEffectConfirmationUi(step) : Lit.nothing;
+  const sideEffects =
+      isLast && step.state.type === 'needs_approval' ? renderSideEffectConfirmationUi(step) : Lit.nothing;
   const thought = step.thought ? html`<p>${renderTextAsMarkdown(step.thought, markdownRenderer)}</p>` : Lit.nothing;
 
   // clang-format off
@@ -781,12 +825,12 @@ function renderWalkthroughSidebarButton(
       <devtools-button
         .variant=${variant}
         .size=${Buttons.Button.Size.SMALL}
-        .title=${lastStep.isLoading ? titleForStep(lastStep) : title}
+        .title=${lastStep.state.type === 'in_progress' ? titleForStep(lastStep) : title}
         .accessibleLabel=${accessibleLabel}
         .jslogContext=${walkthrough.isExpanded ? 'ai-hide-walkthrough-sidebar' : 'ai-show-walkthrough-sidebar'}
         data-show-walkthrough
         @click=${() => {
-          if(walkthrough.activeSidebarMessage?.id === input.message.id && walkthrough.isExpanded) {
+          if (walkthrough.activeSidebarMessage?.id === input.message.id && walkthrough.isExpanded) {
             walkthrough.onToggle(false, message as ModelChatMessage);
           } else {
             // Can't just toggle the visibility here; we need to ensure we
@@ -848,7 +892,7 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
 }
 
 function renderSideEffectStepsUI(input: ChatMessageViewInput, steps: Step[]): Lit.LitTemplate {
-  const sideEffectSteps = steps.filter(s => s.requestApproval);
+  const sideEffectSteps = steps.filter(s => s.state.type === 'needs_approval' || s.state.type === 'canceled');
   if (sideEffectSteps.length === 0) {
     return Lit.nothing;
   }
@@ -858,7 +902,6 @@ function renderSideEffectStepsUI(input: ChatMessageViewInput, steps: Step[]): Li
       <div class="side-effect-container">
         ${renderStep({
            step,
-           isLoading: input.isLoading,
            markdownRenderer: input.markdownRenderer,
            isLast: true,
         })}
@@ -867,25 +910,27 @@ function renderSideEffectStepsUI(input: ChatMessageViewInput, steps: Step[]): Li
   // clang-format on
 }
 
-function renderStepBadge({step, isLoading, isLast}: {
+function renderStepBadge({step, isLast}: {
   step: Step,
-  isLoading: boolean,
   isLast: boolean,
 }): Lit.LitTemplate {
-  if (isLoading && isLast && !step.requestApproval) {
+  if (isLast && step.state.type === 'in_progress') {
     return html`<devtools-spinner aria-label=${lockedString(UIStringsNotTranslate.inProgress)}></devtools-spinner>`;
   }
 
   let iconName = 'checkmark';
   let ariaLabel: string|undefined = lockedString(UIStringsNotTranslate.completed);
   let role: 'button'|undefined = 'button';
-  if (step.canceled) {
-    ariaLabel = lockedString(UIStringsNotTranslate.aborted);
-    iconName = 'cross';
-  } else if (isLast && step.requestApproval) {
+  if (step.state.type === 'needs_approval') {
+    if (!isLast) {
+      console.error('A step in needs_approval state must be the last step.');
+    }
     role = undefined;
     ariaLabel = lockedString(UIStringsNotTranslate.paused);
     iconName = 'pause-circle';
+  } else if (step.state.type === 'canceled') {
+    ariaLabel = lockedString(UIStringsNotTranslate.aborted);
+    iconName = 'cross';
   }
 
   return html`<devtools-icon
@@ -896,26 +941,25 @@ function renderStepBadge({step, isLoading, isLast}: {
     ></devtools-icon>`;
 }
 
-export function renderStep({step, isLoading, markdownRenderer, isLast}: {
+export function renderStep({step, markdownRenderer, isLast}: {
   step: Step,
-  isLoading: boolean,
   markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
   const stepClasses = Lit.Directives.classMap({
     step: true,
-    empty: !step.thought && !step.code && !step.contextDetails && !step.requestApproval,
-    paused: Boolean(step.requestApproval && !step.canceled),
-    canceled: Boolean(step.canceled),
+    empty: !step.thought && !step.code && !step.contextDetails && step.state.type !== 'needs_approval',
+    paused: step.state.type === 'needs_approval',
+    canceled: step.state.type === 'canceled',
   });
   // clang-format off
   return html`
     <details class=${stepClasses}
       jslog=${VisualLogging.expand('step').track({click: true})}
-      .open=${Boolean(step.requestApproval)}>
+      .open=${step.state.type === 'needs_approval'}>
       <summary>
         <div class="summary">
-          ${renderStepBadge({ step, isLoading, isLast })}
+          ${renderStepBadge({ step, isLast })}
           ${renderTitle(step)}
           <devtools-icon
             class="arrow"
@@ -1755,16 +1799,17 @@ async function renderWidgets(
 }
 
 function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
-  if (!step.requestApproval || step.canceled) {
+  if (step.state.type !== 'needs_approval') {
     return Lit.nothing;
   }
+  const dialog = step.state.sideEffectDialog;
 
   // clang-format off
   return html`<div
     class="side-effect-confirmation"
     jslog=${VisualLogging.section('side-effect-confirmation')}
   >
-    ${step.requestApproval.description ? html`<p>${step.requestApproval.description}</p>` : Lit.nothing}
+    ${dialog.description ? html`<p>${dialog.description}</p>` : Lit.nothing}
     <div class="side-effect-buttons-container">
       <devtools-button
         .data=${
@@ -1773,7 +1818,7 @@ function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
             jslogContext: 'decline-execute-code',
           } as Buttons.Button.ButtonData
         }
-        @click=${() => step.requestApproval?.onAnswer(false)}
+        @click=${() => dialog.onAnswer(false)}
       >${lockedString(
         UIStringsNotTranslate.declineActionRequestApproval,
       )}</devtools-button>
@@ -1785,7 +1830,7 @@ function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
             iconName: 'play',
           } as Buttons.Button.ButtonData
         }
-        @click=${() => step.requestApproval?.onAnswer(true)}
+        @click=${() => dialog.onAnswer(true)}
       >${
           lockedString(UIStringsNotTranslate.confirmActionRequestApproval)
       }</devtools-button>

package/front_end/panels/ai_assistance/components/WalkthroughView.ts

@@ -206,7 +206,7 @@ export const DEFAULT_VIEW = (
   // Ensure that we render steps but not ones that need approval; a
   // step that needs approval is always rendered into the main chat
   // view regardless of if the walkthrough is open or not.
-  const renderableSteps = allSteps.filter(s => !s.requestApproval);
+  const renderableSteps = allSteps.filter(s => s.state.type !== 'needs_approval');
 
   // clang-format off
   const stepsOutput = renderableSteps.length > 0 ? html`
@@ -222,7 +222,6 @@ export const DEFAULT_VIEW = (
             <div class="step-wrapper">
               ${renderStep({
                 step,
-                isLoading: input.isLoading,
                 markdownRenderer: input.markdownRenderer,
                 isLast: index === renderableSteps.length - 1,
               })}

package/front_end/panels/ai_assistance/components/walkthroughView.css

@@ -99,7 +99,7 @@
 
   .inline-wrapper {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     gap: var(--sys-size-2);
     justify-content: flex-start;