@dxos/plugin-script 0.8.4-main.406dc2a → 0.8.4-main.43cb759274

package/src/capabilities/react-surface.tsx

@@ -2,101 +2,129 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import * as Effect from 'effect/Effect';
+import React, { type ComponentProps } from 'react';
 
-import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface, useAtomCapability, useSettingsState } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { Script } from '@dxos/compute';
 import { InvocationTraceContainer } from '@dxos/devtools';
-import { Obj } from '@dxos/echo';
-import { ScriptType } from '@dxos/functions';
-import { SettingsStore } from '@dxos/local-storage';
+import { Feed } from '@dxos/echo';
+import { useClient } from '@dxos/react-client';
 import { getSpace } from '@dxos/react-client/echo';
-import { StackItem } from '@dxos/react-ui-stack';
-import { type DataType } from '@dxos/schema';
+import { Panel } from '@dxos/react-ui';
 
-import {
-  DEPLOYMENT_DIALOG,
-  DeploymentDialog,
-  NotebookContainer,
-  ScriptContainer,
-  ScriptObjectSettings,
-  ScriptPluginSettings,
-  ScriptProperties,
-  TestContainer,
-} from '../components';
-import { meta } from '../meta';
-import { Notebook, type ScriptSettings } from '../types';
+import { ScriptPluginSettings } from '#components';
+import { DeploymentDialog, NotebookArticle, ScriptArticle, ScriptProperties, TestContainer } from '#containers';
+import { useCompiler } from '#hooks';
+import { meta } from '#meta';
+import { Notebook, ScriptCapabilities, type Settings } from '#types';
 
-import { ScriptCapabilities } from './capabilities';
+import { DEPLOYMENT_DIALOG } from '../constants';
+import { getAccessCredential } from '../util';
 
-export default () =>
-  contributes(Capabilities.ReactSurface, [
-    createSurface({
-      id: `${meta.id}/plugin-settings`,
-      role: 'article',
-      filter: (data): data is { subject: SettingsStore<ScriptSettings> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === meta.id,
-      component: ({ data: { subject } }) => <ScriptPluginSettings settings={subject.value} />,
-    }),
-    createSurface({
-      id: `${meta.id}/script/article`,
-      role: ['article', 'section'],
-      filter: (data): data is { subject: ScriptType } => Obj.instanceOf(ScriptType, data.subject),
-      component: ({ data, role }) => {
-        const compiler = useCapability(ScriptCapabilities.Compiler);
-        // TODO(dmaretskyi): Since settings store is not reactive, this would break on the script plugin being enabled without a page reload.
-        const settings = useCapability(Capabilities.SettingsStore).getStore<ScriptSettings>(meta.id)?.value;
-        return <ScriptContainer role={role} script={data.subject} settings={settings} env={compiler.environment} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/notebook/article`,
-      role: 'article',
-      filter: (data): data is { subject: Notebook.Notebook } => Obj.instanceOf(Notebook.Notebook, data.subject),
-      component: ({ data, role }) => {
-        const compiler = useCapability(ScriptCapabilities.Compiler);
-        return <NotebookContainer role={role} notebook={data.subject} env={compiler.environment} />;
-      },
-    }),
-    // TODO(burdon): Standardize PluginSettings vs ObjectSettings.
-    // TODO(burdon): Why is ScriptProperties different from ScriptObjectSettings?
-    createSurface({
-      id: `${meta.id}/companion/base-settings`,
-      role: 'base-object-settings',
-      filter: (data): data is { subject: ScriptType } => Obj.instanceOf(ScriptType, data.subject),
-      component: ({ data }) => <ScriptProperties object={data.subject} />,
-    }),
-    createSurface({
-      id: `${meta.id}/companion/settings`,
-      role: 'object-settings',
-      filter: (data): data is { subject: ScriptType } => Obj.instanceOf(ScriptType, data.subject),
-      component: ({ data }) => <ScriptObjectSettings object={data.subject} />,
-    }),
-    createSurface({
-      id: `${meta.id}/companion/execute`,
-      role: 'article',
-      filter: (data): data is { companionTo: ScriptType } =>
-        Obj.instanceOf(ScriptType, data.companionTo) && data.subject === 'execute',
-      component: ({ data, role }) => <TestContainer script={data.companionTo} role={role} />,
-    }),
-    createSurface({
-      id: `${meta.id}/companion/logs`,
-      role: 'article',
-      filter: (data): data is { companionTo: ScriptType } =>
-        Obj.instanceOf(ScriptType, data.companionTo) && data.subject === 'logs',
-      component: ({ data, role }) => {
-        const space = getSpace(data.companionTo);
-        return (
-          <StackItem.Content>
-            <InvocationTraceContainer space={space} target={data.companionTo} detailAxis='block' />
-          </StackItem.Content>
-        );
-      },
-    }),
-    createSurface({
-      id: DEPLOYMENT_DIALOG,
-      role: 'dialog',
-      filter: (data): data is { props: { accessToken: DataType.AccessToken; scriptTemplates: any } } =>
-        data.component === DEPLOYMENT_DIALOG,
-      component: ({ data }) => <DeploymentDialog {...data.props} />,
-    }),
-  ]);
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'pluginSettings',
+        filter: AppSurface.settings(AppSurface.Article, meta.id),
+        component: ({ data: { subject } }) => {
+          const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
+          const client = useClient();
+          // TODO(burdon): Check token.
+          const handleAuthenticate = async () => {
+            const { identityKey } = client.halo.identity.get()!;
+            await client.halo.writeCredentials([getAccessCredential(identityKey)]);
+          };
+          return (
+            <ScriptPluginSettings
+              settings={settings}
+              onSettingsChange={updateSettings}
+              onAuthenticate={handleAuthenticate}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'script.article',
+        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
+        filter: AppSurface.oneOf(
+          AppSurface.object(AppSurface.Article, Script.Script),
+          AppSurface.object(AppSurface.Section, Script.Script),
+        ),
+        component: ({ data, role }) => {
+          const compiler = useCompiler();
+          const settings = useAtomCapability(ScriptCapabilities.Settings);
+          return (
+            <ScriptArticle
+              role={role}
+              subject={data.subject}
+              attendableId={data.attendableId}
+              settings={settings}
+              env={compiler?.environment}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'notebook.article',
+        filter: AppSurface.object(AppSurface.Article, Notebook.Notebook),
+        component: ({ data, role }) => {
+          const compiler = useCompiler();
+          return (
+            <NotebookArticle
+              role={role}
+              subject={data.subject}
+              attendableId={data.attendableId}
+              env={compiler?.environment}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'properties',
+        filter: AppSurface.object(AppSurface.ObjectProperties, Script.Script),
+        component: ({ data, role }) => <ScriptProperties role={role} subject={data.subject} />,
+      }),
+      Surface.create({
+        id: 'companion.execute',
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'execute'),
+          AppSurface.companion(AppSurface.Article, Script.Script),
+        ),
+        component: ({ data, role }) => <TestContainer script={data.companionTo} role={role} />,
+      }),
+      Surface.create({
+        id: 'companion.logs',
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'logs'),
+          AppSurface.companion(AppSurface.Article, Script.Script),
+        ),
+        component: ({ data, role }) => {
+          const space = getSpace(data.companionTo);
+          const feed = space?.properties.invocationTraceFeed?.target;
+          const feedDXN = feed ? Feed.getQueueUri(feed) : undefined;
+          return (
+            <Panel.Root role={role}>
+              <Panel.Content>
+                <InvocationTraceContainer
+                  db={space?.db}
+                  feedDXN={feedDXN}
+                  target={data.companionTo}
+                  detailAxis='block'
+                />
+              </Panel.Content>
+            </Panel.Root>
+          );
+        },
+      }),
+      Surface.create({
+        id: DEPLOYMENT_DIALOG,
+        filter: AppSurface.component<ComponentProps<typeof DeploymentDialog>>(AppSurface.Dialog, DEPLOYMENT_DIALOG),
+        component: ({ data }) => <DeploymentDialog {...data.props} />,
+      }),
+    ]),
+  ),
+);

package/src/capabilities/settings.ts

@@ -2,20 +2,32 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
+import * as Effect from 'effect/Effect';
 
-import { meta } from '../meta';
-import { ScriptSettings } from '../types';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { createKvsStore } from '@dxos/effect';
 
-export default () => {
-  const settings = live<ScriptSettings>({
-    editorInputMode: 'vscode',
-  });
+import { meta } from '#meta';
+import { ScriptCapabilities, Settings } from '#types';
 
-  return contributes(Capabilities.Settings, {
-    prefix: meta.id,
-    schema: ScriptSettings,
-    value: settings,
-  });
-};
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const settingsAtom = createKvsStore({
+      key: meta.id,
+      schema: Settings.Settings,
+      defaultValue: () => ({
+        editorInputMode: 'vscode' as const,
+      }),
+    });
+
+    return [
+      Capability.contributes(ScriptCapabilities.Settings, settingsAtom),
+      Capability.contributes(AppCapabilities.Settings, {
+        prefix: meta.id,
+        schema: Settings.Settings,
+        atom: settingsAtom,
+      }),
+    ];
+  }),
+);

package/src/compiler/compiler.ts

@@ -12,9 +12,22 @@ import ts from 'typescript';
 
 import { invariant } from '@dxos/invariant';
 
+const GLOBALS = 'globals.d.ts';
+
+/** TS version hosted on playgroundcdn.typescriptlang.org used to fetch lib .d.ts files.
+ * Pinned to 5.6.3 because 5.7+ removed lib.es2022.sharedmemory.d.ts from the CDN.
+ * The remaining 404s (lib.core.d.ts, lib.core.es6/7.d.ts, lib.es7.d.ts) are phantom
+ * entries in @typescript/vfs's hardcoded file list and are harmlessly caught.
+ */
+const CDN_TS_VERSION = '5.6.3';
+
 const defaultOptions: ts.CompilerOptions = {
   lib: ['DOM', 'es2022'],
   target: ts.ScriptTarget.ES2022,
+  // Override `@typescript/vfs`'s default of `NodeJs` (== deprecated `node10`).
+  // TypeScript 6 throws on that as a `getCompilerOptionsDiagnostics()` error,
+  // which surfaces as an unhandled rejection inside the storybook task.
+  moduleResolution: ts.ModuleResolutionKind.Bundler,
 };
 
 export class Compiler {
@@ -23,16 +36,21 @@ export class Compiler {
 
   constructor(private readonly _options: ts.CompilerOptions = defaultOptions) {}
 
-  async initialize(): Promise<void> {
+  async initialize(globals?: string): Promise<void> {
     if (this._env) {
       return;
     }
 
     // TODO(wittjosiah): Figure out how to get workers working in plugin packages.
     //   https://github.com/val-town/codemirror-ts?tab=readme-ov-file#setup-worker
-    this._fsMap = await createDefaultMapFromCDN(this._options, '5.5.4', true, ts);
+    this._fsMap = await createDefaultMapFromCDN(this._options, CDN_TS_VERSION, true, ts);
+    if (globals) {
+      this._fsMap.set(GLOBALS, globals);
+    }
+
+    const rootFiles = globals ? [GLOBALS] : [];
     const system = createSystem(this._fsMap);
-    this._env = createVirtualTypeScriptEnvironment(system, [], ts, this._options);
+    this._env = createVirtualTypeScriptEnvironment(system, rootFiles, ts, this._options);
   }
 
   get environment() {

package/src/components/NotebookStack/NotebookCell.tsx

@@ -4,120 +4,88 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { Surface } from '@dxos/app-framework';
-import { Query, Ref } from '@dxos/echo';
-import { QueryBuilder } from '@dxos/echo-query';
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { type Database, Obj } from '@dxos/echo';
+import { createDocAccessor } from '@dxos/echo-db';
 import { invariant } from '@dxos/invariant';
-import { useChatProcessor, useChatServices } from '@dxos/plugin-assistant';
-import { Chat } from '@dxos/plugin-assistant';
-import { Graph } from '@dxos/plugin-explorer/types';
-import { createDocAccessor } from '@dxos/react-client/echo';
-import { type Space } from '@dxos/react-client/echo';
-import { useAsyncEffect, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { TemplateEditor } from '@dxos/plugin-assistant/components';
+import { useThemeContext, useTranslation } from '@dxos/react-ui';
 import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
+import { Editor, type EditorViewProps } from '@dxos/react-ui-editor';
 import {
-  Editor,
-  type EditorProps,
+  type BasicExtensionsOptions,
   createBasicExtensions,
   createDataExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+} from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
+import { type Notebook } from '#types';
+
 import { type ComputeGraph } from '../../notebook';
-import { type Notebook } from '../../types';
 import { TypescriptEditor, type TypescriptEditorProps } from '../TypescriptEditor';
-
 import { type NotebookMenuProps } from './NotebookMenu';
 
-const editorStyles = 'p-2 pis-3';
-const valueStyles = 'p-1 pis-3';
+const editorStyles = 'p-2 ps-3';
+const valueStyles = 'p-1 ps-3';
 
 export type NotebookCellProps = {
-  space?: Space;
+  db?: Database.Database;
   graph?: ComputeGraph;
   dragging?: boolean;
   cell: Notebook.Cell;
+  promptResults?: Record<string, string>;
 } & (Pick<NotebookMenuProps, 'onCellInsert' | 'onCellDelete'> & Pick<TypescriptEditorProps, 'env'>);
 
-// TODO(burdon): Display errors.
-export const NotebookCell = ({ space, graph, dragging, cell, env }: NotebookCellProps) => {
+// TODO(burdon): Show evaluation errors.
+export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }: NotebookCellProps) => {
   const { t } = useTranslation(meta.id);
 
-  //
-  // Common.
-  //
   const extensions = useMemo(() => {
-    return cell.script?.target
-      ? [createDataExtensions({ id: cell.id, text: createDocAccessor(cell.script.target, ['content']) })].filter(
-          isNonNullable,
-        )
+    return cell.source?.target
+      ? [
+          createDataExtensions({
+            id: cell.id,
+            text: createDocAccessor(cell.source.target, ['content']),
+          }),
+        ].filter(isNonNullable)
       : [];
-  }, [cell.script?.target]);
-
-  //
-  // Query.
-  //
-  const view = cell.view?.target;
-  const builder = useMemo(() => new QueryBuilder(), []);
-  useAsyncEffect(async () => {
-    if (!space || !cell.script?.target) {
-      return;
-    }
-
-    if (cell.type === 'query') {
-      const query = cell.script.target.content;
-      const filter = builder.build(query);
-      if (filter) {
-        const ast = Query.select(filter).ast;
-        const view = cell.view?.target;
-        if (!view) {
-          const graph = Graph.make({ query: { ast } });
-          const { view } = await Graph.makeView({ space, presentation: graph });
-          cell.view = Ref.make(view);
-        } else {
-          view.query.ast = ast;
-        }
-      }
-    }
-  }, [space, builder, cell, cell.script?.target?.content]);
+  }, [cell.source?.target]);
+
+  const explorerGraph = cell.graph?.target;
 
   const handleQueryChange = useCallback<NonNullable<QueryEditorProps['onChange']>>(
     (value: string) => {
-      invariant(cell.script?.target);
-      cell.script.target.content = value;
+      invariant(cell.source?.target);
+      Obj.update(cell.source.target, (obj) => {
+        obj.content = value;
+      });
     },
     [cell],
   );
 
-  //
-  // Prompt.
-  // TODO(burdon): Add values to context or system message (via blueprint?).
-  //
-  const services = useChatServices({ space, chat: cell.chat?.target });
-  const processor = useChatProcessor({ chat: cell.chat?.target, services });
-
   switch (cell.type) {
     case 'markdown':
-      if (!cell.script?.target) {
+      if (!cell.source?.target) {
         return null;
       }
 
       return (
-        <MarkdownEditor
+        <NotebookTextEditor
           id={cell.id}
           classNames={editorStyles}
-          initialValue={cell.script.target.content}
+          initialValue={cell.source.target.content}
           extensions={extensions}
         />
       );
 
     case 'script':
-      if (!cell.script?.target) {
+      if (!cell.source?.target) {
         return null;
       }
 
@@ -127,11 +95,11 @@ export const NotebookCell = ({ space, graph, dragging, cell, env }: NotebookCell
             id={cell.id}
             role='section'
             classNames={editorStyles}
-            initialValue={cell.script.target.content}
+            initialValue={cell.source.target.content}
             extensions={extensions}
             env={env}
             options={{
-              placeholder: t('notebook cell placeholder'),
+              placeholder: t('notebook-cell.placeholder'),
               highlightActiveLine: false,
               lineNumbers: false,
             }}
@@ -141,33 +109,46 @@ export const NotebookCell = ({ space, graph, dragging, cell, env }: NotebookCell
       );
 
     case 'query':
-      if (!cell.script?.target) {
+      if (!cell.source?.target) {
         return null;
       }
 
+      // TODO(burdon): Remove app-framework deps (via render prop).
       return (
-        <div className={mx('bs-full overflow-hidden grid', view && !dragging && 'grid-rows-[min-content_1fr]')}>
+        <div className={mx('h-full overflow-hidden grid', explorerGraph && !dragging && 'grid-rows-[min-content_1fr]')}>
           <QueryEditor
             id={cell.id}
-            classNames={[editorStyles, 'border-b border-subduedSeparator']}
-            db={space?.db}
-            value={cell.script.target.content}
+            classNames={[editorStyles, 'border-b border-subdued-separator']}
+            db={db}
+            value={cell.source.target.content}
             onChange={handleQueryChange}
           />
-          {view && !dragging && <Surface role='section' limit={1} data={{ subject: view }} />}
+          {explorerGraph && !dragging && (
+            <Surface.Surface
+              type={AppSurface.Section}
+              limit={1}
+              data={{ subject: explorerGraph, attendableId: cell.id }}
+            />
+          )}
         </div>
       );
 
+    // TODO(burdon): Use streaming response from Chat.
     case 'prompt':
-      if (!cell.chat?.target || !processor) {
+      if (!cell.prompt?.target) {
         return null;
       }
 
       return (
-        <Chat.Root chat={cell.chat.target} processor={processor}>
-          <Chat.Thread overscroll={0} />
-          <Chat.Prompt settings={false} classNames='p-2 border-t border-subduedSeparator' />
-        </Chat.Root>
+        <>
+          <TemplateEditor
+            id={cell.id}
+            source={cell.prompt.target.instructions}
+            lineNumbers={false}
+            classNames={editorStyles}
+          />
+          <NotebookPromptResult cell={cell} promptResults={promptResults} />
+        </>
       );
 
     default:
@@ -176,8 +157,8 @@ export const NotebookCell = ({ space, graph, dragging, cell, env }: NotebookCell
 };
 
 const NotebookCellValue = ({ cell, graph }: NotebookCellProps) => {
-  const name = graph?.expressions.value[cell.id]?.name;
-  const value = graph?.values.value[cell.id];
+  const name = graph?.getExpressions()[cell.id]?.name;
+  const value = graph?.getValue(cell.id);
   if (value == null) {
     return null;
   }
@@ -185,13 +166,13 @@ const NotebookCellValue = ({ cell, graph }: NotebookCellProps) => {
   return (
     <div
       className={mx(
-        'flex is-full bg-groupSurface border-t border-subduedSeparator text-description font-mono',
+        'flex w-full bg-group-surface border-y border-subdued-separator text-description font-mono',
         valueStyles,
       )}
     >
       {name && (
         <>
-          <span className='text-successText'>{name}</span>
+          <span className='text-success-text'>{name}</span>
           <span className='text-description'>&nbsp;=&nbsp;</span>
         </>
       )}
@@ -200,18 +181,46 @@ const NotebookCellValue = ({ cell, graph }: NotebookCellProps) => {
   );
 };
 
-const MarkdownEditor = ({ extensions: extensionsParam, ...props }: EditorProps) => {
+const NotebookPromptResult = ({ cell, promptResults }: NotebookCellProps) => {
+  if (!cell.prompt) {
+    return null;
+  }
+
+  const value = promptResults?.[cell.prompt.uri];
+  if (value == null) {
+    return null;
+  }
+
+  return (
+    <div className={mx('flex w-full bg-group-surface text-description border-y border-subdued-separator', valueStyles)}>
+      <NotebookTextEditor readOnly value={value} />
+    </div>
+  );
+};
+
+const NotebookTextEditor = ({
+  extensions: extensionsProp,
+  readOnly,
+  ...props
+}: EditorViewProps & Pick<BasicExtensionsOptions, 'readOnly'>) => {
   const { t } = useTranslation(meta.id);
   const { themeMode } = useThemeContext();
   const extensions = useMemo(() => {
     return [
-      createBasicExtensions({ placeholder: t('notebook markdown placeholder') }),
+      createBasicExtensions({
+        placeholder: t('notebook-markdown.placeholder'),
+        readOnly,
+      }),
       createThemeExtensions({ themeMode, syntaxHighlighting: true }),
       createMarkdownExtensions(),
       decorateMarkdown(),
-      extensionsParam,
+      extensionsProp,
     ].filter(isNonNullable);
-  }, [extensionsParam]);
+  }, [extensionsProp]);
 
-  return <Editor {...props} extensions={extensions} moveToEnd />;
+  return (
+    <Editor.Root>
+      <Editor.View {...props} extensions={extensions} selectionEnd />
+    </Editor.Root>
+  );
 };

package/src/components/NotebookStack/NotebookMenu.tsx

@@ -6,8 +6,8 @@ import React from 'react';
 
 import { DropdownMenu, useTranslation } from '@dxos/react-ui';
 
-import { meta } from '../../meta';
-import { type Notebook } from '../../types';
+import { meta } from '#meta';
+import { type Notebook } from '#types';
 
 export type NotebookMenuProps = {
   cell?: Notebook.Cell;
@@ -23,20 +23,20 @@ export const NotebookMenu = ({ cell, onCellInsert, onCellDelete }: NotebookMenuP
       <DropdownMenu.Content>
         <DropdownMenu.Viewport>
           <DropdownMenu.Item onClick={() => onCellInsert?.('script', cell?.id)}>
-            {t('notebook cell insert script label')}
+            {t('notebook-cell-insert-script.label')}
           </DropdownMenu.Item>
           <DropdownMenu.Item onClick={() => onCellInsert?.('prompt', cell?.id)}>
-            {t('notebook cell insert prompt label')}
+            {t('notebook-cell-insert-prompt.label')}
           </DropdownMenu.Item>
           <DropdownMenu.Item onClick={() => onCellInsert?.('query', cell?.id)}>
-            {t('notebook cell insert query label')}
+            {t('notebook-cell-insert-query.label')}
           </DropdownMenu.Item>
           <DropdownMenu.Item onClick={() => onCellInsert?.('markdown', cell?.id)}>
-            {t('notebook cell insert markdown label')}
+            {t('notebook-cell-insert-markdown.label')}
           </DropdownMenu.Item>
           {cell && onCellDelete && (
             <DropdownMenu.Item onClick={() => onCellDelete?.(cell.id)}>
-              {t('notebook cell delete label')}
+              {t('notebook-cell-delete.label')}
             </DropdownMenu.Item>
           )}
         </DropdownMenu.Viewport>