From ea99b4285d6e2a17a8ea67baccce6d1006a6ba1c Mon Sep 17 00:00:00 2001
From: jake <jakeadriansames@gmail.com>
Date: Sat, 21 Mar 2026 10:46:53 +0000
Subject: [PATCH] =?UTF-8?q?agent:=20components=20=E2=80=94=20add=20sensory?=
 =?UTF-8?q?=20zone=20picker=20with=20live=20preview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/lib/components/ZonePicker.svelte | 36 ++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/lib/components/ZonePicker.svelte

diff --git a/src/lib/components/ZonePicker.svelte b/src/lib/components/ZonePicker.svelte
new file mode 100644
index 0000000..551ae6d
--- /dev/null
+++ b/src/lib/components/ZonePicker.svelte
@@ -0,0 +1,36 @@
+<script>
+  import { getPreferences, updatePreferences } from '$lib/stores/preferences.svelte.js';
+
+  const prefs = getPreferences();
+
+  const zones = [
+    { id: 'default', label: 'Default', swatch: 'bg-bg' },
+    { id: 'cave', label: 'Cave', description: 'Cool, focused', swatch: 'bg-[#141a1e]' },
+    { id: 'energy', label: 'Energy', description: 'Warm, active', swatch: 'bg-[#1c1815]' },
+    { id: 'reset', label: 'Reset', description: 'Natural, calm', swatch: 'bg-[#161a16]' },
+  ];
+
+  function selectZone(id) {
+    updatePreferences({ zone: id });
+  }
+</script>
+
+<div class="flex flex-col gap-2">
+  <p class="text-[12px] text-text-secondary font-medium">Sensory zone</p>
+  <div class="grid grid-cols-4 gap-2">
+    {#each zones as zone}
+      <button
+        class="flex flex-col items-center gap-1.5 p-3 rounded-xl border
+          {prefs.zone === zone.id || (zone.id === 'default' && !prefs.zone)
+            ? 'border-accent bg-accent-subtle'
+            : 'border-border-subtle hover:border-border'}"
+        style="transition-duration: var(--duration-ui)"
+        onclick={() => selectZone(zone.id)}
+        aria-pressed={prefs.zone === zone.id || (zone.id === 'default' && !prefs.zone)}
+      >
+        <div class="w-8 h-8 rounded-lg {zone.swatch} border border-border-subtle"></div>
+        <span class="text-[11px] text-text-secondary">{zone.label}</span>
+      </button>
+    {/each}
+  </div>
+</div>