From 7358023bbb4adb5eb09007c06dc2ff573698bd34 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sun, 16 Mar 2025 21:56:57 +0800
Subject: [PATCH] feat(stage-ui|stage-tamagotchi|stage-web): ollama, header &
 values

---
 .../src/pages/settings/providers/ollama.vue   | 119 ++++++
 .../src/components/Layouts/MobileHeader.vue   |  30 --
 .../Layouts/MobileInteractiveArea.vue         |  49 +--
 .../src/components/Widgets/MobileSettings.vue | 228 -----------
 .../Widgets/ModelProviderSettings.vue         | 381 ------------------
 apps/stage-web/src/pages/index.vue            |   4 +-
 .../src/pages/settings/providers/ollama.vue   | 119 ++++++
 packages/stage-ui/package.json                |   4 +-
 .../Form/Checkbox/Checkbox.story.vue          |   8 +-
 .../Form/Field/FieldCheckbox.story.vue        |   6 +-
 .../Form/Field/FieldInput.story.vue           |  10 +-
 .../Form/Field/FieldKeyValues.story.vue       | 181 +++++++++
 .../components/Form/Field/FieldKeyValues.vue  |  63 +++
 .../Form/Field/FieldRange.story.vue           |  10 +-
 .../src/components/Form/Field/index.ts        |   1 +
 .../src/components/Form/Input/Input.story.vue |  20 +-
 .../components/Form/Input/InputKeyValue.vue   |  19 +
 .../src/components/Form/Input/index.ts        |   1 +
 .../ProviderAccountIdInput.story.vue          |   8 +-
 .../ProviderAdvancedSettings.story.vue        |   6 +-
 .../Providers/ProviderApiKeyInput.story.vue   |   8 +-
 .../Providers/ProviderBaseUrlInput.story.vue  |  10 +-
 .../Providers/ProviderBasicSettings.story.vue |   6 +-
 .../ProviderSettingsContainer.story.vue       |   4 +-
 .../ProviderSettingsLayout.story.vue          |   6 +-
 packages/stage-ui/src/stores/providers.ts     |   8 +-
 packages/stage-ui/stories/setup.ts            |   5 +
 pnpm-lock.yaml                                |   6 +
 28 files changed, 577 insertions(+), 743 deletions(-)
 create mode 100644 apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/ollama.vue
 delete mode 100644 apps/stage-web/src/components/Layouts/MobileHeader.vue
 delete mode 100644 apps/stage-web/src/components/Widgets/MobileSettings.vue
 delete mode 100644 apps/stage-web/src/components/Widgets/ModelProviderSettings.vue
 create mode 100644 apps/stage-web/src/pages/settings/providers/ollama.vue
 create mode 100644 packages/stage-ui/src/components/Form/Field/FieldKeyValues.story.vue
 create mode 100644 packages/stage-ui/src/components/Form/Field/FieldKeyValues.vue
 create mode 100644 packages/stage-ui/src/components/Form/Input/InputKeyValue.vue

diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/ollama.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/ollama.vue
new file mode 100644
index 000000000..3b11b1b8f
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/ollama.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { RemovableRef } from '@vueuse/core'
+
+import {
+  FieldKeyValues,
+  ProviderAdvancedSettings,
+  ProviderBaseUrlInput,
+  ProviderBasicSettings,
+  ProviderSettingsContainer,
+  ProviderSettingsLayout,
+} from '@proj-airi/stage-ui/components'
+import { useProvidersStore } from '@proj-airi/stage-ui/stores'
+import { storeToRefs } from 'pinia'
+import { computed, onMounted, reactive, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const providersStore = useProvidersStore()
+const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
+
+// Get provider metadata
+const providerId = 'ollama'
+const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
+
+const baseUrl = computed({
+  get: () => providers.value[providerId]?.baseUrl || providerMetadata.value?.defaultOptions?.baseUrl || '',
+  set: (value) => {
+    if (!providers.value[providerId])
+      providers.value[providerId] = {}
+
+    providers.value[providerId].baseUrl = value
+  },
+})
+
+onMounted(() => {
+  providersStore.initializeProvider(providerId)
+
+  // Initialize refs with current values
+  baseUrl.value = providers.value[providerId]?.baseUrl || providerMetadata.value?.defaultOptions?.baseUrl || ''
+
+  // Initialize headers if not already set
+  if (!providers.value[providerId]?.headers) {
+    providers.value[providerId].headers = {}
+  }
+})
+
+function handleResetSettings() {
+  providers.value[providerId] = {
+    ...(providerMetadata.value?.defaultOptions as any),
+  }
+}
+
+const headers = reactive<{ key: string, value: string }[]>([
+  { key: '', value: '' },
+])
+
+function addKeyValue(headers: { key: string, value: string }[], key: string, value: string) {
+  if (!headers)
+    return
+
+  headers.push({ key, value })
+}
+
+function removeKeyValue(index: number, headers: { key: string, value: string }[]) {
+  if (!headers)
+    return
+
+  if (headers.length === 1) {
+    headers[0].key = ''
+    headers[0].value = ''
+  }
+  else {
+    headers.splice(index, 1)
+  }
+}
+
+watch(headers, (headers) => {
+  if (headers.length > 0 && (headers[headers.length - 1].key !== '' || headers[headers.length - 1].value !== '')) {
+    headers.push({ key: '', value: '' })
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+</script>
+
+<template>
+  <ProviderSettingsLayout
+    :provider-name="providerMetadata?.localizedName"
+    :provider-icon="providerMetadata?.icon"
+    :on-back="() => router.back()"
+  >
+    <ProviderSettingsContainer>
+      <ProviderBasicSettings
+        title="Basic"
+        description="Essential settings"
+        :on-reset="handleResetSettings"
+      >
+        <ProviderBaseUrlInput
+          v-model="baseUrl"
+          :placeholder="providerMetadata?.defaultOptions?.baseUrl as string || ''"
+          required
+        />
+      </ProviderBasicSettings>
+
+      <ProviderAdvancedSettings title="Advanced">
+        <FieldKeyValues
+          v-model="headers"
+          label="HTTP Headers"
+          description="Add custom HTTP headers"
+          key-placeholder="Key"
+          value-placeholder="Value"
+          @add="(key, value) => addKeyValue(headers, key, value)"
+          @remove="(index) => removeKeyValue(index, headers)"
+        />
+      </ProviderAdvancedSettings>
+    </ProviderSettingsContainer>
+  </ProviderSettingsLayout>
+</template>
diff --git a/apps/stage-web/src/components/Layouts/MobileHeader.vue b/apps/stage-web/src/components/Layouts/MobileHeader.vue
deleted file mode 100644
index f517661b4..000000000
--- a/apps/stage-web/src/components/Layouts/MobileHeader.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { useDark } from '@vueuse/core'
-
-import LogoDark from '../../assets/logo-dark.svg'
-import Logo from '../../assets/logo.svg'
-
-const dark = useDark()
-</script>
-
-<template>
-  <header mb-1 mt-2 w-full gap-2>
-    <div flex="~ 1" w-full items-center justify-center gap-2 px-2 text-nowrap text-lg>
-      <template v-if="dark">
-        <img :src="LogoDark" h-8 w-8 class="theme-colored">
-      </template>
-      <template v-else>
-        <img :src="Logo" h-8 w-8 class="theme-colored">
-      </template>
-      <div font-cute>
-        <span>アイリ</span>
-      </div>
-    </div>
-  </header>
-</template>
-
-<style scoped>
-.theme-colored {
-  filter: hue-rotate(calc(var(--theme-colors-hue, 0) * 1deg));
-}
-</style>
diff --git a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
index 151da4687..56b5fa77b 100644
--- a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
@@ -5,16 +5,10 @@ import { BasicTextarea } from '@proj-airi/stage-ui/components'
 import { useMicVAD } from '@proj-airi/stage-ui/composables'
 import { useChatStore, useConsciousnessStore, useProvidersStore, useSettings } from '@proj-airi/stage-ui/stores'
 import { storeToRefs } from 'pinia'
-import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
 import { onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import MobileChatHistory from '../Widgets/MobileChatHistory.vue'
-import MobileSettings from '../Widgets/MobileSettings.vue'
-
-const emit = defineEmits<{
-  (e: 'settingsOpen', open: boolean): void
-}>()
 
 const messageInput = ref('')
 const listening = ref(false)
@@ -67,21 +61,6 @@ function handleTranscription(_buffer: Float32Array<ArrayBufferLike>) {
   alert('Transcription is not implemented yet')
 }
 
-// async function handleAudioInputChange(event: Event) {
-//   const target = event.target as HTMLSelectElement
-//   const found = audioInputs.value.find(d => d.deviceId === target.value)
-//   if (!found) {
-//     selectedAudioDevice.value = undefined
-//     return
-//   }
-
-//   selectedAudioDevice.value = found
-// }
-
-function handleSettingsOpen(open: boolean) {
-  emit('settingsOpen', open)
-}
-
 watch(isAudioInputOn, async (value) => {
   if (value === 'false') {
     destroy()
@@ -106,34 +85,14 @@ onMounted(() => {
           v-model="messageInput"
           :placeholder="t('stage.message')"
           border="solid 2 primary-100 dark:primary-400/20"
-          text="primary-400 hover:primary-600 dark:[#905073] dark:hover:primary-600 placeholder:primary-400 placeholder:hover:primary-600 placeholder:dark:[#905073] placeholder:dark:hover:primary-600"
-          bg="primary-50 dark:[#3c2632]" max-h="[10lh]" min-h="[1lh]"
-          w-full resize-none overflow-y-scroll rounded-l-xl p-2 font-medium outline-none
+          text="primary-300 hover:primary-500 dark:primary-300/50 dark:hover:primary-500 placeholder:primary-300 placeholder:hover:primary-500 placeholder:dark:primary-300/50 placeholder:dark:hover:primary-500"
+          bg="primary-100 dark:primary-400/20"
+          max-h="[10lh]" min-h="[1lh]"
+          w-full resize-none overflow-y-scroll rounded-xl p-2 font-medium outline-none
           transition="all duration-250 ease-in-out placeholder:all placeholder:duration-250 placeholder:ease-in-out"
           @submit="handleSend"
         />
       </div>
-      <DrawerRoot should-scale-background @update:open="handleSettingsOpen">
-        <DrawerTrigger
-          class="px-4 py-2.5"
-          border="solid 2 primary-100 dark:primary-400/20"
-          text="lg primary-400 hover:primary-600 dark:[#905073] dark:hover:primary-600 placeholder:primary-400 placeholder:hover:primary-600 placeholder:dark:[#905073] placeholder:dark:hover:primary-600"
-          bg="primary-50 dark:[#3c2632]" max-h="[10lh]" min-h="[1lh]" rounded-r-xl
-        >
-          <div i-solar:settings-bold-duotone />
-        </DrawerTrigger>
-        <DrawerPortal>
-          <DrawerOverlay class="fixed inset-0 z-50 bg-black/40" />
-          <DrawerContent
-            max-h="[75%]"
-            fixed bottom-0 left-0 right-0 z-50 mt-24 h-full flex flex-col rounded-t-lg bg="[#fffbff] dark:[#1f1a1d]"
-          >
-            <div class="flex flex-1 flex-col rounded-t-lg p-5" bg="[#fffbff] dark:[#1f1a1d]" gap-2>
-              <MobileSettings />
-            </div>
-          </DrawerContent>
-        </DrawerPortal>
-      </DrawerRoot>
     </div>
   </div>
 </template>
diff --git a/apps/stage-web/src/components/Widgets/MobileSettings.vue b/apps/stage-web/src/components/Widgets/MobileSettings.vue
deleted file mode 100644
index 8ba7710ff..000000000
--- a/apps/stage-web/src/components/Widgets/MobileSettings.vue
+++ /dev/null
@@ -1,228 +0,0 @@
-<script setup lang="ts">
-import { useSettings } from '@proj-airi/stage-ui/stores'
-import { useDark } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import ModelProviderSettings from './ModelProviderSettings.vue'
-
-const { t } = useI18n()
-const settings = storeToRefs(useSettings())
-
-const dark = useDark({ disableTransition: false })
-const currentView = ref('main')
-const slideDirection = ref('forward') // 'forward' | 'backward'
-
-function handleLanguageChange(event: Event) {
-  const target = event.target as HTMLSelectElement
-  settings.language.value = target.value
-}
-
-function navigateToProviders() {
-  slideDirection.value = 'forward'
-  currentView.value = 'providers'
-}
-
-function navigateToLive2D() {
-  slideDirection.value = 'forward'
-  currentView.value = 'live2d'
-}
-
-function navigateBack() {
-  slideDirection.value = 'backward'
-  currentView.value = 'main'
-}
-</script>
-
-<template>
-  <div text="zinc-500 dark:zinc-400" class="relative">
-    <Transition :name="slideDirection === 'forward' ? 'slide-forward' : 'slide-backward'">
-      <!-- Main Settings View -->
-      <div v-if="currentView === 'main'" key="main">
-        <h2 text="zinc-800/80 dark:zinc-200/80 xl" mb-4 font-bold>
-          {{ t('settings.title') }}
-        </h2>
-        <div>
-          <!-- Model Providers Navigation Item -->
-          <div class="space-y-2">
-            <div
-              grid="~ cols-[150px_1fr]"
-              bg="zinc-100 dark:zinc-800"
-              hover="bg-zinc-200 dark:bg-zinc-700"
-              transition="all ease-in-out duration-250"
-              cursor-pointer items-center gap-1.5 rounded-lg px-4 py-3
-              @click="navigateToProviders"
-            >
-              <div text="sm">
-                <span>{{ t('settings.model-provider.title') }}</span>
-              </div>
-              <div flex="~ row" w-full justify-end text="sm">
-                <div i-solar:alt-arrow-right-bold-duotone />
-              </div>
-            </div>
-
-            <!-- Language Setting -->
-            <div
-              grid="~ cols-[150px_1fr]"
-              bg="zinc-100 dark:zinc-800"
-              hover="bg-zinc-200 dark:bg-zinc-700"
-              transition="all ease-in-out duration-250"
-              items-center gap-1.5 rounded-lg px-4 py-3
-            >
-              <div text="sm">
-                <span>{{ t('settings.language.title') }}</span>
-              </div>
-              <div flex="~ row" w-full justify-end>
-                <select
-                  class="w-32"
-                  bg="transparent"
-                  text="sm right zinc-800 dark:zinc-100"
-                  transition="all ease-in-out duration-250"
-                  outline="none"
-                  @change="handleLanguageChange"
-                >
-                  <option value="en-US">
-                    {{ t('settings.language.english') }}
-                  </option>
-                  <option value="zh-CN">
-                    {{ t('settings.language.chinese') }}
-                  </option>
-                </select>
-              </div>
-            </div>
-
-            <!-- Theme Setting -->
-            <label
-              bg="zinc-100 dark:zinc-800"
-              hover="bg-zinc-200 dark:bg-zinc-700"
-              transition="all ease-in-out duration-250"
-              w-full flex cursor-pointer rounded-lg px-4 py-3
-            >
-              <input
-                v-model="dark"
-                text="zinc-800 dark:zinc-100"
-                :checked="dark"
-                :aria-checked="dark"
-                type="checkbox"
-                hidden appearance-none outline-none
-              >
-              <div flex="~ row" w-full items-center gap-1.5>
-                <div text="sm" w-full flex-1>
-                  <span>{{ t('settings.theme') }}</span>
-                </div>
-                <div select-none>
-                  <Transition name="slide-away" mode="out-in">
-                    <div
-                      v-if="dark"
-                      i-solar:moon-stars-bold-duotone
-                      transition="all ease-in-out duration-250"
-                    />
-                    <div
-                      v-else
-                      i-solar:sun-fog-bold-duotone
-                      transition="all ease-in-out duration-250"
-                    />
-                  </Transition>
-                </div>
-              </div>
-            </label>
-            <!-- Live2D Setting -->
-            <div
-              grid="~ cols-[150px_1fr]"
-              bg="zinc-100 dark:zinc-800"
-              hover="bg-zinc-200 dark:bg-zinc-700"
-              transition="all ease-in-out duration-250"
-              cursor-pointer items-center gap-1.5 rounded-lg px-4 py-3
-              @click="navigateToLive2D"
-            >
-              <div text="sm">
-                <span>{{ t('settings.live2d.title') }}</span>
-              </div>
-              <div flex="~ row" w-full justify-end>
-                <div i-solar:alt-arrow-right-bold-duotone />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Model Providers View -->
-      <div v-else-if="currentView === 'providers'" key="providers">
-        <div mb-4 flex items-center gap-2>
-          <button
-            text="zinc-800/80 dark:zinc-200/80"
-            @click="navigateBack"
-          >
-            <div i-solar:alt-arrow-left-bold-duotone />
-          </button>
-          <h2 text="zinc-800/80 dark:zinc-200/80 xl" font-bold>
-            {{ t('settings.model-provider.title') }}
-          </h2>
-        </div>
-        <ModelProviderSettings />
-      </div>
-      <!-- Live2D Settings View -->
-      <div v-else-if="currentView === 'live2d'" key="live2d">
-        <div mb-4 flex items-center gap-2>
-          <button
-            text="zinc-800/80 dark:zinc-200/80"
-            @click="navigateBack"
-          >
-            <div i-solar:alt-arrow-left-bold-duotone />
-          </button>
-          <h2 text="zinc-800/80 dark:zinc-200/80 xl" font-bold>
-            {{ t('settings.live2d.title') }}
-          </h2>
-        </div>
-        <Live2DSettings />
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-/* Forward navigation transitions */
-.slide-forward-enter-active,
-.slide-forward-leave-active {
-  transition: all 0.2s ease;
-  position: absolute;
-  width: 100%;
-}
-
-.slide-forward-enter-from {
-  transform: translateX(100%);
-}
-
-.slide-forward-leave-to {
-  transform: translateX(-30%);
-  opacity: 0;
-}
-
-.slide-forward-enter-to,
-.slide-forward-leave-from {
-  transform: translateX(0);
-}
-
-/* Backward navigation transitions */
-.slide-backward-enter-active,
-.slide-backward-leave-active {
-  transition: all 0.2s ease;
-  position: absolute;
-  width: 100%;
-}
-
-.slide-backward-enter-from {
-  transform: translateX(-30%);
-  opacity: 0;
-}
-
-.slide-backward-leave-to {
-  transform: translateX(100%);
-}
-
-.slide-backward-enter-to,
-.slide-backward-leave-from {
-  transform: translateX(0);
-}
-</style>
diff --git a/apps/stage-web/src/components/Widgets/ModelProviderSettings.vue b/apps/stage-web/src/components/Widgets/ModelProviderSettings.vue
deleted file mode 100644
index a6d69d603..000000000
--- a/apps/stage-web/src/components/Widgets/ModelProviderSettings.vue
+++ /dev/null
@@ -1,381 +0,0 @@
-<script setup lang="ts">
-import { Collapsable } from '@proj-airi/stage-ui/components'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores'
-import { toJsonSchema } from '@valibot/to-json-schema'
-import { storeToRefs } from 'pinia'
-import { description, object, optional, pipe, record, string, title } from 'valibot'
-import { computed } from 'vue'
-
-interface ModelProvider {
-  id: string
-  name: string
-  icon?: string
-  fields: ReturnType<typeof toJsonSchema>
-}
-
-const providers = computed<ModelProvider[]>(() => [
-  {
-    id: 'openrouter-ai',
-    name: 'OpenRouter',
-    icon: 'i-lobe-icons:openrouter',
-    fields: toJsonSchema(
-      object({
-        apiKey: pipe(string(), title('API Key'), description('API Key for OpenRouter')),
-        baseUrl: optional(pipe(string(), title('Base URL'), description('Custom base URL (optional)')), 'https://openrouter.ai/api/v1/'),
-      }),
-    ),
-  },
-  {
-    id: 'openai',
-    name: 'OpenAI',
-    icon: 'i-lobe-icons:openai',
-    fields: toJsonSchema(
-      object({
-        apiKey: pipe(string(), title('API Key'), description('API Key for OpenAI services')),
-        baseUrl: optional(pipe(string(), title('Base URL'), description('Custom base URL (optional)')), 'https://api.openai.com/v1/'),
-      }),
-    ),
-  },
-  {
-    id: 'ollama-ai',
-    name: 'Ollama',
-    icon: 'i-lobe-icons:ollama',
-    fields: toJsonSchema(
-      object({
-        baseUrl: optional(pipe(string(), title('Host'), description('Host of the Ollama instance (optional)'))),
-        extraHeaders: optional(pipe(record(string(), string()), title('Headers'), description('Custom Headers for Ollama instance (optional)'))),
-      }),
-    ),
-  },
-  {
-    id: 'vllm',
-    name: 'vLLM',
-    icon: 'i-lobe-icons:vllm-color',
-    fields: toJsonSchema(
-      object({
-        baseUrl: optional(pipe(string(), title('Host'), description('Host of the vLLM instance (optional)'))),
-        apiKey: optional(pipe(string(), title('API Key'), description('API Key for vLLM'))),
-        extraHeaders: optional(pipe(record(string(), string()), title('Headers'), description('Custom Headers for vLLM instance (optional)'))),
-      }),
-    ),
-  },
-  {
-    id: 'elevenlabs',
-    name: 'ElevenLabs',
-    icon: 'i-simple-icons:elevenlabs',
-    fields: toJsonSchema(
-      object({
-        apiKey: pipe(string(), title('API Key'), description('API Key for ElevenLabs')),
-        baseUrl: optional(pipe(string(), title('Base URL'), description('Custom base URL (optional)'))),
-      }),
-    ),
-  },
-  {
-    id: 'xai',
-    name: 'xAI',
-    icon: 'i-lobe-icons:xai',
-    fields: toJsonSchema(
-      object({
-        apiKey: pipe(string(), title('API Key'), description('API Key for xAI')),
-        baseUrl: optional(pipe(string(), title('Base URL'), description('Custom base URL (optional)')), 'https://api.x.ai/v1/'),
-      }),
-    ),
-  },
-  {
-    id: 'deepseek',
-    name: 'DeepSeek',
-    icon: 'i-lobe-icons:deepseek-color',
-    fields: toJsonSchema(
-      object({
-        apiKey: pipe(string(), title('API Key'), description('API Key for DeepSeek')),
-        baseUrl: optional(pipe(string(), title('Base URL'), description('Custom base URL (optional)')), 'https://api.deepseek.com/'),
-      }),
-    ),
-  },
-  {
-    id: 'together-ai',
-    name: 'Together.ai',
-    icon: 'i-lobe-icons:together-color',
-    fields: toJsonSchema(
-      object({
-        apiKey: pipe(string(), title('API Key'), description('API Key for Together.ai')),
-        baseUrl: optional(pipe(string(), title('Base URL'), description('Custom base URL (optional)')), 'https://api.together.xyz/v1/'),
-      }),
-    ),
-  },
-  {
-    id: 'novita-ai',
-    name: 'Novita',
-    icon: 'i-lobe-icons:novita-color',
-    fields: toJsonSchema(
-      object({
-        apiKey: pipe(string(), title('API Key'), description('API Key for Novita')),
-        baseUrl: optional(pipe(string(), title('Base URL'), description('Custom base URL (optional)')), 'https://api.novita.ai/v3/openai/'),
-      }),
-    ),
-  },
-  {
-    id: 'fireworks-ai',
-    name: 'Fireworks.ai',
-    icon: 'i-lobe-icons:fireworks',
-    fields: toJsonSchema(
-      object({
-        apiKey: pipe(string(), title('API Key'), description('API Key for Fireworks.ai')),
-        baseUrl: optional(pipe(string(), title('Base URL'), description('Custom base URL (optional)')), 'https://api.fireworks.ai/inference/v1/'),
-      }),
-    ),
-  },
-  {
-    id: 'cloudflare-workers-ai',
-    name: 'Cloudflare Workers AI',
-    icon: 'i-lobe-icons:cloudflare-color',
-    fields: toJsonSchema(
-      object({
-        apiKey: pipe(string(), title('API Key'), description('API Key')),
-        accountId: pipe(string(), title('Account ID'), description('Cloudflare Account ID')),
-      }),
-    ),
-  },
-  {
-    id: 'mistral-ai',
-    name: 'Mistral',
-    icon: 'i-lobe-icons:mistral-color',
-    fields: toJsonSchema(
-      object({
-        apiKey: pipe(string(), title('API Key'), description('API Key for OpenRouter')),
-        baseUrl: optional(pipe(string(), title('Base URL'), description('Custom base URL (optional)')), 'https://api.mistral.ai/v1/'),
-      }),
-    ),
-  },
-  {
-    id: 'moonshot-ai',
-    name: 'Moonshot AI',
-    icon: 'i-lobe-icons:moonshot',
-    fields: toJsonSchema(
-      object({
-        apiKey: pipe(string(), title('API Key'), description('API Key for OpenRouter')),
-        baseUrl: optional(pipe(string(), title('Base URL'), description('Custom base URL (optional)')), 'https://api.moonshot.cn/v1/'),
-      }),
-    ),
-  },
-])
-
-const { providers: providerValues } = storeToRefs(useProvidersStore())
-
-function getFieldValue(providerId: string, fieldName: string): unknown {
-  return providerValues.value[providerId]?.[fieldName] || ''
-}
-
-function setFieldValue(providerId: string, fieldName: string, value: unknown) {
-  if (!providerValues.value[providerId]) {
-    providerValues.value[providerId] = {}
-  }
-  providerValues.value[providerId][fieldName] = value
-}
-
-function getRecordEntries(providerId: string, fieldName: string): Array<[string, string]> {
-  const value = providerValues.value[providerId]?.[fieldName]
-  if (!value)
-    return [['', '']]
-  try {
-    return Object.entries(value)
-  }
-  catch {
-    return [['', '']]
-  }
-}
-
-function setRecordValue(providerId: string, fieldName: string, entries: Array<[string, string]>) {
-  const validEntries = entries.filter(([key, value]) => key || value)
-  if (validEntries.length === 0) {
-    delete providerValues.value[providerId]?.[fieldName]
-    return
-  }
-
-  const record = Object.fromEntries(validEntries)
-  setFieldValue(providerId, fieldName, record)
-}
-
-function addRecordEntry(entries: Array<[string, string]>) {
-  entries.push(['', ''])
-}
-
-function removeRecordEntry(entries: Array<[string, string]>, index: number) {
-  entries.splice(index, 1)
-}
-
-// Helper function to get default value from field schema
-function getDefaultValue(field: any, _fieldName: string) {
-  // Check if field has a default value defined
-  if (field.default !== undefined) {
-    return field.default
-  }
-
-  // For record types, return an empty array (for the key-value pairs)
-  if (field.type === 'object' && field.additionalProperties) {
-    return []
-  }
-
-  // Return appropriate empty values based on field type
-  switch (field.type) {
-    case 'string':
-      return ''
-    case 'number':
-    case 'integer':
-      return 0
-    case 'boolean':
-      return false
-    case 'array':
-      return []
-    case 'object':
-      return {}
-    default:
-      return ''
-  }
-}
-
-// Initialize field with default value if not already set
-function initFieldWithDefault(providerId: string, fieldName: string, field: any) {
-  const currentValue = providerValues.value[providerId]?.[fieldName]
-
-  // Only set default if field doesn't already have a value
-  if (currentValue === undefined) {
-    const defaultValue = getDefaultValue(field, fieldName)
-    setFieldValue(providerId, fieldName, defaultValue)
-  }
-}
-
-// Initialize all fields with defaults when provider is expanded
-function initProviderDefaults(providerId: string) {
-  const provider = providers.value.find(p => p.id === providerId)
-  if (!provider || !provider.fields.properties)
-    return
-
-  Object.entries(provider.fields.properties).forEach(([fieldName, field]) => {
-    initFieldWithDefault(providerId, fieldName, field)
-  })
-}
-</script>
-
-<template>
-  <div flex="~ col" gap-2>
-    <div v-for="provider in providers" :key="provider.id">
-      <Collapsable w-full>
-        <template #trigger="slotProps">
-          <button
-            bg="zinc-100 dark:zinc-800"
-            hover="bg-zinc-200 dark:bg-zinc-700"
-            transition="all ease-in-out duration-250"
-            w-full flex items-center gap-1.5 rounded-lg px-4 py-3 outline-none
-            class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
-            @click="slotProps.setVisible(!slotProps.visible) && initProviderDefaults(provider.id)"
-          >
-            <div flex="~ row 1" items-center gap-1.5>
-              <div
-                :class="provider.icon" class="provider-icon size-6"
-                transition="filter duration-250 ease-in-out"
-              />
-              <div>
-                {{ provider.name }}
-              </div>
-            </div>
-            <div transform transition="transform duration-250" :class="{ 'rotate-180': slotProps.visible }">
-              <div i-solar:alt-arrow-down-bold-duotone />
-            </div>
-          </button>
-        </template>
-        <div p-4>
-          <div class="space-y-4">
-            <!-- Dynamically render fields based on JSON Schema -->
-            <div
-              v-for="(field, fieldName) in provider.fields.properties"
-              :key="fieldName"
-              class="space-y-1"
-            >
-              <template v-if="typeof field !== 'boolean' && typeof fieldName !== 'number' && field.type === 'object' && field.additionalProperties">
-                <!-- Record field (key-value pairs) -->
-                <div>
-                  <div class="flex items-center justify-between">
-                    <div>
-                      <div class="flex items-center gap-1 text-sm font-medium">
-                        {{ field.title || fieldName }}
-                        <span v-if="provider.fields.required?.includes(fieldName)" class="text-red-500">*</span>
-                      </div>
-                      <div v-if="field.description" class="text-xs text-zinc-500 dark:text-zinc-400">
-                        {{ field.description }}
-                      </div>
-                    </div>
-                    <button
-                      class="text-sm"
-                      @click="addRecordEntry(getRecordEntries(provider.id, fieldName))"
-                    >
-                      <div i-solar:add-circle-line-duotone />
-                    </button>
-                  </div>
-                  <div class="mt-2 space-y-2">
-                    <div
-                      v-for="(_, index) in getRecordEntries(provider.id, fieldName)"
-                      :key="index"
-                      class="flex items-center gap-2"
-                    >
-                      <input
-                        v-model="getRecordEntries(provider.id, fieldName)[index][0]"
-                        type="text"
-                        border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-                        transition="border duration-250 ease-in-out"
-                        flex-1 rounded px-2 py-1 text-sm outline-none
-                        placeholder="Key"
-                        @input="setRecordValue(provider.id, fieldName, getRecordEntries(provider.id, fieldName))"
-                      >
-                      <input
-                        v-model="getRecordEntries(provider.id, fieldName)[index][1]"
-                        type="text"
-                        border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-                        transition="border duration-250 ease-in-out"
-                        flex-1 rounded px-2 py-1 text-sm outline-none
-                        placeholder="Value"
-                        @input="setRecordValue(provider.id, fieldName, getRecordEntries(provider.id, fieldName))"
-                      >
-                      <button
-                        class="text-red-500 hover:text-red-600"
-                        @click="removeRecordEntry(getRecordEntries(provider.id, fieldName), index)"
-                      >
-                        <div i-solar:trash-bin-trash-bold-duotone />
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </template>
-              <template v-if="typeof field !== 'boolean' && typeof fieldName !== 'number' && field.type === 'string'">
-                <div class="flex items-center justify-between">
-                  <div>
-                    <div class="flex items-center gap-1 text-sm font-medium">
-                      {{ field.title }}
-                      <span
-                        v-if="provider.fields.required?.includes(fieldName)"
-                        class="text-red-500"
-                      >*</span>
-                    </div>
-                    <div v-if="field.description" class="text-xs text-zinc-400 dark:text-zinc-600">
-                      {{ field.description }}
-                    </div>
-                  </div>
-                  <input
-                    :type="fieldName.toLowerCase().includes('key') ? 'password' : 'text'"
-                    :value="getFieldValue(provider.id, fieldName)"
-                    rounded
-                    border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-                    transition="border duration-250 ease-in-out"
-                    px-2 py-1 text-sm outline-none
-                    :placeholder="(field.default && String(field.default)) || `Enter ${field.title || fieldName}`"
-                    @input="(e) => setFieldValue(provider.id, fieldName, (e.target as HTMLInputElement).value)"
-                  >
-                </div>
-              </template>
-            </div>
-          </div>
-        </div>
-      </Collapsable>
-    </div>
-  </div>
-</template>
diff --git a/apps/stage-web/src/pages/index.vue b/apps/stage-web/src/pages/index.vue
index 169668c0d..03d38b19a 100644
--- a/apps/stage-web/src/pages/index.vue
+++ b/apps/stage-web/src/pages/index.vue
@@ -6,7 +6,6 @@ import { ref } from 'vue'
 import Cross from '../components/Backgrounds/Cross.vue'
 import Header from '../components/Layouts/Header.vue'
 import InteractiveArea from '../components/Layouts/InteractiveArea.vue'
-import MobileHeader from '../components/Layouts/MobileHeader.vue'
 import MobileInteractiveArea from '../components/Layouts/MobileInteractiveArea.vue'
 import AnimatedWave from '../components/Widgets/AnimatedWave.vue'
 
@@ -28,8 +27,7 @@ function handleSettingsOpen(open: boolean) {
       <div relative flex="~ col" z-2 h-100vh w-100vw of-hidden>
         <!-- header -->
         <div>
-          <Header class="flex <md:hidden" p2 />
-          <MobileHeader class="hidden <md:block" />
+          <Header class="flex" p2 />
         </div>
         <!-- page -->
         <div relative flex="~ 1 row gap-y-0 gap-x-2 <md:col">
diff --git a/apps/stage-web/src/pages/settings/providers/ollama.vue b/apps/stage-web/src/pages/settings/providers/ollama.vue
new file mode 100644
index 000000000..3b11b1b8f
--- /dev/null
+++ b/apps/stage-web/src/pages/settings/providers/ollama.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { RemovableRef } from '@vueuse/core'
+
+import {
+  FieldKeyValues,
+  ProviderAdvancedSettings,
+  ProviderBaseUrlInput,
+  ProviderBasicSettings,
+  ProviderSettingsContainer,
+  ProviderSettingsLayout,
+} from '@proj-airi/stage-ui/components'
+import { useProvidersStore } from '@proj-airi/stage-ui/stores'
+import { storeToRefs } from 'pinia'
+import { computed, onMounted, reactive, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const providersStore = useProvidersStore()
+const { providers } = storeToRefs(providersStore) as { providers: RemovableRef<Record<string, any>> }
+
+// Get provider metadata
+const providerId = 'ollama'
+const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
+
+const baseUrl = computed({
+  get: () => providers.value[providerId]?.baseUrl || providerMetadata.value?.defaultOptions?.baseUrl || '',
+  set: (value) => {
+    if (!providers.value[providerId])
+      providers.value[providerId] = {}
+
+    providers.value[providerId].baseUrl = value
+  },
+})
+
+onMounted(() => {
+  providersStore.initializeProvider(providerId)
+
+  // Initialize refs with current values
+  baseUrl.value = providers.value[providerId]?.baseUrl || providerMetadata.value?.defaultOptions?.baseUrl || ''
+
+  // Initialize headers if not already set
+  if (!providers.value[providerId]?.headers) {
+    providers.value[providerId].headers = {}
+  }
+})
+
+function handleResetSettings() {
+  providers.value[providerId] = {
+    ...(providerMetadata.value?.defaultOptions as any),
+  }
+}
+
+const headers = reactive<{ key: string, value: string }[]>([
+  { key: '', value: '' },
+])
+
+function addKeyValue(headers: { key: string, value: string }[], key: string, value: string) {
+  if (!headers)
+    return
+
+  headers.push({ key, value })
+}
+
+function removeKeyValue(index: number, headers: { key: string, value: string }[]) {
+  if (!headers)
+    return
+
+  if (headers.length === 1) {
+    headers[0].key = ''
+    headers[0].value = ''
+  }
+  else {
+    headers.splice(index, 1)
+  }
+}
+
+watch(headers, (headers) => {
+  if (headers.length > 0 && (headers[headers.length - 1].key !== '' || headers[headers.length - 1].value !== '')) {
+    headers.push({ key: '', value: '' })
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+</script>
+
+<template>
+  <ProviderSettingsLayout
+    :provider-name="providerMetadata?.localizedName"
+    :provider-icon="providerMetadata?.icon"
+    :on-back="() => router.back()"
+  >
+    <ProviderSettingsContainer>
+      <ProviderBasicSettings
+        title="Basic"
+        description="Essential settings"
+        :on-reset="handleResetSettings"
+      >
+        <ProviderBaseUrlInput
+          v-model="baseUrl"
+          :placeholder="providerMetadata?.defaultOptions?.baseUrl as string || ''"
+          required
+        />
+      </ProviderBasicSettings>
+
+      <ProviderAdvancedSettings title="Advanced">
+        <FieldKeyValues
+          v-model="headers"
+          label="HTTP Headers"
+          description="Add custom HTTP headers"
+          key-placeholder="Key"
+          value-placeholder="Value"
+          @add="(key, value) => addKeyValue(headers, key, value)"
+          @remove="(index) => removeKeyValue(index, headers)"
+        />
+      </ProviderAdvancedSettings>
+    </ProviderSettingsContainer>
+  </ProviderSettingsLayout>
+</template>
diff --git a/packages/stage-ui/package.json b/packages/stage-ui/package.json
index 228f38c99..bb018d42a 100644
--- a/packages/stage-ui/package.json
+++ b/packages/stage-ui/package.json
@@ -56,7 +56,9 @@
     "story:preview": "histoire preview"
   },
   "dependencies": {
-    "reka-ui": "^2.1.0"
+    "@vueuse/motion": "^3.0.3",
+    "reka-ui": "^2.1.0",
+    "vue": "link:@formkit/auto-animate/vue"
   },
   "devDependencies": {
     "@electron-toolkit/preload": "^3.0.1",
diff --git a/packages/stage-ui/src/components/Form/Checkbox/Checkbox.story.vue b/packages/stage-ui/src/components/Form/Checkbox/Checkbox.story.vue
index d5f915c56..a2077181b 100644
--- a/packages/stage-ui/src/components/Form/Checkbox/Checkbox.story.vue
+++ b/packages/stage-ui/src/components/Form/Checkbox/Checkbox.story.vue
@@ -22,7 +22,7 @@ const interactiveValue = ref(false)
       id="checked"
       title="Checked"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <Checkbox v-model="checkedValue" />
       </div>
     </Variant>
@@ -31,7 +31,7 @@ const interactiveValue = ref(false)
       id="unchecked"
       title="Unchecked"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <Checkbox v-model="uncheckedValue" />
       </div>
     </Variant>
@@ -40,7 +40,7 @@ const interactiveValue = ref(false)
       id="interactive"
       title="Interactive"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <div class="flex items-center gap-4">
           <Checkbox v-model="interactiveValue" />
           <div class="text-sm">
@@ -54,7 +54,7 @@ const interactiveValue = ref(false)
       id="sizes"
       title="Different Contexts"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <div class="flex flex-col gap-4">
           <div class="flex items-center gap-2">
             <Checkbox v-model="checkedValue" />
diff --git a/packages/stage-ui/src/components/Form/Field/FieldCheckbox.story.vue b/packages/stage-ui/src/components/Form/Field/FieldCheckbox.story.vue
index 7b72c13ac..ca62fe907 100644
--- a/packages/stage-ui/src/components/Form/Field/FieldCheckbox.story.vue
+++ b/packages/stage-ui/src/components/Form/Field/FieldCheckbox.story.vue
@@ -21,7 +21,7 @@ const uncheckedValue = ref(false)
       id="checked"
       title="Checked"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <FieldCheckbox
           v-model="checkedValue"
           label="Speaker Boost"
@@ -34,7 +34,7 @@ const uncheckedValue = ref(false)
       id="unchecked"
       title="Unchecked"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <FieldCheckbox
           v-model="uncheckedValue"
           label="Use High Quality"
@@ -47,7 +47,7 @@ const uncheckedValue = ref(false)
       id="interactive"
       title="Interactive"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <FieldCheckbox
           v-model="checkedValue"
           label="Toggle Me"
diff --git a/packages/stage-ui/src/components/Form/Field/FieldInput.story.vue b/packages/stage-ui/src/components/Form/Field/FieldInput.story.vue
index 3b49da9f0..293cd2e2d 100644
--- a/packages/stage-ui/src/components/Form/Field/FieldInput.story.vue
+++ b/packages/stage-ui/src/components/Form/Field/FieldInput.story.vue
@@ -22,7 +22,7 @@ const emailValue = ref('user@example.com')
       id="text-empty"
       title="Text Input (Empty)"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderInput
           v-model="textValue"
           label="Text Input"
@@ -36,7 +36,7 @@ const emailValue = ref('user@example.com')
       id="password"
       title="Password Input"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderInput
           v-model="passwordValue"
           label="Password"
@@ -51,7 +51,7 @@ const emailValue = ref('user@example.com')
       id="email"
       title="Email Input"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderInput
           v-model="emailValue"
           label="Email Address"
@@ -66,7 +66,7 @@ const emailValue = ref('user@example.com')
       id="required"
       title="Required Input"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderInput
           v-model="textValue"
           label="Required Field"
@@ -81,7 +81,7 @@ const emailValue = ref('user@example.com')
       id="not-required"
       title="Optional Input"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderInput
           v-model="textValue"
           label="Optional Field"
diff --git a/packages/stage-ui/src/components/Form/Field/FieldKeyValues.story.vue b/packages/stage-ui/src/components/Form/Field/FieldKeyValues.story.vue
new file mode 100644
index 000000000..98f58b3d1
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Field/FieldKeyValues.story.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue'
+
+import FieldKeyValues from './FieldKeyValues.vue'
+
+const emptyHeaders = reactive<{ key: string, value: string }[]>([
+  { key: '', value: '' },
+])
+const singleHeader = reactive<{ key: string, value: string }[]>([
+  { key: 'Content-Type', value: 'application/json' },
+])
+const multipleHeaders = reactive<{ key: string, value: string }[]>([
+  { key: 'Authorization', value: 'Bearer token123' },
+  { key: 'Accept', value: 'application/json' },
+  { key: 'X-API-Key', value: 'abc123xyz456' },
+])
+
+function addKeyValue(headers: { key: string, value: string }[], key: string, value: string) {
+  if (!headers)
+    return
+
+  headers.push({ key, value })
+}
+
+function removeKeyValue(index: number, headers: { key: string, value: string }[]) {
+  if (!headers)
+    return
+
+  if (headers.length === 1) {
+    headers[0].key = ''
+    headers[0].value = ''
+  }
+  else {
+    headers.splice(index, 1)
+  }
+}
+
+watch(emptyHeaders, (headers) => {
+  if (headers.length > 0 && (headers[headers.length - 1].key !== '' || headers[headers.length - 1].value !== '')) {
+    emptyHeaders.push({ key: '', value: '' })
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+
+watch(singleHeader, (headers) => {
+  if (headers.length > 0 && (headers[headers.length - 1].key !== '' || headers[headers.length - 1].value !== '')) {
+    singleHeader.push({ key: '', value: '' })
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+
+watch(multipleHeaders, (headers) => {
+  if (headers.length > 0 && (headers[headers.length - 1].key !== '' || headers[headers.length - 1].value !== '')) {
+    multipleHeaders.push({ key: '', value: '' })
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+</script>
+
+<template>
+  <Story
+    title="Field Key Values"
+    group="form"
+    :layout="{ type: 'grid', width: 600 }"
+  >
+    <template #controls>
+      <ThemeColorsHueControl />
+    </template>
+
+    <Variant
+      id="empty"
+      title="Empty"
+    >
+      <div>
+        <FieldKeyValues
+          v-model="emptyHeaders"
+          label="HTTP Headers"
+          description="Add custom HTTP headers"
+          key-placeholder="Key"
+          value-placeholder="Value"
+          @add="(key, value) => addKeyValue(emptyHeaders, key, value)"
+          @remove="(index) => removeKeyValue(index, emptyHeaders)"
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="single-header"
+      title="Single Header"
+    >
+      <div>
+        <FieldKeyValues
+          v-model="singleHeader"
+          label="HTTP Headers"
+          description="Add custom HTTP headers"
+          key-placeholder="Key"
+          value-placeholder="Value"
+          @add="(key, value) => addKeyValue(singleHeader, key, value)"
+          @remove="(index) => removeKeyValue(index, singleHeader)"
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="multiple-headers"
+      title="Multiple Headers"
+    >
+      <div>
+        <FieldKeyValues
+          v-model="multipleHeaders"
+          label="HTTP Headers"
+          description="Add custom HTTP headers"
+          key-placeholder="Key"
+          value-placeholder="Value"
+          @add="(key, value) => addKeyValue(multipleHeaders, key, value)"
+          @remove="(index) => removeKeyValue(index, multipleHeaders)"
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="with-provider"
+      title="With Provider Name"
+    >
+      <div>
+        <FieldKeyValues
+          v-model="emptyHeaders"
+          label="API Headers"
+          description="Add custom headers for this API"
+          name="OpenAI"
+          key-placeholder="Key"
+          value-placeholder="Value"
+          @add="(key, value) => addKeyValue(emptyHeaders, key, value)"
+          @remove="(index) => removeKeyValue(index, emptyHeaders)"
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="required"
+      title="Required Field"
+    >
+      <div>
+        <FieldKeyValues
+          v-model="emptyHeaders"
+          label="Required Headers"
+          description="These headers are required"
+          required
+          key-placeholder="Key"
+          value-placeholder="Value"
+          @add="(key, value) => addKeyValue(emptyHeaders, key, value)"
+          @remove="(index) => removeKeyValue(index, emptyHeaders)"
+        />
+      </div>
+    </Variant>
+
+    <Variant
+      id="optional"
+      title="Optional Field"
+    >
+      <div>
+        <FieldKeyValues
+          v-model="emptyHeaders"
+          label="Optional Headers"
+          description="These headers are optional"
+          :required="false"
+          key-placeholder="Key"
+          value-placeholder="Value"
+          @add="(key, value) => addKeyValue(emptyHeaders, key, value)"
+          @remove="(index) => removeKeyValue(index, emptyHeaders)"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/Form/Field/FieldKeyValues.vue b/packages/stage-ui/src/components/Form/Field/FieldKeyValues.vue
new file mode 100644
index 000000000..65b4cb350
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Field/FieldKeyValues.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+import InputKeyValue from '../Input/InputKeyValue.vue'
+
+const props = defineProps<{
+  label?: string
+  description?: string
+  name?: string
+  keyPlaceholder?: string
+  valuePlaceholder?: string
+  required?: boolean
+  inputClass?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'remove', index: number): void
+  (e: 'add', key: string, value: string): void
+}>()
+
+const keyValues = defineModel<{ key: string, value: string }[]>({ required: true })
+const inputKey = ref('')
+const inputValue = ref('')
+
+watch([inputKey, inputValue], () => {
+  emit('add', inputKey.value, inputValue.value)
+})
+</script>
+
+<template>
+  <div max-w-full>
+    <label flex="~ col gap-2">
+      <div>
+        <div class="flex items-center gap-1 text-sm font-medium">
+          {{ props.label }}
+          <span v-if="props.required !== false" class="text-red-500">*</span>
+        </div>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
+          {{ props.description }}
+        </div>
+      </div>
+      <div flex="~ col gap-2">
+        <div
+          v-for="(keyValue, index) in keyValues"
+          :key="index"
+          v-auto-animate
+          w-full flex items-center gap-2
+        >
+          <InputKeyValue
+            v-model:property-key="keyValue.key"
+            v-model:property-value="keyValue.value"
+            :key-placeholder="props.keyPlaceholder"
+            :value-placeholder="props.valuePlaceholder"
+            w-full
+          />
+          <button @click="emit('remove', index)">
+            <div i-solar:minus-circle-line-duotone size="6" />
+          </button>
+        </div>
+      </div>
+    </label>
+  </div>
+</template>
diff --git a/packages/stage-ui/src/components/Form/Field/FieldRange.story.vue b/packages/stage-ui/src/components/Form/Field/FieldRange.story.vue
index 27071e629..a337618e2 100644
--- a/packages/stage-ui/src/components/Form/Field/FieldRange.story.vue
+++ b/packages/stage-ui/src/components/Form/Field/FieldRange.story.vue
@@ -27,7 +27,7 @@ function formatPercentage(value: number): string {
       id="default-min"
       title="Default (min)"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <FieldRange
           v-model="minValue"
           label="Minimum Value"
@@ -40,7 +40,7 @@ function formatPercentage(value: number): string {
       id="default-mid"
       title="Default (mid)"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <FieldRange
           v-model="midValue"
           label="Medium Value"
@@ -53,7 +53,7 @@ function formatPercentage(value: number): string {
       id="default-max"
       title="Default (max)"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <FieldRange
           v-model="maxValue"
           label="Maximum Value"
@@ -66,7 +66,7 @@ function formatPercentage(value: number): string {
       id="custom-range"
       title="Custom Range"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <FieldRange
           v-model="customValue"
           label="Custom Range"
@@ -82,7 +82,7 @@ function formatPercentage(value: number): string {
       id="formatted-value"
       title="Formatted Value"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <FieldRange
           v-model="midValue"
           label="Formatted Value"
diff --git a/packages/stage-ui/src/components/Form/Field/index.ts b/packages/stage-ui/src/components/Form/Field/index.ts
index 6aa092a74..bae7cde6c 100644
--- a/packages/stage-ui/src/components/Form/Field/index.ts
+++ b/packages/stage-ui/src/components/Form/Field/index.ts
@@ -1,3 +1,4 @@
 export { default as FieldCheckbox } from './FieldCheckbox.vue'
 export { default as FieldInput } from './FieldInput.vue'
+export { default as FieldKeyValues } from './FieldKeyValues.vue'
 export { default as FieldRange } from './FieldRange.vue'
diff --git a/packages/stage-ui/src/components/Form/Input/Input.story.vue b/packages/stage-ui/src/components/Form/Input/Input.story.vue
index 1095808a2..545473e4e 100644
--- a/packages/stage-ui/src/components/Form/Input/Input.story.vue
+++ b/packages/stage-ui/src/components/Form/Input/Input.story.vue
@@ -25,7 +25,7 @@ const urlValue = ref('https://example.com')
       id="text-empty"
       title="Text Input (Empty)"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <Input
           v-model="textValue"
           placeholder="Enter text..."
@@ -37,7 +37,7 @@ const urlValue = ref('https://example.com')
       id="text-filled"
       title="Text Input (Filled)"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <Input
           v-model="filledTextValue"
           placeholder="Enter text..."
@@ -49,7 +49,7 @@ const urlValue = ref('https://example.com')
       id="password"
       title="Password Input"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <Input
           v-model="passwordValue"
           type="password"
@@ -62,7 +62,7 @@ const urlValue = ref('https://example.com')
       id="email"
       title="Email Input"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <Input
           v-model="emailValue"
           type="email"
@@ -75,7 +75,7 @@ const urlValue = ref('https://example.com')
       id="number"
       title="Number Input"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <Input
           v-model="numberValue"
           type="number"
@@ -88,7 +88,7 @@ const urlValue = ref('https://example.com')
       id="url"
       title="URL Input"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <Input
           v-model="urlValue"
           type="url"
@@ -101,7 +101,7 @@ const urlValue = ref('https://example.com')
       id="disabled"
       title="Disabled Input"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <Input
           v-model="filledTextValue"
           placeholder="This input is disabled"
@@ -114,7 +114,7 @@ const urlValue = ref('https://example.com')
       id="readonly"
       title="Readonly Input"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <Input
           v-model="filledTextValue"
           placeholder="This input is readonly"
@@ -127,7 +127,7 @@ const urlValue = ref('https://example.com')
       id="with-classes"
       title="With Custom Classes"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <Input
           v-model="textValue"
           placeholder="Custom styled input"
@@ -140,7 +140,7 @@ const urlValue = ref('https://example.com')
       id="with-autofocus"
       title="With Autofocus"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <Input
           v-model="textValue"
           placeholder="This input has autofocus"
diff --git a/packages/stage-ui/src/components/Form/Input/InputKeyValue.vue b/packages/stage-ui/src/components/Form/Input/InputKeyValue.vue
new file mode 100644
index 000000000..442cf6c3b
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Input/InputKeyValue.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import Input from './Input.vue'
+
+const props = defineProps<{
+  name?: string
+  keyPlaceholder?: string
+  valuePlaceholder?: string
+}>()
+
+const key = defineModel<string>('propertyKey', { required: true })
+const value = defineModel<string>('propertyValue', { required: true })
+</script>
+
+<template>
+  <div flex="~ gap-2">
+    <Input v-model="key" :placeholder="props.keyPlaceholder" class="w-1/2" />
+    <Input v-model="value" :placeholder="props.valuePlaceholder" class="w-1/2" />
+  </div>
+</template>
diff --git a/packages/stage-ui/src/components/Form/Input/index.ts b/packages/stage-ui/src/components/Form/Input/index.ts
index a691dd6c1..30da630e1 100644
--- a/packages/stage-ui/src/components/Form/Input/index.ts
+++ b/packages/stage-ui/src/components/Form/Input/index.ts
@@ -1 +1,2 @@
 export { default as Input } from './Input.vue'
+export { default as InputKeyValue } from './InputKeyValue.vue'
diff --git a/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.story.vue b/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.story.vue
index 059111e3b..d9e5d9c20 100644
--- a/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.story.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.story.vue
@@ -21,7 +21,7 @@ const filledAccountId = ref('1234567890abcdef1234567890abcdef')
       id="empty"
       title="Empty"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderAccountIdInput
           v-model="emptyAccountId"
           placeholder="Your Cloudflare Account ID"
@@ -33,7 +33,7 @@ const filledAccountId = ref('1234567890abcdef1234567890abcdef')
       id="filled"
       title="Filled"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderAccountIdInput
           v-model="filledAccountId"
           placeholder="Your Cloudflare Account ID"
@@ -45,7 +45,7 @@ const filledAccountId = ref('1234567890abcdef1234567890abcdef')
       id="custom-label"
       title="Custom Label"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderAccountIdInput
           v-model="emptyAccountId"
           label="Cloudflare Account ID"
@@ -59,7 +59,7 @@ const filledAccountId = ref('1234567890abcdef1234567890abcdef')
       id="not-required"
       title="Not Required"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderAccountIdInput
           v-model="emptyAccountId"
           :required="false"
diff --git a/packages/stage-ui/src/components/Providers/ProviderAdvancedSettings.story.vue b/packages/stage-ui/src/components/Providers/ProviderAdvancedSettings.story.vue
index 4cca7bd46..e3877ff3b 100644
--- a/packages/stage-ui/src/components/Providers/ProviderAdvancedSettings.story.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderAdvancedSettings.story.vue
@@ -16,7 +16,7 @@ import ProviderAdvancedSettings from './ProviderAdvancedSettings.vue'
       id="collapsed"
       title="Collapsed (Default)"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderAdvancedSettings>
           <div class="border border-neutral-200 rounded p-4 dark:border-neutral-800">
             <p>Advanced settings content (initially hidden)</p>
@@ -29,7 +29,7 @@ import ProviderAdvancedSettings from './ProviderAdvancedSettings.vue'
       id="expanded"
       title="Expanded"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderAdvancedSettings :initial-visible="true">
           <div class="border border-neutral-200 rounded p-4 dark:border-neutral-800">
             <p>Advanced settings content (initially visible)</p>
@@ -42,7 +42,7 @@ import ProviderAdvancedSettings from './ProviderAdvancedSettings.vue'
       id="custom-title"
       title="Custom Title"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderAdvancedSettings title="Expert Settings">
           <div class="border border-neutral-200 rounded p-4 dark:border-neutral-800">
             <p>Expert settings content</p>
diff --git a/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.story.vue b/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.story.vue
index 16b3669fd..b2b216904 100644
--- a/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.story.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.story.vue
@@ -21,7 +21,7 @@ const filledApiKey = ref('sk-1234567890abcdefghijklmnopqrstuvwxyz')
       id="empty"
       title="Empty"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderApiKeyInput
           v-model="apiKey"
           provider-name="OpenAI"
@@ -34,7 +34,7 @@ const filledApiKey = ref('sk-1234567890abcdefghijklmnopqrstuvwxyz')
       id="filled"
       title="Filled"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderApiKeyInput
           v-model="filledApiKey"
           provider-name="OpenAI"
@@ -47,7 +47,7 @@ const filledApiKey = ref('sk-1234567890abcdefghijklmnopqrstuvwxyz')
       id="custom-label"
       title="Custom Label"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderApiKeyInput
           v-model="apiKey"
           provider-name="OpenAI"
@@ -62,7 +62,7 @@ const filledApiKey = ref('sk-1234567890abcdefghijklmnopqrstuvwxyz')
       id="not-required"
       title="Not Required"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderApiKeyInput
           v-model="apiKey"
           provider-name="OpenAI"
diff --git a/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.story.vue b/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.story.vue
index 8c9196477..1b92d96f7 100644
--- a/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.story.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.story.vue
@@ -22,7 +22,7 @@ const customUrl = ref('https://custom-api.example.com/v1/')
       id="empty"
       title="Empty"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderBaseUrlInput
           v-model="emptyUrl"
           placeholder="https://api.example.com/v1/"
@@ -34,7 +34,7 @@ const customUrl = ref('https://custom-api.example.com/v1/')
       id="default-url"
       title="Default URL"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderBaseUrlInput
           v-model="defaultUrl"
           placeholder="https://api.openai.com/v1/"
@@ -46,7 +46,7 @@ const customUrl = ref('https://custom-api.example.com/v1/')
       id="custom-url"
       title="Custom URL"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderBaseUrlInput
           v-model="customUrl"
           placeholder="https://api.example.com/v1/"
@@ -58,7 +58,7 @@ const customUrl = ref('https://custom-api.example.com/v1/')
       id="required"
       title="Required"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderBaseUrlInput
           v-model="emptyUrl"
           placeholder="https://api.example.com/v1/"
@@ -71,7 +71,7 @@ const customUrl = ref('https://custom-api.example.com/v1/')
       id="custom-label"
       title="Custom Label"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderBaseUrlInput
           v-model="emptyUrl"
           label="API Endpoint"
diff --git a/packages/stage-ui/src/components/Providers/ProviderBasicSettings.story.vue b/packages/stage-ui/src/components/Providers/ProviderBasicSettings.story.vue
index e83d534cb..c43c5cfd0 100644
--- a/packages/stage-ui/src/components/Providers/ProviderBasicSettings.story.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderBasicSettings.story.vue
@@ -16,7 +16,7 @@ import ProviderBasicSettings from './ProviderBasicSettings.vue'
       id="default"
       title="Default"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderBasicSettings>
           <div class="border border-neutral-200 rounded p-4 dark:border-neutral-800">
             <p>Settings content goes here</p>
@@ -29,7 +29,7 @@ import ProviderBasicSettings from './ProviderBasicSettings.vue'
       id="with-title-description"
       title="With Title & Description"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderBasicSettings
           title="Custom Title"
           description="Custom description for this section"
@@ -45,7 +45,7 @@ import ProviderBasicSettings from './ProviderBasicSettings.vue'
       id="with-reset"
       title="With Reset Button"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderBasicSettings
           title="Basic Settings"
           description="Essential settings for this provider"
diff --git a/packages/stage-ui/src/components/Providers/ProviderSettingsContainer.story.vue b/packages/stage-ui/src/components/Providers/ProviderSettingsContainer.story.vue
index 48a85f139..ae50a286f 100644
--- a/packages/stage-ui/src/components/Providers/ProviderSettingsContainer.story.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderSettingsContainer.story.vue
@@ -18,7 +18,7 @@ import ProviderSettingsContainer from './ProviderSettingsContainer.vue'
       id="empty"
       title="Empty"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderSettingsContainer>
           <div class="p-4">
             <p>Container content goes here</p>
@@ -31,7 +31,7 @@ import ProviderSettingsContainer from './ProviderSettingsContainer.vue'
       id="with-sections"
       title="With Sections"
     >
-      <div class="bg-white p-4 dark:bg-neutral-900">
+      <div>
         <ProviderSettingsContainer>
           <ProviderBasicSettings
             title="Basic"
diff --git a/packages/stage-ui/src/components/Providers/ProviderSettingsLayout.story.vue b/packages/stage-ui/src/components/Providers/ProviderSettingsLayout.story.vue
index 5dca6d2ab..26f4c5498 100644
--- a/packages/stage-ui/src/components/Providers/ProviderSettingsLayout.story.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderSettingsLayout.story.vue
@@ -16,7 +16,7 @@ import ProviderSettingsLayout from './ProviderSettingsLayout.vue'
       id="default"
       title="Default"
     >
-      <div class="p-4">
+      <div>
         <ProviderSettingsLayout provider-name="Example Provider">
           <div class="mt-4 rounded-xl bg-neutral-50 p-4 dark:bg-[rgba(0,0,0,0.3)]">
             <p>Provider settings content goes here</p>
@@ -29,7 +29,7 @@ import ProviderSettingsLayout from './ProviderSettingsLayout.vue'
       id="with-icon"
       title="With Icon"
     >
-      <div class="p-4">
+      <div>
         <ProviderSettingsLayout
           provider-name="OpenAI" provider-icon="i-lobe-icons:openai"
         >
@@ -44,7 +44,7 @@ import ProviderSettingsLayout from './ProviderSettingsLayout.vue'
       id="with-icon-color"
       title="With Icon Color"
     >
-      <div class="p-4">
+      <div>
         <ProviderSettingsLayout
           provider-name="Mistral AI" provider-icon-color="i-lobe-icons:mistral-color"
         >
diff --git a/packages/stage-ui/src/stores/providers.ts b/packages/stage-ui/src/stores/providers.ts
index 339a0c957..14f048d06 100644
--- a/packages/stage-ui/src/stores/providers.ts
+++ b/packages/stage-ui/src/stores/providers.ts
@@ -161,8 +161,8 @@ export const useProvidersStore = defineStore('providers', () => {
         },
       },
     },
-    'ollama-ai': {
-      id: 'ollama-ai',
+    'ollama': {
+      id: 'ollama',
       nameKey: 'providers.ollama.name',
       name: 'Ollama',
       descriptionKey: 'providers.ollama.description',
@@ -180,7 +180,7 @@ export const useProvidersStore = defineStore('providers', () => {
             return {
               id: model.id,
               name: model.id,
-              provider: 'ollama-ai',
+              provider: 'ollama',
               description: '',
               contextLength: 0,
               deprecated: false,
@@ -538,7 +538,7 @@ export const useProvidersStore = defineStore('providers', () => {
         return !!config.apiKey && !!config.baseUrl
       case 'openai':
         return !!config.apiKey
-      case 'ollama-ai':
+      case 'ollama':
         return !!config.baseUrl
       case 'vllm':
         return !!config.baseUrl
diff --git a/packages/stage-ui/stories/setup.ts b/packages/stage-ui/stories/setup.ts
index c08a5fa03..95c04c0f4 100644
--- a/packages/stage-ui/stories/setup.ts
+++ b/packages/stage-ui/stories/setup.ts
@@ -1,4 +1,6 @@
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
 import { defineSetupVue3 } from '@histoire/plugin-vue'
+import { MotionPlugin } from '@vueuse/motion'
 
 import ThemeColorsHueControl from './ThemeColorsHueControl.vue'
 
@@ -7,5 +9,8 @@ import '@unocss/reset/tailwind.css'
 import './main.css'
 
 export const setupVue3 = defineSetupVue3(({ app }) => {
+  app.use(MotionPlugin)
+  app.use(autoAnimatePlugin)
+
   app.component('ThemeColorsHueControl', ThemeColorsHueControl)
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e664b8c10..f02df8bfc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1053,9 +1053,15 @@ importers:
 
   packages/stage-ui:
     dependencies:
+      '@vueuse/motion':
+        specifier: ^3.0.3
+        version: 3.0.3(magicast@0.3.5)(rollup@4.35.0)(vue@3.5.13(typescript@5.8.2))
       reka-ui:
         specifier: ^2.1.0
         version: 2.1.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+      vue:
+        specifier: link:@formkit/auto-animate/vue
+        version: 3.5.13(typescript@5.8.2)
     devDependencies:
       '@electron-toolkit/preload':
         specifier: ^3.0.1