@nextclaw/ui 0.15.26 → 0.15.28

package/src/features/apps/services/app-marketplace.service.ts

@@ -0,0 +1,223 @@
+import type {
+  AppMarketplaceCatalogParams,
+  AppMarketplaceCatalogView,
+  AppMarketplaceDetailView,
+  AppMarketplaceItemView,
+} from '@/features/apps/types/app-marketplace.types';
+
+const APP_MARKETPLACE_BASE_URL = 'https://apps-registry.nextclaw.io';
+const UNSUPPORTED_CATALOG_STATUSES = new Set([404, 405, 501]);
+const EXPLICIT_DEV_PREVIEW_COVER_BASE_URL = import.meta.env
+  .VITE_APP_MARKETPLACE_PREVIEW_COVER_BASE_URL?.replace(/\/$/, '');
+const DEFAULT_DEV_PREVIEW_COVER_BASE_URL = import.meta.env.DEV && !import.meta.env.VITEST
+  ? '/__app-marketplace-preview'
+  : undefined;
+const DEV_PREVIEW_COVERS = new Set([
+  'hello-notes',
+  'personal-organizer',
+  'starter-card',
+  'workspace-glance',
+]);
+
+type AppMarketplaceRequestParams = AppMarketplaceCatalogParams & {
+  cursor?: string;
+  limit?: number;
+};
+
+export async function fetchAppMarketplace(
+  params: AppMarketplaceRequestParams = {},
+  signal?: AbortSignal,
+): Promise<AppMarketplaceCatalogView> {
+  const response = await fetchAppMarketplaceV2(params, signal);
+  if (UNSUPPORTED_CATALOG_STATUSES.has(response.status)) {
+    return await fetchLegacyAppMarketplace(params, signal);
+  }
+  return await readAppMarketplaceCatalogResponse(response);
+}
+
+export async function fetchAppMarketplaceDetail(
+  slug: string,
+  signal?: AbortSignal,
+): Promise<AppMarketplaceDetailView> {
+  const response = await fetch(
+    `${APP_MARKETPLACE_BASE_URL}/api/v1/apps/items/${encodeURIComponent(slug)}`,
+    { headers: { accept: 'application/json' }, signal },
+  );
+  if (!response.ok) {
+    throw new Error(`Marketplace detail request failed (${response.status})`);
+  }
+  const payload: unknown = await response.json();
+  if (!isRecord(payload) || payload.ok !== true || !isRecord(payload.data)) {
+    throw new Error('Marketplace returned an invalid app detail');
+  }
+  const { data: item } = payload;
+  const rawDetail = item as Record<string, unknown>;
+  if (!isAppMarketplaceItem(item) || !isRecord(rawDetail.manifest) || !isRecord(rawDetail.permissions)) {
+    throw new Error('Marketplace returned an invalid app detail');
+  }
+  const { manifest, permissions } = rawDetail;
+  const components = Array.isArray(manifest.components)
+    ? manifest.components.filter((component: unknown): component is { kind: 'panel' | 'service'; path: string } =>
+        isRecord(component)
+        && (component.kind === 'panel' || component.kind === 'service')
+        && typeof component.path === 'string')
+    : undefined;
+  return {
+    ...withDevPreviewCover(item),
+    description: typeof rawDetail.description === 'string' ? rawDetail.description : undefined,
+    descriptionI18n: isStringRecord(rawDetail.descriptionI18n) ? rawDetail.descriptionI18n : undefined,
+    manifest: {
+      schemaVersion: manifest.schemaVersion === 2 ? 2 : 1,
+      icon: typeof manifest.icon === 'string' ? manifest.icon : undefined,
+      engines: isRecord(manifest.engines) && typeof manifest.engines.nextclaw === 'string'
+        ? { nextclaw: manifest.engines.nextclaw }
+        : undefined,
+      components,
+    },
+    permissions: permissions as AppMarketplaceDetailView['permissions'],
+  };
+}
+
+export function withDevPreviewCover<T extends AppMarketplaceItemView>(item: T): T {
+  if (item.coverUrl) {
+    return item;
+  }
+  const previewCoverUrl = readDevPreviewCoverUrl(item.slug);
+  if (item.publisher.id !== 'nextclaw' || !previewCoverUrl) {
+    return item;
+  }
+  return {
+    ...item,
+    coverUrl: previewCoverUrl,
+    coverPreview: true,
+  };
+}
+
+async function fetchAppMarketplaceV2(
+  params: AppMarketplaceRequestParams,
+  signal?: AbortSignal,
+): Promise<Response> {
+  const { cursor, featured, limit, publisher, q, sort, tag, tags } = params;
+  const search = new URLSearchParams();
+  if (q) search.set('q', q);
+  if (tag) search.set('tag', tag);
+  if (tags?.length) search.set('tags', tags.join(','));
+  if (publisher) search.set('publisher', publisher);
+  if (featured !== undefined) search.set('featured', String(featured));
+  if (sort) search.set('sort', sort);
+  if (cursor) search.set('cursor', cursor);
+  search.set('limit', String(limit ?? 24));
+  return await fetch(`${APP_MARKETPLACE_BASE_URL}/api/v2/apps/items?${search}`, {
+    headers: { accept: 'application/json' },
+    signal,
+  });
+}
+
+async function readAppMarketplaceCatalogResponse(
+  response: Response,
+): Promise<AppMarketplaceCatalogView> {
+  if (!response.ok) {
+    throw new Error(`Marketplace request failed (${response.status})`);
+  }
+
+  const payload: unknown = await response.json();
+  if (!isRecord(payload) || payload.ok !== true || !isRecord(payload.data)) {
+    throw new Error('Marketplace returned an invalid response');
+  }
+
+  const items = Array.isArray(payload.data.items)
+    ? payload.data.items.filter(isAppMarketplaceItem)
+    : [];
+  return {
+    items: items.map(withDevPreviewCover),
+    nextCursor: typeof payload.data.nextCursor === 'string' ? payload.data.nextCursor : undefined,
+    hasMore: payload.data.hasMore === true,
+    query: typeof payload.data.query === 'string' ? payload.data.query : undefined,
+    tag: typeof payload.data.tag === 'string' ? payload.data.tag : undefined,
+    featured: typeof payload.data.featured === 'boolean' ? payload.data.featured : undefined,
+    sort: payload.data.sort === 'updated' || payload.data.sort === 'featured'
+      ? payload.data.sort
+      : 'relevance',
+  };
+}
+
+async function fetchLegacyAppMarketplace(
+  params: AppMarketplaceRequestParams,
+  signal?: AbortSignal,
+): Promise<AppMarketplaceCatalogView> {
+  const { featured, publisher, q, sort, tag, tags } = params;
+  const search = new URLSearchParams({ page: '1', pageSize: '100' });
+  if (q) search.set('q', q);
+  if (tag) search.set('tag', tag);
+  const response = await fetch(`${APP_MARKETPLACE_BASE_URL}/api/v1/apps/items?${search}`, {
+    headers: { accept: 'application/json' },
+    signal,
+  });
+  if (!response.ok) {
+    throw new Error(`Marketplace compatibility request failed (${response.status})`);
+  }
+  const payload: unknown = await response.json();
+  if (!isRecord(payload) || payload.ok !== true || !isRecord(payload.data)) {
+    throw new Error('Marketplace returned an invalid compatibility response');
+  }
+
+  const items = Array.isArray(payload.data.items)
+    ? payload.data.items.filter(isAppMarketplaceItem)
+    : [];
+  const requiredTags = new Set(tags ?? []);
+  return {
+    items: items
+      .filter((item) => !publisher || item.publisher.id === publisher)
+      .filter((item) => featured === undefined || item.featured === featured)
+      .filter((item) => requiredTags.size === 0 || item.tags.some((tag) => requiredTags.has(tag)))
+      .map(withDevPreviewCover),
+    hasMore: false,
+    query: q,
+    tag,
+    tags,
+    featured,
+    sort: sort ?? (q ? 'relevance' : 'featured'),
+  };
+}
+
+function readDevPreviewCoverUrl(slug: string): string | undefined {
+  const baseUrl = EXPLICIT_DEV_PREVIEW_COVER_BASE_URL ?? DEFAULT_DEV_PREVIEW_COVER_BASE_URL;
+  if (baseUrl && DEV_PREVIEW_COVERS.has(slug)) {
+    return `${baseUrl}/${encodeURIComponent(slug)}.webp`;
+  }
+  return undefined;
+}
+
+function isAppMarketplaceItem(value: unknown): value is AppMarketplaceItemView {
+  if (!isRecord(value) || !isRecord(value.install) || !isRecord(value.publisher)) {
+    return false;
+  }
+  return typeof value.id === 'string'
+    && typeof value.slug === 'string'
+    && typeof value.appId === 'string'
+    && typeof value.name === 'string'
+    && (value.iconUrl === undefined || typeof value.iconUrl === 'string')
+    && (value.coverUrl === undefined || typeof value.coverUrl === 'string')
+    && (value.coverPreview === undefined || typeof value.coverPreview === 'boolean')
+    && (value.accentColor === undefined || typeof value.accentColor === 'string')
+    && typeof value.summary === 'string'
+    && isStringRecord(value.summaryI18n)
+    && Array.isArray(value.tags)
+    && value.tags.every((tag) => typeof tag === 'string')
+    && typeof value.latestVersion === 'string'
+    && typeof value.featured === 'boolean'
+    && typeof value.publisher.id === 'string'
+    && typeof value.publisher.name === 'string'
+    && value.install.kind === 'registry'
+    && typeof value.install.spec === 'string'
+    && typeof value.install.registry === 'string'
+    && typeof value.webUrl === 'string';
+}
+
+function isStringRecord(value: unknown): value is Record<string, string> {
+  return isRecord(value) && Object.values(value).every((entry) => typeof entry === 'string');
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}

package/src/features/apps/types/app-marketplace.types.ts

@@ -0,0 +1,75 @@
+export type AppMarketplaceItemView = {
+  id: string;
+  slug: string;
+  appId: string;
+  name: string;
+  iconUrl?: string;
+  coverUrl?: string;
+  coverPreview?: boolean;
+  accentColor?: string;
+  summary: string;
+  summaryI18n: Record<string, string>;
+  tags: string[];
+  latestVersion: string;
+  featured: boolean;
+  publisher: {
+    id: string;
+    name: string;
+    url?: string;
+  };
+  install: {
+    kind: 'registry';
+    spec: string;
+    registry: string;
+  };
+  webUrl: string;
+};
+
+export type AppMarketplaceCatalogView = {
+  items: AppMarketplaceItemView[];
+  nextCursor?: string;
+  hasMore: boolean;
+  query?: string;
+  tag?: string;
+  tags?: string[];
+  featured?: boolean;
+  sort: 'relevance' | 'featured' | 'updated';
+};
+
+export type AppMarketplaceListView = {
+  items: AppMarketplaceItemView[];
+  hasMore: boolean;
+};
+
+export type AppMarketplaceDetailView = AppMarketplaceItemView & {
+  description?: string;
+  descriptionI18n?: Record<string, string>;
+  manifest: {
+    schemaVersion: 1 | 2;
+    icon?: string;
+    engines?: { nextclaw?: string };
+    components?: Array<{
+      kind: 'panel' | 'service';
+      path: string;
+    }>;
+  };
+  permissions: {
+    documentAccess?: Array<{
+      id: string;
+      mode: string;
+      description?: string;
+    }>;
+    allowedDomains?: string[];
+    storage?: { namespace?: string };
+    capabilities?: { hostBridge?: boolean };
+  };
+};
+
+export type AppMarketplaceCatalogParams = {
+  q?: string;
+  tag?: string;
+  tags?: string[];
+  featured?: boolean;
+  publisher?: string;
+  sort?: 'relevance' | 'featured' | 'updated';
+};

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

@@ -427,6 +427,26 @@ describe('SessionConversationInput streaming stability', () => {
     expect(deleteQueuedInput).toHaveBeenCalledWith('queued-2');
   });
 
+  it('renders a submitting queue row immediately without premature edit actions', () => {
+    const controlRef: MutableRefObject<StreamingInputControl | null> = { current: null };
+    renderInput(
+      <StreamingSessionConversationInputHarness
+        controlRef={controlRef}
+        controllerOverride={{
+          ...controller,
+          queuedInputs: [
+            { id: 'submitting-1', isSubmitting: true, preview: '正在提交的任务' },
+          ],
+        }}
+      />,
+    );
+
+    expect(screen.getByText('正在提交的任务')).toBeTruthy();
+    expect(screen.getByLabelText('Adding to queue…')).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Edit queued input' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Delete queued input' })).toBeNull();
+  });
+
   it('leaves send-error rendering to the conversation surface', () => {
     const controlRef: MutableRefObject<StreamingInputControl | null> = { current: null };
     const providerError = 'Chat Completions API failed (402): raw provider error';
@@ -456,9 +476,13 @@ function createAttachmentRunHandle(): NcpRunHandle {
 
 function AttachmentSubmitHarness({
   initialPrompt,
+  isRunning = false,
+  refreshQueuedInputs = async () => [],
   send,
 }: {
   readonly initialPrompt?: string;
+  readonly isRunning?: boolean;
+  readonly refreshQueuedInputs?: () => Promise<readonly never[]>;
   readonly send: AttachmentSubmitAgentSend;
 }) {
   const { inputActions, inputSnapshot } = useSessionConversationInputState(
@@ -503,14 +527,14 @@ function AttachmentSubmitHarness({
     continueRun: vi.fn(),
     editMessage: vi.fn(),
     isHydrating: false,
-    isRunning: false,
+    isRunning,
     isSending: false,
     send,
     snapshot: {
-      activeRun: null,
+      activeRun: isRunning ? { sessionId: 'session-attachment' } : null,
     },
     visibleMessages: [],
-  }), [send]);
+  }), [isRunning, send]);
   const controller = useSessionConversationController({
     agent,
     inputSnapshot,
@@ -518,6 +542,7 @@ function AttachmentSubmitHarness({
     isRuntimeBlocked: false,
     runQueue: {
       inputs: [],
+      refreshQueuedInputs,
       removeQueuedInput: async () => null,
     },
     selectedAgentId: 'main',
@@ -543,6 +568,42 @@ function AttachmentSubmitHarness({
 }
 
 describe('SessionConversationInput attachment submit', () => {
+  it('shows immediate queue feedback from the real send button before backend acknowledgement', async () => {
+    let resolveSend!: (handle: NcpRunHandle) => void;
+    const send = vi.fn<AttachmentSubmitAgentSend>(() => new Promise((resolve) => {
+      resolveSend = resolve;
+    }));
+    const refreshQueuedInputs = vi.fn(async () => [] as const);
+
+    renderInput(
+      <AttachmentSubmitHarness
+        initialPrompt="稍后继续这个任务"
+        isRunning
+        refreshQueuedInputs={refreshQueuedInputs}
+        send={send}
+      />,
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /Queue|排队发送/ }));
+      await Promise.resolve();
+    });
+
+    expect(send).toHaveBeenCalledTimes(1);
+    const submittingStatus = screen.getByLabelText('Adding to queue…');
+    expect(submittingStatus.parentElement?.textContent).toContain('稍后继续这个任务');
+    await waitFor(() => expect(screen.getByRole('textbox').textContent).toBe(''));
+    expect(refreshQueuedInputs).not.toHaveBeenCalled();
+
+    await act(async () => {
+      resolveSend({ ...createAttachmentRunHandle(), runId: null });
+      await Promise.resolve();
+    });
+
+    await waitFor(() => expect(refreshQueuedInputs).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(screen.queryByLabelText('Adding to queue…')).toBeNull());
+  });
+
   it('preserves a project file reference in the outgoing user message and AI context', async () => {
     const send = vi.fn<AttachmentSubmitAgentSend>(async () => createAttachmentRunHandle());
 

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { CornerDownRight, Pencil, Trash2 } from 'lucide-react';
+import { CornerDownRight, LoaderCircle, Pencil, Trash2 } from 'lucide-react';
 
 import {
   Tooltip,
@@ -74,20 +74,30 @@ export function SessionQueuedInputRows({
             <span className="min-w-0 flex-1 truncate font-medium text-foreground/80">
               {item.preview || t('chatQueuedBannerAttachmentFallback')}
             </span>
-            <div className="flex shrink-0 items-center gap-1.5">
-              <QueuedInputIconButton
-                label={t('chatQueuedEdit')}
-                onClick={() => controller.editQueuedInput(item.id)}
+            {item.isSubmitting ? (
+              <span
+                aria-label={t('chatQueuedSubmitting')}
+                className="inline-flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground"
               >
-                <Pencil className="h-4 w-4" />
-              </QueuedInputIconButton>
-              <QueuedInputIconButton
-                label={t('chatQueuedDelete')}
-                onClick={() => controller.deleteQueuedInput(item.id)}
-              >
-                <Trash2 className="h-4 w-4" />
-              </QueuedInputIconButton>
-            </div>
+                <LoaderCircle className="h-3.5 w-3.5 animate-spin" />
+                {t('chatQueuedSubmitting')}
+              </span>
+            ) : (
+              <div className="flex shrink-0 items-center gap-1.5">
+                <QueuedInputIconButton
+                  label={t('chatQueuedEdit')}
+                  onClick={() => controller.editQueuedInput(item.id)}
+                >
+                  <Pencil className="h-4 w-4" />
+                </QueuedInputIconButton>
+                <QueuedInputIconButton
+                  label={t('chatQueuedDelete')}
+                  onClick={() => controller.deleteQueuedInput(item.id)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </QueuedInputIconButton>
+              </div>
+            )}
           </div>
         ))}
       </div>

package/src/features/chat/features/conversation/hooks/__tests__/use-session-conversation-controller.test.tsx

@@ -59,6 +59,7 @@ function createControllerParams(params: {
   const removeQueuedInput = vi.fn(async (id: string) =>
     queuedInputs.find((item) => item.id === id) ?? null,
   );
+  const refreshQueuedInputs = vi.fn(async () => queuedInputs);
   return {
     agent: {
       abort: vi.fn(),
@@ -116,6 +117,7 @@ function createControllerParams(params: {
     isRuntimeBlocked: false,
     runQueue: {
       inputs: queuedInputs,
+      refreshQueuedInputs,
       removeQueuedInput,
     },
     selectedAgentId: 'main',
@@ -178,6 +180,57 @@ describe('useSessionConversationController backend run queue', () => {
     expect(params.resetComposer).toHaveBeenCalledTimes(1);
   });
 
+  it('projects a submitting queue row before the backend acknowledges the message', async () => {
+    let resolveSend!: (handle: NcpRunHandle) => void;
+    const send = vi.fn<TestAgentSend>(() => new Promise((resolve) => {
+      resolveSend = resolve;
+    }));
+    const params = createControllerParams({ isRunning: true, send });
+    const { result } = renderHook(() => useSessionConversationController(params));
+    let submission!: Promise<void>;
+
+    act(() => {
+      submission = result.current.send();
+    });
+
+    expect(params.resetComposer).toHaveBeenCalledTimes(1);
+    expect(result.current.queuedInputs).toEqual([
+      expect.objectContaining({
+        isSubmitting: true,
+        preview: 'next task',
+      }),
+    ]);
+    expect(params.runQueue.refreshQueuedInputs).not.toHaveBeenCalled();
+
+    await act(async () => {
+      resolveSend(createRunHandle({ runId: null }));
+      await submission;
+    });
+
+    expect(params.runQueue.refreshQueuedInputs).toHaveBeenCalledTimes(1);
+    expect(result.current.queuedInputs).toEqual([]);
+  });
+
+  it('removes the submitting queue row and restores the draft when submission fails', async () => {
+    const sendError = new Error('queue submission failed');
+    const send = vi.fn<TestAgentSend>(async () => {
+      throw sendError;
+    });
+    const params = createControllerParams({ isRunning: true, send });
+    const { result } = renderHook(() => useSessionConversationController(params));
+
+    await act(async () => {
+      await expect(result.current.send()).rejects.toThrow(sendError);
+    });
+
+    expect(result.current.queuedInputs).toEqual([]);
+    expect(params.restoreComposer).toHaveBeenCalledWith(expect.objectContaining({
+      text: 'next task',
+    }));
+    expect(params.setSendError).toHaveBeenLastCalledWith(sendError.message);
+    expect(params.runQueue.refreshQueuedInputs).not.toHaveBeenCalled();
+  });
+
   it('keeps an existing session bound to its agent instead of the global draft selection', async () => {
     const send = createSendMock();
     const params = createControllerParams({ isRunning: false, send });

package/src/features/chat/features/conversation/hooks/__tests__/use-session-run-queue.test.tsx

@@ -83,6 +83,24 @@ describe('useSessionRunQueue', () => {
     unmount();
   });
 
+  it('refreshes the authoritative queue on demand after a submission is accepted', async () => {
+    const listQueuedInputs = vi.spyOn(nextclawClient.sessions, 'listQueuedInputs')
+      .mockResolvedValue(createQueue('session-1', 'queued'));
+    const { result } = renderHook(
+      () => useSessionRunQueue('session-1'),
+      { wrapper: createWrapper() },
+    );
+    await waitFor(() => expect(listQueuedInputs).toHaveBeenCalledTimes(1));
+
+    let refreshed: UiNcpSessionQueuedInputsView['inputs'] = [];
+    await act(async () => {
+      refreshed = [...await result.current.refreshQueuedInputs()];
+    });
+
+    expect(listQueuedInputs).toHaveBeenCalledTimes(2);
+    expect(refreshed[0]?.message.parts[0]).toMatchObject({ text: 'queued' });
+  });
+
   it('replaces an in-flight stale queue read after the queue changes', async () => {
     let resolveInitialRead!: (queue: UiNcpSessionQueuedInputsView) => void;
     const initialRead = new Promise<UiNcpSessionQueuedInputsView>((resolve) => {

package/src/features/chat/features/conversation/hooks/use-chat-composer-reference-intent.ts

@@ -2,6 +2,7 @@ import { useEffect, type RefObject } from 'react';
 import { type ChatInputBarHandle } from '@nextclaw/agent-chat-ui';
 import {
   CHAT_CONVERSATION_EXCERPT_TOKEN_KIND,
+  CHAT_UI_RESOURCE_TOKEN_KIND,
   CHAT_WORKSPACE_EXCERPT_TOKEN_KIND,
 } from '@nextclaw/shared';
 
@@ -41,7 +42,9 @@ export function useChatComposerReferenceIntent(params: {
                 role: intent.role,
                 excerpt: intent.excerpt,
               }
-          : undefined,
+            : intent.kind === CHAT_UI_RESOURCE_TOKEN_KIND
+              ? { reference: intent.reference }
+              : undefined,
       });
       intentManager.markConsumed(intent.id);
     };