ompchamber 0.3.0

package/src/client/components/settings/categories/omp-settings/RowEditor.tsx

@@ -0,0 +1,337 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Schema-driven value editor for one native omp setting key.
+ *
+ * Renders the control matching the schema entry's type:
+ *  - boolean → inline toggle
+ *  - enum → select (submenu options or raw values)
+ *  - string → select for submenu options, password input for credentials,
+ *    otherwise a text field
+ *  - number → select for submenu options (option value parses to a number,
+ *    e.g. retry.maxRetries) or a plain number field
+ *  - array → ordered chip editor (first-match-ordered patterns; multi-select
+ *    checkboxes for unordered lists); JSON array string accepted when no
+ *    submenu choices exist
+ *  - record → single-line JSON object editor
+ *
+ * The initial value is captured once on mount; every control commits on
+ * blur/change instead of per keystroke, so the parent's dirty-state diffing
+ * against `initialValue` stays stable.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { X } from 'lucide-preact';
+import type { SchemaEntry } from '@/shared/lib/omp/config/schema-types';
+
+interface RowEditorProps {
+  entryKey: string;
+  entry: SchemaEntry;
+  value: unknown;
+  initialValue: unknown;
+  /** Report the local editing state so the parent can defer saving. */
+  onChangeDirty: (key: string, dirty: boolean, revert: () => void) => void;
+  /** Commit the new value; returns a promise resolving on success. */
+  onCommit: (key: string, value: unknown) => Promise<boolean>;
+  /** True while a commit/reset for this key is in flight. */
+  saving: boolean;
+  /** Set when the last commit for this key failed. */
+  saveError: boolean;
+}
+
+/** Deep equality for JSON-safe values (arrays, records, scalars). */
+const valuesEqual = (a: unknown, b: unknown): boolean => JSON.stringify(a) === JSON.stringify(b);
+
+/** Number-editor conversion: strip invalid input instead of shipping NaN. */
+const toFiniteNumber = (raw: string): number | null => {
+  const trimmed = raw.trim();
+  if (trimmed === '' || trimmed === '-' || trimmed === '+') return null;
+  const parsed = Number(trimmed);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+/** Parse a JSON array; null when invalid (keeps previous value). */
+const parseJsonArray = (raw: string): unknown[] | null => {
+  const trimmed = raw.trim();
+  if (trimmed === '') return [];
+  try {
+    const parsed = JSON.parse(trimmed);
+    return Array.isArray(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+};
+
+/** Parse a JSON record; null when invalid (keeps previous value). */
+const parseJsonRecord = (raw: string): Record<string, unknown> | null => {
+  const trimmed = raw.trim();
+  if (trimmed === '') return {};
+  try {
+    const parsed = JSON.parse(trimmed);
+    return typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+};
+
+export function RowEditor({
+  entryKey,
+  entry,
+  value,
+  initialValue,
+  onChangeDirty,
+  onCommit,
+  saving,
+  saveError,
+}: RowEditorProps) {
+  const [raw, setRaw] = useState<string>(() => {
+    if (value === undefined || value === null) return '';
+    return Array.isArray(value) || (typeof value === 'object') ? JSON.stringify(value) : String(value);
+  });
+  // True when a blur should commit (control went dirty then lost focus).
+  const dirtyRef = useRef(false);
+  const initialRef = useRef<unknown>(initialValue);
+  const options = useMemo(() => (Array.isArray(entry.ui.options) ? entry.ui.options : null), [entry.ui.options]);
+
+  useEffect(() => {
+    const next = value === undefined || value === null ? '' : Array.isArray(value) || (typeof value === 'object') ? JSON.stringify(value) : String(value);
+    setRaw(next);
+    dirtyRef.current = false;
+  }, [value]);
+
+  const revert = () => {
+    const initial = initialRef.current;
+    const text = initial === undefined || initial === null ? '' : Array.isArray(initial) || (typeof initial === 'object') ? JSON.stringify(initial) : String(initial);
+    setRaw(text);
+    dirtyRef.current = false;
+    onChangeDirty(entryKey, false, () => {});
+  };
+
+  /** Commit a normalized value; optimistic revert keeps the row consistent. */
+  const commit = (next: unknown) => {
+    const priorRaw = raw;
+    setRaw(typeof next === 'string' ? next : JSON.stringify(next));
+    dirtyRef.current = false;
+    onCommit(entryKey, next)
+      .then((ok) => {
+        if (ok) onChangeDirty(entryKey, false, () => {});
+        else {
+          setRaw(priorRaw);
+          onChangeDirty(entryKey, true, revert);
+        }
+      })
+      .catch(() => {
+        setRaw(priorRaw);
+        onChangeDirty(entryKey, true, revert);
+      });
+  };
+
+  const commitBlur = () => {
+    if (!dirtyRef.current) return;
+    if (entry.type === 'number') {
+      const parsed = toFiniteNumber(raw);
+      if (parsed === null || parsed === value) { revert(); return; }
+      commit(parsed);
+      return;
+    }
+    if (entry.type === 'string') {
+      const next = raw.trim();
+      if (next === value) { revert(); return; }
+      commit(next);
+      return;
+    }
+    // array / record as JSON text
+    if (entry.type === 'array') {
+      const parsed = parseJsonArray(raw);
+      if (parsed === null || valuesEqual(parsed, value)) { revert(); return; }
+      commit(parsed);
+      return;
+    }
+    if (entry.type === 'record') {
+      const parsed = parseJsonRecord(raw);
+      if (parsed === null || valuesEqual(parsed, value)) { revert(); return; }
+      commit(parsed);
+    }
+  };
+
+  const markDirty = () => {
+    const wasDirty = dirtyRef.current;
+    dirtyRef.current = true;
+    if (!wasDirty) onChangeDirty(entryKey, true, revert);
+  };
+
+  if (entry.type === 'boolean') {
+    const checked = value === true;
+    return (
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-label={entry.ui.label}
+        onClick={() => {
+          onChangeDirty(entryKey, false, () => {});
+          commit(!checked);
+        }}
+        disabled={saving}
+        className={`relative h-5 w-9 shrink-0 rounded-full transition-colors cursor-pointer ${checked ? 'bg-ink' : 'bg-ink/15'} ${saving ? 'opacity-50' : ''}`}
+      >
+        <span
+          className={`absolute top-0.5 h-4 w-4 rounded-full bg-paper shadow-sm transition-all ${checked ? 'left-[18px]' : 'left-0.5'}`}
+        />
+      </button>
+    );
+  }
+
+  if (entry.type === 'array' && entry.ui.ordered && options) {
+    // Ordered chip list — value is an array of option values; reorder + toggle.
+    const current = Array.isArray(value) ? value.filter((v): v is string => typeof v === 'string') : [];
+    const toggle = (optionValue: string) => {
+      commit(current.includes(optionValue) ? current.filter((v) => v !== optionValue) : [...current, optionValue]);
+    };
+    const move = (index: number, delta: number) => {
+      const target = index + delta;
+      if (target < 0 || target >= current.length) return;
+      const next = [...current];
+      const [moved] = next.splice(index, 1);
+      next.splice(target, 0, moved);
+      commit(next);
+    };
+    return (
+      <div className="flex flex-wrap items-center gap-1.5 justify-end max-w-72">
+        {current.map((chip, index) => {
+          const option = options.find((o) => o.value === chip);
+          return (
+            <span key={chip} className="inline-flex items-center gap-1 rounded-md border border-ink/15 bg-ink/[0.03] px-2 py-0.5 text-[10px] text-ink">
+              {index > 0 && (
+                <button type="button" aria-label={`${option?.label ?? chip} left`} onClick={() => move(index, -1)} className="text-ink/40 hover:text-ink cursor-pointer" disabled={saving}>←</button>
+              )}
+              {option?.label ?? chip}
+              {index < current.length - 1 && (
+                <button type="button" aria-label={`${option?.label ?? chip} right`} onClick={() => move(index, 1)} className="text-ink/40 hover:text-ink cursor-pointer" disabled={saving}>→</button>
+              )}
+              <button type="button" aria-label={`Remove ${option?.label ?? chip}`} onClick={() => toggle(chip)} className="text-ink/40 hover:text-error cursor-pointer" disabled={saving}>
+                <X size={10} />
+              </button>
+            </span>
+          );
+        })}
+        {current.length === 0 && <span className="text-[10px] text-ink/40">empty</span>}
+        <details className="relative">
+          <summary className="cursor-pointer rounded-md border border-ink/15 px-2 py-0.5 text-[10px] text-ink/70 hover:text-ink select-none">add…</summary>
+          <div className="absolute right-0 top-full z-10 mt-1 max-h-44 w-48 overflow-auto rounded-md border border-ink/15 bg-paper p-1 shadow-lg">
+            {options.filter((o) => !current.includes(o.value)).map((option) => (
+              <button
+                key={option.value}
+                type="button"
+                onClick={() => toggle(option.value)}
+                className="block w-full rounded px-2 py-1 text-left text-[11px] text-ink/80 hover:bg-ink/5"
+              >
+                {option.label || option.value}
+              </button>
+            ))}
+            {options.every((o) => current.includes(o.value)) && (
+              <div className="px-2 py-1 text-[10px] text-ink/40">all selected</div>
+            )}
+          </div>
+        </details>
+      </div>
+    );
+  }
+
+  const choices = options ?? (entry.type === 'enum' && entry.values ? entry.values.map((v) => ({ value: v, label: v, description: '' })) : null);
+
+  if (choices) {
+    const current = value === undefined || value === null ? '' : String(value);
+    return (
+      <div className="flex items-center gap-2 shrink-0">
+        <select
+          aria-label={entry.ui.label}
+          value={current}
+          onChange={(e) => {
+            const selected = e.currentTarget.value;
+            if (entry.type === 'number') {
+              const parsed = toFiniteNumber(selected);
+              if (parsed === null || parsed === value) return;
+              commit(parsed);
+            } else {
+              if (selected === value) return;
+              commit(selected);
+            }
+          }}
+          disabled={saving}
+          className={`bg-paper border border-ink/15 rounded-md px-2 py-1 text-ink max-w-56 ${saving ? 'opacity-50' : ''}`}
+        >
+          {current === '' && (
+            <option value="" disabled>select…</option>
+          )}
+          {choices.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label || option.value}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+
+  if (entry.type === 'array') {
+    return (
+      <input
+        aria-label={entry.ui.label}
+        type="text"
+        value={raw}
+        onChange={(e) => { setRaw(e.currentTarget.value); markDirty(); }}
+        onBlur={commitBlur}
+        disabled={saving}
+        placeholder='["anthropic","openai"]'
+        className={`w-48 bg-paper border border-ink/15 rounded-md px-2 py-1 text-ink text-right font-mono text-[11px] ${saving ? 'opacity-50' : ''}`}
+      />
+    );
+  }
+
+  if (entry.type === 'record') {
+    return (
+      <input
+        aria-label={entry.ui.label}
+        type="text"
+        value={raw}
+        onChange={(e) => { setRaw(e.currentTarget.value); markDirty(); }}
+        onBlur={commitBlur}
+        disabled={saving}
+        placeholder='{"bash":"prompt"}'
+        className={`w-48 bg-paper border border-ink/15 rounded-md px-2 py-1 text-ink text-right font-mono text-[11px] ${saving ? 'opacity-50' : ''}`}
+      />
+    );
+  }
+
+  if (entry.type === 'number') {
+    return (
+      <input
+        aria-label={entry.ui.label}
+        type="text"
+        inputMode="decimal"
+        value={raw}
+        onChange={(e) => { setRaw(e.currentTarget.value); markDirty(); }}
+        onBlur={commitBlur}
+        disabled={saving}
+        className={`w-28 bg-paper border border-ink/15 rounded-md px-2 py-1 text-ink text-right font-mono text-[11px] ${saving ? 'opacity-50' : ''}`}
+      />
+    );
+  }
+
+  // string without submenu options
+  return (
+    <input
+      aria-label={entry.ui.label}
+      type={entry.credential ? 'password' : 'text'}
+      value={raw}
+      onChange={(e) => { setRaw(e.currentTarget.value); markDirty(); }}
+      onBlur={commitBlur}
+      disabled={saving}
+      className={`w-48 bg-paper border border-ink/15 rounded-md px-2 py-1 text-ink text-right font-mono text-[11px] ${saving ? 'opacity-50' : ''} ${saveError ? 'border-error' : ''}`}
+    />
+  );
+}

package/src/client/components/settings/categories/project-settings/AccentPalette.tsx

@@ -0,0 +1,76 @@
+import { X } from 'lucide-preact';
+import type { AccentColorOption } from '@/shared/types';
+
+const FALLBACK_OPTIONS: AccentColorOption[] = [
+  { label: 'None', value: '', bgHex: 'transparent' },
+  { label: 'Sky Blue', value: '#38bdf8', bgHex: '#38bdf8' },
+  { label: 'Light Green', value: '#a3e635', bgHex: '#a3e635' },
+  { label: 'Coral', value: '#f87171', bgHex: '#f87171' },
+  { label: 'Amber', value: '#fbbf24', bgHex: '#fbbf24' },
+  { label: 'Teal', value: '#2dd4bf', bgHex: '#2dd4bf' },
+  { label: 'Slate', value: '#94a3b8', bgHex: '#94a3b8' },
+  { label: 'Rose', value: '#f43f5e', bgHex: '#f43f5e' },
+  { label: 'Vivid Blue', value: '#3b82f6', bgHex: '#3b82f6' },
+  { label: 'Lime Green', value: '#84cc16', bgHex: '#84cc16' },
+];
+
+interface ProjectAccentPaletteProps {
+  accentColor: string;
+  onSelectColor: (color: string) => void;
+  options?: AccentColorOption[];
+}
+
+export function ProjectAccentPalette({
+  accentColor,
+  onSelectColor,
+  options = FALLBACK_OPTIONS,
+}: ProjectAccentPaletteProps) {
+  const colorList = options && options.length > 0 ? options : FALLBACK_OPTIONS;
+
+  return (
+    <div className="space-y-2.5">
+      <h4 className="text-xs font-semibold text-ink">
+        Accent Color
+      </h4>
+
+      <div className="flex flex-wrap items-center gap-2.5">
+        {colorList.map((opt) => {
+          const isSelected = accentColor === opt.value;
+
+          if (opt.value === '') {
+            return (
+              <button
+                key="none"
+                type="button"
+                onClick={() => onSelectColor('')}
+                title="Default / No Accent"
+                className={`w-7 h-7 rounded-full border flex items-center justify-center transition-all cursor-pointer ${
+                  isSelected
+                    ? 'border-ink bg-ink/10 ring-2 ring-ink/30 ring-offset-2 ring-offset-paper'
+                    : 'border-ink/25 bg-paper hover:border-ink/50 text-ink/60'
+                }`}
+              >
+                <X size={12} strokeWidth={2.2} />
+              </button>
+            );
+          }
+
+          return (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => onSelectColor(opt.value)}
+              title={opt.label}
+              style={{ backgroundColor: opt.bgHex }}
+              className={`w-7 h-7 rounded-full transition-all cursor-pointer shadow-2xs ${
+                isSelected
+                  ? 'ring-2 ring-ink ring-offset-2 ring-offset-paper scale-105'
+                  : 'hover:scale-105 opacity-90 hover:opacity-100'
+              }`}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/client/components/settings/categories/project-settings/DetailsForm.tsx

@@ -0,0 +1,71 @@
+import type { AccentColorOption, ProjectConfigItem } from '@/shared/types';
+import { ProjectDetailsHeader } from '@/client/components/settings/categories/project-settings/DetailsHeader';
+import { ProjectNameInput } from '@/client/components/settings/categories/project-settings/NameInput';
+import { ProjectModelDropdown } from '@/client/components/settings/categories/project-settings/ModelDropdown';
+import { ProjectAccentPalette } from '@/client/components/settings/categories/project-settings/AccentPalette';
+import { ProjectIconGrid } from '@/client/components/settings/categories/project-settings/IconGrid';
+
+interface ProjectDetailsFormProps {
+  project: ProjectConfigItem;
+  canDelete: boolean;
+  onUpdateField: <K extends keyof ProjectConfigItem>(field: K, value: ProjectConfigItem[K]) => void;
+  onDeleteProject: () => void;
+  availableModels?: string[];
+  accentColorOptions?: AccentColorOption[];
+}
+
+export function ProjectDetailsForm({
+  project,
+  canDelete,
+  onUpdateField,
+  onDeleteProject,
+  availableModels,
+  accentColorOptions,
+}: ProjectDetailsFormProps) {
+  return (
+    <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static p-6 md:p-8 space-y-7">
+      {/* 1. Header with title, full path, and delete button */}
+      <ProjectDetailsHeader
+        project={project}
+        canDelete={canDelete}
+        onDelete={onDeleteProject}
+      />
+
+      {/* 2. Project Name Input */}
+      <ProjectNameInput
+        name={project.name}
+        onChangeName={(newName) => {
+          onUpdateField('name', newName);
+          // If the path ended with the old name, update it seamlessly
+          if (project.path.endsWith(project.name)) {
+            const basePath = project.path.slice(0, -project.name.length);
+            onUpdateField('path', `${basePath}${newName}`);
+          }
+        }}
+      />
+
+      {/* 3. Defaults for new chats (Model selection) */}
+      <ProjectModelDropdown
+        model={project.model}
+        onSelectModel={(newModel) => onUpdateField('model', newModel)}
+        models={availableModels}
+      />
+
+      {/* 4. Accent Color Palette */}
+      <ProjectAccentPalette
+        accentColor={project.accentColor}
+        onSelectColor={(newColor) => onUpdateField('accentColor', newColor)}
+        options={accentColorOptions}
+      />
+
+      {/* 5. Project Icon Picker Grid + Upload/Favicon Actions */}
+      <ProjectIconGrid
+        currentIcon={project.icon}
+        customIconUrl={project.customIconUrl}
+        projectName={project.name}
+        onSelectIcon={(iconId) => onUpdateField('icon', iconId)}
+        onSetCustomIcon={(url) => onUpdateField('customIconUrl', url)}
+      />
+    </div>
+  );
+}

package/src/client/components/settings/categories/project-settings/DetailsHeader.tsx

@@ -0,0 +1,38 @@
+import { Trash2 } from 'lucide-preact';
+import type { ProjectConfigItem } from '@/shared/types';
+
+interface ProjectDetailsHeaderProps {
+  project: ProjectConfigItem;
+  canDelete: boolean;
+  onDelete: () => void;
+}
+
+export function ProjectDetailsHeader({
+  project,
+  canDelete,
+  onDelete,
+}: ProjectDetailsHeaderProps) {
+  return (
+    <div className="flex items-start justify-between gap-4 pb-4 border-b border-ink/10">
+      <div className="min-w-0 flex-1">
+        <h2 className="text-xl font-bold tracking-tight text-ink truncate">
+          {project.name}
+        </h2>
+        <p className="text-[11px] font-mono text-ink/50 truncate mt-0.5 select-all">
+          {project.path}
+        </p>
+      </div>
+
+      {canDelete && (
+        <button
+          type="button"
+          onClick={onDelete}
+          title="Delete Project"
+          className="p-1.5 text-ink/40 hover:text-error hover:bg-error/10 rounded-md transition-colors cursor-pointer"
+        >
+          <Trash2 size={15} />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/client/components/settings/categories/project-settings/IconGrid.tsx

@@ -0,0 +1,152 @@
+import { useRef } from 'preact/hooks';
+import type { ChangeEvent } from 'preact/compat';
+import { BookOpen, Briefcase, Camera, Code2, Compass, Database, FlaskConical, Gamepad2, Globe, Heart, Home, Leaf, Lightbulb, Music, Palette, Rocket, Server, Shield, Smartphone, Terminal, Upload, X } from 'lucide-preact';
+
+interface ProjectIconGridProps {
+  currentIcon: string;
+  customIconUrl?: string;
+  projectName: string;
+  onSelectIcon: (iconId: string) => void;
+  onSetCustomIcon: (url: string | undefined) => void;
+}
+
+const AVAILABLE_ICONS = [
+  { id: 'default', label: 'Default Folder', icon: X },
+  { id: 'code', label: 'Code', icon: Code2 },
+  { id: 'terminal', label: 'Terminal', icon: Terminal },
+  { id: 'rocket', label: 'Rocket', icon: Rocket },
+  { id: 'flask', label: 'Flask', icon: FlaskConical },
+  { id: 'gamepad', label: 'Gamepad', icon: Gamepad2 },
+  { id: 'briefcase', label: 'Briefcase', icon: Briefcase },
+  { id: 'home', label: 'Home', icon: Home },
+  { id: 'globe', label: 'Globe', icon: Globe },
+  { id: 'leaf', label: 'Leaf', icon: Leaf },
+  { id: 'shield', label: 'Shield', icon: Shield },
+  { id: 'palette', label: 'Palette', icon: Palette },
+  { id: 'server', label: 'Server', icon: Server },
+  { id: 'smartphone', label: 'Smartphone', icon: Smartphone },
+  { id: 'database', label: 'Database', icon: Database },
+  { id: 'lightbulb', label: 'Lightbulb', icon: Lightbulb },
+  { id: 'music', label: 'Music', icon: Music },
+  { id: 'camera', label: 'Camera', icon: Camera },
+  { id: 'book', label: 'Book', icon: BookOpen },
+  { id: 'heart', label: 'Heart', icon: Heart },
+];
+
+export function ProjectIconGrid({
+  currentIcon,
+  customIconUrl,
+  projectName,
+  onSelectIcon,
+  onSetCustomIcon,
+}: ProjectIconGridProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.currentTarget.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const result = event.target?.result as string;
+      if (result) {
+        onSetCustomIcon(result);
+        onSelectIcon('custom');
+      }
+    };
+    reader.readAsDataURL(file);
+    e.currentTarget.value = '';
+  };
+
+  const handleDiscoverFavicon = () => {
+    // Generate clean favicon URL for project
+    const sanitized = projectName.toLowerCase().replace(/[^a-z0-9]/g, '') || 'app';
+    const generatedFavicon = `https://api.dicebear.com/7.x/identicon/svg?seed=${sanitized}&radius=50`;
+    onSetCustomIcon(generatedFavicon);
+    onSelectIcon('custom');
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h4 className="text-xs font-semibold text-ink">Project Icon</h4>
+        {customIconUrl && (
+          <button
+            type="button"
+            onClick={() => onSetCustomIcon(undefined)}
+            className="text-[11px] text-ink/50 hover:text-error transition-colors cursor-pointer"
+          >
+            Reset to standard icon
+          </button>
+        )}
+      </div>
+
+      {/* 20 Icons Grid */}
+      <div className="flex flex-wrap gap-2">
+        {AVAILABLE_ICONS.map((item) => {
+          const isSelected = !customIconUrl && currentIcon === item.id;
+          const IconComp = item.icon;
+
+          return (
+            <button
+              key={item.id}
+              type="button"
+              onClick={() => {
+                onSetCustomIcon(undefined);
+                onSelectIcon(item.id);
+              }}
+              title={item.label}
+              className={`w-7 h-7 rounded-md flex items-center justify-center transition-all cursor-pointer ${
+                isSelected
+                  ? 'border border-ink/40 bg-ink/5 text-ink shadow-2xs'
+                  : 'text-ink/60 hover:text-ink hover:bg-ink/5'
+              }`}
+            >
+              <IconComp size={14} strokeWidth={1.8} />
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Action Buttons: Upload & Discover */}
+      <div className="flex items-center gap-2 pt-1">
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={handleFileUpload}
+          accept="image/*"
+          className="hidden"
+        />
+        <button
+          type="button"
+          onClick={() => fileInputRef.current?.click()}
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border border-ink/20 hover:border-ink/40 bg-paper text-ink text-xs font-medium transition-colors cursor-pointer shadow-2xs"
+        >
+          <Upload size={13} className="text-ink/60" />
+          <span>upload icon</span>
+        </button>
+
+        <button
+          type="button"
+          onClick={handleDiscoverFavicon}
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border border-ink/20 hover:border-ink/40 bg-paper text-ink text-xs font-medium transition-colors cursor-pointer shadow-2xs"
+        >
+          <Compass size={13} className="text-ink/60" />
+          <span>discover favicon</span>
+        </button>
+
+        {customIconUrl && (
+          <div className="flex items-center gap-2 ml-2 pl-2 border-l border-ink/10">
+            <img
+              src={customIconUrl}
+              alt="Custom icon"
+              className="w-5 h-5 rounded-xs object-contain border border-ink/15"
+              referrerPolicy="no-referrer"
+            />
+            <span className="text-[11px] text-ink/60">Custom active</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}