memory view in chat client

packages/chat-client/src/App.jsx

@@ -115,7 +115,7 @@ export default function App() {
         <AllProjectsView onProjectsChange={refreshProjects}/>
       )}
 
-      {view === 'settings' && <SettingsView />}
+      {view === 'settings' && <SettingsView onNavigate={setView} />}
 
       {view === 'project' && activeProject && (
         <ProjectView

packages/chat-client/src/components/SettingsView.jsx

@@ -1,29 +1,78 @@
 import React from 'react';
 
-export default function SettingsView() {
+export default function SettingsView({ onNavigate }) {
   return (
-    <div className="flex-col flex-1 overflow-hidden" style={{ background: 'var(--bg-base)' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden', background: 'var(--bg-base)' }}>
 
       {/* Header */}
       <div className="panel-header" style={{ padding: '0 24px' }}>
-        <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>
-          Settings
-        </span>
+        <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Settings</span>
       </div>
 
       <div className="flex-1 scroll-y" style={{ padding: '24px' }}>
-        <SettingsSection title="Appearance">
-          <Placeholder />
-        </SettingsSection>
+
+        {/* Memory */}
         <SettingsSection title="Memory">
-          <Placeholder />
+          <SettingsRow
+            label="Memory Viewer"
+            description="Browse, search, and delete stored episodes"
+            action={<button className="btn-primary" style={{ padding: '6px 14px', fontSize: '13px' }}
+              onClick={() => onNavigate('memory')}>Open →</button>}
+          />
+          <SettingsRow
+            label="Semantic Search Results"
+            description="Max episodes retrieved per query"
+            action={<ComingSoon />}
+          />
+          <SettingsRow
+            label="Episode Context Window"
+            description="Recent episodes injected into each prompt"
+            action={<ComingSoon />}
+          />
         </SettingsSection>
+
+        {/* Models */}
         <SettingsSection title="Models">
-          <Placeholder />
+          <SettingsRow
+            label="Active Model"
+            description="Model used for inference"
+            action={<ComingSoon />}
+          />
+          <SettingsRow
+            label="Temperature"
+            description="Response creativity / randomness"
+            action={<ComingSoon />}
+          />
+          <SettingsRow
+            label="Context Window"
+            description="Max tokens per request (-c flag)"
+            action={<ComingSoon />}
+          />
         </SettingsSection>
+
+        {/* About */}
         <SettingsSection title="About">
-          <Placeholder />
+          <SettingsRow
+            label="Service Health"
+            description="Ping all four services"
+            action={<ComingSoon />}
+          />
+          <SettingsRow
+            label="Version"
+            description="NexusAI"
+            action={<span className="text-sm text-muted">v0.1.0</span>}
+          />
         </SettingsSection>
+
+        {/* Appearance */}
+        <SettingsSection title="Appearance">
+          <SettingsRow
+            label="Theme"
+            description="UI colour scheme"
+            action={<ComingSoon />}
+          />
+        </SettingsSection>
+
       </div>
     </div>
   );
@@ -47,10 +96,27 @@ function SettingsSection({ title, children }) {
   );
 }
 
-function Placeholder() {
+function SettingsRow({ label, description, action }) {
   return (
-    <div className="text-sm text-muted" style={{ padding: '20px 16px' }}>
-      Coming soon
+    <div style={{
+      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+      padding: '14px 16px',
+      borderBottom: '1px solid var(--border)',
+    }}
+      // Remove bottom border on last child via CSS would need a class;
+      // easiest to just let it render — the section border-radius clips it cleanly
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        <span className="text-sm" style={{ color: 'var(--text-primary)', fontWeight: 500 }}>{label}</span>
+        {description && <span className="text-xs text-muted">{description}</span>}
+      </div>
+      <div style={{ flexShrink: 0, marginLeft: 16 }}>
+        {action}
+      </div>
     </div>
   );
+}
+
+function ComingSoon() {
+  return <span className="text-xs text-muted" style={{ fontStyle: 'italic' }}>Coming soon</span>;
 }