feat: add vertical tabs customization toggle (#430)

apps/agent/entrypoints/app/customization/ToolbarSettingsCard.tsx

@@ -3,12 +3,15 @@ import { toast } from 'sonner'
 import { Label } from '@/components/ui/label'
 import { Switch } from '@/components/ui/switch'
 import { getBrowserOSAdapter } from '@/lib/browseros/adapter'
+import { Capabilities, Feature } from '@/lib/browseros/capabilities'
 import { BROWSEROS_PREFS } from '@/lib/browseros/prefs'
 
 export const ToolbarSettingsCard: FC = () => {
   const [showLlmChat, setShowLlmChat] = useState(true)
   const [showLlmHub, setShowLlmHub] = useState(true)
   const [showToolbarLabels, setShowToolbarLabels] = useState(true)
+  const [verticalTabsEnabled, setVerticalTabsEnabled] = useState(true)
+  const [supportsVerticalTabs, setSupportsVerticalTabs] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
 
   useEffect(() => {
@@ -23,6 +26,18 @@ export const ToolbarSettingsCard: FC = () => {
         setShowLlmChat(chatPref?.value !== false)
         setShowLlmHub(hubPref?.value !== false)
         setShowToolbarLabels(labelsPref?.value !== false)
+
+        const hasVerticalTabsSupport = await Capabilities.supports(
+          Feature.VERTICAL_TABS_SUPPORT,
+        )
+        setSupportsVerticalTabs(hasVerticalTabsSupport)
+
+        if (hasVerticalTabsSupport) {
+          const verticalTabsPref = await adapter.getPref(
+            BROWSEROS_PREFS.VERTICAL_TABS_ENABLED,
+          )
+          setVerticalTabsEnabled(verticalTabsPref?.value !== false)
+        }
       } catch {
         // API not available - use defaults
       } finally {
@@ -40,7 +55,10 @@ export const ToolbarSettingsCard: FC = () => {
   ) => {
     try {
       const adapter = getBrowserOSAdapter()
-      await adapter.setPref(prefKey, value)
+      const success = await adapter.setPref(prefKey, value)
+      if (!success) {
+        throw new Error('Failed to update setting')
+      }
       setter(value)
     } catch {
       toast.error('Failed to update setting')
@@ -119,6 +137,34 @@ export const ToolbarSettingsCard: FC = () => {
             disabled={isLoading}
           />
         </div>
+
+        {supportsVerticalTabs && (
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label
+                htmlFor="vertical-tabs-enabled"
+                className="font-medium text-sm"
+              >
+                Use Vertical Tabs
+              </Label>
+              <p className="text-muted-foreground text-xs">
+                Turn off to switch back to the horizontal tab strip
+              </p>
+            </div>
+            <Switch
+              id="vertical-tabs-enabled"
+              checked={verticalTabsEnabled}
+              onCheckedChange={(checked) =>
+                handleToggle(
+                  BROWSEROS_PREFS.VERTICAL_TABS_ENABLED,
+                  checked,
+                  setVerticalTabsEnabled,
+                )
+              }
+              disabled={isLoading}
+            />
+          </div>
+        )}
       </div>
     </div>
   )

apps/agent/lib/browseros/capabilities.ts

@@ -39,6 +39,8 @@ export enum Feature {
   SOUL_SUPPORT = 'SOUL_SUPPORT',
   // Inline chat in the new tab page
   NEWTAB_CHAT_SUPPORT = 'NEWTAB_CHAT_SUPPORT',
+  // Vertical tabs preference and customization
+  VERTICAL_TABS_SUPPORT = 'VERTICAL_TABS_SUPPORT',
 }
 
 /**
@@ -63,6 +65,7 @@ const FEATURE_CONFIG: { [K in Feature]: FeatureConfig } = {
   [Feature.PREVIOUS_CONVERSATION_ARRAY]: { minServerVersion: '0.0.64' },
   [Feature.SOUL_SUPPORT]: { minServerVersion: '0.0.67' },
   [Feature.NEWTAB_CHAT_SUPPORT]: { minBrowserOSVersion: '0.40.0.0' },
+  [Feature.VERTICAL_TABS_SUPPORT]: { minBrowserOSVersion: '0.42.0.0' },
 }
 
 function parseVersion(version: string): number[] {

apps/agent/lib/browseros/prefs.ts

@@ -11,5 +11,6 @@ export const BROWSEROS_PREFS = {
   SHOW_LLM_CHAT: 'browseros.show_llm_chat',
   SHOW_LLM_HUB: 'browseros.show_llm_hub',
   SHOW_TOOLBAR_LABELS: 'browseros.show_toolbar_labels',
+  VERTICAL_TABS_ENABLED: 'browseros.vertical_tabs_enabled',
   INSTALL_ID: 'browseros.metrics_install_id',
 } as const