From d05eaaa84d7b012218ffbbefd1831ef9cc834229 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Thu, 11 Jun 2026 22:03:54 -0400
Subject: [PATCH] feat(DeviceDetailOverlay): add clear cache button and enhance
 mode selection UI

---
 src/app/components/DeviceDetailOverlay.tsx | 39 ++++++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/app/components/DeviceDetailOverlay.tsx b/src/app/components/DeviceDetailOverlay.tsx
index 52c1764..b231a17 100644
--- a/src/app/components/DeviceDetailOverlay.tsx
+++ b/src/app/components/DeviceDetailOverlay.tsx
@@ -431,25 +431,42 @@ export default function DeviceDetailOverlay({
                     <button
                       onClick={() => setBrowsingField('cache')}
                       className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-neutral-100"
+                      title="Browse"
                     >
                       <FolderOpen className="w-5 h-5" />
                     </button>
+                    <button
+                      onClick={() => {
+                        const path = getDevicePath();
+                        updateDeviceSetting([...path, 'cache'], '');
+                      }}
+                      className="px-3 py-2 border border-neutral-300 rounded-lg bg-neutral-50 hover:bg-red-50 hover:border-red-300 hover:text-red-500"
+                      title="Clear Cache"
+                    >
+                      <X className="w-5 h-5" />
+                    </button>
                   </div>
                 </div>
               )}
 
               {deviceData.mode !== undefined && (
-                <div>
-                  <label className="text-sm text-neutral-500 block mb-2">Mode</label>
-                  <input
-                    type="number"
-                    value={deviceData.mode}
-                    onChange={(e) => {
-                      const path = getDevicePath();
-                      updateDeviceSetting([...path, 'mode'], parseInt(e.target.value));
-                    }}
-                    className="w-full px-3 py-2 border border-neutral-300 rounded-lg"
-                  />
+                <div className="flex items-center justify-between">
+                  <label className="text-sm text-neutral-500">Mode</label>
+                  <div className="flex rounded-lg border border-neutral-300 overflow-hidden text-sm">
+                    {([0, 1] as const).map((val, i) => (
+                      <button
+                        key={val}
+                        onClick={() => updateDeviceSetting([...getDevicePath(), 'mode'], val)}
+                        className={`px-4 py-2 ${i > 0 ? 'border-l border-neutral-300' : ''} ${
+                          (deviceData.mode ?? 0) === val
+                            ? 'bg-blue-600 text-white'
+                            : 'bg-white text-neutral-700 hover:bg-neutral-50'
+                        }`}
+                      >
+                        {val === 0 ? 'Read Only' : 'Write Enabled'}
+                      </button>
+                    ))}
+                  </div>
                 </div>
               )}