@vertesia/ui 1.5.0 → 1.5.1

package/src/features/agent/chat/hooks/useAgentPlans.ts

@@ -18,14 +18,14 @@ export interface UseAgentPlansResult {
  * Key improvement: incremental processing. Instead of scanning ALL messages
  * on every change, tracks `lastProcessedIndex` and only scans new messages.
  */
-export function useAgentPlans(messages: AgentMessage[], interactive: boolean, isModal = false): UseAgentPlansResult {
+export function useAgentPlans(messages: AgentMessage[], interactive: boolean): UseAgentPlansResult {
     const [plans, setPlans] = useState<Array<{ plan: Plan; timestamp: number }>>([]);
     const [activePlanIndex, setActivePlanIndex] = useState<number>(0);
     const [workstreamStatusMap, setWorkstreamStatusMap] = useState<
         Map<number, Map<string, 'pending' | 'in_progress' | 'completed' | 'skipped'>>
     >(new Map());
     const [showInput, setShowInput] = useState(interactive);
-    const [showSlidingPanel, setShowSlidingPanel] = useState<boolean>(!isModal);
+    const [showSlidingPanel, setShowSlidingPanel] = useState<boolean>(false);
 
     // Incremental processing: track how far we've scanned
     const lastProcessedIndex = useRef<number>(-1);
@@ -38,12 +38,12 @@ export function useAgentPlans(messages: AgentMessage[], interactive: boolean, is
             setPlans([]);
             setActivePlanIndex(0);
             setWorkstreamStatusMap(new Map());
-            // Keep right panel open by default on desktop sessions.
-            setShowSlidingPanel(!isModal);
+            // Open automatically only once a plan is available.
+            setShowSlidingPanel(false);
             lastProcessedIndex.current = -1;
             knownPlanTimestamps.current.clear();
         }
-    }, [messages.length, isModal]);
+    }, [messages.length]);
 
     // Helper to determine showInput from the latest message
     const updateShowInput = useCallback(

package/src/features/magic-pdf/GroundedExtractionView.tsx

@@ -659,7 +659,7 @@ function PageWithOverlay({
                             'absolute cursor-pointer border rounded-[1px] transition-colors',
                             citation.misaligned && 'border-dashed',
                             isSelected
-                                ? 'border-2 border-info bg-info z-10'
+                                ? 'border-2 border-info bg-info/20 z-10'
                                 : citation.verified
                                   ? 'border-success/70 hover:bg-success/20'
                                   : citation.reviewed
@@ -853,7 +853,7 @@ function ArrayTable({
                                                 className={cn(
                                                     'text-start rounded px-1 w-full',
                                                     isSelected
-                                                        ? 'bg-info ring-1 ring-primary'
+                                                        ? 'bg-info/15 ring-1 ring-primary'
                                                         : citation
                                                           ? 'hover:bg-muted cursor-pointer'
                                                           : 'text-muted cursor-default',
@@ -909,7 +909,7 @@ function LeafRow({
             onClick={() => citation && onSelect(path)}
             className={cn(
                 'flex items-center gap-2 w-full text-start text-sm rounded px-1.5 py-0.5',
-                isSelected ? 'bg-info ring-1 ring-primary' : citation ? 'hover:bg-muted' : '',
+                isSelected ? 'bg-info/15 ring-1 ring-primary' : citation ? 'hover:bg-muted' : '',
                 !citation && 'cursor-default',
             )}
         >

package/src/features/oauth/McpConnectionsButton.test.tsx

@@ -183,6 +183,62 @@ describe('MCP connection controls', () => {
         expect(onChange).toHaveBeenCalledWith(['linear']);
     });
 
+    it.each([{ oauthIds: [] }, { oauthIds: ['anonymous'] }])(
+        'shows anonymous servers without status requests, including stale OAuth ids %j',
+        async ({ oauthIds }) => {
+            mocks.getInstalledApps.mockResolvedValue([
+                {
+                    id: 'anonymous-app',
+                    manifest: {
+                        name: 'anonymous-app',
+                        tool_collections: [
+                            {
+                                type: 'mcp',
+                                id: 'anonymous',
+                                name: 'Anonymous MCP',
+                                namespace: 'anonymous',
+                                url: 'https://anonymous.example.com/mcp',
+                                auth: 'none',
+                                oauth_app: 'stale-oauth-app',
+                            },
+                        ],
+                    },
+                    oauth_collection_ids: oauthIds,
+                },
+            ]);
+            const onChange = vi.fn();
+            const { rerender } = renderWithProviders(
+                <McpConnectionsInlineList disabledCollections={['other']} onChange={onChange} />,
+            );
+
+            expect(await screen.findByText('Anonymous MCP')).not.toBeNull();
+            expect(screen.getAllByText('No authentication')).toHaveLength(1);
+            expect(screen.queryByRole('button', { name: /connect/i })).toBeNull();
+            expect(mocks.getStatus).not.toHaveBeenCalled();
+            expect(mocks.getCollectionStatus).not.toHaveBeenCalled();
+
+            fireEvent.click(screen.getByRole('switch', { name: 'Deactivate Anonymous MCP for this conversation' }));
+            expect(onChange).toHaveBeenLastCalledWith(['other', 'anonymous']);
+            rerender(<McpConnectionsInlineList disabledCollections={['other', 'anonymous']} onChange={onChange} />);
+            fireEvent.click(screen.getByRole('switch', { name: 'Activate Anonymous MCP for this conversation' }));
+            expect(onChange).toHaveBeenLastCalledWith(['other']);
+            rerender(<McpConnectionsInlineList onChange={onChange} readOnly />);
+            expect(screen.getByRole('switch')).toHaveProperty('disabled', true);
+
+            rerender(<McpConnectionsActionMenu onChange={onChange} />);
+            fireEvent.pointerDown(await screen.findByRole('button', { name: /settings/i }));
+            const menuItem = await screen.findByText('MCP');
+            expect(screen.getByText('1')).not.toBeNull();
+            fireEvent.click(menuItem);
+            expect(await screen.findByText('Anonymous MCP')).not.toBeNull();
+            expect(screen.getByText('No authentication')).not.toBeNull();
+            expect(screen.queryByRole('button', { name: /connect/i })).toBeNull();
+            fireEvent.click(screen.getByRole('switch', { name: 'Deactivate Anonymous MCP for this conversation' }));
+            expect(onChange).toHaveBeenLastCalledWith(['anonymous']);
+            expect(mocks.getStatus).not.toHaveBeenCalled();
+        },
+    );
+
     it('renders MCP rows before connection statuses finish loading', async () => {
         const statusRequest =
             deferred<

package/src/features/oauth/McpConnectionsButton.tsx

@@ -7,6 +7,7 @@ import { RemoteMcpConnectionButton } from './RemoteMcpConnectionButton.js';
 import {
     countConnectedActiveGroups,
     getConnectedActiveGroupLabels,
+    isGroupConnected,
     isGroupDisabled,
     toggleGroupDisabled,
     useMcpConnections,
@@ -29,7 +30,7 @@ export interface McpConnectionsButtonProps {
 /**
  * Toolbar button that opens the MCP connections dialog. The badge shows how many MCP
  * servers are connected and active for this conversation.
- * Renders nothing when the project has no OAuth MCP servers installed.
+ * Renders nothing when the project has no MCP servers installed.
  */
 export function McpConnectionsButton({
     disabledCollections,
@@ -93,7 +94,7 @@ export function McpConnectionsButton({
 }
 
 /**
- * Inline MCP status list for forms. It shows all available authenticated MCP groups
+ * Inline MCP status list for forms. It shows all available MCP groups
  * without requiring the user to open the management dialog.
  */
 export function McpConnectionsInlineList({
@@ -127,7 +128,7 @@ export function McpConnectionsInlineList({
         <div className="space-y-1">
             {groups.map((group) => {
                 const active = !isGroupDisabled(group, disabledCollections);
-                const connected = group.authStatus?.authenticated === true;
+                const connected = isGroupConnected(group);
                 const interactiveOAuth = group.authType === 'oauth' && group.oauthGrantType !== 'client_credentials';
                 const StatusIcon = connected ? Link2 : Link2Off;
                 return (
@@ -179,9 +180,11 @@ export function McpConnectionsInlineList({
                             />
                         ) : (
                             <Badge variant="outline" className="h-6 w-32 justify-center px-2 text-xs">
-                                {group.authType === 'api_key'
-                                    ? t('mcpConnections.apiKey')
-                                    : t('mcpConnections.managedByApp')}
+                                {group.authType === 'none'
+                                    ? t('mcpConnections.noAuthentication')
+                                    : group.authType === 'api_key'
+                                      ? t('mcpConnections.apiKey')
+                                      : t('mcpConnections.managedByApp')}
                             </Badge>
                         )}
                         {onChange && (

package/src/features/oauth/McpConnectionsDialog.tsx

@@ -2,7 +2,12 @@ import { useUITranslation } from '@vertesia/ui/i18n';
 import { Link2, Link2Off } from 'lucide-react';
 import { Badge, Button, Modal, ModalBody, ModalTitle, Spinner, Switch, VTooltip } from '../../core/index.js';
 import { RemoteMcpConnectionButton } from './RemoteMcpConnectionButton.js';
-import { isGroupDisabled, type McpConnectionGroup, toggleGroupDisabled } from './useMcpConnections.js';
+import {
+    isGroupConnected,
+    isGroupDisabled,
+    type McpConnectionGroup,
+    toggleGroupDisabled,
+} from './useMcpConnections.js';
 
 export interface McpConnectionsDialogProps {
     isOpen: boolean;
@@ -61,7 +66,7 @@ export function McpConnectionsDialog({
                     <div className="space-y-1">
                         {groups.map((group) => {
                             const active = !isGroupDisabled(group, disabledCollections);
-                            const connected = group.authStatus?.authenticated === true;
+                            const connected = isGroupConnected(group);
                             const interactiveOAuth =
                                 group.authType === 'oauth' && group.oauthGrantType !== 'client_credentials';
                             const StatusIcon = connected ? Link2 : Link2Off;
@@ -115,11 +120,15 @@ export function McpConnectionsDialog({
                                                 showDisconnect
                                                 readOnly={readOnly}
                                             />
-                                        ) : group.authType === 'oauth' ? (
+                                        ) : (
                                             <Badge variant="outline" className="h-6 w-32 justify-center px-2 text-xs">
-                                                {t('mcpConnections.managedByApp')}
+                                                {group.authType === 'none'
+                                                    ? t('mcpConnections.noAuthentication')
+                                                    : group.authType === 'api_key'
+                                                      ? t('mcpConnections.apiKey')
+                                                      : t('mcpConnections.managedByApp')}
                                             </Badge>
-                                        ) : null}
+                                        )}
                                         {onChange && (
                                             <Switch
                                                 size="sm"

package/src/features/oauth/useMcpConnections.test.ts

@@ -93,3 +93,13 @@ describe('toggleGroupDisabled', () => {
         expect(toggleGroupDisabled(g, disabled, true)).toEqual([]);
     });
 });
+
+describe('anonymous MCP groups', () => {
+    it('counts anonymous servers without credential status and respects disabled collections', () => {
+        const anonymous = { ...group(['anonymous'], false, 'Anonymous'), authType: 'none' as const };
+        expect(countConnectedActiveGroups([anonymous])).toBe(1);
+        expect(getConnectedActiveGroupLabels([anonymous])).toEqual(['Anonymous']);
+        expect(countConnectedActiveGroups([anonymous], ['anonymous'])).toBe(0);
+        expect(getConnectedActiveGroupLabels([anonymous], ['anonymous'])).toEqual([]);
+    });
+});

package/src/features/oauth/useMcpConnections.ts

@@ -20,13 +20,13 @@ export interface McpConnectionGroup {
     memberIds: string[];
     /** Collection names represented by this row. */
     memberNames: string[];
-    authType: 'oauth' | 'api_key';
+    authType: 'none' | 'oauth' | 'api_key';
     oauthGrantType?: 'authorization_code' | 'client_credentials';
     authStatus?: OAuthAuthStatus;
 }
 
 /**
- * Loads the project's installed authenticated MCP tool collections and resolves their status.
+ * Loads the project's installed MCP tool collections and resolves their status.
  *
  * Shared by the MCP connections button (badge count) and dialog (list) so the data is
  * fetched once and refreshed together after connect/disconnect.
@@ -57,8 +57,10 @@ export function useMcpConnections() {
                 const mcpCollections = inst.manifest.tool_collections
                     .map((c) => normalizeToolCollection(c))
                     .filter((c): c is MCPToolCollectionObject => c.type === 'mcp');
-                const oauthCollections = mcpCollections.filter((c) => c.auth !== 'api_key' && oauthIds.includes(c.id));
-                const apiKeyCollections = mcpCollections.filter((c) => c.auth === 'api_key');
+                const oauthCollections = mcpCollections.filter(
+                    (c) => c.auth !== 'none' && c.auth !== 'api_key' && oauthIds.includes(c.id),
+                );
+                const directCollections = mcpCollections.filter((c) => c.auth === 'none' || c.auth === 'api_key');
 
                 const providerMap = new Map<string, MCPToolCollectionObject[]>();
                 const oauthAppMap = new Map<string, MCPToolCollectionObject[]>();
@@ -124,16 +126,16 @@ export function useMcpConnections() {
                     });
                 }
 
-                for (const col of apiKeyCollections) {
+                for (const col of directCollections) {
                     allGroups.push({
-                        key: `${inst.id}:api-key:${col.id}`,
+                        key: `${inst.id}:${col.auth}:${col.id}`,
                         appId: inst.id,
                         appName: inst.manifest.title || inst.manifest.name,
                         label: col.name,
                         representativeId: col.id,
                         memberIds: [col.id],
                         memberNames: [col.name],
-                        authType: 'api_key',
+                        authType: col.auth === 'none' ? 'none' : 'api_key',
                     });
                 }
             }
@@ -155,6 +157,8 @@ export function useMcpConnections() {
             const statusRequestsByApp = new Map<string, Promise<OAuthAuthStatus[]>>();
             const groupsWithStatus = await Promise.all(
                 allGroups.map(async (group) => {
+                    // Anonymous servers are available without a credential status lookup.
+                    if (group.authType === 'none') return group;
                     try {
                         let statusRequest = statusRequestsByApp.get(group.appId);
                         if (!statusRequest) {
@@ -219,15 +223,19 @@ export function toggleGroupDisabled(
     return Array.from(current);
 }
 
+/** Anonymous servers are available without authentication; other modes require valid credentials. */
+export function isGroupConnected(group: McpConnectionGroup): boolean {
+    return group.authType === 'none' || group.authStatus?.authenticated === true;
+}
+
 /** Count connected MCP groups that are enabled for the current conversation. */
 export function countConnectedActiveGroups(groups: McpConnectionGroup[], disabled?: string[]): number {
-    return groups.filter((group) => group.authStatus?.authenticated === true && !isGroupDisabled(group, disabled))
-        .length;
+    return groups.filter((group) => isGroupConnected(group) && !isGroupDisabled(group, disabled)).length;
 }
 
 /** Names of connected MCP groups that are enabled for the current conversation. */
 export function getConnectedActiveGroupLabels(groups: McpConnectionGroup[], disabled?: string[]): string[] {
     return groups
-        .filter((group) => group.authStatus?.authenticated === true && !isGroupDisabled(group, disabled))
+        .filter((group) => isGroupConnected(group) && !isGroupDisabled(group, disabled))
         .map((group) => group.label);
 }

package/src/features/store/objects/selection/ObjectsActionContext.tsx

@@ -10,6 +10,7 @@ import { ChangeTypeAction } from './actions/ChangeTypeAction';
 import { DeleteObjectsAction, DeleteObjectsFromCollectionsAction } from './actions/DeleteObjectsAction';
 import { ExportPropertiesAction } from './actions/ExportPropertiesAction';
 import { RemoveFromCollectionAction } from './actions/RemoveFromCollectionAction';
+import { RunIntakeAction } from './actions/RunIntakeAction';
 import { ObjectsActionContext } from './ObjectsActionContextClass';
 import { ObjectsActionContextReact, useObjectsActionContext } from './ObjectsActionHooks';
 import type { ObjectsActionSpec } from './ObjectsActionSpec';
@@ -18,6 +19,7 @@ const DEFAULT_ACTIONS: ObjectsActionSpec[] = [
     ExportPropertiesAction,
     ChangeTypeAction,
     AddToCollectionAction,
+    RunIntakeAction,
     DeleteObjectsAction,
     RemoveFromCollectionAction,
     DeleteObjectsFromCollectionsAction,

package/src/features/store/objects/selection/SelectionActions.tsx

@@ -7,7 +7,6 @@ import { useState } from 'react';
 import { type DocumentSelection, useDocumentSelection } from '../DocumentSelectionProvider.js';
 import { DocumentUploadModal } from '../upload/DocumentUploadModal.js';
 import { ExportPropertiesAction } from './actions/ExportPropertiesAction';
-import { StartWorkflowButton } from './actions/StartWorkflowButton';
 import { ObjectsActionContextProvider } from './ObjectsActionContext';
 import { useObjectsActionContext } from './ObjectsActionHooks';
 import type { ObjectsActionSpec } from './ObjectsActionSpec';
@@ -17,8 +16,10 @@ interface SelectionActionsProps {
     allowMutations?: boolean;
     allowDelete?: boolean;
     /**
-     * Opt-in: shows the "Start Workflow" action. Defaults to `false` so it never leaks to read-only
-     * surfaces — callers must pass a permission-gated value (e.g. `canRunWorkflow(perms)`).
+     * Opt-in: shows the "Start Workflow" entry in the actions menu. Defaults to `false` so it never
+     * leaks to read-only surfaces — callers must pass a permission-gated value (e.g.
+     * `canRunWorkflow(perms)`). Running a workflow is its own permission, so this is deliberately
+     * separate from `allowMutations`.
      */
     allowWorkflowRun?: boolean;
 }
@@ -52,11 +53,11 @@ export function SelectionActions({
                         </Button>
                     </div>
                 )}
-                {allowWorkflowRun && <StartWorkflowButton />}
                 <SelectionActionsPopover
                     selection={selection}
                     allowMutations={allowMutations}
                     allowDelete={allowDelete}
+                    allowWorkflowRun={allowWorkflowRun}
                 >
                     {(actions) =>
                         actions.length > 0 ? (
@@ -123,7 +124,9 @@ function SelectionActionsPopover({
     children,
     allowMutations = true,
     allowDelete = true,
-}: SelectionActionsPopoverProps & Required<Pick<SelectionActionsProps, 'allowMutations' | 'allowDelete'>>) {
+    allowWorkflowRun = false,
+}: SelectionActionsPopoverProps &
+    Required<Pick<SelectionActionsProps, 'allowMutations' | 'allowDelete' | 'allowWorkflowRun'>>) {
     const context = useObjectsActionContext();
     const executeAction = (action: ObjectsActionSpec) => {
         context.run(action.id);
@@ -131,6 +134,7 @@ function SelectionActionsPopover({
     const actions = getAvailableActions(context.actions, selection, {
         allowMutations,
         allowDelete,
+        allowWorkflowRun,
     });
     const trigger = children(actions);
 
@@ -169,7 +173,7 @@ function PopoverBody({ executeAction, actions }: PopoverBodyProps) {
 function getAvailableActions(
     actions: ObjectsActionSpec[],
     selection: DocumentSelection,
-    permissions: Required<Pick<SelectionActionsProps, 'allowMutations' | 'allowDelete'>>,
+    permissions: Required<Pick<SelectionActionsProps, 'allowMutations' | 'allowDelete' | 'allowWorkflowRun'>>,
 ): ObjectsActionSpec[] {
     if (!selection?.hasSelection()) {
         return [ExportPropertiesAction];
@@ -182,6 +186,9 @@ function getAvailableActions(
         if (action.id === 'delete' || action.id === 'deleteFromCollections') {
             return permissions.allowDelete;
         }
+        if (action.id === 'runIntake') {
+            return permissions.allowWorkflowRun;
+        }
         if (action.id === 'changeType' || action.id === 'addToCollection' || action.id === 'removeFromCollection') {
             return permissions.allowMutations;
         }

package/src/features/store/objects/selection/actions/RunIntakeAction.tsx

@@ -0,0 +1,69 @@
+import { errorMessage, useToast } from '@vertesia/ui/core';
+import { i18nInstance, NAMESPACE, useUITranslation } from '@vertesia/ui/i18n';
+import { useUserSession } from '@vertesia/ui/session';
+import { useCallback } from 'react';
+import { useDocumentSearch } from '../../search';
+import { useObjectsActionContext } from '../ObjectsActionHooks';
+import type { ActionComponentTypeProps, ObjectsActionSpec } from '../ObjectsActionSpec';
+import ConfirmAction from './ConfirmAction';
+
+/**
+ * Re-runs the unified standard intake pipeline over the selected objects. The server resolves each
+ * object's nature and starts one run per object — see the `start_workflow` bulk operation.
+ */
+export function RunIntakeActionComponent({ action, objectIds }: ActionComponentTypeProps) {
+    const { t } = useUITranslation();
+    const ctx = useObjectsActionContext();
+    const toast = useToast();
+    const { store } = useUserSession();
+    const search = useDocumentSearch();
+
+    const callback = useCallback(() => {
+        if (!objectIds?.length) {
+            toast({
+                status: 'error',
+                title: t('store.actions.noObjectsSelected'),
+                description: t('store.actions.pleaseSelectObjectsToRunIntake'),
+                duration: 3000,
+            });
+            return Promise.resolve(false);
+        }
+
+        return store
+            .runOperation({ name: 'start_workflow', ids: objectIds, params: {} })
+            .then(() => {
+                toast({
+                    status: 'success',
+                    title: t('store.actions.intakeStarted'),
+                    description: t('store.actions.intakeStartedOn', { count: objectIds.length }),
+                    duration: 3000,
+                });
+                // Intake rewrites status, type and properties asynchronously, so refresh the list
+                // to pick up the `processing` status rather than leaving stale rows selected.
+                if (search) {
+                    ctx.params?.selection?.removeAll();
+                    search.search();
+                }
+            })
+            .catch((err: unknown) => {
+                toast({
+                    status: 'error',
+                    title: t('store.actions.errorStartingIntake'),
+                    description: errorMessage(err),
+                    duration: 5000,
+                });
+            });
+    }, [ctx.params?.selection?.removeAll, objectIds, search, search?.search, store.runOperation, t, toast]);
+
+    return <ConfirmAction action={action} callback={callback} />;
+}
+
+const t_static = i18nInstance.getFixedT(null, NAMESPACE);
+export const RunIntakeAction: ObjectsActionSpec = {
+    id: 'runIntake',
+    name: t_static('store.actions.runIntake'),
+    description: t_static('store.actions.runIntakeDesc'),
+    confirm: true,
+    confirmationText: t_static('store.actions.confirmRunIntake'),
+    component: RunIntakeActionComponent,
+};

package/src/features/store/objects/selection/actions/index.ts

@@ -4,3 +4,4 @@ export * from './ConfirmAction';
 export * from './DeleteObjectsAction';
 export * from './ExportPropertiesAction';
 export * from './RemoveFromCollectionAction';
+export * from './RunIntakeAction';

package/src/features/store/types/ContentObjectTypesTable.tsx

@@ -1,5 +1,5 @@
-import type { ContentObjectTypeItem } from '@vertesia/common';
-import { Button, CopyButton, Table, TBody, THead, VTooltip } from '@vertesia/ui/core';
+import type { ContentObjectTypeItem, ContentObjectTypeStatus } from '@vertesia/common';
+import { Badge, Button, CopyButton, Table, TBody, THead, VTooltip } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useNavigate } from '@vertesia/ui/router';
 import clsx from 'clsx';
@@ -46,12 +46,13 @@ export function ContentObjectTypesTable({
                         </th>
                     )}
                     <th>{t('store.name')}</th>
+                    <th>{t('store.status')}</th>
                     <th>{t('store.strictMode')}</th>
                     <th>{t('store.semanticChunking')}</th>
                     <th>{t('store.updatedAt')}</th>
                 </tr>
             </THead>
-            <TBody isLoading={isLoading && (!objects || objects.length === 0)} columns={selectable ? 5 : 4}>
+            <TBody isLoading={isLoading && (!objects || objects.length === 0)} columns={selectable ? 6 : 5}>
                 {objects?.map((obj) => (
                     <tr
                         key={obj.id}
@@ -93,6 +94,9 @@ export function ContentObjectTypesTable({
                                 )}
                             </div>
                         </td>
+                        <td>
+                            <TypeStatusBadge status={obj.status} />
+                        </td>
                         <td>{obj.strict_mode ? 'Yes' : 'No'}</td>
                         <td>{obj.is_chunkable ? 'Yes' : 'No'}</td>
                         <td>
@@ -106,3 +110,16 @@ export function ContentObjectTypesTable({
         </Table>
     );
 }
+
+/** A type stored before `status` existed has none; the stored model defaults it to active. */
+function TypeStatusBadge({ status = 'active' }: { status?: ContentObjectTypeStatus }) {
+    const { t } = useUITranslation();
+    if (status === 'active') {
+        return <Badge variant="success">{t('store.typeStatus.active')}</Badge>;
+    }
+    return (
+        <VTooltip description={t('store.typeStatus.draftHint')}>
+            <Badge variant="attention">{t('store.typeStatus.draft')}</Badge>
+        </VTooltip>
+    );
+}

package/src/features/store/types/IntakePolicyEditor.tsx

@@ -511,9 +511,10 @@ export function IntakePolicyEditor({
     ) : undefined;
 
     /** Panel chrome for the policy tabs. Each tab owns its panel now that the switcher is outside. */
-    const withPolicyPanel = (content: ReactNode) => (
-        <Panel title={title} className="bg-background! h-full" action={action}>
-            <div className="flex h-full min-h-0 flex-col gap-3">
+    const withPolicyPanel = (content: ReactNode, fill = false) => (
+        <Panel title={title} className="bg-background! h-full overflow-hidden" action={action}>
+            {/* A fill tab (JSON) sizes itself to the panel and scrolls inside its own panes. */}
+            <div className={`flex min-h-0 flex-1 flex-col gap-3 ${fill ? 'overflow-hidden' : 'overflow-auto'}`}>
                 {validationMessage && (
                     <div className="rounded-sm border border-destructive bg-mixer-destructive/10 px-3 py-2 text-sm whitespace-pre-line text-destructive">
                         {validationMessage}
@@ -543,7 +544,7 @@ export function IntakePolicyEditor({
     );
 
     return (
-        <div className="flex h-full min-h-0 w-full flex-col gap-3">
+        <div className="flex h-full min-h-0 w-full flex-col gap-2">
             <IntakeSummary policy={summaryPolicy} />
             <Tabs
                 tabs={leadingTabs ? [...leadingTabs, ...policyTabs] : policyTabs}
@@ -554,7 +555,7 @@ export function IntakePolicyEditor({
                 className="px-0 min-h-0 flex-1 flex-row!"
             >
                 <TabsBar className="py-2 w-48 shrink-0" direction="vertical" />
-                <TabsPanel className="min-h-0 min-w-0 flex-1 overflow-auto ps-4" />
+                <TabsPanel className="min-h-0 min-w-0 flex-1 overflow-auto pb-0!" />
             </Tabs>
         </div>
     );
@@ -572,7 +573,7 @@ function createEditorTabs(
         onChange: (value: string) => void;
         theme: string;
     },
-    wrap: (content: ReactNode) => ReactNode,
+    wrap: (content: ReactNode, fill?: boolean) => ReactNode,
 ) {
     const formTab = (name: IntakePolicyFormSection, label: string) => ({
         name,
@@ -590,30 +591,34 @@ function createEditorTabs(
             name: 'json',
             label: t('intakePolicy.tab.json'),
             content: wrap(
-                <div className="flex h-full min-h-[36rem] gap-4 py-3">
-                    <div className="min-w-0 flex-1 overflow-hidden rounded-sm border">
-                        <MonacoEditor
-                            value={editorValue}
-                            language="json"
-                            editorRef={json.editorRef}
-                            beforeMount={json.beforeMount}
-                            onChange={(update) => json.onChange(update.state.doc.toString())}
-                            theme={json.theme === 'dark' ? 'vs-dark' : 'vs'}
-                            options={{
-                                readOnly: readonly,
-                                minimap: { enabled: false },
-                                scrollBeyondLastLine: false,
-                                wordWrap: 'on',
-                                lineNumbers: 'on',
-                                automaticLayout: true,
-                                formatOnPaste: true,
-                                formatOnType: true,
-                                tabSize: 2,
-                            }}
-                        />
+                <div className="@container flex min-h-0 flex-1 gap-4">
+                    {/* Absolute child gives Monaco's height="100%" a definite box to fill. */}
+                    <div className="relative min-w-0 flex-1 overflow-hidden rounded-sm border">
+                        <div className="absolute inset-0">
+                            <MonacoEditor
+                                value={editorValue}
+                                language="json"
+                                editorRef={json.editorRef}
+                                beforeMount={json.beforeMount}
+                                onChange={(update) => json.onChange(update.state.doc.toString())}
+                                theme={json.theme === 'dark' ? 'vs-dark' : 'vs'}
+                                options={{
+                                    readOnly: readonly,
+                                    minimap: { enabled: false },
+                                    scrollBeyondLastLine: false,
+                                    wordWrap: 'on',
+                                    lineNumbers: 'on',
+                                    automaticLayout: true,
+                                    formatOnPaste: true,
+                                    formatOnType: true,
+                                    tabSize: 2,
+                                }}
+                            />
+                        </div>
                     </div>
                     <IntakeHelp />
                 </div>,
+                true,
             ),
         },
     ];
@@ -652,7 +657,7 @@ function IntakeSummary({ policy }: { policy: ContentTypeIntakePolicy }) {
 function IntakeHelp() {
     const { t } = useUITranslation();
     return (
-        <aside className="hidden w-80 shrink-0 overflow-y-auto rounded-sm border bg-mixer-muted/20 p-3 text-sm lg:block">
+        <aside className="hidden w-80 shrink-0 overflow-y-auto rounded-sm border bg-mixer-muted/20 p-3 text-sm @3xl:block">
             <div className="mb-3 font-semibold">{t('intakePolicy.help.title')}</div>
             <div className="space-y-3 text-muted">
                 <HelpItem label="identification" text={t('intakePolicy.help.identification')} />