chat client fixes

2026-04-18 21:21:05 -07:00
parent 44989a2b8b
commit ad5ecb5ff3
10 changed files with 378 additions and 290 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
--- a/packages/chat-client/src/App.jsx
+++ b/packages/chat-client/src/App.jsx
@@ -1,8 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import ChatWindow from './components/ChatWindow';
 import InfoPanel from './components/InfoPanel';
 import Sidebar from './components/Sidebar';
-import {v4 as uuidv4} from 'uuid';
+import HomeView from './components/HomeView';
+import { v4 as uuidv4 } from 'uuid';
+import { getModelProps } from './api/orchestration';

 /*** View Panels*** */
 import AllChatsView from './components/AllChatsView';
@@ -17,13 +19,30 @@ import { useChat } from './hooks/useChat';
 import { useModels } from './hooks/useModels';
 import { useProjects } from './hooks/useProjects';

+// Views where back nav makes sense, and where they go back to
+const BACK_MAP = {
+  'chat':         'home',
+  'all-chats':    'home',
+  'all-projects': 'home',
+  'settings':     'home',
+  'project':      'all-projects',
+  'memory':       'settings',
+};
+
 export default function App() {
-  const [leftOpen, setLeftOpen] = useState(true);
+  const [leftOpen, setLeftOpen] = useState(false); // collapsed on home
  const [rightOpen, setRightOpen] = useState(false);
  const { models, selectedModel, setSelectedModel } = useModels();
-  const [view, setView] = useState('chat')
+  const [view, setView] = useState('home');
+  const [viewHistory, setViewHistory] = useState([]);
  const [activeProject, setActiveProject] = useState(null);
-  const {projects, refreshProjects} = useProjects();
+  const { projects, refreshProjects } = useProjects();
+
+  // Lifted model props — available to header + SettingsView
+  const [modelProps, setModelProps] = useState(null);
+  useEffect(() => {
+    getModelProps().then(setModelProps).catch(() => {});
+  }, []);

  const {
    sessions,
@@ -46,17 +65,49 @@ export default function App() {
    lastModel,
  } = useChat({ activeSession, appendMessage, updateLastMessage, refreshSessions });

+  function navigate(nextView) {
+    setViewHistory(prev => [...prev, view]);
+    setView(nextView);
+    // Expand sidebar when leaving home
+    if (view === 'home') setLeftOpen(true);
+  }
+
+  function goBack() {
+    if (viewHistory.length > 0) {
+      const prev = viewHistory[viewHistory.length - 1];
+      setViewHistory(h => h.slice(0, -1));
+      setView(prev);
+      if (prev === 'home') setLeftOpen(false);
+    } else {
+      // Fallback to BACK_MAP
+      const dest = BACK_MAP[view] ?? 'home';
+      setView(dest);
+      if (dest === 'home') setLeftOpen(false);
+    }
+  }
+
  function handleSendMessage(text) {
    sendMessage(text, selectedModel, activeSession?.project_id ?? null);
  }

-  function handleSessionsChange(deletedSession){
-    if(deletedSession?.external_id === activeSession?.external_id){
+  function handleSessionsChange(deletedSession) {
+    if (deletedSession?.external_id === activeSession?.external_id) {
      selectSession(null);
    }
    refreshSessions();
  }

+  // Home: create session, navigate to chat, then send after a tick
+  function handleHomeSend(text) {
+    createSession();
+    setViewHistory(prev => [...prev, 'home']);
+    setView('chat');
+    setLeftOpen(true);
+    setTimeout(() => {
+      sendMessage(text, selectedModel, null);
+    }, 50);
+  }
+
  async function handleNewProjectChat() {
    const newSession = {
      external_id: uuidv4(),
@@ -64,70 +115,90 @@ export default function App() {
      isNew: true,
      project_id: activeProject?.id ?? null,
    };
-    // Optimistically set active session then navigate
    setSessions(prev => [newSession, ...prev]);
    selectSession(newSession);
-    setView('chat');
-    // After first message saves, project assignment will be written via updateSession
+    navigate('chat');
  }

+  const canGoBack = view !== 'home';
+
  return (
-    <div style={{
-      display: 'flex',
-      height: '100vh',
-      overflow: 'hidden',
-    }}>
+    <div style={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
      <Sidebar
        sessions={sessions}
        activeSession={activeSession}
-        onSelectSession={selectSession}
-        onNewChat={createSession}
-        onNewProject={()=> setView('all-projects')}
+        onSelectSession={session => { selectSession(session); navigate('chat'); }}
+        onNewChat={() => { createSession(); navigate('chat'); }}
+        onNewProject={() => navigate('all-projects')}
        isOpen={leftOpen}
        onToggle={() => setLeftOpen(o => !o)}
        onSessionsChange={handleSessionsChange}
-        onNavigate={setView}
+        onNavigate={navigate}
        projects={projects}
        onProjectsChange={refreshProjects}
        onSelectProject={setActiveProject}
      />

+      {view === 'home' && (
+        <HomeView
+          onSendMessage={handleHomeSend}
+          loadedModel={modelProps?.modelAlias ?? null}
+        />
+      )}

      {view === 'chat' && (
-      <ChatWindow
-              messages={messages}
-              loadingHistory={loadingHistory}
-              streaming={streaming}
-              activeSession={activeSession}
-              onSendMessage={handleSendMessage}
-              onCancel={cancelStream}
-              onTogglePanel={() => setRightOpen(o => !o)}
-            />
+        <ChatWindow
+          messages={messages}
+          loadingHistory={loadingHistory}
+          streaming={streaming}
+          activeSession={activeSession}
+          onSendMessage={handleSendMessage}
+          onCancel={cancelStream}
+          onTogglePanel={() => setRightOpen(o => !o)}
+          onBack={goBack}
+          canGoBack={canGoBack}
+          loadedModel={modelProps?.modelAlias ?? null}
+        />
      )}

      {view === 'all-chats' && (
        <AllChatsView
-          onSelectSession={session => {selectSession(session); setView('chat');}}
-          />
+          onBack={goBack}
+          onSelectSession={session => { selectSession(session); navigate('chat'); }}
+        />
      )}

      {view === 'all-projects' && (
-        <AllProjectsView onProjectsChange={refreshProjects}/>
+        <AllProjectsView
+          onBack={goBack}
+          onProjectsChange={refreshProjects}
+        />
      )}

-      {view === 'settings' && <SettingsView onNavigate={setView} />}
+      {view === 'settings' && (
+        <SettingsView
+          onNavigate={navigate}
+          onBack={goBack}
+          modelProps={modelProps}
+        />
+      )}

      {view === 'project' && activeProject && (
        <ProjectView
          project={activeProject}
-          onNavigate={setView}
+          onNavigate={navigate}
+          onBack={goBack}
          onSelectSession={selectSession}
          onNewProjectChat={handleNewProjectChat}
        />
      )}

-      {view === 'memory' && <MemoryView onNavigate={setView} />}
-      
+      {view === 'memory' && (
+        <MemoryView
+          onNavigate={navigate}
+          onBack={goBack}
+        />
+      )}

      <InfoPanel
        isOpen={rightOpen}
@@ -138,7 +209,6 @@ export default function App() {
        onModelChange={setSelectedModel}
        lastModel={lastModel}
        lastTokenCount={lastTokenCount}
-
      />
    </div>
  );
--- a/packages/chat-client/src/components/AllChatsView.jsx
+++ b/packages/chat-client/src/components/AllChatsView.jsx
@@ -4,7 +4,7 @@ import { API_DEFAULTS } from '../config/constants';

 const PAGE_SIZE = API_DEFAULTS.PAGE_SIZE;

-export default function AllChatsView({ onSelectSession }) {
+export default function AllChatsView({ onSelectSession, onBack }) {
  const [sessions, setSessions] = useState([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(0);
@@ -86,10 +86,11 @@ export default function AllChatsView({ onSelectSession }) {
    <div className="flex-col flex-1 overflow-hidden" style={{ background: 'var(--bg-base)' }}>

      {/* Header */}
-      <div className="panel-header" style={{ padding: '0 24px', justifyContent: 'space-between' }}>
-        <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>
-          All Chats
-        </span>
+      <div className="panel-header" style={{ padding: '0 8px 0 8px', justifyContent: 'space-between' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+          <button className="btn-icon" onClick={onBack} title="Back" style={{ fontSize: '16px', padding: '4px 8px' }}>←</button>
+          <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>All Chats</span>
+        </div>
        {selected.size > 0 && (
          <button
            onClick={() => setConfirmOpen(true)}
--- a/packages/chat-client/src/components/AllProjectsView.jsx
+++ b/packages/chat-client/src/components/AllProjectsView.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import ProjectModal from './ProjectModal';
 import { fetchProjects, createProject, updateProject, deleteProject } from '../api/orchestration';

-export default function AllProjectsView({ onProjectsChange }) {
+export default function AllProjectsView({ onProjectsChange, onBack }) {
  const [projects, setProjects] = useState([]);
  const [loading, setLoading] = useState(true);
  const [modal, setModal] = useState(null); // { mode, project? }
@@ -48,10 +48,11 @@ async function handleDelete(id) {
    <div className="flex-col flex-1 overflow-hidden" style={{ background: 'var(--bg-base)' }}>

      {/* Header */}
-      <div className="panel-header" style={{ padding: '0 24px', justifyContent: 'space-between' }}>
-        <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>
-          All Projects
-        </span>
+      <div className="panel-header" style={{ padding: '0 8px 0 8px', justifyContent: 'space-between' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+          <button className="btn-icon" onClick={onBack} title="Back" style={{ fontSize: '16px', padding: '4px 8px' }}>←</button>
+          <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>All Projects</span>
+        </div>
        <button
          className="btn-primary"
          onClick={() => setModal({ mode: 'create' })}
--- a/packages/chat-client/src/components/ChatWindow.jsx
+++ b/packages/chat-client/src/components/ChatWindow.jsx
@@ -1,7 +1,18 @@
 import React, { useEffect, useRef } from 'react';
 import MessageBubble from './MessageBubble';

-export default function ChatWindow({ messages, loadingHistory, streaming, onSendMessage, onCancel, activeSession, onTogglePanel }) {
+export default function ChatWindow({
+  messages,
+  loadingHistory,
+  streaming,
+  onSendMessage,
+  onCancel,
+  activeSession,
+  onTogglePanel,
+  onBack,
+  canGoBack,
+  loadedModel,
+}) {
  const bottomRef = useRef(null);
  const inputRef = useRef(null);
  const [input, setInput] = React.useState('');
@@ -24,15 +35,59 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
    }
  }

+  // Trim .gguf for display
+  const modelLabel = loadedModel ? loadedModel.replace('.gguf', '') : null;
+
  return (
    <div className="flex-col flex-1 overflow-hidden" style={{ background: 'var(--bg-base)' }}>

      {/* Header */}
-      <div className="panel-header" style={{ padding: '0 12px 0 20px', justifyContent: 'space-between' }}>
-        <span className="text-base text-secondary">
-          {activeSession ? (activeSession.name || activeSession.external_id) : 'No session selected'}
-        </span>
-        <button className="btn-icon" onClick={onTogglePanel} title="Session info">⊹</button>
+      <div className="panel-header" style={{ padding: '0 12px 0 8px', justifyContent: 'space-between' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '4px', minWidth: 0 }}>
+          {/* Back button */}
+          {canGoBack && (
+            <button
+              className="btn-icon"
+              onClick={onBack}
+              title="Go back"
+              style={{ flexShrink: 0, fontSize: '16px', padding: '4px 8px' }}
+            >←</button>
+          )}
+          {/* Session name */}
+          <span className="text-base text-secondary truncate">
+            {activeSession ? (activeSession.name || activeSession.external_id) : 'New chat'}
+          </span>
+        </div>
+
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }}>
+          {/* Loaded model pill */}
+          {modelLabel && (
+            <span style={{
+              fontSize: '11px',
+              color: 'var(--text-muted)',
+              background: 'var(--bg-elevated)',
+              border: '1px solid var(--border)',
+              borderRadius: '999px',
+              padding: '2px 10px',
+              maxWidth: '200px',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}>
+              {modelLabel}
+            </span>
+          )}
+          {!modelLabel && (
+            <span style={{
+              fontSize: '11px',
+              color: 'var(--text-muted)',
+              fontStyle: 'italic',
+            }}>
+              No model loaded
+            </span>
+          )}
+          <button className="btn-icon" onClick={onTogglePanel} title="Session info">⊹</button>
+        </div>
      </div>

      {/* Message thread */}
@@ -44,7 +99,7 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
            gap: '12px',
          }}>
            <div style={{ fontSize: '32px', opacity: 0.4 }}>✦</div>
-            <p className="text-base">Select a session or start a new chat</p>
+            <p className="text-base">Start typing to begin</p>
          </div>
        )}

@@ -80,8 +135,7 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={handleKeyDown}
-            disabled={!activeSession}
-            placeholder={activeSession ? 'Message NexusAI...' : 'Select a session to start chatting'}
+            placeholder="Message NexusAI..."
            rows={1}
            style={{
              flex: 1,
@@ -115,7 +169,7 @@ export default function ChatWindow({ messages, loadingHistory, streaming, onSend
          ) : (
            <button
              onClick={handleSend}
-              disabled={!activeSession || !input.trim()}
+              disabled={!input.trim()}
              className="btn-primary"
              style={{
                width: '32px',
--- a/packages/chat-client/src/components/HomeView.jsx
+++ b/packages/chat-client/src/components/HomeView.jsx
@@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+
+function getGreeting() {
+  const h = new Date().getHours();
+  if (h < 12) return 'Morning';
+  if (h < 18) return 'Afternoon';
+  return 'Evening';
+}
+
+const QUICK_ACTIONS = [
+  { label: 'Summarise something', icon: '◈' },
+  { label: 'Help me write', icon: '✦' },
+  { label: 'Explain a concept', icon: '◎' },
+  { label: 'Debug my code', icon: '</>' },
+];
+
+export default function HomeView({ onSendMessage, loadedModel }) {
+  const [input, setInput] = useState('');
+
+  function handleSend() {
+    const text = input.trim();
+    if (!text) return;
+    setInput('');
+    onSendMessage(text);
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }
+
+  const modelLabel = loadedModel ? loadedModel.replace('.gguf', '') : null;
+
+  return (
+    <div className="flex-col flex-1 overflow-hidden" style={{
+      background: 'var(--bg-base)',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '32px',
+    }}>
+
+      {/* Greeting */}
+      <div style={{ textAlign: 'center' }}>
+        <h1 style={{
+          fontSize: '32px',
+          fontWeight: 600,
+          color: 'var(--text-primary)',
+          letterSpacing: '-0.5px',
+          marginBottom: '8px',
+        }}>
+          {getGreeting()}, Tim
+        </h1>
+        <p className="text-sm text-muted">
+          {modelLabel ? `Running ${modelLabel}` : 'No model loaded'}
+        </p>
+      </div>
+
+      {/* Input */}
+      <div style={{ width: '100%', maxWidth: '580px', padding: '0 24px' }}>
+        <div style={{
+          background: 'var(--bg-elevated)',
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--radius-lg)',
+          padding: '12px 14px',
+        }}>
+          <textarea
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="How can I help you today?"
+            rows={1}
+            autoFocus
+            style={{
+              width: '100%',
+              background: 'transparent',
+              border: 'none',
+              outline: 'none',
+              color: 'var(--text-primary)',
+              fontSize: '14px',
+              lineHeight: '1.6',
+              resize: 'none',
+              fontFamily: 'inherit',
+              maxHeight: '120px',
+              overflowY: 'auto',
+            }}
+            onInput={e => {
+              e.target.style.height = 'auto';
+              e.target.style.height = `${e.target.scrollHeight}px`;
+            }}
+          />
+          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '8px' }}>
+            <button
+              onClick={handleSend}
+              disabled={!input.trim()}
+              className="btn-primary"
+              style={{
+                width: '32px', height: '32px',
+                fontSize: '16px',
+                border: '1px solid var(--border)',
+              }}
+            >↑</button>
+          </div>
+        </div>
+        <p className="text-xs text-muted" style={{ textAlign: 'center', marginTop: '8px' }}>
+          Enter to send · Shift+Enter for new line
+        </p>
+      </div>
+
+      {/* Quick action pills — populate input, don't auto-send */}
+      <div style={{
+        display: 'flex', gap: '8px',
+        flexWrap: 'wrap', justifyContent: 'center',
+        padding: '0 24px',
+      }}>
+        {QUICK_ACTIONS.map(({ label, icon }) => (
+          <button
+            key={label}
+            onClick={() => setInput(label)}
+            style={{
+              display: 'flex', alignItems: 'center', gap: '6px',
+              padding: '7px 14px',
+              background: 'var(--bg-surface)',
+              border: '1px solid var(--border)',
+              borderRadius: '999px',
+              color: 'var(--text-secondary)',
+              fontSize: '13px',
+              cursor: 'pointer',
+              transition: 'border-color 0.15s, color 0.15s',
+            }}
+            onMouseEnter={e => {
+              e.currentTarget.style.borderColor = 'var(--accent)';
+              e.currentTarget.style.color = 'var(--text-primary)';
+            }}
+            onMouseLeave={e => {
+              e.currentTarget.style.borderColor = 'var(--border)';
+              e.currentTarget.style.color = 'var(--text-secondary)';
+            }}
+          >
+            <span style={{ fontSize: '11px', opacity: 0.7 }}>{icon}</span>
+            {label}
+          </button>
+        ))}
+      </div>
+
+    </div>
+  );
+}
--- a/packages/chat-client/src/components/MemoryView.jsx
+++ b/packages/chat-client/src/components/MemoryView.jsx
@@ -52,7 +52,7 @@ export default function MemoryView({ onNavigate }) {

      {/* Header */}
      <div className="panel-header" style={{ padding: '0 24px', gap: 12 }}>
-        <button className="btn-icon" onClick={() => onNavigate('settings')} title="Back to Settings">
+        <button className="btn-icon" onClick={onBack} title="Back">
          ←
        </button>
        <span className="text-base" style={{ fontWeight: 500 }}>Memory Viewer</span>
--- a/packages/chat-client/src/components/ProjectView.jsx
+++ b/packages/chat-client/src/components/ProjectView.jsx
@@ -47,7 +47,7 @@ export default function ProjectView({ project, onNavigate, onSelectSession, onNe
      <div className="panel-header" style={{ padding: '0 24px', justifyContent: 'space-between' }}>
        <button
          className="btn-reset text-xs text-muted"
-          onClick={() => onNavigate('all-projects')}
+          onClick={onBack} title="Back"
          style={{ display: 'flex', alignItems: 'center', gap: '4px' }}
          onMouseEnter={e => e.currentTarget.style.color = 'var(--text-secondary)'}
          onMouseLeave={e => e.currentTarget.style.color = 'var(--text-muted)'}
--- a/packages/chat-client/src/components/SessionList.jsx
+++ b/packages/chat-client/src/components/SessionList.jsx
@@ -1,215 +0,0 @@
-import React, { useState } from 'react';
-import SessionModal from './SessionModal';
-import { useContextMenu } from '../hooks/useContextMenu';
-import { renameSession, deleteSession } from '../api/orchestration';
-
-export default function SessionList({ sessions, activeSession, onSelectSession, onNewChat, isOpen, onToggle, onSessionsChange }) {
-  const [modalSession, setModalSession] = useState(null);
-  const [hoveredId, setHoveredId] = useState(null);
-  const { menu, open: openMenu, close: closeMenu } = useContextMenu();
-  const [modalMode, setModalMode] = useState('settings');
-
-  function formatDate(ts) {
-    if (!ts) return '';
-    const date = new Date(ts * 1000);
-    const now = new Date();
-    const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
-    if (diffDays === 0) return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    if (diffDays === 1) return 'Yesterday';
-    if (diffDays < 7) return date.toLocaleDateString([], { weekday: 'long' });
-    return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
-  }
-
-  function getPreview(session) {
-    if (session.isNew) return 'New conversation';
-    return session.name || session.external_id;
-  }
-
-  async function handleRename(session, name) {
-    try {
-      await renameSession(session.external_id, name);
-      onSessionsChange();
-    } catch (err) {
-      console.error('[SessionList] Rename failed:', err.message);
-    }
-  }
-
-  async function handleDelete(session) {
-    try {
-      await deleteSession(session.external_id);
-      onSessionsChange();
-    } catch (err) {
-      console.error('[SessionList] Delete failed:', err.message);
-    }
-  }
-
-  return (
-    <>
-      <div style={{
-        width: isOpen ? 'var(--sidebar-width)' : '56px',
-        flexShrink: 0,
-        background: 'var(--bg-surface)',
-        borderRight: '1px solid var(--border)',
-        transition: 'width 0.2s ease',
-        overflow: 'hidden',
-      }} className="flex-col">
-
-        {/* Header */}
-        <div className="panel-header" style={{
-          justifyContent: isOpen ? 'space-between' : 'center',
-          padding: isOpen ? '0 12px 0 16px' : '0',
-        }}>
-          {isOpen && <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Conversations</span>}
-          <button className="btn-icon" onClick={onToggle}>{isOpen ? '◀' : '▶'}</button>
-        </div>
-
-        {/* New chat button */}
-        <div style={{ padding: isOpen ? '12px' : '12px 8px', flexShrink: 0 }}>
-          <button className="btn-primary" onClick={onNewChat} style={{
-            width: '100%',
-            padding: isOpen ? '8px 12px' : '8px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: isOpen ? 'flex-start' : 'center',
-            gap: '8px',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-          }}>
-            <span style={{ fontSize: '18px', lineHeight: 1, flexShrink: 0 }}>+</span>
-            {isOpen && <span>New Chat</span>}
-          </button>
-        </div>
-
-        {/* Session list */}
-        <div className="flex-1 scroll-y">
-          {isOpen && sessions.map(session => {
-            const isActive = activeSession?.external_id === session.external_id;
-            const isHovered = hoveredId === session.external_id;
-
-            return (
-              <div
-                key={session.external_id}
-                onMouseEnter={() => setHoveredId(session.external_id)}
-                onMouseLeave={() => setHoveredId(null)}
-                onContextMenu={e => !session.isNew && openMenu(e, session)}
-                style={{
-                  position: 'relative',
-                  display: 'flex',
-                  alignItems: 'stretch',
-                  background: isActive ? 'var(--bg-elevated)' : isHovered ? 'var(--bg-elevated)' : 'transparent',
-                  borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
-                  transition: 'background 0.1s',
-                }}
-              >
-                {/* Session select button — no action icons inside */}
-                <button
-                  onClick={() => onSelectSession(session)}
-                  className="btn-reset"
-                  style={{
-                    flex: 1,
-                    padding: '10px 16px',
-                    paddingRight: isHovered && !session.isNew ? '4px' : '16px',
-                    textAlign: 'left',
-                    flexDirection: 'column',
-                    gap: '3px',
-                    minWidth: 0, // allows truncation to work
-                  }}
-                >
-                  <div className="flex" style={{ gap: '8px', width: '100%' }}>
-                    <span className="text-base truncate" style={{
-                      color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
-                      fontWeight: isActive ? 500 : 400,
-                      flex: 1,
-                    }}>
-                      {getPreview(session)}
-                    </span>
-                    {!isHovered && (
-                      <span className="text-xs text-muted flex-shrink">
-                        {formatDate(session.updated_at)}
-                      </span>
-                    )}
-                  </div>
-                  {session.isNew && (
-                    <span className="text-xs text-accent" style={{ fontStyle: 'italic' }}>Unsaved</span>
-                  )}
-                </button>
-
-                {/* Action icons — outside the button, alongside it */}
-                {isHovered && !session.isNew && (
-                  <div className="flex items-center flex-shrink" style={{ gap: '2px', paddingRight: '8px' }}>
-                    <button
-                      className="btn-icon"
-                      title="Rename"
-                      onClick={() => { setModalMode('settings'); setModalSession(session); }}
-                      style={{ padding: '2px 4px', fontSize: '12px' }}
-                    >✎</button>
-                    <button
-                      className="btn-icon"
-                      title="Delete"
-                      onClick={() => { setModalMode('confirm-delete'); setModalSession(session); }}
-                      style={{ padding: '2px 4px', fontSize: '12px', color: '#ff6b6b' }}
-                    >✕</button>
-                  </div>
-                )}
-              </div>
-            );
-          })}
-
-          {isOpen && sessions.length === 0 && (
-            <div className="text-base text-muted" style={{ padding: '24px 16px', textAlign: 'center' }}>
-              No conversations yet
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Context menu */}
-      {menu && (
-        <div
-          onClick={e => e.stopPropagation()}
-          style={{
-            position: 'fixed',
-            top: menu.y,
-            left: menu.x,
-            background: 'var(--bg-elevated)',
-            border: '1px solid var(--border)',
-            borderRadius: 'var(--radius-md)',
-            padding: '4px',
-            zIndex: 50,
-            minWidth: '140px',
-          }}
-        >
-          <button 
-            className="btn-reset text-base" 
-            onClick={() => { setModalMode('settings'); setModalSession(menu.session); closeMenu(); }}
-            style={{ width: '100%', padding: '8px 12px', borderRadius: 'var(--radius-sm)', justifyContent: 'flex-start', color: 'var(--text-primary)' }}
-            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-surface)'}
-            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
-          >
-            ✎ Rename
-          </button>
-          <button className="btn-reset text-base"
-            onClick={() => { setModalMode('confirm-delete'); setModalSession(menu.session); closeMenu(); }}
-            style={{
-              width: '100%', padding: '8px 12px', borderRadius: 'var(--radius-sm)',
-              justifyContent: 'flex-start', color: '#ff6b6b'
-            }}
-            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-surface)'}
-            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
-          >✕ Delete</button>
-        </div>
-      )}
-
-      {/* Rename modal */}
-      {modalSession && (
-        <SessionModal
-          session={modalSession}
-          mode={modalMode}
-          onRename={handleRename}
-          onDelete={handleDelete}
-          onClose={() => setModalSession(null)}
-        />
-      )}
-    </>
-  );
-}
--- a/packages/chat-client/src/components/SettingsView.jsx
+++ b/packages/chat-client/src/components/SettingsView.jsx
@@ -1,16 +1,18 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useSettings } from '../hooks/useSettings';
-import { getServiceHealth } from '../api/orchestration';
 import { useModels } from '../hooks/useModels';
-import { getModelProps } from '../api/orchestration';
+import { getServiceHealth } from '../api/orchestration'; // ← merged

-export default function SettingsView({ onNavigate }) {
-  const { settings, saveSetting, saving } = useSettings();
+export default function SettingsView({ onNavigate, onBack, modelProps }) {
+  const { settings, saveSetting, saving } = useSettings(); // ← single source

  return (
    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden', background: 'var(--bg-base)' }}>
-      <div className="panel-header" style={{ padding: '0 24px' }}>
-        <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Settings</span>
+      <div className="panel-header" style={{ padding: '0 8px 0 8px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+          <button className="btn-icon" onClick={onBack} title="Back" style={{ fontSize: '16px', padding: '4px 8px' }}>←</button>
+          <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Settings</span>
+        </div>
      </div>

      <div className="flex-1 scroll-y" style={{ padding: '24px' }}>
@@ -49,7 +51,10 @@ export default function SettingsView({ onNavigate }) {
        </SettingsSection>

        <SettingsSection title="Models">
-          <ModelsSection />
+          {/* ← Error boundary wraps ModelsSection only */}
+          <SettingsSectionErrorBoundary>
+            <ModelsSection settings={settings} saveSetting={saveSetting} saving={saving} modelProps={modelProps}/>
+          </SettingsSectionErrorBoundary>
        </SettingsSection>

        <SettingsSection title="About">
@@ -74,6 +79,34 @@ export default function SettingsView({ onNavigate }) {
  );
 }

+// Error boundary — class component required by React for this pattern
+class SettingsSectionErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  render() {
+    if (this.state.error) {
+      return (
+        <SettingsRow
+          label="Models unavailable"
+          description={this.state.error.message ?? 'Failed to load model settings'}
+          action={
+            <button className="btn-primary" style={{ padding: '5px 10px', fontSize: '12px' }}
+              onClick={() => this.setState({ error: null })}>
+              Retry
+            </button>
+          }
+        />
+      );
+    }
+    return this.props.children;
+  }
+}
+
 function SettingsSection({ title, children }) {
  return (
    <div style={{ marginBottom: '32px' }}>
@@ -239,15 +272,9 @@ function ServiceHealth() {
  );
 }

-function ModelsSection({ onNavigate }) {
+function ModelsSection({ settings, saveSetting, saving, modelProps }) {
  const { models, selectedModel, setSelectedModel } = useModels();
  const [selectedInfo, setSelectedInfo] = useState(null);
-  const {settings, saveSetting, saving} = useSettings();
-
-  const [modelProps, setModelProps] = useState(null);
-  useEffect(() => {
-    getModelProps().then(setModelProps).catch(() => {});
-  }, []);

  // Sync info panel when selection changes
  useEffect(() => {
@@ -260,7 +287,7 @@ function ModelsSection({ onNavigate }) {
      <SettingsRow
        label="Models Folder"
        description="Path to folder containing .gguf files"
-        action={<ModelsFolderSetting />}
+        action={<ModelsFolderSetting settings={settings} saveSetting={saveSetting} saving={saving}/>}
      />
      <NumberSetting
        label="Temperature"
@@ -363,8 +390,7 @@ function InfoLine({ label, value, mono }) {
  );
 }

-function ModelsFolderSetting() {
-  const { settings, saveSetting, saving } = useSettings();
+function ModelsFolderSetting({ settings, saveSetting, saving }) {
  const [local, setLocal] = useState('');
  const [error, setError] = useState(null);