qwen-code/packages/web-shell/client/components/artifacts/SideTaskPanel.tsx

import { useCallback, useEffect, useRef, useState } from 'react';
import {
  DaemonSessionProvider,
  useActions,
  useConnection,
  useTranscriptBlocks,
  useTranscriptHistory,
  useWorkspace,
} from '@qwen-code/web-shell/daemon-react-sdk';
import {
  WEB_SHELL_HISTORY_PAGE_SIZE,
  WEB_SHELL_MAX_TRANSCRIPT_BLOCKS,
} from '../../constants/sessions';
import type { TurnOutputOpenRequest } from './TurnOutputs';
import type { DaemonSessionArtifact } from '@qwen-code/sdk/daemon';
import { useI18n } from '../../i18n';
import {
  isModelSetupCommand,
  isModelCommandSnapshotReady,
  resolveModelManagement,
  type WebShellModelManagementOptions,
} from '../../modelManagement';
import type {
  WebShellUnavailableModel,
  WebShellUnavailableModelTooltipMount,
} from '../../unavailableModels';
import { ChatPane } from '../ChatPane';
import { Button } from '../ui/button';
import { Spinner } from '../ui/spinner';
import { useSessionCatalogController } from '../../session-catalog/session-catalog-hooks';

interface SideTaskPanelProps {
  tabId: string;
  sessionId?: string;
  parentSessionId: string;
  workspaceCwd?: string;
  title: string;
  shouldNameFromFirstPrompt?: boolean;
  initialPrompt?: string;
  createSession: (
    tabId: string,
    parentSessionId: string,
    title: string,
  ) => Promise<{ sessionId: string; displayName?: string }>;
  onCreated: (tabId: string, sessionId: string) => void;
  onTitleChange: (
    tabId: string,
    title: string,
    fromFirstPrompt?: boolean,
  ) => void;
  onRightPanelOpen?: (request: TurnOutputOpenRequest) => void;
  onArtifactsChange?: (
    sessionId: string,
    artifacts: readonly DaemonSessionArtifact[],
  ) => void;
  onError?: (error: unknown, fallback: string) => void;
  sessionWorkflowEnabled?: boolean;
  modelManagement?: WebShellModelManagementOptions;
  unavailableModels?: readonly WebShellUnavailableModel[];
  mountUnavailableModelTooltip?: WebShellUnavailableModelTooltipMount;
  onImageIngestionNotice?: (tone: 'warning' | 'error', message: string) => void;
  /** Policy refused the stored initial prompt; the parent drops it from the tab. */
  onInitialPromptRefused?: (tabId: string) => void;
}

const FIRST_PROMPT_RENAME_ATTEMPTS = 3;

export function SideTaskPanel({
  tabId,
  sessionId,
  parentSessionId,
  workspaceCwd,
  title,
  shouldNameFromFirstPrompt,
  initialPrompt,
  createSession,
  onCreated,
  onTitleChange,
  onRightPanelOpen,
  onArtifactsChange,
  onError,
  sessionWorkflowEnabled,
  modelManagement,
  unavailableModels,
  mountUnavailableModelTooltip,
  onImageIngestionNotice,
  onInitialPromptRefused,
}: SideTaskPanelProps) {
  if (!sessionId) {
    return (
      <SideTaskCreation
        tabId={tabId}
        parentSessionId={parentSessionId}
        title={title}
        createSession={createSession}
        onCreated={onCreated}
        onTitleChange={onTitleChange}
        onError={onError}
      />
    );
  }

  return (
    <DaemonSessionProvider
      sessionId={sessionId}
      workspaceCwd={workspaceCwd}
      clientId={`side-task:${parentSessionId}:${tabId}`}
      autoConnect
      historyPageSize={WEB_SHELL_HISTORY_PAGE_SIZE}
      subagentTranscriptMode="summary"
      maxBlocks={WEB_SHELL_MAX_TRANSCRIPT_BLOCKS}
      suppressOwnUserEcho
    >
      <SideTaskSession
        tabId={tabId}
        title={title}
        shouldNameFromFirstPrompt={shouldNameFromFirstPrompt}
        initialPrompt={initialPrompt}
        workspaceCwd={workspaceCwd}
        onTitleChange={onTitleChange}
        onRightPanelOpen={onRightPanelOpen}
        onArtifactsChange={onArtifactsChange}
        onError={onError}
        sessionWorkflowEnabled={sessionWorkflowEnabled}
        modelManagement={modelManagement}
        unavailableModels={unavailableModels}
        mountUnavailableModelTooltip={mountUnavailableModelTooltip}
        onImageIngestionNotice={onImageIngestionNotice}
        onInitialPromptRefused={onInitialPromptRefused}
      />
    </DaemonSessionProvider>
  );
}

function SideTaskCreation({
  tabId,
  parentSessionId,
  title,
  createSession,
  onCreated,
  onTitleChange,
  onError,
}: Pick<
  SideTaskPanelProps,
  | 'tabId'
  | 'parentSessionId'
  | 'title'
  | 'createSession'
  | 'onCreated'
  | 'onTitleChange'
  | 'onError'
>) {
  const { t } = useI18n();
  const creatingRef = useRef(false);
  const didAttemptCreateRef = useRef(false);
  const mountedRef = useRef(true);
  const [creationError, setCreationError] = useState<unknown>();

  useEffect(() => {
    mountedRef.current = true;
    return () => {
      mountedRef.current = false;
    };
  }, []);

  const create = useCallback(async () => {
    if (creatingRef.current) return;
    creatingRef.current = true;
    setCreationError(undefined);
    try {
      const created = await createSession(tabId, parentSessionId, title);
      onCreated(tabId, created.sessionId);
      if (mountedRef.current && created.displayName) {
        onTitleChange(tabId, created.displayName);
      }
    } catch (error) {
      if (!mountedRef.current) return;
      setCreationError(error);
      onError?.(error, t('sideTask.createFailed'));
    } finally {
      creatingRef.current = false;
    }
  }, [
    createSession,
    onCreated,
    onError,
    onTitleChange,
    parentSessionId,
    t,
    tabId,
    title,
  ]);

  useEffect(() => {
    if (didAttemptCreateRef.current) return;
    didAttemptCreateRef.current = true;
    void create();
  }, [create]);

  if (creationError) {
    return (
      <div className="flex h-full flex-col items-center justify-center gap-3 text-sm text-muted-foreground">
        <span>{t('sideTask.createFailed')}</span>
        <Button type="button" variant="outline" onClick={() => void create()}>
          {t('common.retry')}
        </Button>
      </div>
    );
  }

  return (
    <div
      className="flex h-full items-center justify-center gap-2 text-sm text-muted-foreground"
      role="status"
    >
      <Spinner />
      <span>{t('sideTask.creating')}</span>
    </div>
  );
}

function SideTaskSession({
  tabId,
  title,
  shouldNameFromFirstPrompt,
  initialPrompt,
  workspaceCwd,
  onTitleChange,
  onRightPanelOpen,
  onArtifactsChange,
  onError,
  sessionWorkflowEnabled,
  modelManagement,
  unavailableModels,
  mountUnavailableModelTooltip,
  onImageIngestionNotice,
  onInitialPromptRefused,
}: Omit<
  SideTaskPanelProps,
  'sessionId' | 'parentSessionId' | 'createSession' | 'onCreated'
>) {
  const { t } = useI18n();
  const connection = useConnection();
  const actions = useActions();
  const workspace = useWorkspace();
  const sessionCatalogController = useSessionCatalogController(
    workspace.client,
  );
  const blocks = useTranscriptBlocks();
  const transcriptHistory = useTranscriptHistory();
  const catalogOwnerCwd =
    connection.workspaceCwd &&
    workspaceCwd &&
    connection.workspaceCwd !== workspaceCwd
      ? undefined
      : (connection.workspaceCwd ?? workspaceCwd);
  const hasTextualUserPrompt = blocks.some(
    (block) =>
      block.kind === 'user' &&
      (typeof block.text === 'string'
        ? block.text.trim().length > 0
        : !block.images?.length),
  );
  // Media-only prompts (image, file, or resource link) arrive with empty text
  // (see userBlockBoundaryKey in DaemonSessionProvider). They leave the
  // session unnamed, but they are still user interaction: a retained
  // auto-prompt must not fire on top.
  const hasUserInteraction = blocks.some((block) => {
    if (block.kind !== 'user') return false;
    if (
      block.images?.length ||
      block.files?.length ||
      block.resourceLinks?.length
    )
      return true;
    return typeof block.text !== 'string' || block.text.trim().length > 0;
  });
  const transcriptSettled =
    connection.status === 'connected' &&
    !connection.loadingTranscript &&
    !connection.catchingUp &&
    !transcriptHistory.loading &&
    !transcriptHistory.hasMore &&
    !transcriptHistory.capacityReached &&
    !transcriptHistory.paginationError;
  const restoredEmptySession = transcriptSettled && !hasUserInteraction;
  const canNameFromFirstPrompt =
    !hasTextualUserPrompt &&
    (shouldNameFromFirstPrompt || (transcriptSettled && !hasTextualUserPrompt));
  useEffect(() => {
    const displayName = connection.displayName?.trim();
    if (displayName) onTitleChange(tabId, displayName);
  }, [connection.displayName, onTitleChange, tabId]);
  const nameFromFirstPrompt = useCallback(
    (text: string) => {
      const nextTitle = Array.from(text.trim()).slice(0, 200).join('');
      if (!nextTitle) return;
      onTitleChange(tabId, nextTitle);
      void (async () => {
        let lastError: unknown;
        for (
          let attempt = 0;
          attempt < FIRST_PROMPT_RENAME_ATTEMPTS;
          attempt++
        ) {
          try {
            await actions.renameSession(nextTitle);
            if (connection.sessionId && catalogOwnerCwd) {
              sessionCatalogController.renamed(
                catalogOwnerCwd,
                connection.sessionId,
                nextTitle,
              );
            }
            onTitleChange(tabId, nextTitle, true);
            return;
          } catch (error) {
            lastError = error;
          }
        }
        if (catalogOwnerCwd) {
          sessionCatalogController.invalidateWorkspace(catalogOwnerCwd);
        }
        onError?.(lastError, t('sideTask.renameFailed'));
      })();
    },
    [
      actions,
      catalogOwnerCwd,
      connection.sessionId,
      onError,
      onTitleChange,
      sessionCatalogController,
      t,
      tabId,
    ],
  );
  const initialPromptSentRef = useRef(false);
  const waitingForCommandSnapshot = Boolean(
    initialPrompt?.trim() &&
      restoredEmptySession &&
      !initialPromptSentRef.current &&
      !resolveModelManagement(modelManagement).allowAdd &&
      !isModelCommandSnapshotReady(connection.commands) &&
      isModelSetupCommand(initialPrompt),
  );
  const commandWaitNoticeRef = useRef(onImageIngestionNotice);
  commandWaitNoticeRef.current = onImageIngestionNotice;
  useEffect(() => {
    if (!waitingForCommandSnapshot) return;
    const timer = setTimeout(() => {
      commandWaitNoticeRef.current?.(
        'warning',
        t('sideTask.commandsLoadingTimedOut'),
      );
    }, 5_000);
    return () => clearTimeout(timer);
  }, [waitingForCommandSnapshot, initialPrompt, connection.sessionId, t]);

  useEffect(() => {
    const prompt = initialPrompt?.trim();
    if (
      !prompt ||
      !restoredEmptySession ||
      initialPromptSentRef.current ||
      waitingForCommandSnapshot
    )
      return;
    initialPromptSentRef.current = true;
    if (
      !resolveModelManagement(modelManagement).allowAdd &&
      isModelSetupCommand(prompt, connection.commands)
    ) {
      onImageIngestionNotice?.('warning', t('settings.models.addDisabled'));
      onInitialPromptRefused?.(tabId);
      return;
    }
    actions
      .sendPrompt(prompt, {
        onAdmitted: () => {
          if (connection.sessionId && catalogOwnerCwd) {
            sessionCatalogController.promptAdmitted(
              catalogOwnerCwd,
              connection.sessionId,
            );
          }
          nameFromFirstPrompt(prompt);
        },
      })
      .catch((error: unknown) => {
        initialPromptSentRef.current = false;
        onError?.(error, t('sideTask.promptFailed'));
      });
  }, [
    actions,
    catalogOwnerCwd,
    connection.commands,
    connection.sessionId,
    initialPrompt,
    modelManagement,
    onImageIngestionNotice,
    onInitialPromptRefused,
    nameFromFirstPrompt,
    onError,
    restoredEmptySession,
    waitingForCommandSnapshot,
    sessionCatalogController,
    t,
    tabId,
  ]);

  if (!connection.sessionId) {
    return (
      <div className="flex h-full items-center justify-center">
        <Spinner />
      </div>
    );
  }
  return (
    <ChatPane
      title={connection.displayName?.trim() || title}
      workspaceCwd={workspaceCwd}
      onError={onError}
      onImageIngestionNotice={onImageIngestionNotice}
      embedded
      onFirstPromptAdmitted={
        canNameFromFirstPrompt ? nameFromFirstPrompt : undefined
      }
      onRightPanelOpen={onRightPanelOpen}
      onPaneArtifactsChange={onArtifactsChange}
      sessionWorkflowEnabled={sessionWorkflowEnabled}
      modelManagement={modelManagement}
      unavailableModels={unavailableModels}
      mountUnavailableModelTooltip={mountUnavailableModelTooltip}
    />
  );
}