diff --git a/frontend/src/lib/components/SettingsPanel.svelte b/frontend/src/lib/components/SettingsPanel.svelte
index b20e470..7a3d8a1 100644
--- a/frontend/src/lib/components/SettingsPanel.svelte
+++ b/frontend/src/lib/components/SettingsPanel.svelte
@@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import { DEFAULT_CONFIG, TIMING } from '../constants.js';
import { handleError } from '../errorHandler.js';
+ import EyeIndicator from './visual/EyeIndicator.svelte';
let { disabled = false } = $props();
@@ -290,10 +291,10 @@
{#if config.processing.eye_filter.enabled}
-
{/if}
@@ -724,4 +728,23 @@
font-size: 0.875rem;
color: #22c55e;
}
+
+ /* Visual indicator layout */
+ .setting-control-with-visual {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ }
+
+ .inline-visual-indicator {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.25rem 0.5rem;
+ background: #0f0f0f;
+ border: 1px solid #333;
+ border-radius: 6px;
+ min-width: 60px;
+ height: 32px;
+ }
diff --git a/frontend/src/lib/components/visual/EyeIndicator.svelte b/frontend/src/lib/components/visual/EyeIndicator.svelte
new file mode 100644
index 0000000..4c2ee66
--- /dev/null
+++ b/frontend/src/lib/components/visual/EyeIndicator.svelte
@@ -0,0 +1,91 @@
+
+
+
+
+