[Feat] Add experimental Code Mode setting

apps/web/src/components/settings/ExperimentalSettings.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+
+import { FlaskConical, Skeleton, Switch } from '@/components/system';
+import { useTRPC } from '@/trpc/client';
+
+import { Section } from './Section';
+import type { ExperimentalSettings as ExperimentalSettingsData } from '@/trpc/commands/experimental-settings';
+
+export function ExperimentalSettings() {
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const queryKey = trpc.experimentalSettings.get.queryKey();
+  const settingsQuery = useQuery(trpc.experimentalSettings.get.queryOptions());
+  const updateMutation = useMutation(
+    trpc.experimentalSettings.setOpenCodeCodeMode.mutationOptions(),
+  );
+
+  const handleToggle = async (enabled: boolean) => {
+    const previous = settingsQuery.data;
+    queryClient.setQueryData<ExperimentalSettingsData>(queryKey, {
+      openCodeCodeModeEnabled: enabled,
+    });
+
+    try {
+      const updated = await updateMutation.mutateAsync({ enabled });
+      queryClient.setQueryData<ExperimentalSettingsData>(queryKey, updated);
+      toast.success(`Code Mode ${enabled ? 'enabled' : 'disabled'}`);
+    } catch (error) {
+      queryClient.setQueryData<ExperimentalSettingsData>(queryKey, previous);
+      toast.error(
+        error instanceof Error ? error.message : 'Failed to update Code Mode.',
+      );
+    }
+  };
+
+  if (settingsQuery.isPending) {
+    return <Skeleton className="h-28 w-full" />;
+  }
+
+  if (settingsQuery.isError || !settingsQuery.data) {
+    return (
+      <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">
+        Failed to load experimental settings.
+      </div>
+    );
+  }
+
+  return (
+    <Section icon={FlaskConical} title="Code Mode">
+      <div className="flex gap-3">
+        <Switch
+          aria-label="Toggle Code Mode"
+          checked={settingsQuery.data.openCodeCodeModeEnabled}
+          disabled={updateMutation.isPending}
+          onCheckedChange={(checked) => void handleToggle(checked === true)}
+        />
+        <div className="space-y-1">
+          <p className="text-sm text-muted-foreground">
+            Defer eligible tools and discover them when needed, reducing the
+            tool definitions sent with each request.
+          </p>
+        </div>
+      </div>
+    </Section>
+  );
+}

apps/web/src/components/settings/pages/ExperimentalSettingsPage.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import { SettingsShell } from '@/components/settings/SettingsShell';
+import { ExperimentalSettings } from '@/components/settings/ExperimentalSettings';
 
 export function ExperimentalSettingsPage() {
   return (
     <SettingsShell pageId="experimental" adminOnly={true}>
-      {null}
+      <ExperimentalSettings />
     </SettingsShell>
   );
 }

apps/web/src/components/settings/settings-navigation.ts

@@ -174,7 +174,8 @@ const SETTINGS_NAVIGATION_ITEMS: SettingsNavigationItem[] = [
     id: 'experimental',
     label: 'Experimental',
     title: 'Experimental',
-    description: 'No experimental features at the moment. Check back soon.',
+    description:
+      'Try opt-in features that may change while they are being evaluated.',
     href: SETTINGS_PATHS.experimental,
     icon: FlaskConical,
     adminOnly: true,

apps/web/src/trpc/commands/experimental-settings/index.ts

@@ -0,0 +1,63 @@
+import { db, deploymentSettings, eq } from '@roomote/db/server';
+import {
+  isOpenCodeCodeModeEnabledFromMetadata,
+  OPENCODE_CODE_MODE_METADATA_KEY,
+} from '@roomote/feature-flags';
+
+import type { UserAuthSuccess } from '@/types';
+
+import { assertAdmin } from '../setup/shared';
+
+const DEFAULT_DEPLOYMENT_ID = 'default';
+
+export type ExperimentalSettings = {
+  openCodeCodeModeEnabled: boolean;
+};
+
+function normalizeMetadata(value: unknown): Record<string, unknown> {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? { ...(value as Record<string, unknown>) }
+    : {};
+}
+
+export async function getExperimentalSettingsCommand(
+  auth: UserAuthSuccess,
+): Promise<ExperimentalSettings> {
+  assertAdmin(auth);
+  const settings = await db.query.deploymentSettings.findFirst({
+    where: eq(deploymentSettings.id, DEFAULT_DEPLOYMENT_ID),
+    columns: { metadata: true },
+  });
+
+  return {
+    openCodeCodeModeEnabled: isOpenCodeCodeModeEnabledFromMetadata(
+      settings?.metadata,
+    ),
+  };
+}
+
+export async function setOpenCodeCodeModeCommand(
+  auth: UserAuthSuccess,
+  input: { enabled: boolean },
+): Promise<ExperimentalSettings> {
+  assertAdmin(auth);
+  const existing = await db.query.deploymentSettings.findFirst({
+    where: eq(deploymentSettings.id, DEFAULT_DEPLOYMENT_ID),
+    columns: { metadata: true },
+  });
+  const metadata = {
+    ...normalizeMetadata(existing?.metadata),
+    [OPENCODE_CODE_MODE_METADATA_KEY]: input.enabled,
+  };
+  const now = new Date();
+
+  await db
+    .insert(deploymentSettings)
+    .values({ id: DEFAULT_DEPLOYMENT_ID, metadata, updatedAt: now })
+    .onConflictDoUpdate({
+      target: deploymentSettings.id,
+      set: { metadata, updatedAt: now },
+    });
+
+  return { openCodeCodeModeEnabled: input.enabled };
+}

apps/web/src/trpc/routers/_app.ts

@@ -468,6 +468,10 @@ import {
   setDeploymentTimeZoneCommand,
   setAnonymousAnalyticsCommand,
 } from '../commands/misc-settings';
+import {
+  getExperimentalSettingsCommand,
+  setOpenCodeCodeModeCommand,
+} from '../commands/experimental-settings';
 import {
   backfillBrainTaskMemoriesCommand,
   getBrainPageCommand,
@@ -3258,6 +3262,17 @@ export const appRouter = createRouter({
       ),
   }),
 
+  experimentalSettings: createRouter({
+    get: protectedProcedure.query(({ ctx: { auth } }) =>
+      getExperimentalSettingsCommand(auth),
+    ),
+    setOpenCodeCodeMode: protectedProcedure
+      .input(z.object({ enabled: z.boolean() }))
+      .mutation(({ ctx: { auth }, input }) =>
+        setOpenCodeCodeModeCommand(auth, input),
+      ),
+  }),
+
   releases: createRouter({
     status: protectedProcedure.query(({ ctx: { auth } }) =>
       getReleaseStatusCommand(auth),

packages/db/package.json

@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "@roomote/env": "workspace:^",
+    "@roomote/feature-flags": "workspace:^",
     "@roomote/types": "workspace:^",
     "drizzle-orm": "^0.45.2",
     "nanoid": "^5.1.16",

packages/db/src/lib/model-runtime-config.ts

@@ -1,4 +1,5 @@
 import { eq } from 'drizzle-orm';
+import { isOpenCodeCodeModeEnabledFromMetadata } from '@roomote/feature-flags';
 import {
   applyImplicitLiteLlmModelPrefix,
   CHATGPT_FAST_MODE_ENV_VAR_NAME,
@@ -112,6 +113,7 @@ async function loadPersistedRuntimeModelConfig(
   const deployment = await executor.query.deploymentSettings.findFirst({
     where: eq(deploymentSettings.id, DEFAULT_DEPLOYMENT_ID),
     columns: {
+      metadata: true,
       runtimeModelConfig: true,
       taskModelSettings: true,
     },
@@ -124,6 +126,9 @@ async function loadPersistedRuntimeModelConfig(
     catalogModels: getTaskModelCatalog(deployment?.taskModelSettings),
     enabledCatalogModels: getEnabledTaskModels(deployment?.taskModelSettings),
     defaultModelId: getDefaultTaskModelId(deployment?.taskModelSettings),
+    openCodeCodeModeEnabled: isOpenCodeCodeModeEnabledFromMetadata(
+      deployment?.metadata,
+    ),
   };
 }
 
@@ -408,7 +413,13 @@ async function resolveModelRuntimeEnv(
   const executor = options.executor ?? db;
   const [
     persistedEnvVars,
-    { runtimeModelConfig, catalogModels, enabledCatalogModels, defaultModelId },
+    {
+      runtimeModelConfig,
+      catalogModels,
+      enabledCatalogModels,
+      defaultModelId,
+      openCodeCodeModeEnabled,
+    },
   ] = await Promise.all([
     resolveEffectiveDeploymentEnvVars({
       deploymentEnvVars: options.deploymentEnvVars,
@@ -703,6 +714,9 @@ async function resolveModelRuntimeEnv(
 
   return {
     ...resolvedRoleEnv,
+    ...(openCodeCodeModeEnabled
+      ? { OPENCODE_EXPERIMENTAL_CODE_MODE: '1' }
+      : {}),
     ...(providerKeyNames.length > 0 && {
       R_MODEL_ENV_KEYS: providerKeyNames.join(','),
     }),