Sessions: edit form, soft-delete, lazy creation, chat as separate page

- Session click opens edit form (name, description, image, agent) instead of chat
- Chat is now a separate route (#chat/{id}), opened via button
- Sessions created on save, not on click
- Soft-delete for sessions (is_deleted flag)
- Delete button in session form
- Removed title double-click editing from chat
- Card images now square (aspect-ratio: 1)
- New Session as placeholder card

Endpoints/SessionEndpoint.cs

@@ -16,6 +16,7 @@ public static class SessionEndpoint
         app.MapGet("/api/sessions/{sessionId}", HandleGet);
         app.MapPost("/api/sessions", HandleCreate);
         app.MapPut("/api/sessions/{sessionId}", HandleUpdate);
+        app.MapDelete("/api/sessions/{sessionId}", HandleDelete);
     }
 
     private static async Task HandleList(HttpContext ctx, DatabaseService db)
@@ -43,7 +44,14 @@ public static class SessionEndpoint
 
     private static async Task HandleCreate(HttpContext ctx, DatabaseService db)
     {
-        var session = await db.CreateSession("Neue Session");
+        var body = await JsonSerializer.DeserializeAsync<JsonElement>(ctx.Request.Body);
+
+        var name = body.TryGetProperty("name", out var n) ? n.GetString() : "Neue Session";
+        var description = body.TryGetProperty("description", out var d) ? d.GetString() : null;
+        var image = body.TryGetProperty("image", out var img) ? img.GetString() : null;
+        var agentId = body.TryGetProperty("agentId", out var a) ? a.GetString() : null;
+
+        var session = await db.CreateSession(name, description, image, agentId);
         await ctx.Response.WriteAsJsonAsync(session);
     }
 
@@ -57,16 +65,18 @@ public static class SessionEndpoint
         }
 
         var body = await JsonSerializer.DeserializeAsync<JsonElement>(ctx.Request.Body);
-        if (body.TryGetProperty("name", out var nameEl))
-        {
-            await db.UpdateSessionName(sessionId, nameEl.GetString());
-        }
-        if (body.TryGetProperty("agentId", out var agentEl))
-        {
-            await db.UpdateSessionAgent(sessionId, agentEl.GetString());
-        }
+        await db.UpdateSession(sessionId, body);
 
         var session = await db.GetSession(sessionId);
         await ctx.Response.WriteAsJsonAsync(session);
     }
+
+    private static async Task HandleDelete(HttpContext ctx, DatabaseService db)
+    {
+        var sessionId = ctx.Request.RouteValues["sessionId"]?.ToString();
+        if (string.IsNullOrEmpty(sessionId)) { ctx.Response.StatusCode = 400; return; }
+
+        await db.DeleteSession(sessionId);
+        ctx.Response.StatusCode = 204;
+    }
 }

Models/SessionRecord.cs

@@ -5,7 +5,10 @@ public class SessionRecord
     public long Id { get; set; }
     public string SessionId { get; set; }
     public string Name { get; set; }
+    public string Description { get; set; }
+    public string Image { get; set; }
     public string AgentId { get; set; }
+    public bool IsDeleted { get; set; }
     public string CreatedAt { get; set; }
     public string UpdatedAt { get; set; }
 }

Services/DatabaseService.cs

@@ -99,6 +99,9 @@ public class DatabaseService
 
         // Migrations
         TryAddColumn(conn, "sessions", "agent_id", "TEXT");
+        TryAddColumn(conn, "sessions", "description", "TEXT");
+        TryAddColumn(conn, "sessions", "image", "TEXT");
+        TryAddColumn(conn, "sessions", "is_deleted", "INTEGER NOT NULL DEFAULT 0");
         TryAddColumn(conn, "chains", "agent_id", "TEXT");
     }
 
@@ -159,7 +162,7 @@ public class DatabaseService
 
     // ── Sessions ──
 
-    public async Task<SessionRecord> CreateSession(string name = null)
+    public async Task<SessionRecord> CreateSession(string name = null, string description = null, string image = null, string agentId = null)
     {
         using var conn = CreateConnection();
         var now = DateTime.UtcNow.ToString("o");
@@ -167,12 +170,15 @@ public class DatabaseService
         {
             SessionId = Guid.NewGuid().ToString("N"),
             Name = name,
+            Description = description,
+            Image = image,
+            AgentId = agentId,
             CreatedAt = now,
             UpdatedAt = now
         };
         await conn.ExecuteAsync(@"
-            INSERT INTO sessions (session_id, name, created_at, updated_at)
-            VALUES (@SessionId, @Name, @CreatedAt, @UpdatedAt)
+            INSERT INTO sessions (session_id, name, description, image, agent_id, created_at, updated_at)
+            VALUES (@SessionId, @Name, @Description, @Image, @AgentId, @CreatedAt, @UpdatedAt)
         ", session);
         return session;
     }
@@ -181,14 +187,14 @@ public class DatabaseService
     {
         using var conn = CreateConnection();
         return await conn.QueryAsync<SessionRecord>(
-            "SELECT * FROM sessions ORDER BY updated_at DESC");
+            "SELECT * FROM sessions WHERE is_deleted = 0 ORDER BY updated_at DESC");
     }
 
     public async Task<SessionRecord> GetSession(string sessionId)
     {
         using var conn = CreateConnection();
         return await conn.QuerySingleOrDefaultAsync<SessionRecord>(
-            "SELECT * FROM sessions WHERE session_id = @sessionId", new { sessionId });
+            "SELECT * FROM sessions WHERE session_id = @sessionId AND is_deleted = 0", new { sessionId });
     }
 
     public async Task UpdateSessionTimestamp(string sessionId)
@@ -199,20 +205,28 @@ public class DatabaseService
             new { sessionId, now = DateTime.UtcNow.ToString("o") });
     }
 
-    public async Task UpdateSessionName(string sessionId, string name)
+    public async Task UpdateSession(string sessionId, System.Text.Json.JsonElement body)
     {
         using var conn = CreateConnection();
-        await conn.ExecuteAsync(
-            "UPDATE sessions SET name = @name, updated_at = @now WHERE session_id = @sessionId",
-            new { sessionId, name, now = DateTime.UtcNow.ToString("o") });
+        var sets = new List<string> { "updated_at = @now" };
+        var p = new Dapper.DynamicParameters();
+        p.Add("sessionId", sessionId);
+        p.Add("now", DateTime.UtcNow.ToString("o"));
+
+        if (body.TryGetProperty("name", out var n)) { sets.Add("name = @name"); p.Add("name", n.GetString()); }
+        if (body.TryGetProperty("description", out var d)) { sets.Add("description = @desc"); p.Add("desc", d.GetString()); }
+        if (body.TryGetProperty("image", out var img)) { sets.Add("image = @image"); p.Add("image", img.GetString()); }
+        if (body.TryGetProperty("agentId", out var a)) { sets.Add("agent_id = @agentId2"); p.Add("agentId2", a.GetString()); }
+
+        await conn.ExecuteAsync($"UPDATE sessions SET {string.Join(", ", sets)} WHERE session_id = @sessionId", p);
     }
 
-    public async Task UpdateSessionAgent(string sessionId, string agentId)
+    public async Task DeleteSession(string sessionId)
     {
         using var conn = CreateConnection();
         await conn.ExecuteAsync(
-            "UPDATE sessions SET agent_id = @agentId, updated_at = @now WHERE session_id = @sessionId",
-            new { sessionId, agentId, now = DateTime.UtcNow.ToString("o") });
+            "UPDATE sessions SET is_deleted = 1, updated_at = @now WHERE session_id = @sessionId",
+            new { sessionId, now = DateTime.UtcNow.ToString("o") });
     }
 
     // ── Archives ──

wwwroot/css/base.css

@@ -107,8 +107,7 @@ header {
 }
 
 .msg {
-  max-width: 85%;
-  padding: var(--s4);
+  padding: var(--s3) var(--s4);
   white-space: pre-wrap;
   word-break: break-word;
 }
@@ -129,6 +128,7 @@ header {
   align-self: center;
   border: var(--border-width) solid var(--f2-border);
   text-align: center;
+  padding: var(--s2);
 }
 
 /* ── Cursor ── */

wwwroot/css/main.css

@@ -69,19 +69,63 @@ body {
 .card {
   background: var(--f3-bg);
   border: var(--border-width) solid var(--f3-border);
-  padding: var(--s4);
   display: flex;
   flex-direction: column;
-  gap: var(--s2);
+  overflow: hidden;
 }
 
 .card.clickable { cursor: pointer; }
 .card.clickable:hover { border-color: var(--primary); }
 
-.card-icon { font-size: 2em; }
+.card-image {
+  aspect-ratio: 1;
+  background: var(--f2-bg);
+  overflow: hidden;
+}
+
+.card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card-body {
+  padding: var(--s3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s1);
+}
+
+.card-title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--s2);
+}
+
+.card-title {
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-desc {
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+.badge {
+  padding: var(--s1) var(--s2);
+  background: var(--f1-bg);
+  border: var(--border-width) solid var(--f2-border);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
 
 .card.placeholder {
   border-style: dashed;
+  align-items: center;
+  justify-content: center;
 }
 
 /* ── Session Page ── */
@@ -189,23 +233,3 @@ body {
   background: #ff6b6b;
   color: var(--f1-bg);
 }
-
-/* ── Agent Card Avatar ── */
-
-.agent-card-avatar {
-  width: 40px;
-  height: 40px;
-  background: var(--f2-bg);
-  border: var(--border-width) solid var(--f2-border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.2em;
-  overflow: hidden;
-}
-
-.agent-card-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}

wwwroot/index.html

@@ -27,7 +27,6 @@
     <section>
       <div class="section-header">
         <h2>Sessions</h2>
-        <button id="newSessionBtn">+ Neue Session</button>
       </div>
       <div class="card-grid" id="sessionCards"></div>
     </section>
@@ -48,11 +47,39 @@
 </template>
 
 <template id="tpl-session">
-  <div class="page session-page">
+  <div class="page session-edit-page">
     <header class="session-header">
       <button class="back-btn" data-page="dashboard">←</button>
-      <h1 id="sessionTitle" class="editable-title">Session</h1>
+      <h1 id="sessionPageTitle">Session</h1>
+      <button id="openChatBtn" hidden>Chat öffnen</button>
+    </header>
+    <div class="agent-form">
+      <div class="agent-avatar-section">
+        <div class="agent-avatar-preview" id="sessionImagePreview">?</div>
+        <input type="file" id="sessionImageInput" accept="image/*" hidden>
+        <button id="sessionImageBtn">Bild ändern</button>
+        <button id="sessionImageClearBtn">Entfernen</button>
+      </div>
+      <label>Name</label>
+      <input type="text" id="sessionName" placeholder="Name der Session">
+      <label>Beschreibung</label>
+      <textarea id="sessionDescription" rows="3" placeholder="Beschreibung (optional)"></textarea>
+      <label>Agent</label>
       <select id="agentSelect"></select>
+      <div class="agent-form-actions">
+        <button id="sessionSaveBtn">Speichern</button>
+        <button id="sessionCancelBtn">Abbrechen</button>
+        <button id="sessionDeleteBtn" class="danger-btn" hidden>Löschen</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<template id="tpl-chat">
+  <div class="page session-page">
+    <header class="session-header">
+      <button class="back-btn" id="chatBackBtn">←</button>
+      <h1 id="sessionTitle">Session</h1>
       <button class="header-btn" id="archiveBtn">Archivieren</button>
       <div class="toggle">
         <input type="checkbox" id="showSystem">
@@ -127,6 +154,7 @@
 <script src="js/pages/dashboard.js"></script>
 <script src="js/pages/agent-page.js"></script>
 <script src="js/pages/session-page.js"></script>
+<script src="js/pages/chat-page.js"></script>
 <script src="js/app.js"></script>
 </body>
 </html>

wwwroot/js/api.js

@@ -76,8 +76,12 @@ async function apiGetSessions() {
   return resp.json();
 }
 
-async function apiCreateSession() {
-  const resp = await fetch('/api/sessions', { method: 'POST' });
+async function apiCreateSession(data = {}) {
+  const resp = await fetch('/api/sessions', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data)
+  });
   return resp.json();
 }
 
@@ -87,6 +91,10 @@ async function apiGetSession(sessionId) {
   return resp.json();
 }
 
+async function apiDeleteSession(sessionId) {
+  return fetch(`/api/sessions/${sessionId}`, { method: 'DELETE' });
+}
+
 async function apiUpdateSession(sessionId, data) {
   const resp = await fetch(`/api/sessions/${sessionId}`, {
     method: 'PUT',

wwwroot/js/pages/chat-page.js

@@ -0,0 +1,75 @@
+// ── Chat Page ──
+
+registerPage('chat', {
+  async init(params) {
+    const sessionId = params.id;
+    if (!sessionId) return navigateTo('dashboard');
+
+    currentSessionId = sessionId;
+
+    const session = await apiGetSession(sessionId);
+    if (!session) return navigateTo('dashboard');
+
+    // Kein Agent = kein Chat
+    if (!session.agentId) {
+      navigateTo('session', { id: sessionId });
+      return;
+    }
+
+    const titleEl = document.getElementById('sessionTitle');
+    if (titleEl) {
+      titleEl.textContent = session.name || 'Unbenannt';
+    }
+
+    // Zurück zur Session-Edit-Seite
+    const backBtn = document.getElementById('chatBackBtn');
+    if (backBtn) {
+      backBtn.addEventListener('click', () => navigateTo('session', { id: sessionId }));
+    }
+
+    // System Prompt Toggle
+    const showSystem = document.getElementById('showSystem');
+    const systemPrompt = document.getElementById('systemPrompt');
+    if (showSystem && systemPrompt) {
+      showSystem.addEventListener('change', () => {
+        systemPrompt.classList.toggle('visible', showSystem.checked);
+      });
+    }
+
+    // Send
+    const sendBtn = document.getElementById('send');
+    if (sendBtn) sendBtn.addEventListener('click', sendMessage);
+
+    // Ctrl+Enter
+    const inputEl = document.getElementById('input');
+    if (inputEl) {
+      inputEl.addEventListener('keydown', (e) => {
+        if (e.ctrlKey && e.key === 'Enter') sendMessage();
+      });
+      inputEl.addEventListener('input', function () {
+        this.style.height = 'auto';
+        this.style.height = Math.min(this.scrollHeight, 150) + 'px';
+      });
+    }
+
+    // Archivieren
+    const archiveBtn = document.getElementById('archiveBtn');
+    if (archiveBtn) archiveBtn.addEventListener('click', clearChat);
+
+    // State zurücksetzen und History laden
+    messages.length = 0;
+    lastKnownMessageId = 0;
+    loadedArchiveCount = 0;
+    isStreaming = false;
+
+    await loadHistory();
+  },
+
+  destroy() {
+    stopHistoryPolling();
+    messages.length = 0;
+    lastKnownMessageId = 0;
+    loadedArchiveCount = 0;
+    isStreaming = false;
+  }
+});

wwwroot/js/pages/dashboard.js

@@ -2,34 +2,41 @@
 
 registerPage('dashboard', {
   async init() {
-    // Sessions laden
+    const agents = await apiGetAgents();
+    const agentMap = {};
+    for (const a of agents) agentMap[a.agentId] = a;
+
+    // Sessions
     const sessions = await apiGetSessions();
     const grid = document.getElementById('sessionCards');
     grid.innerHTML = '';
 
     for (const s of sessions) {
+      const agent = s.agentId ? agentMap[s.agentId] : null;
       const card = document.createElement('div');
       card.className = 'card clickable';
       card.innerHTML = `
-        <div class="card-title">${escHtml(s.name || 'Unbenannt')}</div>
-        <div class="card-sub">${formatDate(s.updatedAt)}</div>
+        <div class="card-image">${s.image ? `<img src="${s.image}" alt="">` : ''}</div>
+        <div class="card-body">
+          <div class="card-title-row">
+            <span class="card-title">${esc(s.name || 'Unbenannt')}</span>
+            ${agent ? `<span class="badge">${esc(agent.name)}</span>` : ''}
+          </div>
+          ${s.description ? `<div class="card-desc">${esc(s.description)}</div>` : ''}
+        </div>
       `;
-      card.addEventListener('click', () => {
-        navigateTo('session', { id: s.sessionId });
-      });
+      card.addEventListener('click', () => navigateTo('session', { id: s.sessionId }));
       grid.appendChild(card);
     }
 
-    const newSessionBtn = document.getElementById('newSessionBtn');
-    if (newSessionBtn) {
-      newSessionBtn.addEventListener('click', async () => {
-        const session = await apiCreateSession();
-        navigateTo('session', { id: session.sessionId });
-      });
-    }
+    // Neue Session Placeholder
+    const newSession = document.createElement('div');
+    newSession.className = 'card placeholder clickable';
+    newSession.innerHTML = '<div class="card-body"><div class="card-title">+ Neue Session</div></div>';
+    newSession.addEventListener('click', () => navigateTo('session'));
+    grid.appendChild(newSession);
 
-    // Agents laden
-    const agents = await apiGetAgents();
+    // Agents
     const agentGrid = document.getElementById('agentCards');
     agentGrid.innerHTML = '';
 
@@ -37,30 +44,29 @@ registerPage('dashboard', {
       const card = document.createElement('div');
       card.className = 'card clickable';
       card.innerHTML = `
-        <div class="agent-card-avatar">${a.avatar ? `<img src="${a.avatar}" alt="">` : '?'}</div>
-        <div class="card-title">${escHtml(a.name)}</div>
-        <div class="card-sub">${escHtml(a.model || 'sonnet')}</div>
+        <div class="card-image">${a.avatar ? `<img src="${a.avatar}" alt="">` : ''}</div>
+        <div class="card-body">
+          <div class="card-title-row">
+            <span class="card-title">${esc(a.name)}</span>
+            <span class="badge">${esc(a.model)}</span>
+          </div>
+          ${a.description ? `<div class="card-desc">${esc(a.description)}</div>` : ''}
+        </div>
       `;
-      card.addEventListener('click', () => {
-        navigateTo('agent', { id: a.agentId });
-      });
+      card.addEventListener('click', () => navigateTo('agent', { id: a.agentId }));
       agentGrid.appendChild(card);
     }
 
-    // Neuer Agent Placeholder
     const placeholder = document.createElement('div');
     placeholder.className = 'card placeholder clickable';
-    placeholder.innerHTML = `
-      <div class="card-icon">+</div>
-      <div class="card-title">Neuer Agent</div>
-    `;
+    placeholder.innerHTML = '<div class="card-body"><div class="card-title">+ Neuer Agent</div></div>';
     placeholder.addEventListener('click', () => navigateTo('agent'));
     agentGrid.appendChild(placeholder);
   },
   destroy() {}
 });
 
-function escHtml(s) {
+function esc(s) {
   const d = document.createElement('div');
   d.textContent = s;
   return d.innerHTML;

wwwroot/js/pages/session-page.js

@@ -1,129 +1,113 @@
-// ── Session Page ──
+// ── Session Edit Page ──
+
+let _sessionImageData = null;
 
 registerPage('session', {
   async init(params) {
     const sessionId = params.id;
-    if (!sessionId) return navigateTo('dashboard');
+    const isNew = !sessionId;
+    let session = null;
 
-    currentSessionId = sessionId;
-
-    // Session laden
-    const session = await apiGetSession(sessionId);
-    const titleEl = document.getElementById('sessionTitle');
-    if (session && titleEl) {
-      titleEl.textContent = session.name || 'Unbenannt';
-      titleEl.addEventListener('dblclick', () => editTitle(sessionId, titleEl));
+    if (!isNew) {
+      session = await apiGetSession(sessionId);
+      if (!session) return navigateTo('dashboard');
     }
 
-    // Agent-Auswahl laden
+    const titleEl = document.getElementById('sessionPageTitle');
+    const nameEl = document.getElementById('sessionName');
+    const descEl = document.getElementById('sessionDescription');
     const agentSelect = document.getElementById('agentSelect');
-    const sendBtn = document.getElementById('send');
-    const inputEl = document.getElementById('input');
+    const imagePreview = document.getElementById('sessionImagePreview');
+    const imageInput = document.getElementById('sessionImageInput');
+    const imageBtn = document.getElementById('sessionImageBtn');
+    const imageClearBtn = document.getElementById('sessionImageClearBtn');
+    const saveBtn = document.getElementById('sessionSaveBtn');
+    const cancelBtn = document.getElementById('sessionCancelBtn');
+    const deleteBtn = document.getElementById('sessionDeleteBtn');
+    const openChatBtn = document.getElementById('openChatBtn');
 
-    if (agentSelect) {
-      const agents = await apiGetAgents();
-      agentSelect.innerHTML = '<option value="">-- Agent wählen --</option>';
-      for (const a of agents) {
-        const opt = document.createElement('option');
-        opt.value = a.agentId;
-        opt.textContent = `${a.name} (${a.model})`;
-        agentSelect.appendChild(opt);
+    _sessionImageData = null;
+
+    if (session) {
+      titleEl.textContent = session.name || 'Unbenannt';
+      nameEl.value = session.name || '';
+      descEl.value = session.description || '';
+      _sessionImageData = session.image || null;
+      deleteBtn.hidden = false;
+      openChatBtn.hidden = false;
+
+      if (session.image) {
+        imagePreview.innerHTML = `<img src="${session.image}" alt="">`;
       }
+    } else {
+      titleEl.textContent = 'Neue Session';
+      deleteBtn.hidden = true;
+      openChatBtn.hidden = true;
+    }
 
-      // Gespeicherten Agent setzen
-      if (session && session.agentId) {
-        agentSelect.value = session.agentId;
+    // Agents laden
+    const agents = await apiGetAgents();
+    agentSelect.innerHTML = '<option value="">-- Kein Agent --</option>';
+    for (const a of agents) {
+      const opt = document.createElement('option');
+      opt.value = a.agentId;
+      opt.textContent = `${a.name} (${a.model})`;
+      agentSelect.appendChild(opt);
+    }
+    if (session && session.agentId) agentSelect.value = session.agentId;
+
+    // Bild Upload
+    imageBtn.addEventListener('click', () => imageInput.click());
+    imageInput.addEventListener('change', () => {
+      const file = imageInput.files[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = () => {
+        _sessionImageData = reader.result;
+        imagePreview.innerHTML = `<img src="${reader.result}" alt="">`;
+      };
+      reader.readAsDataURL(file);
+    });
+
+    imageClearBtn.addEventListener('click', () => {
+      _sessionImageData = null;
+      imagePreview.innerHTML = '?';
+      imageInput.value = '';
+    });
+
+    // Speichern
+    saveBtn.addEventListener('click', async () => {
+      const data = {
+        name: nameEl.value.trim() || 'Unbenannt',
+        description: descEl.value.trim(),
+        image: _sessionImageData,
+        agentId: agentSelect.value || null
+      };
+
+      if (isNew) {
+        await apiCreateSession(data);
+      } else {
+        await apiUpdateSession(sessionId, data);
       }
+      navigateTo('dashboard');
+    });
 
-      // Agent-Wechsel speichern
-      agentSelect.addEventListener('change', async () => {
-        const val = agentSelect.value || null;
-        await apiUpdateSession(sessionId, { agentId: val });
-        updateSendState();
-      });
-    }
+    // Abbrechen
+    cancelBtn.addEventListener('click', () => navigateTo('dashboard'));
 
-    // Send-Button State
-    function updateSendState() {
-      const hasAgent = agentSelect && agentSelect.value;
-      if (sendBtn) sendBtn.disabled = !hasAgent;
-      if (inputEl) inputEl.disabled = !hasAgent;
-    }
-    updateSendState();
+    // Löschen
+    deleteBtn.addEventListener('click', async () => {
+      if (!confirm('Session wirklich löschen?')) return;
+      await apiDeleteSession(sessionId);
+      navigateTo('dashboard');
+    });
 
-    // System Prompt Toggle
-    const showSystem = document.getElementById('showSystem');
-    const systemPrompt = document.getElementById('systemPrompt');
-    if (showSystem && systemPrompt) {
-      showSystem.addEventListener('change', () => {
-        systemPrompt.classList.toggle('visible', showSystem.checked);
-      });
-    }
-
-    // Send
-    if (sendBtn) sendBtn.addEventListener('click', sendMessage);
-
-    // Ctrl+Enter
-    if (inputEl) {
-      inputEl.addEventListener('keydown', (e) => {
-        if (e.ctrlKey && e.key === 'Enter') sendMessage();
-      });
-      inputEl.addEventListener('input', function () {
-        this.style.height = 'auto';
-        this.style.height = Math.min(this.scrollHeight, 150) + 'px';
-      });
-    }
-
-    // Archivieren
-    const archiveBtn = document.getElementById('archiveBtn');
-    if (archiveBtn) archiveBtn.addEventListener('click', clearChat);
-
-    // State zurücksetzen und History laden
-    messages.length = 0;
-    lastKnownMessageId = 0;
-    loadedArchiveCount = 0;
-    isStreaming = false;
-
-    await loadHistory();
+    // Chat öffnen
+    openChatBtn.addEventListener('click', () => {
+      navigateTo('chat', { id: sessionId });
+    });
   },
-
   destroy() {
-    stopHistoryPolling();
-    messages.length = 0;
-    lastKnownMessageId = 0;
-    loadedArchiveCount = 0;
-    isStreaming = false;
+    _sessionImageData = null;
   }
 });
-
-function editTitle(sessionId, titleEl) {
-  const input = document.createElement('input');
-  input.type = 'text';
-  input.className = 'session-rename';
-  input.value = titleEl.textContent;
-
-  titleEl.replaceWith(input);
-  input.focus();
-  input.select();
-
-  const save = async () => {
-    const newName = input.value.trim();
-    if (newName) {
-      await apiUpdateSession(sessionId, { name: newName });
-      const newTitle = document.createElement('h1');
-      newTitle.id = 'sessionTitle';
-      newTitle.className = 'editable-title';
-      newTitle.textContent = newName;
-      newTitle.addEventListener('dblclick', () => editTitle(sessionId, newTitle));
-      input.replaceWith(newTitle);
-    } else {
-      input.replaceWith(titleEl);
-    }
-  };
-
-  input.addEventListener('blur', save);
-  input.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') input.blur();
-    if (e.key === 'Escape') { input.replaceWith(titleEl); }
-  });
-}