@nextclaw/ui 0.14.0 → 0.14.1-beta.0

package/src/features/chat/features/input/hooks/use-chat-input-bar-query-state.ts

@@ -0,0 +1,118 @@
+import { useMemo } from 'react';
+import type { NcpSessionSummaryView, SessionSkillEntryView } from '@/shared/lib/api';
+import { t } from '@/shared/lib/i18n';
+import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
+import {
+  buildNcpChatProviderModelOptions,
+  filterNcpChatModelOptionsBySessionType,
+} from '@/features/chat/features/ncp/utils/ncp-chat-query-derived.utils';
+import { useNcpChatProviderStateResolved } from '@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state';
+import { useChatSessionTypeState } from '@/features/chat/features/session-type/hooks/use-chat-session-type-state';
+import { adaptNcpSessionSummaries } from '@/features/chat/features/session/utils/ncp-session-adapter.utils';
+import { resolveRecentSessionPreferredValue } from '@/features/chat/features/session/utils/chat-session-preference-governance.utils';
+import { chatRecentModelsManager } from '@/features/chat/managers/chat-recent-models.manager';
+import type { ChatInputSnapshot } from '@/features/chat/stores/chat-input.store';
+import { useChatQueryStore } from '@/features/chat/stores/ncp-chat-query.store';
+import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
+
+const EMPTY_SESSION_SKILL_RECORDS: SessionSkillEntryView[] = [];
+const EMPTY_NCP_SESSION_SUMMARIES: NcpSessionSummaryView[] = [];
+
+export function useChatInputBarQueryState(snapshot: ChatInputSnapshot) {
+  const presenter = usePresenter();
+  const selectedSessionKey = useChatSessionListStore(
+    (state) => state.snapshot.selectedSessionKey,
+  );
+  const isProviderStateResolved = useNcpChatProviderStateResolved();
+  const querySnapshot = useChatQueryStore((state) => state.snapshot);
+  const config = querySnapshot.configQuery?.data ?? null;
+  const sessionSummaries =
+    querySnapshot.sessionsQuery?.data?.sessions ?? EMPTY_NCP_SESSION_SUMMARIES;
+  const skillRecords =
+    querySnapshot.sessionSkillsQuery?.data?.records ?? EMPTY_SESSION_SKILL_RECORDS;
+  const isSkillsLoading = Boolean(
+    querySnapshot.sessionSkillsQuery?.isLoading ||
+      querySnapshot.sessionSkillsQuery?.isFetching,
+  );
+  const sessions = useMemo(
+    () => adaptNcpSessionSummaries(sessionSummaries),
+    [sessionSummaries],
+  );
+  const selectedSession = useMemo(
+    () => sessions.find((session) => session.key === selectedSessionKey) ?? null,
+    [selectedSessionKey, sessions],
+  );
+  const sessionTypeState = useChatSessionTypeState({
+    selectedSession,
+    pendingSessionType: snapshot.pendingSessionType,
+    setPendingSessionType: presenter.chatInputManager.setPendingSessionType,
+    sessionTypesData: querySnapshot.sessionTypesQuery?.data ?? null,
+  });
+  const providerModelOptions = useMemo(
+    () =>
+      buildNcpChatProviderModelOptions({
+        config,
+        providersView: querySnapshot.providersQuery?.data ?? null,
+        templatesView: querySnapshot.providerTemplatesQuery?.data ?? null,
+      }),
+    [config, querySnapshot.providerTemplatesQuery?.data, querySnapshot.providersQuery?.data],
+  );
+  const modelOptions = useMemo(
+    () =>
+      filterNcpChatModelOptionsBySessionType({
+        modelOptions: providerModelOptions,
+        modelSelectionMode: sessionTypeState.selectedSessionTypeOption?.modelSelectionMode,
+        runtimeDefaultThinkingCapability:
+          sessionTypeState.selectedSessionTypeOption?.runtimeDefaultThinking ?? null,
+        runtimeDefaultModelLabel: t('chatRuntimeDefaultModel'),
+        supportedModels: sessionTypeState.selectedSessionTypeOption?.supportedModels,
+      }),
+    [
+      providerModelOptions,
+      sessionTypeState.selectedSessionTypeOption?.modelSelectionMode,
+      sessionTypeState.selectedSessionTypeOption?.runtimeDefaultThinking,
+      sessionTypeState.selectedSessionTypeOption?.supportedModels,
+    ],
+  );
+  const availableModelValueSet = useMemo(
+    () => new Set(modelOptions.map((option) => option.value)),
+    [modelOptions],
+  );
+  const recentSessionTypeModel = chatRecentModelsManager
+    .read({ namespace: sessionTypeState.selectedSessionType })
+    .find((value) => availableModelValueSet.has(value));
+  const fallbackPreferredModel = useMemo(
+    () =>
+      recentSessionTypeModel ??
+      resolveRecentSessionPreferredValue<string>({
+        sessions,
+        selectedSessionKey,
+        sessionType: sessionTypeState.selectedSessionType,
+        readPreference: (session) => session.preferredModel?.trim() || undefined,
+      }),
+    [recentSessionTypeModel, selectedSessionKey, sessionTypeState.selectedSessionType, sessions],
+  );
+  const fallbackPreferredThinking = useMemo(
+    () =>
+      resolveRecentSessionPreferredValue({
+        sessions,
+        selectedSessionKey,
+        sessionType: sessionTypeState.selectedSessionType,
+        readPreference: (session) => session.preferredThinking ?? undefined,
+      }),
+    [selectedSessionKey, sessionTypeState.selectedSessionType, sessions],
+  );
+
+  return {
+    defaultModel: config?.agents.defaults.model,
+    fallbackPreferredModel,
+    fallbackPreferredThinking,
+    isProviderStateResolved,
+    isSkillsLoading,
+    modelOptions,
+    selectedSession,
+    selectedSessionKey,
+    sessionTypeState,
+    skillRecords,
+  };
+}

package/src/features/chat/features/input/utils/__tests__/chat-input-bar.utils.test.ts

@@ -1,10 +1,9 @@
 import {
   buildChatSlashItems,
   buildModelToolbarSelect,
-  buildSelectedSkillItems,
   buildSkillPickerModel
-} from '../chat-input-bar.utils';
-import type { ChatSkillRecord } from '../chat-input-bar.utils';
+} from '@/features/chat/features/input/utils/chat-input-bar.utils';
+import type { ChatSkillRecord } from '@/features/chat/features/input/utils/chat-input-bar.utils';
 
 function createSkillRecord(partial: Partial<ChatSkillRecord>): ChatSkillRecord {
   return {
@@ -72,20 +71,6 @@ describe('buildChatSlashItems', () => {
   });
 });
 
-describe('buildSelectedSkillItems', () => {
-  it('keeps selected specs and resolves labels when available', () => {
-    const chips = buildSelectedSkillItems(
-      ['web-search', 'missing-skill'],
-      [createSkillRecord({ key: 'web-search', label: 'Web Search' })]
-    );
-
-    expect(chips).toEqual([
-      { key: 'web-search', label: 'Web Search' },
-      { key: 'missing-skill', label: 'missing-skill' }
-    ]);
-  });
-});
-
 describe('buildSkillPickerModel', () => {
   it('builds a stable semantic model for toolbar skill picker', () => {
     const onSelectedKeysChange = vi.fn();

package/src/features/chat/features/input/utils/chat-input-bar.utils.ts

@@ -1,5 +1,4 @@
 import type {
-  ChatSelectedItem,
   ChatSkillPickerOption,
   ChatSkillPickerProps,
   ChatSlashItem,
@@ -7,7 +6,6 @@ import type {
 export {
   buildModelStateHint,
   buildModelToolbarSelect,
-  buildSessionTypeToolbarSelect,
   buildThinkingToolbarSelect,
 } from "./chat-input-toolbar.utils";
 import type {
@@ -35,14 +33,6 @@ const SLASH_ITEM_MATCH_SCORE = {
   fallback: 1
 } as const;
 
-export function resolveSlashQuery(draft: string): string | null {
-  const match = /^\/([^\s]*)$/.exec(draft);
-  if (!match) {
-    return null;
-  }
-  return (match[1] ?? '').trim().toLowerCase();
-}
-
 function normalizeSearchText(value: string | null | undefined): string {
   return (value ?? '').trim().toLowerCase();
 }
@@ -192,20 +182,7 @@ export function buildChatSlashItems(
     }));
 }
 
-export function buildSelectedSkillItems(
-  selectedSkills: string[],
-  skillRecords: ChatSkillRecord[]
-): ChatSelectedItem[] {
-  return selectedSkills.map((spec) => {
-    const matched = skillRecords.find((record) => record.key === spec);
-    return {
-      key: spec,
-      label: matched?.label || spec
-    };
-  });
-}
-
-export function buildSkillPickerOptions(skillRecords: ChatSkillRecord[]): ChatSkillPickerOption[] {
+function buildSkillPickerOptions(skillRecords: ChatSkillRecord[]): ChatSkillPickerOption[] {
   return skillRecords.map((record) => ({
     key: record.key,
     label: record.label,

package/src/features/chat/features/input/utils/chat-input-toolbar.utils.ts

@@ -128,33 +128,6 @@ export function buildModelToolbarSelect({
   };
 }
 
-export function buildSessionTypeToolbarSelect(params: {
-  selectedSessionType?: string;
-  selectedSessionTypeOption: { value: string; label: string } | null;
-  sessionTypeOptions: Array<{ value: string; label: string }>;
-  onValueChange: (value: string) => void;
-  canEditSessionType: boolean;
-  shouldShow: boolean;
-  texts: Pick<ChatInputBarAdapterTexts, "sessionTypePlaceholder">;
-}): ChatToolbarSelect | null {
-  if (!params.shouldShow) {
-    return null;
-  }
-
-  return {
-    key: "session-type",
-    value: params.selectedSessionType,
-    placeholder: params.texts.sessionTypePlaceholder,
-    selectedLabel: params.selectedSessionTypeOption?.label,
-    options: params.sessionTypeOptions.map((option) => ({
-      value: option.value,
-      label: option.label,
-    })),
-    disabled: !params.canEditSessionType,
-    onValueChange: params.onValueChange,
-  };
-}
-
 export function buildThinkingToolbarSelect(params: {
   supportedLevels: ChatThinkingLevel[];
   selectedThinkingLevel: ChatThinkingLevel | null;

package/src/features/chat/features/message/components/__tests__/chat-inline-panel-app-card.test.tsx

@@ -0,0 +1,89 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, expect, it, vi } from 'vitest';
+import { ChatInlinePanelAppCard } from '@/features/chat/features/message/components/chat-inline-panel-app-card';
+
+const mocks = vi.hoisted(() => ({
+  handleIframeMessage: vi.fn(),
+  open: vi.fn(),
+  openTarget: vi.fn(),
+  panelApps: {
+    data: {
+      entries: [
+        {
+          appId: 'weather-card',
+          contentPath: '/api/panel-apps/weather-card/content',
+          fileName: 'weather-card.panel.html',
+          icon: '*',
+          id: 'weather-card',
+          title: 'Weather',
+        },
+      ],
+    },
+    isLoading: false,
+  },
+}));
+
+vi.mock('@/app/presenters/app.presenter', () => ({
+  getPresenter: () => ({
+    panelAppBridgeManager: {
+      handleIframeMessage: mocks.handleIframeMessage,
+    },
+  }),
+}));
+
+vi.mock('@/features/panel-apps', () => ({
+  findPanelAppEntryByDisplayId: (entries: Array<{ appId: string; id: string; title: string }>, value: string) =>
+    entries.find((entry) => [entry.appId, entry.id, entry.title].includes(value)) ?? null,
+  usePanelApps: () => mocks.panelApps,
+}));
+
+vi.mock('@/shared/components/doc-browser', () => ({
+  useDocBrowser: () => ({
+    open: mocks.open,
+    openTarget: mocks.openTarget,
+  }),
+}));
+
+vi.mock('@/shared/lib/i18n', () => ({
+  t: (key: string) => key,
+}));
+
+beforeEach(() => {
+  mocks.handleIframeMessage.mockReset();
+  mocks.open.mockReset();
+  mocks.openTarget.mockReset();
+});
+
+it('renders inline panel apps as bounded card-mode iframes with an expand action', () => {
+  render(<ChatInlinePanelAppCard panelApp={{
+    action: {
+      kind: 'show-content',
+      label: 'Show content',
+      request: {
+        placement: 'side_panel',
+        target: {
+          payload: { appId: 'weather-card' },
+          type: 'panel_app',
+        },
+        title: 'Weather',
+      },
+    },
+    appId: 'weather-card',
+    title: 'Weather',
+  }} />);
+
+  const iframe = screen.getByTitle('Weather');
+  expect(iframe.getAttribute('src')).toBe(
+    '/api/panel-apps/weather-card/content?nextclawDisplayMode=card&nextclawPlacement=inline',
+  );
+  expect(iframe.getAttribute('scrolling')).toBe('auto');
+
+  fireEvent.click(screen.getByLabelText('chatPanelCardExpand'));
+
+  expect(mocks.openTarget).toHaveBeenCalledWith(expect.objectContaining({
+    dedupeKey: 'panel-app:weather-card',
+    kind: 'panel-app',
+    title: 'Weather',
+    url: '/api/panel-apps/weather-card/content',
+  }));
+});

package/src/features/chat/features/message/components/__tests__/chat-message-list.container.test.tsx

@@ -1,12 +1,13 @@
 import { render } from "@testing-library/react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import { beforeEach, expect, it, vi } from "vitest";
-import { ChatMessageListContainer } from "../chat-message-list.container";
+import { ChatMessageListContainer } from "@/features/chat/features/message/components/chat-message-list.container";
 
 const captures = vi.hoisted(() => ({
   renders: [] as Array<{
     messages: unknown[];
     onToolAction?: (action: unknown) => void;
+    renderPanelAppCard?: (panelApp: unknown) => unknown;
     texts?: Record<string, unknown>;
   }>,
   language: "en",
@@ -21,6 +22,7 @@ vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
     ChatMessageList: (props: {
       messages: unknown[];
       onToolAction?: (action: unknown) => void;
+      renderPanelAppCard?: (panelApp: unknown) => unknown;
       texts?: Record<string, unknown>;
     }) => {
       captures.renders.push(props);
@@ -251,6 +253,12 @@ it("delegates tool actions to the chat thread manager owner", () => {
   expect(captures.handleToolAction).toHaveBeenCalledWith(toolAction);
 });
 
+it("passes the inline panel app renderer to the shared chat UI", () => {
+  render(<ChatMessageListContainer messages={[]} isSending={false} />);
+
+  expect(captures.renders[captures.renders.length - 1]?.renderPanelAppCard).toEqual(expect.any(Function));
+});
+
 it("renders context compaction as an in-flow divider instead of a chat message", () => {
   const beforeMessage = {
     id: "message-before",

package/src/features/chat/features/message/components/chat-inline-panel-app-card.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useId, useMemo, useRef } from 'react';
+import type { ChatPanelAppCardViewModel } from '@nextclaw/agent-chat-ui';
+import { AppWindow, Maximize2 } from 'lucide-react';
+import { getPresenter } from '@/app/presenters/app.presenter';
+import { findPanelAppEntryByDisplayId, usePanelApps } from '@/features/panel-apps';
+import { createPanelAppRightPanelResourceTarget } from '@/features/right-panel-resources';
+import {
+  createInlinePanelAppCardUrl,
+  createFallbackPanelAppContentPath,
+  createInlinePanelAppTab,
+  PANEL_APP_INLINE_CARD_MAX_HEIGHT_PX,
+  PANEL_APP_INLINE_IFRAME_SANDBOX,
+} from '@/features/chat/features/message/utils/chat-inline-panel-app-card.utils';
+import { useDocBrowser } from '@/shared/components/doc-browser';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { t } from '@/shared/lib/i18n';
+
+export function ChatInlinePanelAppCard({
+  panelApp,
+}: {
+  panelApp: ChatPanelAppCardViewModel;
+}) {
+  const docBrowser = useDocBrowser();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const iframeId = useId();
+  const panelApps = usePanelApps();
+  const entry = useMemo(
+    () => findPanelAppEntryByDisplayId(panelApps.data?.entries ?? [], panelApp.appId),
+    [panelApp.appId, panelApps.data?.entries],
+  );
+  const target = entry ? createPanelAppRightPanelResourceTarget(entry) : null;
+  const title = panelApp.title ?? target?.title ?? panelApp.appId;
+  const url = panelApps.isLoading
+    ? ''
+    : target?.url ?? createFallbackPanelAppContentPath(panelApp.appId);
+  const cardUrl = useMemo(
+    () => (url ? createInlinePanelAppCardUrl(url) : ''),
+    [url],
+  );
+  const tab = useMemo(
+    () => createInlinePanelAppTab({
+      appId: entry?.id ?? panelApp.appId,
+      title,
+      url,
+    }),
+    [entry?.id, panelApp.appId, title, url],
+  );
+  const iframeInstanceId = `${tab.id}:${tab.navVersion}:${iframeId}`;
+  const openExpanded = () => {
+    if (target) {
+      docBrowser.openTarget(target);
+      return;
+    }
+    docBrowser.open(url, {
+      dedupeKey: tab.dedupeKey,
+      kind: tab.kind,
+      title,
+    });
+  };
+
+  useEffect(() => {
+    if (!url) {
+      return undefined;
+    }
+    const handleMessage = (event: MessageEvent) => {
+      getPresenter().panelAppBridgeManager.handleIframeMessage({
+        event,
+        iframe: iframeRef.current,
+        iframeInstanceId,
+        tab,
+      });
+    };
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [iframeInstanceId, tab, url]);
+
+  if (!url) {
+    return (
+      <div
+        className="h-[320px] min-h-[220px] w-full animate-pulse rounded-lg border border-[#eee3d1] bg-gradient-to-b from-white to-amber-50/60"
+        style={{ maxHeight: PANEL_APP_INLINE_CARD_MAX_HEIGHT_PX }}
+      />
+    );
+  }
+
+  return (
+    <div className="w-full max-w-[42rem] overflow-hidden rounded-lg border border-[#eee3d1] bg-white shadow-[0_1px_2px_rgba(30,20,10,0.04)]">
+      <div className="flex h-9 items-center justify-between gap-2 border-b border-[#f1e7d4] bg-[#fffaf2] px-2.5">
+        <div className="flex min-w-0 items-center gap-2 text-xs font-medium text-[#5c4933]">
+          <AppWindow className="h-3.5 w-3.5 shrink-0 text-primary" />
+          <span className="truncate">{title}</span>
+        </div>
+        <IconActionButton
+          className="h-7 w-7 rounded-md text-[#7a6145] hover:bg-white hover:text-[#2f2212]"
+          icon={<Maximize2 className="h-3.5 w-3.5" />}
+          label={t('chatPanelCardExpand')}
+          onClick={openExpanded}
+        />
+      </div>
+      <div
+        className="relative h-[420px] min-h-[220px] max-h-[min(60vh,420px)] overflow-hidden bg-white"
+      >
+        <iframe
+          ref={iframeRef}
+          key={iframeInstanceId}
+          src={cardUrl}
+          title={title}
+          sandbox={PANEL_APP_INLINE_IFRAME_SANDBOX}
+          scrolling="auto"
+          className="h-full w-full border-0 bg-white"
+        />
+      </div>
+    </div>
+  );
+}

package/src/features/chat/features/message/components/chat-message-list.container.tsx

@@ -17,6 +17,7 @@ import {
   type ContextCompactionTimelineView,
 } from "@/features/chat/features/session/utils/ncp-session-context-metadata.utils";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
+import { ChatInlinePanelAppCard } from "@/features/chat/features/message/components/chat-inline-panel-app-card";
 import { useI18n } from "@/app/components/i18n-provider";
 import { formatDateTime, t } from "@/shared/lib/i18n";
 
@@ -309,6 +310,9 @@ export function ChatMessageListContainer({
                 className="h-4 w-4 shrink-0"
               />
             )}
+            renderPanelAppCard={(panelApp) => (
+              <ChatInlinePanelAppCard panelApp={panelApp} />
+            )}
           />
         ),
       )}

package/src/features/chat/features/message/utils/__tests__/chat-message-show-content-tool-card.utils.test.ts

@@ -1,5 +1,32 @@
 import { describe, expect, it } from "vitest";
-import { buildShowContentToolCard } from "../chat-message-show-content-tool-card.utils";
+import { buildShowContentToolCard } from "@/features/chat/features/message/utils/chat-message-show-content-tool-card.utils";
+import { buildToolCard } from "@/features/chat/features/message/utils/chat-message-tool-card.utils";
+import type { ChatMessageAdapterTexts } from "@/features/chat/types/chat-message.types";
+
+const TEXTS: ChatMessageAdapterTexts = {
+  fileAttachmentLabel: "File",
+  imageAttachmentLabel: "Image",
+  reasoningLabel: "Reasoning",
+  roleLabels: {
+    assistant: "Assistant",
+    fallback: "Message",
+    system: "System",
+    tool: "Tool",
+    user: "User",
+  },
+  showContentActionLabel: "Show content",
+  toolCallLabel: "Tool call",
+  toolInputLabel: "Input",
+  toolNoOutputLabel: "No output",
+  toolOutputLabel: "Output",
+  toolResultLabel: "Tool result",
+  toolStatusCancelledLabel: "Cancelled",
+  toolStatusCompletedLabel: "Completed",
+  toolStatusFailedLabel: "Failed",
+  toolStatusPreparingLabel: "Preparing",
+  toolStatusRunningLabel: "Running",
+  unknownPartLabel: "Unknown",
+};
 
 describe("buildShowContentToolCard", () => {
   it("builds a show-content action from a normalized show_content result", () => {
@@ -47,6 +74,97 @@ describe("buildShowContentToolCard", () => {
           },
           title: "Example",
           purpose: "read",
+          placement: "side_panel",
+        },
+      },
+    });
+  });
+
+  it("builds an inline panel app card while keeping the expand action on side panel placement", () => {
+    const card = buildShowContentToolCard({
+      invocation: {
+        status: "result",
+        toolCallId: "call-show-content",
+        toolName: "show_content",
+        result: {
+          ok: true,
+          action: "showContent",
+          request: {
+            target: {
+              type: "panel_app",
+              payload: {
+                appId: "reader",
+              },
+            },
+            title: "Reader",
+            purpose: "interact",
+            placement: "inline",
+          },
+        },
+      },
+      actionLabel: "Show content",
+      statusLabel: "Completed",
+    });
+
+    expect(card).toMatchObject({
+      panelApp: {
+        appId: "reader",
+        title: "Reader",
+        action: {
+          kind: "show-content",
+          label: "Show content",
+          request: {
+            target: {
+              type: "panel_app",
+              payload: {
+                appId: "reader",
+              },
+            },
+            title: "Reader",
+            purpose: "interact",
+            placement: "side_panel",
+          },
+        },
+      },
+    });
+  });
+
+  it("preserves inline panel app data when converting to the shared chat tool view model", () => {
+    const card = buildShowContentToolCard({
+      invocation: {
+        status: "result",
+        toolCallId: "call-show-content",
+        toolName: "show_content",
+        result: {
+          ok: true,
+          action: "showContent",
+          request: {
+            target: {
+              type: "panel_app",
+              payload: {
+                appId: "weather-card",
+              },
+            },
+            title: "Weather",
+            purpose: "interact",
+            placement: "inline",
+          },
+        },
+      },
+      actionLabel: "Show content",
+      statusLabel: "Completed",
+    });
+
+    expect(card).not.toBeNull();
+    expect(buildToolCard(card!, TEXTS)).toMatchObject({
+      panelApp: {
+        appId: "weather-card",
+        title: "Weather",
+        action: {
+          kind: "show-content",
+          request: {
+            placement: "side_panel",
+          },
         },
       },
     });

package/src/features/chat/features/message/utils/chat-inline-panel-app-card.utils.ts

@@ -0,0 +1,51 @@
+import {
+  createPanelAppResourceUri,
+  RIGHT_PANEL_PANEL_APP_TAB_KIND,
+} from '@/features/right-panel-resources';
+import type { DocBrowserTab } from '@/shared/components/doc-browser/doc-browser-context';
+
+export const PANEL_APP_INLINE_IFRAME_SANDBOX = [
+  'allow-scripts',
+  'allow-forms',
+  'allow-modals',
+  'allow-popups',
+  'allow-popups-to-escape-sandbox',
+  'allow-downloads',
+  'allow-pointer-lock',
+  'allow-presentation',
+].join(' ');
+
+export const PANEL_APP_INLINE_CARD_MAX_HEIGHT_PX = 420;
+
+const PANEL_APP_INLINE_CARD_SEARCH_PARAMS = {
+  nextclawDisplayMode: 'card',
+  nextclawPlacement: 'inline',
+} as const;
+
+export function createFallbackPanelAppContentPath(appId: string): string {
+  return `/api/panel-apps/${encodeURIComponent(appId)}/content`;
+}
+
+export function createInlinePanelAppCardUrl(url: string): string {
+  const separator = url.includes('?') ? '&' : '?';
+  return `${url}${separator}${new URLSearchParams(PANEL_APP_INLINE_CARD_SEARCH_PARAMS).toString()}`;
+}
+
+export function createInlinePanelAppTab(params: {
+  appId: string;
+  title: string;
+  url: string;
+}): DocBrowserTab {
+  const { appId, title, url } = params;
+  return {
+    currentUrl: url,
+    dedupeKey: `panel-app:${appId}`,
+    history: [url],
+    historyIndex: 0,
+    id: `inline-panel-app:${appId}`,
+    kind: RIGHT_PANEL_PANEL_APP_TAB_KIND,
+    navVersion: 0,
+    resourceUri: createPanelAppResourceUri(appId),
+    title,
+  };
+}