From b841c9b47e03c903e3c2632dc4c3c2c77e26db24 Mon Sep 17 00:00:00 2001
From: "Andrew @ Conduit" <andrew@openconduit.ai>
Date: Sun, 7 Jun 2026 15:41:02 -0500
Subject: [PATCH] feat: resolve issues #101, #102, #103
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#103 - No-model warning: InputBar now shows an amber banner when the user tries
to send without a model selected, instead of silently dropping the prompt.

#102 - Model picker in settings: replace text+datalist inputs with a proper
searchable dropdown (same style as the chat window picker, no routing profiles).
Global default model picker also syncs defaultProviderId automatically. Provider
default model field is now a <select> populated from fetched models.
Removed redundant 'Default Provider' field (the picker sets it implicitly).

#101 - Folder/sidebar UI improvements:
- Indent guide lines: opacity 0.22 → 0.40 for better visibility
- Folder custom icon: set emoji or image URL in Folder Settings; Simple Icons
  CDN picker (type a slug, preview, apply) built into the modal
- Provider logo: new logoUrl field on ProviderConfig, auto-filled from Simple
  Icons based on provider type; shown next to conversations in the sidebar
- New conversations inherit defaultModel/defaultProviderId from settings

Also: SchemaFormRenderer now skips fields with renderOverride === false,
allowing sections to be hidden without removing schema contributions.
---
 package-lock.json                |   4 +-
 package.json                     |   2 +-
 src/components/InputBar.tsx      |  28 +++-
 src/components/SettingsPanel.tsx | 235 +++++++++++++++++++++++++++----
 src/components/Sidebar.tsx       |  95 +++++++++++--
 src/components/WelcomeScreen.tsx |   5 +-
 src/types.ts                     |   3 +
 7 files changed, 329 insertions(+), 43 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8a8f11f..a2553ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@openconduit/core",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@openconduit/core",
-      "version": "2.0.0-beta.8",
+      "version": "2.0.0-beta.9",
       "license": "AGPL-3.0",
       "dependencies": {
         "@codemirror/commands": "^6.10.3",
diff --git a/package.json b/package.json
index beae195..8549324 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openconduit/core",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.9",
   "description": "Shared UI components, stores, hooks, and service interface for OpenConduit",
   "main": "src/index.ts",
   "types": "src/index.ts",
diff --git a/src/components/InputBar.tsx b/src/components/InputBar.tsx
index 12bdec1..8695fd1 100644
--- a/src/components/InputBar.tsx
+++ b/src/components/InputBar.tsx
@@ -60,6 +60,7 @@ export default function InputBar({ onSend, onAbort, onClear, onCompact, onTrim,
   const [folderFiles, setFolderFiles] = useState<FolderEntry[] | null>(null);
   const [folderLoading, setFolderLoading] = useState(false);
   const [trimConfirm, setTrimConfirm] = useState(false);
+  const [noModelWarning, setNoModelWarning] = useState(false);
   const [slashMatches, setSlashMatches] = useState<SlashCommand[]>([]);
   const [slashIndex, setSlashIndex] = useState(0);
   const [slashPrefix, setSlashPrefix] = useState('');
@@ -212,12 +213,19 @@ export default function InputBar({ onSend, onAbort, onClear, onCompact, onTrim,
       textareaRef.current?.focus();
       return;
     }
+    // Guard: if no model is selected, warn instead of silently dropping the prompt
+    const effectiveModel = activeConv?.model || activeConv?.routingProfileId || settings?.defaultModel;
+    if (!effectiveModel && conversationId) {
+      setNoModelWarning(true);
+      return;
+    }
+    setNoModelWarning(false);
     const fc = folderPath && folderFiles ? { rootName: folderPath.split('/').pop() ?? folderPath, rootPath: folderPath, files: folderFiles } : undefined;
     onSend(trimmed, attachments.length > 0 ? attachments : undefined, fc, reasoning !== 'off' ? reasoning : undefined);
     setContent('');
     setAttachments([]);
     textareaRef.current?.focus();
-  }, [content, attachments, folderPath, folderFiles, onSend, reasoning, btwMode, onBtw]);
+  }, [content, attachments, folderPath, folderFiles, onSend, reasoning, btwMode, onBtw, activeConv, settings, conversationId]);
 
   const handlePickFolder = useCallback(async () => {
     const picked = await service.folder?.pick();
@@ -322,6 +330,7 @@ export default function InputBar({ onSend, onAbort, onClear, onCompact, onTrim,
   const handleTextareaChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const val = e.target.value;
     setContent(val);
+    if (noModelWarning) setNoModelWarning(false);
     const el = e.target;
     el.style.height = 'auto';
     el.style.height = Math.min(el.scrollHeight, 200) + 'px';
@@ -533,6 +542,23 @@ export default function InputBar({ onSend, onAbort, onClear, onCompact, onTrim,
         </div>
       )}
 
+      {/* No-model warning */}
+      {noModelWarning && (
+        <div className="flex items-center justify-between gap-2 bg-amber-950/60 border border-amber-700/50 rounded-lg px-3 py-2 text-xs text-amber-300">
+          <div className="flex items-center gap-1.5">
+            <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+            </svg>
+            <span>No model selected — pick one in the model picker above before sending.</span>
+          </div>
+          <button onClick={() => setNoModelWarning(false)} className="text-amber-500 hover:text-amber-300 flex-shrink-0">
+            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      )}
+
       {/* Input box */}
       <div className="flex items-end gap-2 bg-slate-800 border border-slate-600 focus-within:border-blue-500 rounded-2xl px-3 py-2 transition-colors">
         <textarea
diff --git a/src/components/SettingsPanel.tsx b/src/components/SettingsPanel.tsx
index 577c44d..59e9309 100644
--- a/src/components/SettingsPanel.tsx
+++ b/src/components/SettingsPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { EditorState } from '@codemirror/state';
 import { EditorView, keymap, lineNumbers, highlightActiveLine } from '@codemirror/view';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
@@ -909,6 +909,124 @@ function AiTab({
   );
 }
 
+// ─── Model Dropdown Picker (for settings — no routing profiles) ───────────────
+
+function ModelDropdownPicker({
+  settings,
+  models,
+  loadModels,
+  value,
+  providerId,
+  onChange,
+}: {
+  settings: AppSettings;
+  models: Record<string, string[]>;
+  loadModels: (id: string) => void;
+  value: string | undefined;
+  providerId: string | undefined;
+  onChange: (pid: string, model: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      settings.providers.forEach((p) => { if (!models[p.id]) loadModels(p.id); });
+      setSearch('');
+    }
+  }, [open, settings.providers, models, loadModels]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  const providerName = settings.providers.find((p) => p.id === providerId)?.name;
+  const label = providerName && value ? `${providerName} · ${value}` : value || 'Select model…';
+  const lowerSearch = search.toLowerCase();
+
+  const select = useCallback((pid: string, m: string) => {
+    onChange(pid, m);
+    setOpen(false);
+  }, [onChange]);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex items-center gap-1.5 w-full bg-slate-800 border border-slate-600 text-slate-200 text-xs rounded-lg px-2.5 py-2 outline-none hover:border-blue-500 cursor-pointer transition-colors"
+      >
+        <span className="truncate flex-1 text-left">{label}</span>
+        <svg className="w-3 h-3 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="absolute left-0 top-full mt-1 w-full min-w-[260px] bg-slate-800 border border-slate-700 rounded-xl shadow-2xl z-50 flex flex-col overflow-hidden">
+          <div className="p-2 border-b border-slate-700">
+            <input
+              autoFocus
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search models…"
+              className="w-full bg-slate-700 text-slate-200 text-xs rounded-lg px-3 py-1.5 outline-none placeholder-slate-500"
+            />
+          </div>
+          <div className="overflow-y-auto max-h-72">
+            {value && (
+              <button
+                type="button"
+                onClick={() => { onChange('', ''); setOpen(false); }}
+                className="w-full text-left px-3 py-2 text-xs text-slate-400 hover:bg-slate-700 transition-colors"
+              >
+                Clear selection
+              </button>
+            )}
+            {settings.providers.map((provider) => {
+              const all = [
+                ...(provider.customModels ?? []),
+                ...(models[provider.id] ?? []).filter((m) => !provider.customModels?.includes(m)),
+              ];
+              const filtered = all.filter(
+                (m) => !lowerSearch || m.toLowerCase().includes(lowerSearch) || provider.name.toLowerCase().includes(lowerSearch),
+              );
+              if (filtered.length === 0) return null;
+              return (
+                <div key={provider.id}>
+                  <div className="px-3 pt-2 pb-1 text-[10px] font-semibold text-slate-500 uppercase tracking-wide">
+                    {provider.name}
+                  </div>
+                  {filtered.map((m) => {
+                    const isActive = providerId === provider.id && value === m;
+                    return (
+                      <button
+                        key={m}
+                        type="button"
+                        onClick={() => select(provider.id, m)}
+                        className={`w-full text-left px-3 py-2 text-xs flex items-center gap-2 hover:bg-slate-700 transition-colors ${isActive ? 'text-blue-400' : 'text-slate-300'}`}
+                      >
+                        <span className={`w-3 flex-shrink-0 ${isActive ? 'opacity-100' : 'opacity-0'}`}>✓</span>
+                        <span className="truncate">{m}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
 // ─── General Tab ──────────────────────────────────────────────────────────────
 
 function GeneralTab({
@@ -918,6 +1036,8 @@ function GeneralTab({
   settings: AppSettings;
   onSave: (p: Partial<AppSettings>) => Promise<void>;
 }) {
+  const { models, loadModels } = useSettingsStore();
+
   return (
     <div className="space-y-6">
       <SchemaFormRenderer
@@ -925,17 +1045,16 @@ function GeneralTab({
         settings={settings}
         onSave={onSave}
         renderOverrides={{
-          defaultProviderId: (
-            <select
-              value={settings.defaultProviderId ?? ''}
-              onChange={(e) => void onSave({ defaultProviderId: e.target.value || undefined })}
-              className="select-field"
-            >
-              <option value="">None</option>
-              {settings.providers.map((p) => (
-                <option key={p.id} value={p.id}>{p.name}</option>
-              ))}
-            </select>
+          defaultProviderId: false,
+          defaultModel: (
+            <ModelDropdownPicker
+              settings={settings}
+              models={models}
+              loadModels={loadModels}
+              value={settings.defaultModel}
+              providerId={settings.defaultProviderId}
+              onChange={(pid, model) => void onSave({ defaultModel: model || undefined, defaultProviderId: pid || undefined })}
+            />
           ),
         }}
       />
@@ -1483,6 +1602,19 @@ function CopilotAuthSection({
   );
 }
 
+// ─── Simple Icons helpers ─────────────────────────────────────────────────────
+
+const SIMPLE_ICONS_CDN = (slug: string) => `https://cdn.simpleicons.org/${slug}`;
+
+const PROVIDER_ICON_SLUGS: Partial<Record<string, string>> = {
+  openai: 'openai',
+  anthropic: 'anthropic',
+  gemini: 'googlegemini',
+  ollama: 'ollama',
+  bedrock: 'amazonaws',
+  copilot: 'githubcopilot',
+};
+
 function ProviderForm({
   provider,
   onSave,
@@ -1493,6 +1625,22 @@ function ProviderForm({
   onCancel: () => void;
 }) {
   const [draft, setDraft] = useState<ProviderConfig>({ ...provider });
+  const { models, loadModels } = useSettingsStore();
+  const providerModels = provider.id ? (models[provider.id] ?? []) : [];
+
+  useEffect(() => {
+    if (provider.id) loadModels(provider.id);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [provider.id]);
+
+  // Auto-fill logoUrl from Simple Icons when type is selected and no custom URL is set
+  useEffect(() => {
+    const slug = PROVIDER_ICON_SLUGS[draft.type];
+    if (slug && !draft.logoUrl) {
+      setDraft((d) => ({ ...d, logoUrl: SIMPLE_ICONS_CDN(slug) }));
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [draft.type]);
 
   const set = (key: keyof ProviderConfig, value: string) =>
     setDraft((d) => ({ ...d, [key]: value }));
@@ -1526,6 +1674,42 @@ function ProviderForm({
           />
         </Field>
 
+        <Field label="Logo">
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              {draft.logoUrl && (
+                <img src={draft.logoUrl} alt="" className="w-5 h-5 rounded-sm object-contain flex-shrink-0 invert opacity-80" />
+              )}
+              <input
+                type="url"
+                value={draft.logoUrl ?? ''}
+                onChange={(e) => set('logoUrl', e.target.value)}
+                placeholder="https://cdn.simpleicons.org/openai"
+                className="input-field"
+              />
+            </div>
+            {PROVIDER_ICON_SLUGS[draft.type] && (
+              <div className="flex items-center gap-2 flex-wrap">
+                <span className="text-[11px] text-slate-500">Simple Icons:</span>
+                {Object.entries(PROVIDER_ICON_SLUGS)
+                  .filter(([, slug]) => slug)
+                  .slice(0, 8)
+                  .map(([, slug]) => (
+                    <button
+                      key={slug}
+                      type="button"
+                      title={slug}
+                      onClick={() => set('logoUrl', SIMPLE_ICONS_CDN(slug!))}
+                      className={`p-1 rounded border transition-colors ${draft.logoUrl === SIMPLE_ICONS_CDN(slug!) ? 'border-blue-500 bg-blue-500/10' : 'border-slate-700 hover:border-slate-500'}`}
+                    >
+                      <img src={SIMPLE_ICONS_CDN(slug!)} alt={slug} className="w-4 h-4 object-contain invert opacity-70" />
+                    </button>
+                  ))}
+              </div>
+            )}
+          </div>
+        </Field>
+
         <Field label="Type">
           <select
             value={draft.type}
@@ -1638,23 +1822,19 @@ function ProviderForm({
         <p className="text-[11px] font-semibold uppercase tracking-wider text-slate-500">Models</p>
 
         <Field label="Default Model">
-          <input
-            type="text"
+          <select
             value={draft.defaultModel ?? ''}
             onChange={(e) => set('defaultModel', e.target.value)}
-            placeholder={
-              draft.type === 'anthropic'
-                ? 'claude-sonnet-4-5'
-                : draft.type === 'lmstudio'
-                  ? 'local-model'
-                  : draft.type === 'ollama'
-                    ? 'llama3.2'
-                  : draft.type === 'gemini'
-                    ? 'gemini-2.0-flash'
-                    : 'gpt-4o'
-            }
-            className="input-field"
-          />
+            className="select-field"
+          >
+            <option value="">None</option>
+            {[
+              ...(draft.customModels ?? []),
+              ...providerModels.filter((m) => !draft.customModels?.includes(m)),
+            ].map((m) => (
+              <option key={m} value={m}>{m}</option>
+            ))}
+          </select>
         </Field>
 
         <ModelsField
@@ -3249,6 +3429,7 @@ function SchemaFormRenderer({
         <Section key={section.title} title={section.title} description={section.description}>
           {[...section.properties]
             .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+            .filter((property) => renderOverrides[property.key] !== false)
             .map((property) => (
               <PropertyField
                 key={property.key}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 8e203a3..90a35d4 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -31,7 +31,7 @@ function IndentGuides({ depth }: { depth: number }) {
         <span
           key={i}
           className="pointer-events-none absolute inset-y-0 w-px"
-          style={{ left: `${BASE_X + i * INDENT + INDENT / 2}px`, backgroundColor: 'rgba(100,116,139,0.22)' }}
+          style={{ left: `${BASE_X + i * INDENT + INDENT / 2}px`, backgroundColor: 'rgba(100,116,139,0.40)' }}
         />
       ))}
     </>
@@ -126,33 +126,88 @@ function GlobalCtxMenu({ state, onClose }: { state: CtxMenuState; onClose: () =>
 }
 
 // ── Folder Settings Modal (AI Instructions + Agent Folder) ─────────────────
+const SI_CDN = (slug: string) => `https://cdn.simpleicons.org/${encodeURIComponent(slug)}`;
+
 function FolderSettingsModal({ folder, onSave, onClose }: {
   folder: ConversationFolder;
-  onSave: (prompt: string, agentFolderPath: string | undefined) => void;
+  onSave: (prompt: string, agentFolderPath: string | undefined, icon: string | undefined) => void;
   onClose: () => void;
 }) {
   const [value, setValue] = useState(folder.systemPrompt ?? '');
   const [agentPath, setAgentPath] = useState<string | undefined>(folder.agentFolderPath);
+  const [icon, setIcon] = useState<string>(folder.icon ?? '');
+  const [siSlug, setSiSlug] = useState('');
 
   const handlePickFolder = async () => {
     const picked = await service.folder?.pick();
     if (picked) setAgentPath(picked);
   };
 
+  const isUrl = (v: string) => /^https?:\/\/|^\/|^data:/.test(v);
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60" onClick={onClose}>
       <div className="bg-slate-900 border border-slate-700 rounded-md shadow-2xl w-full max-w-lg p-5 mx-4" onClick={(e) => e.stopPropagation()}>
         <h3 className="text-[13px] font-semibold text-slate-200 mb-1">Folder Settings — {folder.name}</h3>
 
+        <p className="text-[11px] font-medium text-slate-400 uppercase tracking-wide mt-3 mb-1">Icon</p>
+        <p className="text-[12px] text-slate-500 mb-2">Emoji, image URL, or pick from Simple Icons.</p>
+        <div className="flex items-center gap-2 mb-2">
+          {icon && isUrl(icon) ? (
+            <img src={icon} alt="" className="w-6 h-6 rounded-sm object-contain flex-shrink-0 invert opacity-80" />
+          ) : icon ? (
+            <span className="w-6 h-6 flex items-center justify-center text-[16px] leading-none flex-shrink-0">{icon}</span>
+          ) : (
+            <div className="w-6 h-6 flex-shrink-0" />
+          )}
+          <input
+            type="text"
+            value={icon}
+            onChange={(e) => setIcon(e.target.value)}
+            placeholder="🚀  or  https://cdn.simpleicons.org/react"
+            className="flex-1 bg-slate-950 border border-slate-700 rounded text-[13px] text-slate-200 px-2.5 py-1.5 outline-none focus:border-blue-500/60"
+          />
+          {icon && (
+            <button onClick={() => setIcon('')} className="text-slate-500 hover:text-slate-300 text-[15px] flex-shrink-0" title="Clear">×</button>
+          )}
+        </div>
+        {/* Simple Icons picker */}
+        <div className="flex items-center gap-2 mb-3">
+          <span className="text-[11px] text-slate-500 flex-shrink-0">Simple Icons:</span>
+          <input
+            type="text"
+            value={siSlug}
+            onChange={(e) => setSiSlug(e.target.value)}
+            placeholder="e.g. react, typescript, docker…"
+            className="flex-1 bg-slate-950 border border-slate-700 rounded text-[12px] text-slate-300 px-2 py-1 outline-none focus:border-blue-500/60"
+          />
+          {siSlug.trim() && (
+            <>
+              <img
+                src={SI_CDN(siSlug.trim())}
+                alt={siSlug}
+                className="w-5 h-5 object-contain invert opacity-70 flex-shrink-0"
+                onError={(e) => { (e.target as HTMLImageElement).style.opacity = '0'; }}
+              />
+              <button
+                type="button"
+                onClick={() => { setIcon(SI_CDN(siSlug.trim())); setSiSlug(''); }}
+                className="px-2 py-0.5 text-[11px] bg-blue-600 hover:bg-blue-500 text-white rounded transition-colors flex-shrink-0"
+              >
+                Use
+              </button>
+            </>
+          )}
+        </div>
+
         <p className="text-[11px] font-medium text-slate-400 uppercase tracking-wide mt-3 mb-1">AI Instructions</p>
         <p className="text-[12px] text-slate-500 mb-2">
           Overrides the system prompt for all conversations in this folder (cascades to subfolders).
         </p>
         <textarea
-          autoFocus
           value={value}
           onChange={(e) => setValue(e.target.value)}
-          rows={6}
+          rows={5}
           className="w-full bg-slate-950 border border-slate-700 rounded text-[13px] text-slate-200 p-3 resize-y outline-none focus:border-blue-500/60 font-mono"
           placeholder="You are a helpful assistant specialized in…"
         />
@@ -177,7 +232,7 @@ function FolderSettingsModal({ folder, onSave, onClose }: {
 
         <div className="flex justify-end gap-2 mt-4">
           <button onClick={onClose} className="px-3 py-1 text-[12px] text-slate-400 hover:text-slate-200 transition-colors">Cancel</button>
-          <button onClick={() => { onSave(value, agentPath); onClose(); }} className="px-3 py-1 text-[12px] bg-blue-600 hover:bg-blue-500 text-white rounded transition-colors">Save</button>
+          <button onClick={() => { onSave(value, agentPath, icon.trim() || undefined); onClose(); }} className="px-3 py-1 text-[12px] bg-blue-600 hover:bg-blue-500 text-white rounded transition-colors">Save</button>
         </div>
       </div>
     </div>
@@ -293,7 +348,15 @@ function FolderRow({ folder, depth, isRenaming, onRenameEnd, onToggle, onContext
     >
       <IndentGuides depth={depth} />
       <Chevron open={!folder.collapsed} />
-      <FolderIcon open={!folder.collapsed} />
+      {folder.icon ? (
+        /^https?:\/\/|^\/|^data:/.test(folder.icon) ? (
+          <img src={folder.icon} alt="" className="w-4 h-4 flex-shrink-0 rounded-sm object-contain" />
+        ) : (
+          <span className="w-4 h-4 flex-shrink-0 flex items-center justify-center text-[13px] leading-none select-none">{folder.icon}</span>
+        )
+      ) : (
+        <FolderIcon open={!folder.collapsed} />
+      )}
       {isRenaming ? (
         <input
           autoFocus
@@ -333,6 +396,7 @@ interface ConversationItemProps {
   isBranch?: boolean;
   personaColor?: string;
   personaName?: string;
+  providerLogoUrl?: string;
   onClick: () => void;
   onContextMenu: (e: React.MouseEvent) => void;
   onOpenInSplit: (e: React.MouseEvent) => void;
@@ -342,7 +406,7 @@ interface ConversationItemProps {
 
 function ConversationItem({
   title, depth, active, updatedAt, isRenaming, onRenameEnd, isDragging, isBranch,
-  personaColor, personaName, onClick, onContextMenu, onOpenInSplit, onDragStart, onDragEnd,
+  personaColor, personaName, providerLogoUrl, onClick, onContextMenu, onOpenInSplit, onDragStart, onDragEnd,
 }: ConversationItemProps) {
   const [renameValue, setRenameValue] = useState(title);
   useEffect(() => { setRenameValue(title); }, [title]);
@@ -373,6 +437,8 @@ function ConversationItem({
         <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke={active ? '#6ee7b7' : '#34d399'} viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M6 3v12m0 0a3 3 0 106 0m-6 0a3 3 0 006 0m0 0V9m0 0a3 3 0 106 0 3 3 0 00-6 0" />
         </svg>
+      ) : providerLogoUrl ? (
+        <img src={providerLogoUrl} alt="" className="w-3.5 h-3.5 flex-shrink-0 rounded-sm object-contain" />
       ) : (
         <ChatIcon color={active ? '#93c5fd' : (personaColor ?? '#75beff')} />
       )}
@@ -461,9 +527,13 @@ export default function Sidebar() {
 
   const startConversation = (personaId?: string, folderId?: string | null) => {
     const persona = personaId ? personas.find((p) => p.id === personaId) : undefined;
+    const effectiveProviderId = persona?.defaultProviderId ?? settings?.defaultProviderId;
+    const defaultProvider = effectiveProviderId
+      ? settings?.providers.find((p) => p.id === effectiveProviderId)
+      : undefined;
     const conv = addConversation({
-      providerId: persona?.defaultProviderId ?? settings?.defaultProviderId,
-      model: persona?.defaultModel ?? settings?.defaultModel,
+      providerId: effectiveProviderId,
+      model: persona?.defaultModel ?? settings?.defaultModel ?? defaultProvider?.defaultModel,
       personaId,
       ...(folderId != null ? { folderId } : {}),
     });
@@ -610,7 +680,7 @@ export default function Sidebar() {
         { label: 'New Chat in Folder', action: () => startConversation(undefined, folder.id) },
         { label: 'New Subfolder', action: () => { const sub = createFolder('New Folder', folder.id); updateFolder(folder.id, { collapsed: false }); setRenamingFolderId(sub.id); } },
         'sep',
-        { label: 'Edit AI Instructions', action: () => setInstructionsFolder(folder) },
+        { label: 'Folder Settings', action: () => setInstructionsFolder(folder) },
         { label: 'Rename', action: () => { setRenamingFolderId(folder.id); } },
         'sep',
         { label: folder.collapsed ? 'Expand' : 'Collapse', action: () => toggleFolderCollapsed(folder.id) },
@@ -649,6 +719,7 @@ export default function Sidebar() {
             isBranch
             personaColor={branch.personaId ? personas.find((p) => p.id === branch.personaId)?.color : undefined}
             personaName={branch.personaId ? personas.find((p) => p.id === branch.personaId)?.name : undefined}
+            providerLogoUrl={branch.providerId ? settings?.providers.find((p) => p.id === branch.providerId)?.logoUrl : undefined}
             onClick={() => { openTab?.(branch.id); setActiveConversation(branch.id); }}
             onContextMenu={(e) => openConvCtxMenu(e, { id: branch.id, folderId: branch.folderId, branchOf: branch.branchOf, createdAt: branch.createdAt })}
             onOpenInSplit={(e) => { e.stopPropagation(); openSplitPane({ type: 'conversation', payload: branch.id }); }}
@@ -698,6 +769,7 @@ export default function Sidebar() {
             isDragging={draggingConvId === conv.id}
             personaColor={conv.personaId ? personas.find((p) => p.id === conv.personaId)?.color : undefined}
             personaName={conv.personaId ? personas.find((p) => p.id === conv.personaId)?.name : undefined}
+            providerLogoUrl={conv.providerId ? settings?.providers.find((p) => p.id === conv.providerId)?.logoUrl : undefined}
             onClick={() => { openTab?.(conv.id); setActiveConversation(conv.id); }}
             onContextMenu={(e) => openConvCtxMenu(e, { id: conv.id, folderId: conv.folderId, branchOf: conv.branchOf, createdAt: conv.createdAt })}
             onOpenInSplit={(e) => { e.stopPropagation(); openSplitPane({ type: 'conversation', payload: conv.id }); }}
@@ -786,6 +858,7 @@ export default function Sidebar() {
                 isDragging={draggingConvId === conv.id}
                 personaColor={conv.personaId ? personas.find((p) => p.id === conv.personaId)?.color : undefined}
                 personaName={conv.personaId ? personas.find((p) => p.id === conv.personaId)?.name : undefined}
+                providerLogoUrl={conv.providerId ? settings?.providers.find((p) => p.id === conv.providerId)?.logoUrl : undefined}
                 onClick={() => { openTab?.(conv.id); setActiveConversation(conv.id); }}
                 onContextMenu={(e) => openConvCtxMenu(e, { id: conv.id, folderId: conv.folderId, branchOf: conv.branchOf, createdAt: conv.createdAt })}
                 onOpenInSplit={(e) => { e.stopPropagation(); openSplitPane({ type: 'conversation', payload: conv.id }); }}
@@ -809,7 +882,7 @@ export default function Sidebar() {
       {instructionsFolder && (
         <FolderSettingsModal
           folder={instructionsFolder}
-          onSave={(prompt, agentFolderPath) => updateFolder(instructionsFolder.id, { systemPrompt: prompt, agentFolderPath })}
+          onSave={(prompt, agentFolderPath, icon) => updateFolder(instructionsFolder.id, { systemPrompt: prompt, agentFolderPath, icon })}
           onClose={() => setInstructionsFolder(null)}
         />
       )}
diff --git a/src/components/WelcomeScreen.tsx b/src/components/WelcomeScreen.tsx
index 3e0c9cb..9eea1cc 100644
--- a/src/components/WelcomeScreen.tsx
+++ b/src/components/WelcomeScreen.tsx
@@ -14,9 +14,12 @@ export default function WelcomeScreen() {
 
   const handleNew = () => {
     if (!settings) return;
+    const defaultProvider = settings.defaultProviderId
+      ? settings.providers.find((p) => p.id === settings.defaultProviderId)
+      : undefined;
     const conv = addConversation({
       providerId: settings.defaultProviderId,
-      model: settings.defaultModel,
+      model: settings.defaultModel ?? defaultProvider?.defaultModel,
     });
     openTab?.(conv.id);
     setActiveConversation(conv.id);
diff --git a/src/types.ts b/src/types.ts
index 15571c8..91bfeee 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -11,6 +11,7 @@ export interface ProviderConfig {
   baseUrl?: string;
   apiVersion?: string; // e.g. '2025-04-15' for Azure AI Foundry
   defaultModel?: string;
+  logoUrl?: string; // URL to a provider logo displayed in the sidebar
   customModels?: string[]; // user-defined model IDs, merged with fetched list
   modelContextWindows?: Record<string, number>; // model name → max context tokens (overrides built-in lookup)
 }
@@ -160,6 +161,8 @@ export interface ConversationFolder {
   parentId: string | null; // null = root
   order: number;
   collapsed: boolean;
+  /** Custom emoji or short text icon shown in the sidebar instead of the default folder SVG. */
+  icon?: string;
   /** AI instructions applied to all conversations in this folder (overrides conversation-level prompt). Cascades: nearest ancestor with a prompt wins. */
   systemPrompt?: string;
   /** Absolute path of a folder to use as the agent project root for all conversations in this folder (cascades up ancestors). */