arkaos 3.41.0 → 3.42.0

package/VERSION

@@ -1 +1 @@
-3.41.0
+3.42.0

package/dashboard/app/composables/useThemeColor.ts

@@ -0,0 +1,53 @@
+// PR92d v3.42.0 — runtime theme color picker.
+//
+// Stores the operator's preferred primary color in localStorage and
+// applies it to the live Nuxt UI app config so every component picks
+// up the new hue on next render.
+
+import { createSharedComposable } from '@vueuse/core'
+
+const STORAGE_KEY = 'arkaos_theme_color'
+
+export const THEME_COLOR_OPTIONS = [
+  { label: 'Emerald (default)', value: 'emerald' },
+  { label: 'Blue', value: 'blue' },
+  { label: 'Indigo', value: 'indigo' },
+  { label: 'Violet', value: 'violet' },
+  { label: 'Rose', value: 'rose' },
+  { label: 'Amber', value: 'amber' },
+  { label: 'Teal', value: 'teal' },
+  { label: 'Cyan', value: 'cyan' },
+] as const
+
+export type ThemeColor = (typeof THEME_COLOR_OPTIONS)[number]['value']
+
+const _useThemeColor = () => {
+  const appConfig = useAppConfig()
+  const current = ref<ThemeColor>('emerald')
+
+  function apply(color: ThemeColor) {
+    current.value = color
+    if (appConfig.ui?.colors) {
+      ;(appConfig.ui.colors as any).primary = color
+    }
+  }
+
+  function setAndPersist(color: ThemeColor) {
+    apply(color)
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(STORAGE_KEY, color)
+    }
+  }
+
+  function loadFromStorage() {
+    if (typeof window === 'undefined') return
+    const saved = window.localStorage.getItem(STORAGE_KEY) as ThemeColor | null
+    if (saved && THEME_COLOR_OPTIONS.some((o) => o.value === saved)) {
+      apply(saved)
+    }
+  }
+
+  return { current, apply, setAndPersist, loadFromStorage }
+}
+
+export const useThemeColor = createSharedComposable(_useThemeColor)

package/dashboard/app/layouts/default.vue

@@ -4,6 +4,10 @@ import type { NavigationMenuItem } from '@nuxt/ui'
 // PR85c v3.13.0 — registers keyboard shortcuts globally.
 useDashboard()
 
+// PR92d v3.42.0 — apply the operator's chosen primary color on boot.
+const theme = useThemeColor()
+onMounted(() => theme.loadFromStorage())
+
 const open = ref(false)
 
 const links = [[{

package/dashboard/app/pages/settings.vue

@@ -234,6 +234,11 @@ const themeOptions = [
   { label: 'Dark', value: 'dark' },
 ]
 
+// PR92d v3.42.0 — primary color picker.
+import { THEME_COLOR_OPTIONS, useThemeColor } from '~/composables/useThemeColor'
+const themeColor = useThemeColor()
+const themeColorOptions = THEME_COLOR_OPTIONS
+
 function transportColor(transport: string): 'primary' | 'warning' | 'success' | 'neutral' {
   if (transport === 'stdio') return 'primary'
   if (transport === 'http' || transport === 'sse') return 'success'
@@ -750,6 +755,37 @@ const activeSection = ref<SectionId>('profile')
                   Currently rendering as
                   <UBadge :label="colorMode.value" variant="subtle" size="xs" />
                 </p>
+
+                <!-- PR92d v3.42.0 — primary color picker -->
+                <UFormField label="Primary color" help="Tints buttons, badges, links across the dashboard.">
+                  <div class="flex flex-wrap gap-2">
+                    <button
+                      v-for="opt in themeColorOptions"
+                      :key="opt.value"
+                      type="button"
+                      class="rounded-lg border p-2 transition-colors text-xs flex items-center gap-2"
+                      :class="themeColor.current.value === opt.value
+                        ? 'border-primary bg-primary/10 font-semibold'
+                        : 'border-default hover:border-primary/40'"
+                      @click="themeColor.setAndPersist(opt.value)"
+                    >
+                      <span
+                        class="size-4 rounded-full"
+                        :class="{
+                          'bg-emerald-500': opt.value === 'emerald',
+                          'bg-blue-500': opt.value === 'blue',
+                          'bg-indigo-500': opt.value === 'indigo',
+                          'bg-violet-500': opt.value === 'violet',
+                          'bg-rose-500': opt.value === 'rose',
+                          'bg-amber-500': opt.value === 'amber',
+                          'bg-teal-500': opt.value === 'teal',
+                          'bg-cyan-500': opt.value === 'cyan',
+                        }"
+                      />
+                      {{ opt.label }}
+                    </button>
+                  </div>
+                </UFormField>
               </div>
             </UCard>
           </section>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arkaos",
-  "version": "3.41.0",
+  "version": "3.42.0",
   "description": "The Operating System for AI Agent Teams",
   "type": "module",
   "bin": {

package/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "arkaos-core"
-version = "3.41.0"
+version = "3.42.0"
 description = "Core engine for ArkaOS — The Operating System for AI Agent Teams"
 readme = "README.md"
 license = {text = "MIT"}