@dxos/plugin-deck 0.8.4-main.c1de068 → 0.8.4-main.dedc0f3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-deck",
-  "version": "0.8.4-main.c1de068",
+  "version": "0.8.4-main.dedc0f3",
   "description": "DXOS Surface plugin for the main application layout.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,10 +10,12 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs"
     },
     "./types": {
+      "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs"
     }
@@ -31,48 +33,50 @@
     "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.17.0",
+    "effect": "3.17.7",
     "immer": "^10.1.1",
-    "@dxos/ai": "0.8.4-main.c1de068",
-    "@dxos/app-framework": "0.8.4-main.c1de068",
-    "@dxos/async": "0.8.4-main.c1de068",
-    "@dxos/debug": "0.8.4-main.c1de068",
-    "@dxos/echo": "0.8.4-main.c1de068",
-    "@dxos/blueprints": "0.8.4-main.c1de068",
-    "@dxos/echo-signals": "0.8.4-main.c1de068",
-    "@dxos/echo-schema": "0.8.4-main.c1de068",
-    "@dxos/invariant": "0.8.4-main.c1de068",
-    "@dxos/keyboard": "0.8.4-main.c1de068",
-    "@dxos/live-object": "0.8.4-main.c1de068",
-    "@dxos/log": "0.8.4-main.c1de068",
-    "@dxos/local-storage": "0.8.4-main.c1de068",
-    "@dxos/plugin-attention": "0.8.4-main.c1de068",
-    "@dxos/plugin-graph": "0.8.4-main.c1de068",
-    "@dxos/plugin-observability": "0.8.4-main.c1de068",
-    "@dxos/plugin-theme": "0.8.4-main.c1de068",
-    "@dxos/react-client": "0.8.4-main.c1de068",
-    "@dxos/react-ui-attention": "0.8.4-main.c1de068",
-    "@dxos/react-ui-stack": "0.8.4-main.c1de068",
-    "@dxos/react-ui-form": "0.8.4-main.c1de068",
-    "@dxos/react-ui-tabs": "0.8.4-main.c1de068",
-    "@dxos/util": "0.8.4-main.c1de068",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.c1de068"
+    "@dxos/ai": "0.8.4-main.dedc0f3",
+    "@dxos/app-framework": "0.8.4-main.dedc0f3",
+    "@dxos/assistant": "0.8.4-main.dedc0f3",
+    "@dxos/async": "0.8.4-main.dedc0f3",
+    "@dxos/debug": "0.8.4-main.dedc0f3",
+    "@dxos/echo": "0.8.4-main.dedc0f3",
+    "@dxos/blueprints": "0.8.4-main.dedc0f3",
+    "@dxos/invariant": "0.8.4-main.dedc0f3",
+    "@dxos/echo-schema": "0.8.4-main.dedc0f3",
+    "@dxos/echo-signals": "0.8.4-main.dedc0f3",
+    "@dxos/keyboard": "0.8.4-main.dedc0f3",
+    "@dxos/live-object": "0.8.4-main.dedc0f3",
+    "@dxos/local-storage": "0.8.4-main.dedc0f3",
+    "@dxos/log": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-attention": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-graph": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-observability": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-theme": "0.8.4-main.dedc0f3",
+    "@dxos/react-client": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-attention": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-form": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-stack": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-tabs": "0.8.4-main.dedc0f3",
+    "@dxos/util": "0.8.4-main.dedc0f3"
   },
   "devDependencies": {
     "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.89.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": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068",
-    "@dxos/storybook-utils": "0.8.4-main.c1de068"
+    "vite": "7.1.1",
+    "@dxos/react-ui": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3",
+    "@dxos/storybook-utils": "0.8.4-main.dedc0f3"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -80,8 +84,8 @@
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068"
+    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui": "0.8.4-main.dedc0f3"
   },
   "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,7 +15,7 @@ import {
   LayoutIntentResolver,
   ReactRoot,
   ReactSurface,
-  Tools,
+  Toolkit,
   UrlHandler,
 } from './capabilities';
 import { DeckEvents } from './events';
@@ -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({

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/;
 

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 Toolkit 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) =>
+    Toolkit.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, Toolkit),
+  contributes(Capabilities.ToolkitHandler, Toolkit.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/DeckSettings/DeckSettings.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 
 import { DECK_PLUGIN } from '../../meta';
 import {
@@ -22,67 +22,76 @@ export const DeckSettings = ({ settings }: { settings: DeckSettingsProps }) => {
   const { t } = useTranslation(DECK_PLUGIN);
 
   return (
-    <DeprecatedFormContainer>
-      <DeprecatedFormInput label={t('settings enable deck label')}>
-        <Input.Switch checked={settings.enableDeck} onCheckedChange={(checked) => (settings.enableDeck = checked)} />
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('select new plank positioning label')}>
-        <Select.Root
-          disabled={!settings.enableDeck}
-          value={settings.newPlankPositioning ?? 'start'}
-          onValueChange={(value) => (settings.newPlankPositioning = value as NewPlankPositioning)}
-        >
-          <Select.TriggerButton placeholder={t('select new plank positioning placeholder')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {NewPlankPositions.map((position) => (
-                  <Select.Option key={position} value={position}>
-                    {t(`settings new plank position ${position} label`)}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings overscroll label')}>
-        <Select.Root
-          disabled={!settings.enableDeck}
-          value={settings.overscroll ?? 'none'}
-          onValueChange={(value) => (settings.overscroll = value as Overscroll)}
-        >
-          <Select.TriggerButton placeholder={t('select overscroll placeholder')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {OverscrollOptions.map((option) => (
-                  <Select.Option key={option} value={option}>
-                    {t(`settings overscroll ${option} label`)}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings enable statusbar label')}>
-        <Input.Switch
-          checked={settings.enableStatusbar}
-          onCheckedChange={(checked) => (settings.enableStatusbar = checked)}
-        />
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings show hints label')}>
-        <Input.Switch checked={settings.showHints} onCheckedChange={(checked) => (settings.showHints = checked)} />
-      </DeprecatedFormInput>
-      {!isSocket && (
-        <DeprecatedFormInput label={t('settings native redirect label')}>
-          <Input.Switch
-            checked={settings.enableNativeRedirect}
-            onCheckedChange={(checked) => (settings.enableNativeRedirect = checked)}
-          />
-        </DeprecatedFormInput>
-      )}
-    </DeprecatedFormContainer>
+    <ControlPage>
+      <ControlSection title={t('settings title', { ns: DECK_PLUGIN })}>
+        <ControlGroup>
+          <ControlItemInput title={t('settings enable deck label')}>
+            <Input.Switch
+              checked={settings.enableDeck}
+              onCheckedChange={(checked) => (settings.enableDeck = checked)}
+            />
+          </ControlItemInput>
+          <ControlItemInput title={t('select new plank positioning label')}>
+            <Select.Root
+              disabled={!settings.enableDeck}
+              value={settings.newPlankPositioning ?? 'start'}
+              onValueChange={(value) => (settings.newPlankPositioning = value as NewPlankPositioning)}
+            >
+              <Select.TriggerButton placeholder={t('select new plank positioning placeholder')} />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {NewPlankPositions.map((position) => (
+                      <Select.Option key={position} value={position}>
+                        {t(`settings new plank position ${position} label`)}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
+          <ControlItemInput title={t('settings overscroll label')}>
+            <Select.Root
+              disabled={!settings.enableDeck}
+              value={settings.overscroll ?? 'none'}
+              onValueChange={(value) => (settings.overscroll = value as Overscroll)}
+            >
+              <Select.TriggerButton placeholder={t('select overscroll placeholder')} />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {OverscrollOptions.map((option) => (
+                      <Select.Option key={option} value={option}>
+                        {t(`settings overscroll ${option} label`)}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
+          <ControlItemInput title={t('settings enable statusbar label')}>
+            <Input.Switch
+              checked={settings.enableStatusbar}
+              onCheckedChange={(checked) => (settings.enableStatusbar = checked)}
+            />
+          </ControlItemInput>
+          <ControlItemInput title={t('settings show hints label')}>
+            <Input.Switch checked={settings.showHints} onCheckedChange={(checked) => (settings.showHints = checked)} />
+          </ControlItemInput>
+          {!isSocket && (
+            <ControlItemInput title={t('settings native redirect label')}>
+              <Input.Switch
+                checked={settings.enableNativeRedirect}
+                onCheckedChange={(checked) => (settings.enableNativeRedirect = checked)}
+              />
+            </ControlItemInput>
+          )}
+        </ControlGroup>
+      </ControlSection>
+    </ControlPage>
   );
 };