Add Classic | Studio displayMode preference and Settings cards.

Co-authored-by: Cursor <cursoragent@cursor.com>

composables/useDisplayMode.ts

@@ -0,0 +1,82 @@
+export type DisplayMode = 'classic' | 'studio'
+
+const STORAGE_KEY = 'aigen.displayMode'
+
+function parseMode(raw: unknown): DisplayMode | null {
+  const value = String(raw || '').trim().toLowerCase()
+  return value === 'classic' || value === 'studio' ? value : null
+}
+
+function readStored(): DisplayMode {
+  if (!import.meta.client) return 'studio'
+  try {
+    return parseMode(localStorage.getItem(STORAGE_KEY)) || 'studio'
+  } catch {
+    return 'studio'
+  }
+}
+
+function writeStored(mode: DisplayMode) {
+  if (!import.meta.client) return
+  try {
+    localStorage.setItem(STORAGE_KEY, mode)
+  } catch { /* ignore quota / private mode */ }
+}
+
+/** Classic | Studio chrome skin. One Bench tree; layout only. */
+export function useDisplayMode() {
+  const route = useRoute()
+  const displayMode = useState<DisplayMode>('aigen.displayMode', () => 'studio')
+  const sessionOverride = useState<DisplayMode | null>('aigen.displayMode.session', () => null)
+  const hydrated = useState('aigen.displayMode.hydrated', () => false)
+
+  const resolved = computed<DisplayMode>(() => {
+    const fromQuery = parseMode(route.query.display)
+    if (fromQuery) return fromQuery
+    if (sessionOverride.value) return sessionOverride.value
+    return displayMode.value
+  })
+
+  function setDisplayMode(mode: DisplayMode, opts?: { persist?: boolean; session?: boolean }) {
+    const persist = opts?.persist !== false
+    if (opts?.session) sessionOverride.value = mode
+    else sessionOverride.value = null
+    displayMode.value = mode
+    if (persist) writeStored(mode)
+  }
+
+  function hydrate() {
+    if (hydrated.value) return
+    hydrated.value = true
+    const fromQuery = parseMode(route.query.display)
+    if (fromQuery) {
+      sessionOverride.value = fromQuery
+      return
+    }
+    displayMode.value = readStored()
+  }
+
+  if (import.meta.client) {
+    onMounted(hydrate)
+    watch(
+      () => route.query.display,
+      (raw) => {
+        const fromQuery = parseMode(raw)
+        if (fromQuery) sessionOverride.value = fromQuery
+        else if (sessionOverride.value && !parseMode(route.query.display)) {
+          // Drop session override when query cleared; keep stored preference.
+          sessionOverride.value = null
+          displayMode.value = readStored()
+        }
+      }
+    )
+  }
+
+  return {
+    displayMode: resolved,
+    storedDisplayMode: displayMode,
+    setDisplayMode,
+    isStudio: computed(() => resolved.value === 'studio'),
+    isClassic: computed(() => resolved.value === 'classic')
+  }
+}