@dxos/plugin-deck 0.8.3 → 0.8.4-main.28f8d3d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-deck",
-  "version": "0.8.3",
+  "version": "0.8.4-main.28f8d3d",
   "description": "DXOS Surface plugin for the main application layout.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,19 +10,21 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs"
     },
     "./types": {
-      "types": "./dist/types/src/types.d.ts",
-      "browser": "./dist/lib/browser/types.mjs"
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "browser": "./dist/lib/browser/types/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
       "types": [
-        "dist/types/src/types.d.ts"
+        "dist/types/src/types/index.d.ts"
       ]
     }
   },
@@ -31,59 +33,59 @@
     "src"
   ],
   "dependencies": {
+    "@effect/ai": "0.25.2",
     "@fluentui/react-tabster": "^9.24.2",
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-core": "^1.9.0",
     "@radix-ui/react-context": "1.1.1",
-    "effect": "3.14.21",
+    "effect": "3.17.7",
     "immer": "^10.1.1",
-    "@dxos/ai": "0.8.3",
-    "@dxos/app-framework": "0.8.3",
-    "@dxos/artifact": "0.8.3",
-    "@dxos/echo": "0.8.3",
-    "@dxos/async": "0.8.3",
-    "@dxos/debug": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/echo-signals": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/keyboard": "0.8.3",
-    "@dxos/live-object": "0.8.3",
-    "@dxos/local-storage": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/plugin-attention": "0.8.3",
-    "@dxos/plugin-graph": "0.8.3",
-    "@dxos/plugin-observability": "0.8.3",
-    "@dxos/plugin-theme": "0.8.3",
-    "@dxos/react-ui-attention": "0.8.3",
-    "@dxos/react-client": "0.8.3",
-    "@dxos/react-ui-form": "0.8.3",
-    "@dxos/react-ui-stack": "0.8.3",
-    "@dxos/react-ui-tabs": "0.8.3",
-    "@dxos/react-ui-text-tooltip": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "@dxos/ai": "0.8.4-main.28f8d3d",
+    "@dxos/assistant": "0.8.4-main.28f8d3d",
+    "@dxos/app-framework": "0.8.4-main.28f8d3d",
+    "@dxos/async": "0.8.4-main.28f8d3d",
+    "@dxos/blueprints": "0.8.4-main.28f8d3d",
+    "@dxos/echo": "0.8.4-main.28f8d3d",
+    "@dxos/echo-schema": "0.8.4-main.28f8d3d",
+    "@dxos/echo-signals": "0.8.4-main.28f8d3d",
+    "@dxos/invariant": "0.8.4-main.28f8d3d",
+    "@dxos/debug": "0.8.4-main.28f8d3d",
+    "@dxos/keyboard": "0.8.4-main.28f8d3d",
+    "@dxos/live-object": "0.8.4-main.28f8d3d",
+    "@dxos/local-storage": "0.8.4-main.28f8d3d",
+    "@dxos/log": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-attention": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-graph": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-observability": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-theme": "0.8.4-main.28f8d3d",
+    "@dxos/react-client": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-attention": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-stack": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-tabs": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.28f8d3d",
+    "@dxos/util": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-form": "0.8.4-main.28f8d3d"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect-rx/rx-react": "0.38.0",
+    "@effect/platform": "0.90.2",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "@dxos/react-ui-theme": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui": "0.8.4-main.28f8d3d",
+    "@dxos/storybook-utils": "0.8.4-main.28f8d3d"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.0.5",
+    "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/react-ui": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-theme": "0.8.4-main.28f8d3d"
   },
   "publishConfig": {
     "access": "public"

package/src/DeckPlugin.ts

@@ -4,7 +4,7 @@
 
 import { setAutoFreeze } from 'immer';
 
-import { allOf, Capabilities, contributes, defineModule, definePlugin, Events, oneOf } from '@dxos/app-framework';
+import { Capabilities, Events, allOf, contributes, defineModule, definePlugin, oneOf } from '@dxos/app-framework';
 import { translations as stackTranslations } from '@dxos/react-ui-stack';
 
 import {
@@ -15,12 +15,12 @@ import {
   LayoutIntentResolver,
   ReactRoot,
   ReactSurface,
-  Tools,
+  Toolkit,
   UrlHandler,
 } from './capabilities';
 import { DeckEvents } from './events';
 import { meta } from './meta';
-import translations from './translations';
+import { translations } from './translations';
 
 // NOTE(Zan): When producing values with immer, we shouldn't auto-freeze them because
 //   our signal implementation needs to add some hidden properties to the produced values.
@@ -73,10 +73,16 @@ export const DeckPlugin = () =>
       activatesOn: Events.SetupAppGraph,
       activate: AppGraphBuilder,
     }),
+    // defineModule({
+    //   id: `${meta.id}/module/tools`,
+    //   activatesOn: Events.SetupArtifactDefinition,
+    //   activate: Tools,
+    // }),
     defineModule({
-      id: `${meta.id}/module/tools`,
-      activatesOn: Events.SetupArtifactDefinition,
-      activate: Tools,
+      id: `${meta.id}/module/toolkit`,
+      // TODO(wittjosiah): Shouldn't use the startup event.
+      activatesOn: Events.Startup,
+      activate: Toolkit,
     }),
     defineModule({
       id: `${meta.id}/module/url`,

package/src/capabilities/app-graph-builder.ts

@@ -5,13 +5,14 @@
 import { Rx } from '@effect-rx/rx-react';
 import { Option, pipe } from 'effect';
 
-import { Capabilities, contributes, createIntent, LayoutAction, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
-import { createExtension, ROOT_ID, rxFromSignal } from '@dxos/plugin-graph';
+import { ROOT_ID, createExtension, rxFromSignal } from '@dxos/plugin-graph';
 
-import { DeckCapabilities } from './capabilities';
 import { DECK_PLUGIN } from '../meta';
 
+import { DeckCapabilities } from './capabilities';
+
 export default (context: PluginContext) =>
   contributes(
     Capabilities.AppGraphBuilder,

package/src/capabilities/check-app-scheme.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
 
 import { DECK_PLUGIN } from '../meta';
 import { type DeckSettingsProps } from '../types';

package/src/capabilities/index.ts

@@ -11,7 +11,8 @@ export const DeckState = lazy(() => import('./state'));
 export const LayoutIntentResolver = lazy(() => import('./intent-resolver'));
 export const ReactRoot = lazy(() => import('./react-root'));
 export const ReactSurface = lazy(() => import('./react-surface'));
-export const Tools = lazy(() => import('./tools'));
+// export const Tools = lazy(() => import('./tools'));
+export const Toolkit = lazy(() => import('./toolkit'));
 export const UrlHandler = lazy(() => import('./url-handler'));
 
 export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -3,17 +3,17 @@
 //
 
 import { batch } from '@preact/signals-core';
-import { Schema, Effect, pipe, Option } from 'effect';
+import { Effect, Option, Schema, pipe } from 'effect';
 
 import {
   Capabilities,
-  createResolver,
-  contributes,
   IntentAction,
   LayoutAction,
   type PluginContext,
-  createIntent,
   chain,
+  contributes,
+  createIntent,
+  createResolver,
 } from '@dxos/app-framework';
 import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
@@ -24,20 +24,21 @@ import { isActionLike } from '@dxos/plugin-graph';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { byPosition, isNonNullable } from '@dxos/util';
 
-import { DeckCapabilities } from './capabilities';
 import { closeEntry, createEntryId, incrementPlank, openEntry } from '../layout';
 import { DECK_PLUGIN } from '../meta';
 import {
   DeckAction,
-  type LayoutMode,
   type DeckSettingsProps,
-  isLayoutMode,
-  getMode,
-  defaultDeck,
+  type LayoutMode,
   PLANK_COMPANION_TYPE,
+  defaultDeck,
+  getMode,
+  isLayoutMode,
 } from '../types';
 import { setActive } from '../util';
 
+import { DeckCapabilities } from './capabilities';
+
 export default (context: PluginContext) =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
@@ -92,7 +93,7 @@ export default (context: PluginContext) =>
           layout.complementarySidebarPanel = subject;
         }
 
-        const next = subject ? 'expanded' : options?.state ?? layout.complementarySidebarState;
+        const next = subject ? 'expanded' : (options?.state ?? layout.complementarySidebarState);
         if (next !== layout.complementarySidebarState) {
           layout.complementarySidebarState = next;
         }

package/src/capabilities/react-root.tsx

@@ -6,10 +6,11 @@ import React, { useCallback } from 'react';
 
 import { Capabilities, contributes, useCapability } from '@dxos/app-framework';
 
-import { DeckCapabilities } from './capabilities';
 import { DeckLayout } from '../components';
 import { DECK_PLUGIN } from '../meta';
 
+import { DeckCapabilities } from './capabilities';
+
 export default () =>
   contributes(Capabilities.ReactRoot, {
     id: DECK_PLUGIN,

package/src/capabilities/react-surface.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
 import { SettingsStore } from '@dxos/local-storage';
 
-import { DeckSettings, Banner } from '../components';
+import { Banner, DeckSettings } from '../components';
 import { DECK_PLUGIN } from '../meta';
 import { type DeckSettingsProps } from '../types';
 

package/src/capabilities/settings.ts

@@ -6,7 +6,7 @@ import { Capabilities, contributes } from '@dxos/app-framework';
 import { live } from '@dxos/live-object';
 
 import { meta } from '../meta';
-import { DeckSettingsSchema, type DeckSettingsProps } from '../types';
+import { type DeckSettingsProps, DeckSettingsSchema } from '../types';
 
 export default () => {
   const settings = live<DeckSettingsProps>({

package/src/capabilities/state.ts

@@ -8,9 +8,10 @@ import { live } from '@dxos/live-object';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { type SidebarState } from '@dxos/react-ui';
 
-import { DeckCapabilities } from './capabilities';
 import { DECK_PLUGIN } from '../meta';
-import { getMode, type DeckPluginState, defaultDeck, type DeckState } from '../types';
+import { type DeckPluginState, type DeckState, defaultDeck, getMode } from '../types';
+
+import { DeckCapabilities } from './capabilities';
 
 const boolean = /true|false/;
 
@@ -29,7 +30,7 @@ const migrateSidebarState = () => {
   });
 };
 
-const DeckStateFactory = () => {
+export const DeckStateFactory = () => {
   migrateSidebarState();
 
   const state = new LocalStorageStore<DeckPluginState>(DECK_PLUGIN, {

package/src/capabilities/toolkit.ts

@@ -0,0 +1,55 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { AiTool, AiToolkit } from '@effect/ai';
+import { Effect, Schema } from 'effect';
+
+import { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
+import { ArtifactId } from '@dxos/assistant';
+import { type SpaceId } from '@dxos/keys';
+import { trim } from '@dxos/util';
+
+import { DeckCapabilities } from './capabilities';
+
+class DeckToolkit extends AiToolkit.make(
+  AiTool.make('open-item', {
+    description: trim`
+      Opens an item in the application.
+    `,
+    parameters: {
+      id: ArtifactId,
+    },
+    success: Schema.Any,
+    failure: Schema.Never,
+  }),
+) {
+  static layer = (context: PluginContext) =>
+    DeckToolkit.toLayer({
+      'open-item': ({ id }) =>
+        Effect.gen(function* () {
+          const state = context.getCapability(DeckCapabilities.DeckState);
+          const dxn = ArtifactId.toDXN(id, state.activeDeck as SpaceId);
+
+          // TODO(wittjosiah): Support other variants.
+          const echoDxn = dxn.asEchoDXN();
+          if (!echoDxn) {
+            throw new Error(`Invalid object ID: ${id}`);
+          }
+
+          // TODO(wittjosiah): Get capabilities via layers.
+          const { dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+          yield* dispatch(
+            createIntent(LayoutAction.Open, {
+              subject: [`${echoDxn.spaceId!}:${echoDxn.echoId}`],
+              part: 'main',
+            }),
+          );
+        }).pipe(Effect.orDie),
+    });
+}
+
+export default (context: PluginContext) => [
+  contributes(Capabilities.Toolkit, DeckToolkit),
+  contributes(Capabilities.ToolkitHandler, DeckToolkit.layer(context)),
+];

package/src/capabilities/tools.ts

@@ -2,17 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
+// ISSUE(burdon): tools
+// @ts-nocheck
+
 import { Schema } from 'effect';
 
-import { createTool, ToolResult } from '@dxos/ai';
 import {
-  contributes,
-  createIntent,
   Capabilities,
   LayoutAction,
   type PromiseIntentDispatcher,
+  contributes,
+  createIntent,
 } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
+import { trim } from '@dxos/util';
 
 import { meta } from '../meta';
 import { DeckAction } from '../types';
@@ -30,9 +33,9 @@ export default () =>
   contributes(Capabilities.Tools, [
     createTool(meta.id, {
       name: 'show',
-      description: `
-        Show an item as a companion to an existing plank. This will make the item appear alongside the primary content.
-        When supplying IDs, they must be fully qualified like space:object.
+      description: trim`
+        Show an item as a companion to an existing plank. 
+        When supplying IDs, they must be fully qualified like this: space-key:object-id
       `,
       caption: 'Showing item...',
       // TODO(wittjosiah): Refactor Layout/Navigation/Deck actions so that they can be used directly.

package/src/capabilities/url-handler.ts

@@ -2,12 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, createIntent, LayoutAction, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
 import { scheduledEffect } from '@dxos/echo-signals/core';
 
-import { DeckCapabilities } from './capabilities';
 import { defaultDeck } from '../types';
 
+import { DeckCapabilities } from './capabilities';
+
 // TODO(wittjosiah): Cleanup the url handling. May justify introducing routing capabilities.
 export default async (context: PluginContext) => {
   const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);

package/src/components/DeckLayout/Banner.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import { DECK_PLUGIN } from '../../meta';

package/src/components/DeckLayout/ContentEmpty.tsx

@@ -10,8 +10,8 @@ import { DeckCapabilities } from '../../capabilities';
 import { useBreakpoints } from '../../hooks';
 import { getMode } from '../../types';
 import { layoutAppliesTopbar } from '../../util';
-import { ToggleSidebarButton } from '../Sidebar';
 import { fixedSidebarToggleStyles } from '../fragments';
+import { ToggleSidebarButton } from '../Sidebar';
 
 export const ContentEmpty = () => {
   const breakpoint = useBreakpoints();

package/src/components/DeckLayout/DeckLayout.tsx

@@ -3,7 +3,7 @@
 //
 
 import { untracked } from '@preact/signals-core';
-import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment } from 'react';
+import React, { Fragment, type UIEvent, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import {
   Capabilities,
@@ -15,24 +15,25 @@ import {
 } from '@dxos/app-framework';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { Main, type MainProps, useMediaQuery, useOnTransition } from '@dxos/react-ui';
-import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from '@dxos/react-ui-stack';
+import { DEFAULT_HORIZONTAL_SIZE, Stack, StackContext } from '@dxos/react-ui-stack';
 import { mainPaddingTransitions } from '@dxos/react-ui-theme';
 
-import { ActiveNode } from './ActiveNode';
-import { ContentEmpty } from './ContentEmpty';
-import { Dialog } from './Dialog';
-import { PopoverContent, PopoverRoot } from './Popover';
-import { StatusBar } from './StatusBar';
-import { Toast } from './Toast';
-import { Topbar } from './Topbar';
 import { DeckCapabilities } from '../../capabilities';
 import { useBreakpoints, useHoistStatusbar } from '../../hooks';
 import { DECK_PLUGIN } from '../../meta';
 import { type DeckSettingsProps, getMode } from '../../types';
 import { calculateOverscroll, layoutAppliesTopbar } from '../../util';
+import { fixedComplementarySidebarToggleStyles, fixedSidebarToggleStyles } from '../fragments';
 import { Plank } from '../Plank';
 import { ComplementarySidebar, Sidebar, ToggleComplementarySidebarButton, ToggleSidebarButton } from '../Sidebar';
-import { fixedComplementarySidebarToggleStyles, fixedSidebarToggleStyles } from '../fragments';
+
+import { ActiveNode } from './ActiveNode';
+import { ContentEmpty } from './ContentEmpty';
+import { Dialog } from './Dialog';
+import { PopoverContent, PopoverRoot } from './Popover';
+import { StatusBar } from './StatusBar';
+import { Toast } from './Toast';
+import { Topbar } from './Topbar';
 
 export type DeckLayoutProps = {
   onDismissToast: (id: string) => void;

package/src/components/DeckLayout/Popover.tsx

@@ -95,7 +95,7 @@ export const PopoverContent = () => {
         hideWhenDetached
       >
         <Popover.Viewport>
-          <Surface role='popover' data={layout.popoverContent} limit={1} />
+          <Surface role='card--popover' data={layout.popoverContent} limit={1} />
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>

package/src/components/Plank/Plank.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
@@ -12,11 +12,12 @@ import { withPluginManager } from '@dxos/app-framework/testing';
 import { AttentionPlugin } from '@dxos/plugin-attention';
 import { GraphPlugin } from '@dxos/plugin-graph';
 import { Stack } from '@dxos/react-ui-stack';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { DeckStateFactory } from '../../capabilities';
+import { translations } from '../../translations';
 
 import { Plank, type PlankProps } from './Plank';
-import DeckStateFactory from '../../capabilities/state';
-import translations from '../../translations';
 
 const meta: Meta<PlankProps> = {
   title: 'plugins/plugin-deck/Plank',

package/src/components/Plank/Plank.tsx

@@ -16,23 +16,24 @@ import {
   LayoutAction,
   Surface,
   createIntent,
-  useCapability,
   useAppGraph,
+  useCapability,
   useIntentDispatcher,
 } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
-import { useNode, type Node } from '@dxos/plugin-graph';
+import { type Node, useNode } from '@dxos/plugin-graph';
 import { ATTENDABLE_PATH_SEPARATOR, useAttentionAttributes } from '@dxos/react-ui-attention';
 import { StackItem, railGridHorizontal } from '@dxos/react-ui-stack';
 import { mainIntrinsicSize, mx } from '@dxos/react-ui-theme';
 
+import { DeckCapabilities } from '../../capabilities';
+import { useCompanions, useMainSize } from '../../hooks';
+import { parseEntryId } from '../../layout';
+import { DeckAction, type DeckSettingsProps, type LayoutMode, type ResolvedPart } from '../../types';
+
 import { PlankContentError, PlankError } from './PlankError';
 import { PlankHeading } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
-import { DeckCapabilities } from '../../capabilities';
-import { useMainSize, useCompanions } from '../../hooks';
-import { parseEntryId } from '../../layout';
-import { DeckAction, type LayoutMode, type ResolvedPart, type DeckSettingsProps } from '../../types';
 
 const UNKNOWN_ID = 'unknown_id';
 

package/src/components/Plank/PlankError.tsx

@@ -8,19 +8,17 @@ import { type Node } from '@dxos/plugin-graph';
 import { useTranslation } from '@dxos/react-ui';
 import { descriptionMessage, mx } from '@dxos/react-ui-theme';
 
+import { DECK_PLUGIN } from '../../meta';
+
 import { PlankHeading, type PlankHeadingProps } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
-import { DECK_PLUGIN } from '../../meta';
 
 export const PlankContentError = ({ error }: { error?: Error }) => {
   const { t } = useTranslation(DECK_PLUGIN);
   const errorString = error?.toString() ?? '';
   return (
-    <div role='none' className='overflow-auto p-8 attention-surface grid place-items-center'>
-      <p
-        role='alert'
-        className={mx(descriptionMessage, 'break-words rounded-md p-8', errorString.length < 256 && 'text-lg')}
-      >
+    <div role='none' className='overflow-y-auto p-8 attention-surface grid place-items-center'>
+      <p role='alert' className={mx(descriptionMessage, 'break-all rounded-md p-4')}>
         {error ? errorString : t('error fallback message')}
       </p>
     </div>

package/src/components/Plank/PlankHeading.tsx

@@ -2,22 +2,23 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { Fragment, memo, useCallback, useEffect, useMemo, type MouseEvent } from 'react';
+import React, { Fragment, type MouseEvent, memo, useCallback, useEffect, useMemo } from 'react';
 
-import { createIntent, LayoutAction, Surface, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, Surface, createIntent, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
 import { type Node } from '@dxos/plugin-graph';
 import { Icon, IconButton, Popover, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { StackItem, type StackItemSigilAction } from '@dxos/react-ui-stack';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 import { hoverableControls, hoverableFocusedWithinControls } from '@dxos/react-ui-theme';
 
-import { PlankCompanionControls, PlankControls } from './PlankControls';
 import { useBreakpoints } from '../../hooks';
 import { parseEntryId } from '../../layout';
 import { DECK_PLUGIN } from '../../meta';
-import { PLANK_COMPANION_TYPE, DeckAction, type ResolvedPart, type LayoutMode } from '../../types';
+import { DeckAction, type LayoutMode, PLANK_COMPANION_TYPE, type ResolvedPart } from '../../types';
 import { soloInlinePadding } from '../fragments';
 
+import { PlankCompanionControls, PlankControls } from './PlankControls';
+
 const MAX_COMPANIONS = 5;
 
 export type PlankHeadingProps = {
@@ -105,7 +106,7 @@ export const PlankHeading = memo(
 
     const handleAction = useCallback(
       (action: StackItemSigilAction) => {
-        typeof action.data === 'function' && action.data?.({ parent: node, caller: DECK_PLUGIN });
+        typeof action.data === 'function' && void action.data?.({ parent: node, caller: DECK_PLUGIN });
       },
       [node],
     );
@@ -155,7 +156,7 @@ export const PlankHeading = memo(
     return (
       <StackItem.Heading
         classNames={[
-          'plb-1 items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 contain-layout',
+          'plb-1 items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 contain-layout density-coarse',
           part === 'solo' ? soloInlinePadding : 'pli-1',
           ...(layoutMode === 'solo--fullscreen'
             ? [