@nextclaw/ui 0.19.2 → 0.19.4

package/src/features/apps/components/app-marketplace-operation.tsx

@@ -1,57 +1,169 @@
 import type { AppPackageOperationView } from '@nextclaw/client-sdk';
 import { Check, LoaderCircle } from 'lucide-react';
 import { Button } from '@/shared/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/shared/components/ui/tooltip';
 import { t } from '@/shared/lib/i18n';
-import { cn } from '@/shared/lib/utils';
+import type { AppMarketplaceInstallability } from '@/features/apps/utils/app-marketplace-platform.utils';
+
+export type MarketplaceCompatibilityPresentation = {
+  actionLabel: string;
+  badgeLabel?: string;
+  reason: string;
+  statusLabel: string;
+};
+
+export function readMarketplaceCompatibilityPresentation(
+  installability: AppMarketplaceInstallability,
+  supportedPlatforms: string,
+): MarketplaceCompatibilityPresentation | undefined {
+  if (installability.status === 'compatible') return undefined;
+  if (installability.status === 'unknown') {
+    return {
+      actionLabel: t('appPackagesTemporarilyUnavailable'),
+      reason: t('appPackagesCompatibilityUnknownReason'),
+      statusLabel: t('appPackagesCompatibilityUnknown'),
+    };
+  }
+  return {
+    actionLabel: t('appPackagesUnavailable'),
+    badgeLabel: t('appPackagesPlatformOnly').replace('{platforms}', supportedPlatforms),
+    reason: installability.reason === 'unsupported-os'
+      ? t('appPackagesUnsupportedOsReason').replace('{platforms}', supportedPlatforms)
+      : t('appPackagesUnsupportedTargetReason').replace('{platforms}', supportedPlatforms),
+    statusLabel: t('appPackagesUnavailableOnDevice'),
+  };
+}
+
+export function MarketplaceCompatibilityBadge({
+  presentation,
+}: {
+  presentation?: MarketplaceCompatibilityPresentation;
+}) {
+  if (!presentation?.badgeLabel) return null;
+  return (
+    <span className="mt-1.5 inline-flex rounded-full bg-amber-500/12 px-2 py-0.5 text-[10px] font-semibold text-amber-700 ring-1 ring-inset ring-amber-500/20 dark:text-amber-300">
+      {presentation.badgeLabel}
+    </span>
+  );
+}
+
+export function MarketplaceCompatibilityStatus({
+  blocked,
+  presentation,
+  className,
+}: {
+  blocked: boolean;
+  presentation?: MarketplaceCompatibilityPresentation;
+  className?: string;
+}) {
+  if (!blocked || !presentation) return null;
+  return <p className={className}>{presentation.statusLabel}</p>;
+}
 
 export function MarketplaceInstallButton({
   active,
   canUpdate,
-  failed,
   installed,
   isStarting,
   onAction,
   operation,
+  unavailableLabel,
+  unavailableReason,
 }: {
   active: boolean;
   canUpdate: boolean;
-  failed: boolean;
   installed: boolean;
   isStarting: boolean;
   onAction: () => void;
   operation?: AppPackageOperationView;
+  unavailableLabel?: string;
+  unavailableReason?: string;
 }) {
-  return (
+  const disabled = Boolean(unavailableReason) || installed && !canUpdate || active || isStarting;
+  const button = (
     <Button
       type="button"
       size="sm"
       variant={installed && !canUpdate || active ? 'secondary' : 'default'}
-      disabled={installed && !canUpdate || active || isStarting}
+      disabled={disabled}
       onClick={onAction}
       className="shrink-0 rounded-full px-4"
     >
-      {installed && !canUpdate ? (
-        <><Check className="mr-1.5 h-3.5 w-3.5" />{t('appPackagesMarketplaceInstalled')}</>
-      ) : active || isStarting ? (
-        <><LoaderCircle className="mr-1.5 h-3.5 w-3.5 animate-spin" />{operation ? operationStatusLabel(operation) : t('appPackagesPreparing')}</>
-      ) : canUpdate ? t('appPackagesUpdate') : failed ? t('appPackagesRetry') : t('appPackagesInstall')}
+      {renderInstallButtonContent({
+        active,
+        canUpdate,
+        installed,
+        isStarting,
+        operation,
+        unavailableLabel,
+        unavailableReason,
+      })}
     </Button>
   );
+  if (!unavailableReason) return button;
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span tabIndex={0} className="inline-flex cursor-not-allowed rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+          {button}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="max-w-64 text-xs">
+        {unavailableReason}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function renderInstallButtonContent({
+  active,
+  canUpdate,
+  installed,
+  isStarting,
+  operation,
+  unavailableLabel,
+  unavailableReason,
+}: {
+  active: boolean;
+  canUpdate: boolean;
+  installed: boolean;
+  isStarting: boolean;
+  operation?: AppPackageOperationView;
+  unavailableLabel?: string;
+  unavailableReason?: string;
+}) {
+  if (unavailableReason) return unavailableLabel ?? t('appPackagesUnavailable');
+  if (installed && !canUpdate) {
+    return <><Check className="mr-1.5 h-3.5 w-3.5" />{t('appPackagesMarketplaceInstalled')}</>;
+  }
+  if (active || isStarting) {
+    return (
+      <>
+        <LoaderCircle className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+        {operation ? operationStatusLabel(operation) : t('appPackagesPreparing')}
+      </>
+    );
+  }
+  if (canUpdate) return t('appPackagesUpdate');
+  return t('appPackagesInstall');
 }
 
 export function OperationProgress({ operation }: { operation: AppPackageOperationView }) {
   const progress = Math.max(4, Math.round((operation.completedSteps / operation.totalSteps) * 100));
-  const failed = operation.status === 'failed' || operation.status === 'interrupted';
   return (
-    <div className="mt-2" role={failed ? 'alert' : 'status'} aria-live="polite">
+    <div className="mt-2" role="status" aria-live="polite">
       <div className="h-1 overflow-hidden rounded-full bg-muted">
         <div
-          className={cn('h-full rounded-full transition-[width] duration-300', failed ? 'bg-destructive' : 'bg-primary')}
-          style={{ width: failed ? '100%' : `${progress}%` }}
+          className="h-full rounded-full bg-primary transition-[width] duration-300"
+          style={{ width: `${progress}%` }}
         />
       </div>
-      <p className={cn('mt-1.5 truncate text-[11px]', failed ? 'text-destructive' : 'text-muted-foreground')}>
-        {failed ? operation.error ?? t('appPackagesActionFailed') : operationStatusLabel(operation)}
+      <p className="mt-1.5 truncate text-[11px] text-muted-foreground">
+        {operationStatusLabel(operation)}
       </p>
     </div>
   );

package/src/features/apps/components/app-packages-panel.tsx

@@ -206,6 +206,7 @@ export function AppPackagesPanel({
 
       <AppMarketplaceDialog
         error={lifecycle.error instanceof Error ? lifecycle.error : null}
+        hostTarget={appPackages.data?.hostTarget}
         installedPackages={appPackages.data?.entries ?? []}
         startingSource={lifecycle.variables?.action === 'install'
           ? lifecycle.variables.source

package/src/features/apps/utils/app-marketplace-platform.utils.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+import {
+  getAppMarketplaceInstallabilityRank,
+  resolveAppMarketplaceInstallability,
+} from '@/features/apps/utils/app-marketplace-platform.utils';
+
+const MAC_TARGET = {
+  key: 'darwin-arm64',
+  operatingSystem: 'darwin',
+  architecture: 'arm64',
+} as const;
+
+describe('app marketplace platform compatibility', () => {
+  it('treats universal apps as compatible without requiring host target data', () => {
+    expect(resolveAppMarketplaceInstallability({
+      mode: 'universal',
+      targets: [],
+      operatingSystems: [],
+    }, undefined)).toEqual({ status: 'compatible' });
+  });
+
+  it('matches targeted apps by the canonical host target key', () => {
+    expect(resolveAppMarketplaceInstallability({
+      mode: 'targeted',
+      targets: ['darwin-arm64'],
+      operatingSystems: ['darwin'],
+    }, MAC_TARGET)).toEqual({ status: 'compatible' });
+  });
+
+  it('distinguishes unsupported operating systems from unsupported architectures', () => {
+    expect(resolveAppMarketplaceInstallability({
+      mode: 'targeted',
+      targets: ['linux-x64-gnu'],
+      operatingSystems: ['linux'],
+    }, MAC_TARGET)).toEqual({ status: 'incompatible', reason: 'unsupported-os' });
+
+    expect(resolveAppMarketplaceInstallability({
+      mode: 'targeted',
+      targets: ['darwin-x64'],
+      operatingSystems: ['darwin'],
+    }, MAC_TARGET)).toEqual({ status: 'incompatible', reason: 'unsupported-target' });
+  });
+
+  it('fails closed when the host target cannot be confirmed', () => {
+    const installability = resolveAppMarketplaceInstallability({
+      mode: 'targeted',
+      targets: ['linux-x64-gnu'],
+      operatingSystems: ['linux'],
+    }, undefined);
+
+    expect(installability).toEqual({ status: 'unknown' });
+    expect(getAppMarketplaceInstallabilityRank(installability)).toBe(1);
+    expect(getAppMarketplaceInstallabilityRank({ status: 'compatible' })).toBe(0);
+    expect(getAppMarketplaceInstallabilityRank({
+      status: 'incompatible',
+      reason: 'unsupported-os',
+    })).toBe(2);
+  });
+});

package/src/features/apps/utils/app-marketplace-platform.utils.ts

@@ -1,3 +1,4 @@
+import type { AppPackageHostTarget } from '@nextclaw/client-sdk';
 import type { AppMarketplaceItemView } from '@/features/apps/types/app-marketplace.types';
 
 const OPERATING_SYSTEM_LABELS: Record<'darwin' | 'linux' | 'win32', string> = {
@@ -17,3 +18,35 @@ export function formatAppMarketplacePlatforms(
     .map((operatingSystem) => OPERATING_SYSTEM_LABELS[operatingSystem])
     .join(' · ');
 }
+
+export type AppMarketplaceInstallability =
+  | { status: 'compatible' }
+  | { status: 'incompatible'; reason: 'unsupported-os' | 'unsupported-target' }
+  | { status: 'unknown' };
+
+export function resolveAppMarketplaceInstallability(
+  availability: AppMarketplaceItemView['availability'],
+  hostTarget: AppPackageHostTarget | undefined,
+): AppMarketplaceInstallability {
+  if (!availability || availability.mode === 'universal') {
+    return { status: 'compatible' };
+  }
+  if (!hostTarget) {
+    return { status: 'unknown' };
+  }
+  if (availability.targets.includes(hostTarget.key)) {
+    return { status: 'compatible' };
+  }
+  if (!availability.operatingSystems.includes(hostTarget.operatingSystem)) {
+    return { status: 'incompatible', reason: 'unsupported-os' };
+  }
+  return { status: 'incompatible', reason: 'unsupported-target' };
+}
+
+export function getAppMarketplaceInstallabilityRank(
+  installability: AppMarketplaceInstallability,
+): number {
+  if (installability.status === 'compatible') return 0;
+  if (installability.status === 'unknown') return 1;
+  return 2;
+}

package/src/features/chat/features/conversation/components/__tests__/session-conversation-area.test.tsx

@@ -72,6 +72,7 @@ const mocks = vi.hoisted(() => {
     skillRecords: [],
   };
   const controller = {
+    canEditQueuedInput: true,
     canStopGeneration: true,
     deleteQueuedInput: vi.fn(),
     editQueuedInput: vi.fn(),
@@ -79,9 +80,11 @@ const mocks = vi.hoisted(() => {
     isSending: true,
     queuedInputs: [],
     send: vi.fn(),
+    sendSteering: vi.fn(),
     sendDisabled: true,
     stop: vi.fn(),
     stopDisabled: false,
+    steerQueuedInput: vi.fn(),
   };
   const agent = {
     visibleMessages: [] as unknown[],
@@ -194,8 +197,11 @@ vi.mock(
   () => ({
     useSessionRunQueue: () => ({
       inputs: [],
+      pendingInputs: [],
       isLoading: false,
+      refreshQueuedInputs: vi.fn(async () => []),
       removeQueuedInput: vi.fn(async () => null),
+      steerQueuedInput: vi.fn(async () => null),
     }),
   }),
 );

package/src/features/chat/features/conversation/components/__tests__/session-conversation-input.streaming.test.tsx

@@ -232,6 +232,7 @@ const presenter = {
 } as unknown as ChatPresenterLike;
 
 const controller: SessionConversationInputController = {
+  canEditQueuedInput: true,
   canStopGeneration: true,
   deleteQueuedInput: vi.fn(),
   editQueuedInput: vi.fn(),
@@ -239,10 +240,12 @@ const controller: SessionConversationInputController = {
   primaryAction: 'send',
   queuedInputs: [],
   send: vi.fn(),
+  sendSteering: vi.fn(),
   sendPresetMessage: vi.fn(),
   sendDisabled: true,
   stop: vi.fn(),
   stopDisabled: false,
+  steerQueuedInput: vi.fn(),
 };
 
 function createStreamingInputSnapshot(
@@ -645,6 +648,7 @@ function AttachmentSubmitHarness({
       inputs: [],
       refreshQueuedInputs,
       removeQueuedInput: async () => null,
+      steerQueuedInput: async () => null,
     },
     selectedAgentId: 'main',
     sessionKey: 'session-attachment',
@@ -686,7 +690,7 @@ describe('SessionConversationInput attachment submit', () => {
     );
 
     await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: /Queue|排队发送/ }));
+      fireEvent.click(screen.getByRole('button', { name: /Send|发送/ }));
       await Promise.resolve();
     });
 
@@ -697,7 +701,7 @@ describe('SessionConversationInput attachment submit', () => {
     expect(refreshQueuedInputs).not.toHaveBeenCalled();
 
     await act(async () => {
-      resolveSend({ ...createAttachmentRunHandle(), runId: null });
+      resolveSend({ ...createAttachmentRunHandle(), delivery: 'queued', runId: null });
       await Promise.resolve();
     });
 

package/src/features/chat/features/conversation/components/__tests__/session-queued-input-rows.test.tsx

@@ -0,0 +1,46 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { I18nProvider } from '@/app/components/i18n-provider';
+import { SessionQueuedInputRows } from '@/features/chat/features/conversation/components/session-queued-input-rows';
+
+describe('SessionQueuedInputRows', () => {
+  it('renders queued image thumbnails and file attachments without losing row actions', () => {
+    const editQueuedInput = vi.fn();
+    render(
+      <I18nProvider>
+        <SessionQueuedInputRows
+          controller={{
+            canEditQueuedInput: true,
+            deleteQueuedInput: vi.fn(),
+            editQueuedInput,
+            queuedInputs: [{
+              attachments: [
+                {
+                  mimeType: 'image/png',
+                  name: 'diagram.png',
+                  previewUrl: 'data:image/png;base64,aW1hZ2U=',
+                },
+                {
+                  mimeType: 'application/pdf',
+                  name: 'brief.pdf',
+                },
+              ],
+              id: 'queued-rich-content',
+              preview: '结合附件继续',
+            }],
+            steerQueuedInput: vi.fn(),
+          }}
+        />
+      </I18nProvider>,
+    );
+
+    expect(screen.getByRole('img', { name: 'diagram.png' }).getAttribute('src')).toBe(
+      'data:image/png;base64,aW1hZ2U=',
+    );
+    expect(screen.getByText('brief.pdf')).toBeTruthy();
+    expect(screen.getByText('结合附件继续')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'Edit queued input' }));
+    expect(editQueuedInput).toHaveBeenCalledWith('queued-rich-content');
+  });
+});

package/src/features/chat/features/conversation/components/session-conversation-area.tsx

@@ -318,12 +318,22 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
     restoreComposer: inputActions.restoreComposer,
     setSendError: inputActions.setSendError,
   });
+  const conversationMessages = useMemo(() => {
+    const durableMessageIds = new Set(agent.visibleMessages.map(({ id }) => id));
+    const pendingSteeringMessages = runQueue.pendingInputs.flatMap((input) =>
+      input.placement === "steering" && !durableMessageIds.has(input.message.id)
+        ? [{ ...input.message, status: "pending" as const }]
+        : []
+    );
+    return [...agent.visibleMessages, ...pendingSteeringMessages];
+  }, [agent.visibleMessages, runQueue.pendingInputs]);
   const controllerRef = useRef(controller);
   useEffect(() => {
     controllerRef.current = controller;
   }, [controller]);
   const inputController = useMemo<SessionConversationInputController>(
     () => ({
+      canEditQueuedInput: controller.canEditQueuedInput,
       canStopGeneration: controller.canStopGeneration,
       deleteQueuedInput: (id: string) =>
         controllerRef.current.deleteQueuedInput(id),
@@ -333,14 +343,17 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
       primaryAction: controller.primaryAction,
       queuedInputs: controller.queuedInputs,
       send: () => controllerRef.current.send(),
+      sendSteering: () => controllerRef.current.sendSteering(),
       sendPresetMessage: (message: string) =>
         controllerRef.current.sendPresetMessage(message).catch(() => undefined),
       sendDisabled: controller.sendDisabled,
       stop: () => controllerRef.current.stop(),
       stopDisabled: controller.stopDisabled,
+      steerQueuedInput: (id: string) => controllerRef.current.steerQueuedInput(id),
     }),
     [
       controller.canStopGeneration,
+      controller.canEditQueuedInput,
       controller.isSending,
       controller.primaryAction,
       controller.queuedInputs,
@@ -404,7 +417,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
   const showWelcome =
     showWelcomeForDraft &&
     !sessionKey &&
-    agent.visibleMessages.length === 0 &&
+    conversationMessages.length === 0 &&
     !agent.isHydrating &&
     !controller.isSending;
 
@@ -423,7 +436,7 @@ export function SessionConversationArea(props: SessionConversationAreaProps) {
           sessionKey && compactingSessionIds.has(sessionKey),
         )}
         bottomSlot={showWelcome ? null : conversationFailureSlot}
-        messages={agent.visibleMessages}
+        messages={conversationMessages}
         messageDetailStates={agent.messageDetailStates}
         sessionKey={sessionKey}
         showWelcome={showWelcome}

package/src/features/chat/features/conversation/components/session-conversation-input.tsx

@@ -71,6 +71,7 @@ type SessionConversationInputQuery = ReturnType<typeof useSessionConversationInp
 type SkillSource = SessionSkillEntryView['source'];
 
 export type SessionConversationInputController = {
+  readonly canEditQueuedInput: boolean;
   readonly canStopGeneration: boolean;
   readonly deleteQueuedInput: (id: string) => void;
   readonly editQueuedInput: (id: string) => void;
@@ -80,8 +81,10 @@ export type SessionConversationInputController = {
   readonly sendDisabled: boolean;
   readonly stopDisabled: boolean;
   readonly send: () => Promise<void> | void;
+  readonly sendSteering: () => Promise<void> | void;
   readonly sendPresetMessage: (message: string) => Promise<void> | void;
   readonly stop: () => Promise<void> | void;
+  readonly steerQueuedInput: (id: string) => void;
 };
 
 function toSkillRecords(
@@ -458,13 +461,12 @@ export const SessionConversationInput = memo(function SessionConversationInput(p
           stopHint: t('chatStopUnavailable'),
           sendButtonLabel: controller.primaryAction === 'continue'
             ? t('chatContinueRun')
-            : controller.isSending
-              ? t('chatQueueSend')
-              : t('chatSend'),
+            : t('chatSend'),
           sendIcon: controller.primaryAction,
           stopButtonLabel: t('chatStop'),
           contextWindow,
           onSend: controller.send,
+          onAlternateSend: controller.sendSteering,
           onStop: controller.stop,
         },
       }}

package/src/features/chat/features/conversation/components/session-queued-input-rows.tsx

@@ -1,5 +1,12 @@
 import type { ReactNode } from 'react';
-import { CornerDownRight, LoaderCircle, Pencil, Trash2 } from 'lucide-react';
+import {
+  CornerDownRight,
+  Forward,
+  LoaderCircle,
+  Paperclip,
+  Pencil,
+  Trash2,
+} from 'lucide-react';
 
 import {
   Tooltip,
@@ -13,9 +20,11 @@ import type {
 } from '@/features/chat/features/conversation/hooks/use-session-conversation-controller';
 
 type SessionQueuedInputRowsController = {
+  readonly canEditQueuedInput: boolean;
   readonly deleteQueuedInput: (id: string) => void;
   readonly editQueuedInput: (id: string) => void;
   readonly queuedInputs: readonly SessionConversationQueuedInput[];
+  readonly steerQueuedInput: (id: string) => void;
 };
 
 type SessionQueuedInputRowsProps = {
@@ -29,6 +38,44 @@ type QueuedInputIconButtonProps = {
   readonly onClick: () => void;
 };
 
+function QueuedInputContent({ item }: { readonly item: SessionConversationQueuedInput }) {
+  const attachments = item.attachments ?? [];
+  const visibleAttachments = attachments.slice(0, 3);
+  return (
+    <div className="flex min-w-0 flex-1 items-center gap-2">
+      {visibleAttachments.map((attachment, index) => attachment.previewUrl ? (
+        <img
+          key={`${attachment.name}-${index}`}
+          alt={attachment.name}
+          loading="lazy"
+          src={attachment.previewUrl}
+          title={attachment.name}
+          className="h-9 w-9 shrink-0 rounded-md border border-border/70 object-cover"
+        />
+      ) : (
+        <span
+          key={`${attachment.name}-${index}`}
+          title={attachment.name}
+          className="inline-flex min-w-0 max-w-36 shrink items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs text-muted-foreground"
+        >
+          <Paperclip className="h-3 w-3 shrink-0" />
+          <span className="truncate">{attachment.name}</span>
+        </span>
+      ))}
+      {attachments.length > visibleAttachments.length ? (
+        <span className="shrink-0 text-xs text-muted-foreground">
+          +{attachments.length - visibleAttachments.length}
+        </span>
+      ) : null}
+      {item.preview || attachments.length === 0 ? (
+        <span className="min-w-0 flex-1 truncate font-medium text-foreground/80">
+          {item.preview || t('chatQueuedBannerAttachmentFallback')}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
 function QueuedInputIconButton({
   children,
   disabled = false,
@@ -71,9 +118,7 @@ export function SessionQueuedInputRows({
             className="flex min-h-8 min-w-0 items-center gap-2 text-sm"
           >
             <CornerDownRight className="h-4 w-4 shrink-0 text-muted-foreground/70" />
-            <span className="min-w-0 flex-1 truncate font-medium text-foreground/80">
-              {item.preview || t('chatQueuedBannerAttachmentFallback')}
-            </span>
+            <QueuedInputContent item={item} />
             {item.isSubmitting ? (
               <span
                 aria-label={t('chatQueuedSubmitting')}
@@ -85,11 +130,20 @@ export function SessionQueuedInputRows({
             ) : (
               <div className="flex shrink-0 items-center gap-1.5">
                 <QueuedInputIconButton
-                  label={t('chatQueuedEdit')}
+                  disabled={!controller.canEditQueuedInput}
+                  label={controller.canEditQueuedInput
+                    ? t('chatQueuedEdit')
+                    : t('chatQueuedEditComposerNotEmpty')}
                   onClick={() => controller.editQueuedInput(item.id)}
                 >
                   <Pencil className="h-4 w-4" />
                 </QueuedInputIconButton>
+                <QueuedInputIconButton
+                  label={t('chatQueuedSteer')}
+                  onClick={() => controller.steerQueuedInput(item.id)}
+                >
+                  <Forward className="h-4 w-4" />
+                </QueuedInputIconButton>
                 <QueuedInputIconButton
                   label={t('chatQueuedDelete')}
                   onClick={() => controller.deleteQueuedInput(item.id)}