From d6e679bfe33f4118b623429f3c7855c73dc53350 Mon Sep 17 00:00:00 2001 From: redth Date: Fri, 6 Feb 2026 12:22:21 -0500 Subject: [PATCH 1/2] Add mobile sidebar top-bar & flyout UI Introduce a responsive mobile sidebar: MainLayout now renders a mobile top-bar and a slide-in flyout (backdrop + panel) and manages flyout state (ToggleFlyout/CloseFlyout). SessionSidebar was refactored to support IsMobileTopBar and IsFlyoutPanel modes, a mobile hamburger/top-bar, a flyout header/close button, and unified session-creation inputs (desktop + flyout) with JS reads that handle both input IDs. Added EventCallbacks (OnToggleFlyout, OnSessionSelected) and updated CreateSession/SelectSession to clear both input variants and invoke callbacks. Moved session list rendering into a RenderFragment and adjusted persisted session UI (timestamp format, layout, resume action). Large CSS updates: MainLayout, SessionSidebar, Dashboard and Home styles include mobile-specific rules, flyout panel/backdrop, and various spacing/font tweaks. Home.razor: added copy-session-id action, debug log toggle/filter UI, improved send/queue button icons, updated placeholders and debug log handling (size and filtering). Overall this change improves mobile UX and session management consistency. --- Components/Layout/MainLayout.razor | 25 +- Components/Layout/MainLayout.razor.css | 56 +++- Components/Layout/SessionSidebar.razor | 319 +++++++++++++-------- Components/Layout/SessionSidebar.razor.css | 109 +++++++ Components/Pages/Dashboard.razor.css | 19 ++ Components/Pages/Home.razor | 47 ++- Components/Pages/Home.razor.css | 119 ++++++-- 7 files changed, 538 insertions(+), 156 deletions(-) diff --git a/Components/Layout/MainLayout.razor b/Components/Layout/MainLayout.razor index 426b2f3ca6..eda6305d52 100644 --- a/Components/Layout/MainLayout.razor +++ b/Components/Layout/MainLayout.razor @@ -1,13 +1,36 @@ @inherits LayoutComponentBase
-
+
+
+ +
+
@Body
+ +
+
+ +
+ +@code { + private bool flyoutOpen; + + private void ToggleFlyout() + { + flyoutOpen = !flyoutOpen; + } + + private void CloseFlyout() + { + flyoutOpen = false; + } +} diff --git a/Components/Layout/MainLayout.razor.css b/Components/Layout/MainLayout.razor.css index 896ea41174..ffa2e807b8 100644 --- a/Components/Layout/MainLayout.razor.css +++ b/Components/Layout/MainLayout.razor.css @@ -23,18 +23,64 @@ main { background: #1a1a2e; } -@media (max-width: 640.98px) { - .sidebar { - height: auto; - max-height: 40vh; - } +/* Mobile: hide desktop sidebar, show top bar + flyout */ +.desktop-only { + display: none; +} + +.mobile-only { + display: block; +} + +.mobile-top-bar { + background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); + flex-shrink: 0; +} + +.flyout-backdrop { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.5); + z-index: 99; +} + +.flyout-backdrop.open { + display: block; +} + +.flyout-panel { + position: fixed; + top: 0; + left: 0; + bottom: 0; + width: 320px; + max-width: 92vw; + background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%); + z-index: 100; + transform: translateX(-100%); + transition: transform 0.25s ease; + overflow-y: auto; +} + +.flyout-panel.open { + transform: translateX(0); } +/* Desktop: show sidebar, hide mobile elements */ @media (min-width: 641px) { .page { flex-direction: row; } + .desktop-only { + display: block; + } + + .mobile-only { + display: none !important; + } + .sidebar { width: 280px; height: 100vh; diff --git a/Components/Layout/SessionSidebar.razor b/Components/Layout/SessionSidebar.razor index 10f81d96a3..dc391ce53b 100644 --- a/Components/Layout/SessionSidebar.razor +++ b/Components/Layout/SessionSidebar.razor @@ -4,146 +4,206 @@ @inject IJSRuntime JS @inject NavigationManager Nav -
-
-

AutoPilot

-

- @(CopilotService.IsInitialized ? "● Connected" : "○ Disconnected") -

-
- Chat - Dashboard +@if (IsMobileTopBar) +{ +
+ + AutoPilot +
+ Chat + Dashboard
+} +else if (IsFlyoutPanel) +{ +
+
+

Sessions

+ +
-
- -
- - - +
+ +
+ + + +
+ @if (showDirectoryInput) + { +
+ + +
+ }
- @if (showDirectoryInput) - { -
- - + +
+ + @RenderSessionList +
+} +else +{ +
+
+

AutoPilot

+

+ @(CopilotService.IsInitialized ? "● Connected" : "○ Disconnected") +

+
+ Chat + Dashboard
- } +
+ +
+ +
+ + + +
+ @if (showDirectoryInput) + { +
+ + +
+ } +
+ +
+ + @RenderSessionList
+} -
+@code { + [Parameter] public bool IsMobileTopBar { get; set; } + [Parameter] public bool IsFlyoutPanel { get; set; } + [Parameter] public EventCallback OnToggleFlyout { get; set; } + [Parameter] public EventCallback OnSessionSelected { get; set; } -
-
Active Sessions
- @if (!sessions.Any()) - { -

No active sessions.
Create one above or resume below.

- } - else - { - @foreach (var session in sessions) + private RenderFragment RenderSessionList => __builder => + { +
+
Active Sessions
+ @if (!sessions.Any()) { - var cssClass = session.Name == CopilotService.ActiveSessionName ? "active" : - completedSessions.Contains(session.Name) ? "completed" : - session.IsProcessing ? "busy" : ""; -
-
- - @if (completedSessions.Contains(session.Name)) - { - - } - @if (renamingSession == session.Name) - { - - } - else - { - @session.Name - } - @if (session.IsResumed) - { - resumed - } - - - @session.MessageCount msgs • @session.Model - @if (!string.IsNullOrEmpty(session.WorkingDirectory)) +

No active sessions.
Create one above or resume below.

+ } + else + { + @foreach (var session in sessions) + { + var cssClass = session.Name == CopilotService.ActiveSessionName ? "active" : + completedSessions.Contains(session.Name) ? "completed" : + session.IsProcessing ? "busy" : ""; +
+
+ + @if (completedSessions.Contains(session.Name)) + { + + } + @if (renamingSession == session.Name) + { + + } + else + { + @session.Name + } + @if (session.IsResumed) + { + resumed + } + + + @session.MessageCount msgs • @session.Model + @if (!string.IsNullOrEmpty(session.WorkingDirectory)) + { + • @GetShortPath(session.WorkingDirectory) + } + +
+
+ @if (session.IsProcessing) { - • @GetShortPath(session.WorkingDirectory) + ● } - -
-
- @if (session.IsProcessing) - { - ● - } - - + + +
-
+ } } - } - @if (persistedSessions.Any()) - { -
-
- Saved Sessions (@filteredPersistedSessions.Count()) - @(showPersistedSessions ? "▼" : "▶") -
- - @if (showPersistedSessions) + @if (persistedSessions.Any()) { -
- +
+
+ Saved Sessions (@filteredPersistedSessions.Count()) + @(showPersistedSessions ? "▼" : "▶")
- @foreach (var persisted in filteredPersistedSessions.Take(30)) + @if (showPersistedSessions) { -
-
- @(persisted.Title ?? "Untitled") - - @persisted.LastModified.ToString("MMM dd HH:mm") +
+ +
+ + @foreach (var persisted in filteredPersistedSessions.Take(30)) + { +
+
+ @(persisted.Title ?? "Untitled") + @persisted.LastModified.ToString("MMM dd h:mm tt") @if (!string.IsNullOrEmpty(persisted.WorkingDirectory)) { - • @GetShortPath(persisted.WorkingDirectory) + @GetShortPath(persisted.WorkingDirectory) } - +
+ Resume
- Resume -
+ } } } - } -
-
+
+ }; -@code { - private string newSessionName = ""; private string selectedModel = "claude-opus-4.6"; private string sessionFilter = ""; private bool isCreating = false; @@ -154,6 +214,11 @@ private List sessions = new(); private List persistedSessions = new(); + private async Task ToggleFlyout() + { + await OnToggleFlyout.InvokeAsync(); + } + private readonly string[] availableModels = new[] { "claude-opus-4.6", @@ -242,15 +307,17 @@ private async Task CreateSession() { - // Read value from DOM directly to avoid binding lag - var name = await JS.InvokeAsync("eval", "document.getElementById('sessionNameInput')?.value || ''"); + // Try both desktop and flyout input IDs + var name = await JS.InvokeAsync("eval", + "document.getElementById('sessionNameInput')?.value || document.getElementById('flyoutSessionNameInput')?.value || ''"); if (string.IsNullOrWhiteSpace(name) || isCreating) return; // Read working directory if the input is visible string? workingDir = null; if (showDirectoryInput) { - var dirValue = await JS.InvokeAsync("eval", "document.getElementById('sessionDirInput')?.value || ''"); + var dirValue = await JS.InvokeAsync("eval", + "document.getElementById('sessionDirInput')?.value || document.getElementById('flyoutSessionDirInput')?.value || ''"); if (!string.IsNullOrWhiteSpace(dirValue)) workingDir = dirValue.Trim(); } @@ -260,11 +327,18 @@ { var sessionInfo = await CopilotService.CreateSessionAsync(name.Trim(), selectedModel, workingDir); CopilotService.SwitchSession(sessionInfo.Name); - // Clear the inputs - await JS.InvokeVoidAsync("eval", "document.getElementById('sessionNameInput').value = ''"); + // Clear both input variants + await JS.InvokeVoidAsync("eval", @" + var el = document.getElementById('sessionNameInput'); if(el) el.value=''; + var el2 = document.getElementById('flyoutSessionNameInput'); if(el2) el2.value=''; + "); if (showDirectoryInput) - await JS.InvokeVoidAsync("eval", "document.getElementById('sessionDirInput').value = ''"); + await JS.InvokeVoidAsync("eval", @" + var el = document.getElementById('sessionDirInput'); if(el) el.value=''; + var el2 = document.getElementById('flyoutSessionDirInput'); if(el2) el2.value=''; + "); showDirectoryInput = false; + await OnSessionSelected.InvokeAsync(); } catch (Exception ex) { @@ -354,11 +428,12 @@ } } - private void SelectSession(string name) + private async Task SelectSession(string name) { completedSessions.Remove(name); CopilotService.SwitchSession(name); CopilotService.SaveUiState("/", name); + await OnSessionSelected.InvokeAsync(); } private async Task CloseSession(string name) diff --git a/Components/Layout/SessionSidebar.razor.css b/Components/Layout/SessionSidebar.razor.css index 2a9dd3b531..902a24b1a0 100644 --- a/Components/Layout/SessionSidebar.razor.css +++ b/Components/Layout/SessionSidebar.razor.css @@ -237,6 +237,12 @@ .persisted-name { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1rem; + white-space: normal; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; } .resumed-badge { @@ -252,6 +258,19 @@ color: rgba(255,255,255,0.5); } +.session-meta-time { + font-size: 0.8rem; + color: rgba(255,255,255,0.4); +} + +.session-meta-dir { + font-size: 0.8rem; + color: rgba(255,255,255,0.35); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + .session-actions { display: flex; align-items: center; @@ -411,3 +430,93 @@ font-family: inherit; outline: none; } + +/* Mobile top bar */ +.mobile-bar { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.5rem 1rem; + color: white; +} + +.hamburger-btn { + background: none; + border: none; + color: white; + cursor: pointer; + padding: 0.25rem; + display: flex; + align-items: center; +} + +.mobile-title { + font-size: 1.1rem; + font-weight: 600; +} + +.mobile-tabs { + display: flex; + gap: 0.5rem; + margin-left: auto; +} + +.mobile-tab { + padding: 0.35rem 0.75rem; + border-radius: 6px; + background: rgba(255,255,255,0.08); + color: rgba(255,255,255,0.7); + text-decoration: none; + font-size: 0.85rem; + transition: all 0.15s ease; +} + +.mobile-tab.active { + background: rgba(59, 130, 246, 0.25); + color: #60a5fa; +} + +/* Flyout panel content */ +.flyout-content { + height: 100%; +} + +.flyout-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem; + border-bottom: 1px solid rgba(255,255,255,0.1); +} + +.flyout-header h3 { + margin: 0; + font-size: 1.2rem; + color: white; +} + +.flyout-close-btn { + background: none; + border: none; + color: rgba(255,255,255,0.5); + cursor: pointer; + font-size: 1.2rem; + padding: 0.25rem; +} + +.flyout-close-btn:hover { + color: white; +} + +/* === Mobile responsive === */ +@media (max-width: 640px) { + .session-item.persisted { + flex-wrap: wrap; + } + .session-item.persisted .resume-icon { + width: 100%; + text-align: right; + margin-top: 0.25rem; + font-size: 0.8rem; + } +} diff --git a/Components/Pages/Dashboard.razor.css b/Components/Pages/Dashboard.razor.css index e80398d88e..ecfec1130f 100644 --- a/Components/Pages/Dashboard.razor.css +++ b/Components/Pages/Dashboard.razor.css @@ -304,3 +304,22 @@ .broadcast-input button:hover { background: #6d28d9; } + +/* === Mobile responsive === */ +@media (max-width: 640px) { + .dashboard { padding: 0.75rem; } + .dashboard-header { gap: 0.5rem; margin-bottom: 0.75rem; } + .dashboard-header h2 { font-size: 1.1rem; } + .session-count { font-size: 0.8rem; } + .no-sessions-dash { font-size: 0.9rem; } + .session-grid { grid-template-columns: 1fr; gap: 0.75rem; } + .session-card { padding: 0.75rem; border-radius: 8px; } + .card-header h3 { font-size: 0.95rem; } + .card-model-badge { font-size: 0.65rem; padding: 0.1rem 0.3rem; } + .card-close { font-size: 0.75rem; } + .card-messages { max-height: 180px; gap: 0.3rem; font-size: 0.8rem; } + .broadcast-section { margin-top: 0.75rem; } + .broadcast-input { gap: 0.5rem; } + .broadcast-input textarea { font-size: 0.85rem; } + .broadcast-input button { font-size: 0.85rem; padding: 0.4rem 0.8rem; } +} diff --git a/Components/Pages/Home.razor b/Components/Pages/Home.razor index f6a8bdba69..b65462b01b 100644 --- a/Components/Pages/Home.razor +++ b/Components/Pages/Home.razor @@ -34,7 +34,7 @@ @activeSession.Model @if (activeSession.SessionId != null) { - @activeSession.SessionId[..8] + @activeSession.SessionId[..8] } @if (activeSession.IsProcessing) { @@ -211,14 +211,15 @@ placeholder="@GetInputPlaceholder()" rows="1">
@@ -244,15 +245,27 @@ } · @activeSession.History.Count msgs + · +
} - @if (!string.IsNullOrEmpty(debugLog)) + @if (showDebugPanel) {
-
Debug Log
- 
@debugLog
+
+ Debug Log +
+ + + +
+
+ 
@FilteredDebugLog
}
@@ -271,6 +284,8 @@ private string? initError; private string? lastError; private string debugLog = ""; + private string debugFilter = ""; + private bool showDebugPanel = false; private ElementReference messagesContainer; private bool _needsRedirect; private string? _redirectTo; @@ -425,10 +440,15 @@ private void HandleDebug(string message) { debugLog = $"{DateTime.Now:HH:mm:ss} {message}\n{debugLog}"; - if (debugLog.Length > 2000) debugLog = debugLog[..2000]; - InvokeAsync(StateHasChanged); + if (debugLog.Length > 10000) debugLog = debugLog[..10000]; + if (showDebugPanel) InvokeAsync(StateHasChanged); } + private string FilteredDebugLog => + string.IsNullOrWhiteSpace(debugFilter) ? debugLog : + string.Join("\n", debugLog.Split('\n') + .Where(l => l.Contains(debugFilter, StringComparison.OrdinalIgnoreCase))); + private async Task Initialize() { initError = null; @@ -558,11 +578,16 @@ if (activeSession != null) CopilotService.ClearQueue(activeSession.Name); } + private async Task CopySessionId(string sessionId) + { + await JS.InvokeVoidAsync("eval", $"navigator.clipboard.writeText('{sessionId}')"); + } + private string GetInputPlaceholder() { if (isPlanMode) return "Plan mode: describe what you want planned..."; - if (activeSession?.IsProcessing == true) return "Type to queue next message... (sent when idle)"; - return "Type a message... (Enter to send, Shift+Enter for new line)"; + if (activeSession?.IsProcessing == true) return "Type to queue next message..."; + return "Message... (⏎ send, ⇧⏎ newline)"; } private string Truncate(string text, int maxLen) diff --git a/Components/Pages/Home.razor.css b/Components/Pages/Home.razor.css index d8700588d6..f31189e210 100644 --- a/Components/Pages/Home.razor.css +++ b/Components/Pages/Home.razor.css @@ -430,25 +430,25 @@ .input-area { display: flex; flex-direction: column; - gap: 0.5rem; - padding: 0.75rem 1.5rem; + gap: 0.4rem; + padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.05); border-top: 1px solid rgba(255,255,255,0.1); } -.input-row { display: flex; gap: 0.75rem; } +.input-row { display: flex; gap: 0.5rem; } .input-area textarea { flex: 1; - padding: 0.75rem 1rem; + padding: 0.45rem 0.6rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; background: rgba(255,255,255,0.1); color: white; - font-size: 1.1rem; + font-size: 0.9rem; font-family: inherit; resize: none; - min-height: 48px; + min-height: 36px; max-height: 150px; } @@ -457,15 +457,18 @@ .input-area textarea:disabled { opacity: 0.6; } .input-area .input-row button { - padding: 0.75rem 1.5rem; + padding: 0.45rem 0.7rem; border: none; border-radius: 8px; background: #3b82f6; color: white; - font-size: 1.1rem; + font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.15s ease; + display: flex; + align-items: center; + justify-content: center; } .input-area .input-row button:hover:not(:disabled) { background: #2563eb; } @@ -503,34 +506,66 @@ font-size: 0.85rem; color: #fbbf24; font-family: monospace; + cursor: pointer; + transition: background 0.15s ease; } +.session-id-badge:hover { background: rgba(251, 191, 36, 0.3); } + +.copy-icon { opacity: 0.5; } +.session-id-badge:hover .copy-icon { opacity: 1; } + /* === Debug panel === */ .debug-panel { position: fixed; bottom: 80px; right: 10px; - width: 400px; - max-height: 200px; - background: rgba(0,0,0,0.9); + width: 450px; + max-width: calc(100vw - 20px); + max-height: 250px; + background: rgba(0,0,0,0.92); border: 1px solid #333; border-radius: 8px; font-size: 0.8rem; z-index: 1000; overflow: hidden; + display: flex; + flex-direction: column; } .debug-header { - padding: 0.5rem; + padding: 0.4rem 0.6rem; background: #222; display: flex; justify-content: space-between; align-items: center; + font-weight: 600; + font-size: 0.75rem; + flex-shrink: 0; } -.debug-header button { - padding: 0.2rem 0.5rem; +.debug-actions { + display: flex; + align-items: center; + gap: 0.35rem; +} + +.debug-filter { + padding: 0.15rem 0.4rem; font-size: 0.7rem; + background: #333; + border: 1px solid #555; + border-radius: 4px; + color: white; + width: 120px; +} + +.debug-filter::placeholder { color: rgba(255,255,255,0.35); } +.debug-filter:focus { outline: none; border-color: #60a5fa; } + +.debug-header button { + padding: 0.15rem 0.4rem; + font-size: 0.65rem; background: #444; border: none; color: white; @@ -538,13 +573,15 @@ cursor: pointer; } +.debug-header button:hover { background: #555; } + .debug-panel pre { margin: 0; padding: 0.5rem; - max-height: 150px; + flex: 1; overflow-y: auto; - font-family: monospace; - font-size: 0.75rem; + font-family: 'SF Mono', Monaco, Consolas, monospace; + font-size: 0.7rem; color: #0f0; white-space: pre-wrap; word-break: break-all; @@ -620,3 +657,51 @@ background: rgba(239, 68, 68, 0.2) !important; color: #ef4444 !important; } + +/* === Mobile responsive === */ +@media (max-width: 640px) { + .chat-header { + padding: 0.5rem 0.75rem; + gap: 0.5rem; + } + .chat-header h2 { font-size: 1rem; } + .model-badge { font-size: 0.7rem; padding: 0.15rem 0.35rem; } + .session-id-badge { font-size: 0.65rem; padding: 0.15rem 0.35rem; } + .resumed-badge { font-size: 0.55rem; } + .typing-indicator { font-size: 0.85rem; } + + .messages { + padding: 0.5rem; + gap: 0.5rem; + } + .message { max-width: 95%; gap: 0.4rem; } + .message-avatar { width: 28px; height: 28px; font-size: 0.9rem; } + .message-text { padding: 0.5rem 0.65rem; font-size: 0.85rem; line-height: 1.5; } + .message-time { font-size: 0.65rem; } + + ::deep .markdown-body pre { padding: 0.5rem; font-size: 0.75rem; } + ::deep .markdown-body code { font-size: 0.8em; padding: 0.1em 0.25em; } + + .reasoning-block { max-width: 95%; } + .reasoning-header { padding: 0.3rem 0.6rem; font-size: 0.75rem; } + .reasoning-content { padding: 0.4rem 0.6rem; font-size: 0.8rem; } + + .tool-card { max-width: 95%; } + .tool-header { padding: 0.3rem 0.6rem; font-size: 0.75rem; } + .tool-status { font-size: 0.7rem; } + .tool-result-content { padding: 0.4rem 0.6rem; font-size: 0.7rem; } + .tool-result-toggle { padding: 0.25rem 0.6rem; font-size: 0.65rem; } + + .task-complete-card { font-size: 0.75rem; padding: 0.25rem 0.5rem; max-width: 95%; } + .error-card { font-size: 0.8rem; padding: 0.4rem 0.6rem; max-width: 95%; } + .intent-pill { font-size: 0.7rem; padding: 0.2rem 0.5rem; } + + .input-area { padding: 0.4rem 0.5rem 0.75rem; gap: 0.3rem; } + .input-area textarea { font-size: 0.85rem; min-height: 32px; padding: 0.35rem 0.5rem; } + .input-area .input-row button { padding: 0.35rem 0.6rem; } + .input-status-bar { font-size: 0.65rem; gap: 0.5rem; padding-bottom: 0.5rem; } + .plan-icon-toggle { font-size: 0.65rem; } + + .queue-bar { padding: 0.3rem 0.5rem; font-size: 0.7rem; } + .error-bar { font-size: 0.75rem; padding: 0.3rem 0.5rem; } +} From 56b23ccbe2cff99c7723d792a81710f1ae3ba710 Mon Sep 17 00:00:00 2001 From: redth Date: Fri, 6 Feb 2026 13:08:46 -0500 Subject: [PATCH 2/2] Add local chat DB and message UI enhancements Introduce SQLite-backed chat persistence and several UI/UX improvements. - Add sqlite-net-pcl and SQLitePCLRaw.bundle_green package references. - New Services/ChatDatabase.cs: SQLite async store for ChatMessageEntity with helpers to get, page, bulk insert, update, and clear session messages. - Register ChatDatabase as a singleton in MauiProgram. - Integrate ChatDatabase into CopilotService: load history from DB (fallback to events.jsonl), bulk-migrate parsed history to DB, and write-through new messages and tool/assistant completions. Also improve events.jsonl parsing to better restore assistant, reasoning, and tool messages and add debug logging for tool results. - Components/Pages/Home.razor: implement incrementally visible message window (Load more), VisibleHistory helper, reset window on session switch, auto-clear textarea after send, Inspect DOM debug action, markdown/image rendering improvements with image and markdown caches and FileToDataUri support to show local image results inline. - Styles and JS: add styles for load-more, image/tool result layout and responsive toast adjustments (wwwroot/app.css), and add window.inspectMessages helper for DOM inspection (wwwroot/index.html). These changes enable fast startup by loading persisted history from a local DB and improve message rendering, image embedding, and debugging tools in the UI. --- AutoPilot.App.csproj | 2 + Components/Pages/Home.razor | 126 ++++++++++++++++++- Components/Pages/Home.razor.css | 83 +++++++++++-- MauiProgram.cs | 1 + Services/ChatDatabase.cs | 214 ++++++++++++++++++++++++++++++++ Services/CopilotService.cs | 176 +++++++++++++++++++------- wwwroot/app.css | 17 +++ wwwroot/index.html | 24 ++++ 8 files changed, 582 insertions(+), 61 deletions(-) create mode 100644 Services/ChatDatabase.cs diff --git a/AutoPilot.App.csproj b/AutoPilot.App.csproj index dbf473b1a1..e637f24fb7 100644 --- a/AutoPilot.App.csproj +++ b/AutoPilot.App.csproj @@ -72,6 +72,8 @@ + + diff --git a/Components/Pages/Home.razor b/Components/Pages/Home.razor index b65462b01b..e582972f6f 100644 --- a/Components/Pages/Home.razor +++ b/Components/Pages/Home.razor @@ -51,7 +51,15 @@ } else { - @foreach (var message in activeSession.History.ToList()) + @if (HasMoreMessages) + { + + } + + @foreach (var message in VisibleHistory) { @switch (message.MessageType) { @@ -125,7 +133,13 @@
@if (message.IsComplete && !string.IsNullOrEmpty(message.Content) && !IsUnusableResult(message.Content)) { - @if (LineCount(message.Content) <= 5) + @if (GetImagePath(message.Content) is string imgPath && FileToDataUri(imgPath) is string dataUri) + { +
+ @System.IO.Path.GetFileName(imgPath) +
+ } + else if (LineCount(message.Content) <= 5) { 
@TruncateResult(message.Content)
@@ -261,6 +275,7 @@ Debug Log
+
@@ -291,6 +306,28 @@ private string? _redirectTo; private bool _needsScroll = true; private bool shouldPreventDefault; + private int visibleMessageCount = 50; + private static readonly Dictionary _imageCache = new(); + private static readonly Dictionary _markdownCache = new(); + + private List VisibleHistory + { + get + { + if (activeSession == null) return new(); + var all = activeSession.History; + if (all.Count <= visibleMessageCount) return all.ToList(); + return all.Skip(all.Count - visibleMessageCount).ToList(); + } + } + + private bool HasMoreMessages => activeSession != null && activeSession.History.Count > visibleMessageCount; + + private void LoadMoreMessages() + { + visibleMessageCount += 50; + StateHasChanged(); + } protected override async Task OnInitializedAsync() { @@ -489,7 +526,10 @@ var prev = activeSession?.Name; activeSession = CopilotService.GetActiveSession(); if (activeSession?.Name != prev) + { _needsScroll = true; + visibleMessageCount = 50; // Reset window when switching sessions + } InvokeAsync(async () => { StateHasChanged(); @@ -529,6 +569,8 @@ { shouldPreventDefault = true; await SendMessage(); + // Force-clear via JS to remove any residual newline + await JS.InvokeVoidAsync("eval", "document.querySelector('.input-row textarea').value = ''"); } else { @@ -583,6 +625,13 @@ await JS.InvokeVoidAsync("eval", $"navigator.clipboard.writeText('{sessionId}')"); } + private async Task InspectDom() + { + var result = await JS.InvokeAsync("inspectMessages"); + debugLog += $"\n[DOM Inspect]\n{result}\n"; + StateHasChanged(); + } + private string GetInputPlaceholder() { if (isPlanMode) return "Plan mode: describe what you want planned..."; @@ -596,10 +645,35 @@ return text.Length > maxLen ? text[..maxLen] + "…" : text; } + private static readonly System.Text.RegularExpressions.Regex ImagePathRegex = new( + @"(? + { + var path = match.Value; + var dataUri = FileToDataUri(path); + if (dataUri != null) + return $"\"{System.IO.Path.GetFileName(path)}\""; + return match.Value; + }); + + // Only cache completed (non-streaming) content — limit cache size + if (_markdownCache.Count < 500) + _markdownCache[key] = html; + + return html; + } catch { return System.Net.WebUtility.HtmlEncode(content).Replace("\n", "
"); } } @@ -652,6 +726,52 @@ return false; } + private static readonly string[] ImageExtensions = { ".png", ".jpg", ".jpeg", ".gif", ".webp", ".svg", ".bmp", ".tiff" }; + + private static string? GetImagePath(string? content) + { + if (string.IsNullOrWhiteSpace(content)) return null; + var trimmed = content.Trim(); + foreach (var ext in ImageExtensions) + { + var idx = trimmed.LastIndexOf(ext, StringComparison.OrdinalIgnoreCase); + if (idx < 0) continue; + var endIdx = idx + ext.Length; + var pathStart = trimmed.LastIndexOf(' ', idx) + 1; + if (pathStart < 0) pathStart = 0; + var path = trimmed[pathStart..endIdx]; + if (path.StartsWith('/') && System.IO.File.Exists(path)) + return path; + } + return null; + } + + private static string? FileToDataUri(string path) + { + if (_imageCache.TryGetValue(path, out var cached)) return cached; + try + { + if (!System.IO.File.Exists(path)) return null; + var bytes = System.IO.File.ReadAllBytes(path); + var ext = System.IO.Path.GetExtension(path).ToLowerInvariant(); + var mime = ext switch + { + ".png" => "image/png", + ".jpg" or ".jpeg" => "image/jpeg", + ".gif" => "image/gif", + ".webp" => "image/webp", + ".svg" => "image/svg+xml", + ".bmp" => "image/bmp", + ".tiff" or ".tif" => "image/tiff", + _ => "application/octet-stream" + }; + var dataUri = $"data:{mime};base64,{Convert.ToBase64String(bytes)}"; + _imageCache[path] = dataUri; + return dataUri; + } + catch { return null; } + } + private static string FormatTokenCount(int count) => count >= 1000 ? $"{count / 1000}k" : count.ToString(); diff --git a/Components/Pages/Home.razor.css b/Components/Pages/Home.razor.css index f31189e210..54729ab0d1 100644 --- a/Components/Pages/Home.razor.css +++ b/Components/Pages/Home.razor.css @@ -93,11 +93,32 @@ color: rgba(255,255,255,0.5); } +.load-more-btn { + align-self: center; + padding: 0.4rem 1rem; + background: rgba(255,255,255,0.06); + border: 1px solid rgba(255,255,255,0.15); + border-radius: 6px; + color: rgba(255,255,255,0.6); + font-size: 0.8rem; + cursor: pointer; + flex-shrink: 0; + display: flex; + align-items: center; + gap: 0.4rem; +} + +.load-more-btn:hover { + background: rgba(255,255,255,0.1); + color: rgba(255,255,255,0.85); +} + /* === Messages === */ .message { display: flex; gap: 0.75rem; max-width: 85%; + flex-shrink: 0; } .message.user { @@ -123,6 +144,8 @@ display: flex; flex-direction: column; gap: 0.25rem; + min-width: 0; + flex: 1; } .message-text { @@ -224,12 +247,32 @@ font-weight: 600; } +::deep .markdown-body img { + max-width: 100%; + height: auto; + border-radius: 8px; + margin: 0.5rem 0; + display: block; +} + +::deep .markdown-body p > img:only-child { + margin: 0; +} + +::deep .markdown-body video { + max-width: 100%; + border-radius: 8px; + margin: 0.5rem 0; +} + /* === Reasoning blocks === */ .reasoning-block { background: rgba(139, 92, 246, 0.08); border: 1px solid rgba(139, 92, 246, 0.25); border-radius: 8px; - max-width: 90%; + min-width: 0; + align-self: stretch; + flex-shrink: 0; overflow: hidden; } @@ -284,7 +327,9 @@ .tool-card { border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); - max-width: 90%; + min-width: 0; + align-self: stretch; + flex-shrink: 0; overflow: hidden; background: rgba(255,255,255,0.04); } @@ -334,8 +379,10 @@ color: rgba(255,255,255,0.6); white-space: pre-wrap; word-break: break-word; + overflow-wrap: break-word; max-height: 200px; overflow-y: auto; + overflow-x: hidden; font-family: 'SF Mono', Monaco, Consolas, monospace; } @@ -346,6 +393,18 @@ -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%); } +.tool-image-result { + padding: 0.5rem; + border-top: 1px solid rgba(255,255,255,0.08); +} + +.tool-image-result img { + max-width: 100%; + height: auto; + border-radius: 6px; + display: block; +} + /* === Task complete card === */ .task-complete-card { display: flex; @@ -355,8 +414,10 @@ background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.25); border-radius: 6px; - max-width: 90%; font-size: 0.85rem; + min-width: 0; + align-self: stretch; + flex-shrink: 0; } .task-complete-text { @@ -373,8 +434,10 @@ background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 8px; - max-width: 90%; font-size: 0.9rem; + min-width: 0; + align-self: stretch; + flex-shrink: 0; } .error-icon { flex-shrink: 0; } @@ -519,10 +582,9 @@ .debug-panel { position: fixed; bottom: 80px; + left: 10px; right: 10px; - width: 450px; - max-width: calc(100vw - 20px); - max-height: 250px; + max-height: 300px; background: rgba(0,0,0,0.92); border: 1px solid #333; border-radius: 8px; @@ -682,18 +744,17 @@ ::deep .markdown-body pre { padding: 0.5rem; font-size: 0.75rem; } ::deep .markdown-body code { font-size: 0.8em; padding: 0.1em 0.25em; } - .reasoning-block { max-width: 95%; } .reasoning-header { padding: 0.3rem 0.6rem; font-size: 0.75rem; } .reasoning-content { padding: 0.4rem 0.6rem; font-size: 0.8rem; } - .tool-card { max-width: 95%; } + .tool-card { min-width: 200px; } .tool-header { padding: 0.3rem 0.6rem; font-size: 0.75rem; } .tool-status { font-size: 0.7rem; } .tool-result-content { padding: 0.4rem 0.6rem; font-size: 0.7rem; } .tool-result-toggle { padding: 0.25rem 0.6rem; font-size: 0.65rem; } - .task-complete-card { font-size: 0.75rem; padding: 0.25rem 0.5rem; max-width: 95%; } - .error-card { font-size: 0.8rem; padding: 0.4rem 0.6rem; max-width: 95%; } + .task-complete-card { font-size: 0.75rem; padding: 0.25rem 0.5rem; } + .error-card { font-size: 0.8rem; padding: 0.4rem 0.6rem; } .intent-pill { font-size: 0.7rem; padding: 0.2rem 0.5rem; } .input-area { padding: 0.4rem 0.5rem 0.75rem; gap: 0.3rem; } diff --git a/MauiProgram.cs b/MauiProgram.cs index e286c201ad..f3a09a2fb0 100644 --- a/MauiProgram.cs +++ b/MauiProgram.cs @@ -19,6 +19,7 @@ public static MauiApp CreateMauiApp() // Register CopilotService as singleton so state is shared across components builder.Services.AddSingleton(); + builder.Services.AddSingleton(); #if DEBUG builder.Services.AddBlazorWebViewDeveloperTools(); diff --git a/Services/ChatDatabase.cs b/Services/ChatDatabase.cs new file mode 100644 index 0000000000..4b67c42074 --- /dev/null +++ b/Services/ChatDatabase.cs @@ -0,0 +1,214 @@ +using SQLite; +using AutoPilot.App.Models; + +namespace AutoPilot.App.Services; + +public class ChatMessageEntity +{ + [PrimaryKey, AutoIncrement] + public int Id { get; set; } + + [Indexed] + public string SessionId { get; set; } = ""; + + public int OrderIndex { get; set; } + + public string MessageType { get; set; } = "User"; // User, Assistant, Reasoning, ToolCall, Error + + public string Content { get; set; } = ""; + + public string? ToolName { get; set; } + public string? ToolCallId { get; set; } + public bool IsComplete { get; set; } = true; + public bool IsSuccess { get; set; } + public string? ReasoningId { get; set; } + + public DateTime Timestamp { get; set; } + + // Cached rendered HTML for assistant markdown messages + public string? RenderedHtml { get; set; } + + // Cached base64 data URI for image tool results + public string? ImageDataUri { get; set; } + + public ChatMessage ToChatMessage() + { + var type = Enum.TryParse(MessageType, out var mt) ? mt : ChatMessageType.User; + var role = type == ChatMessageType.User ? "user" : "assistant"; + + var msg = new ChatMessage(role, Content, Timestamp, type) + { + ToolName = ToolName, + ToolCallId = ToolCallId, + IsComplete = IsComplete, + IsSuccess = IsSuccess, + IsCollapsed = type is ChatMessageType.ToolCall or ChatMessageType.Reasoning, + ReasoningId = ReasoningId + }; + return msg; + } + + public static ChatMessageEntity FromChatMessage(ChatMessage msg, string sessionId, int orderIndex) + { + return new ChatMessageEntity + { + SessionId = sessionId, + OrderIndex = orderIndex, + MessageType = msg.MessageType.ToString(), + Content = msg.Content, + ToolName = msg.ToolName, + ToolCallId = msg.ToolCallId, + IsComplete = msg.IsComplete, + IsSuccess = msg.IsSuccess, + ReasoningId = msg.ReasoningId, + Timestamp = msg.Timestamp + }; + } +} + +public class ChatDatabase +{ + private SQLiteAsyncConnection? _db; + private readonly string _dbPath; + + public ChatDatabase() + { + _dbPath = Path.Combine( + Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), + "AutoPilot", + "chat_history.db"); + } + + private async Task GetConnectionAsync() + { + if (_db != null) return _db; + + var dir = Path.GetDirectoryName(_dbPath)!; + if (!Directory.Exists(dir)) + Directory.CreateDirectory(dir); + + _db = new SQLiteAsyncConnection(_dbPath); + await _db.CreateTableAsync(); + + // Create index for fast session + order lookups + await _db.ExecuteAsync( + "CREATE INDEX IF NOT EXISTS idx_session_order ON ChatMessageEntity (SessionId, OrderIndex)"); + + return _db; + } + + /// + /// Check if a session has any stored messages. + /// + public async Task HasMessagesAsync(string sessionId) + { + var db = await GetConnectionAsync(); + var count = await db.ExecuteScalarAsync( + "SELECT COUNT(*) FROM ChatMessageEntity WHERE SessionId = ?", sessionId); + return count > 0; + } + + /// + /// Get total message count for a session. + /// + public async Task GetMessageCountAsync(string sessionId) + { + var db = await GetConnectionAsync(); + return await db.ExecuteScalarAsync( + "SELECT COUNT(*) FROM ChatMessageEntity WHERE SessionId = ?", sessionId); + } + + /// + /// Load a page of messages (newest first by default, returned in chronological order). + /// + public async Task> GetMessagesAsync(string sessionId, int limit = 50, int offset = 0) + { + var db = await GetConnectionAsync(); + var total = await GetMessageCountAsync(sessionId); + + // We want the LAST `limit` messages starting from offset from the end + var skipFromStart = Math.Max(0, total - offset - limit); + var take = Math.Min(limit, total - offset); + + if (take <= 0) return new List(); + + var entities = await db.QueryAsync( + "SELECT * FROM ChatMessageEntity WHERE SessionId = ? ORDER BY OrderIndex ASC LIMIT ? OFFSET ?", + sessionId, take, skipFromStart); + + return entities.Select(e => e.ToChatMessage()).ToList(); + } + + /// + /// Load ALL messages for a session (for smaller sessions or when needed). + /// + public async Task> GetAllMessagesAsync(string sessionId) + { + var db = await GetConnectionAsync(); + var entities = await db.Table() + .Where(e => e.SessionId == sessionId) + .OrderBy(e => e.OrderIndex) + .ToListAsync(); + + return entities.Select(e => e.ToChatMessage()).ToList(); + } + + /// + /// Append a single message to a session's history. + /// + public async Task AddMessageAsync(string sessionId, ChatMessage msg) + { + var db = await GetConnectionAsync(); + var maxOrder = await db.ExecuteScalarAsync( + "SELECT COALESCE(MAX(OrderIndex), -1) FROM ChatMessageEntity WHERE SessionId = ?", sessionId); + + var entity = ChatMessageEntity.FromChatMessage(msg, sessionId, maxOrder + 1); + await db.InsertAsync(entity); + return entity.Id; + } + + /// + /// Update a tool call message when it completes. + /// + public async Task UpdateToolCompleteAsync(string sessionId, string toolCallId, string content, bool isSuccess) + { + var db = await GetConnectionAsync(); + await db.ExecuteAsync( + "UPDATE ChatMessageEntity SET Content = ?, IsComplete = 1, IsSuccess = ? WHERE SessionId = ? AND ToolCallId = ?", + content, isSuccess, sessionId, toolCallId); + } + + /// + /// Update reasoning message content (appending delta text). + /// + public async Task UpdateReasoningContentAsync(string sessionId, string reasoningId, string content, bool isComplete) + { + var db = await GetConnectionAsync(); + await db.ExecuteAsync( + "UPDATE ChatMessageEntity SET Content = ?, IsComplete = ? WHERE SessionId = ? AND ReasoningId = ?", + content, isComplete, sessionId, reasoningId); + } + + /// + /// Bulk insert messages from events.jsonl parsing (for initial migration). + /// + public async Task BulkInsertAsync(string sessionId, List messages) + { + var db = await GetConnectionAsync(); + + // Clear existing messages for this session first + await db.ExecuteAsync("DELETE FROM ChatMessageEntity WHERE SessionId = ?", sessionId); + + var entities = messages.Select((m, i) => ChatMessageEntity.FromChatMessage(m, sessionId, i)).ToList(); + await db.InsertAllAsync(entities); + } + + /// + /// Clear all messages for a session. + /// + public async Task ClearSessionAsync(string sessionId) + { + var db = await GetConnectionAsync(); + await db.ExecuteAsync("DELETE FROM ChatMessageEntity WHERE SessionId = ?", sessionId); + } +} diff --git a/Services/CopilotService.cs b/Services/CopilotService.cs index 32869d9ac8..ccd3568cc9 100644 --- a/Services/CopilotService.cs +++ b/Services/CopilotService.cs @@ -9,6 +9,7 @@ namespace AutoPilot.App.Services; public class CopilotService : IAsyncDisposable { private readonly ConcurrentDictionary _sessions = new(); + private readonly ChatDatabase _chatDb; private CopilotClient? _client; private string? _activeSessionName; private SynchronizationContext? _syncContext; @@ -47,6 +48,12 @@ private static string FindProjectDir() public string? SystemInstructions { get; set; } public bool IsInitialized { get; private set; } public string? ActiveSessionName => _activeSessionName; + public ChatDatabase ChatDb => _chatDb; + + public CopilotService(ChatDatabase chatDb) + { + _chatDb = chatDb; + } // Debug info public string LastDebugMessage { get; private set; } = ""; @@ -213,10 +220,8 @@ private List LoadHistoryFromDisk(string sessionId) try { - string? lastUserMessage = null; - DateTime lastUserTimestamp = DateTime.Now; - var assistantResponses = new List(); - DateTime lastAssistantTimestamp = DateTime.Now; + // Track tool calls by ID so we can update them when complete + var toolCallMessages = new Dictionary(); foreach (var line in File.ReadLines(eventsFile)) { @@ -233,58 +238,92 @@ private List LoadHistoryFromDisk(string sessionId) if (root.TryGetProperty("timestamp", out var tsEl)) DateTime.TryParse(tsEl.GetString(), out timestamp); - if (type == "user.message") + switch (type) { - // Before processing new user message, flush any pending assistant responses - if (lastUserMessage != null) + case "user.message": { - history.Add(new ChatMessage("user", lastUserMessage, lastUserTimestamp)); - if (assistantResponses.Count > 0) + if (data.TryGetProperty("content", out var userContent)) { - var fullResponse = string.Join("\n\n", assistantResponses); - if (!string.IsNullOrEmpty(fullResponse)) - history.Add(new ChatMessage("assistant", fullResponse, lastAssistantTimestamp)); - assistantResponses.Clear(); + var content = userContent.GetString(); + if (!string.IsNullOrEmpty(content)) + { + var msg = ChatMessage.UserMessage(content); + msg.Timestamp = timestamp; + history.Add(msg); + } } + break; } - - // Start tracking new user message - if (data.TryGetProperty("content", out var userContent)) + + case "assistant.message": { - lastUserMessage = userContent.GetString(); - lastUserTimestamp = timestamp; + // Add reasoning if present + if (data.TryGetProperty("reasoningText", out var reasoningEl)) + { + var reasoning = reasoningEl.GetString(); + if (!string.IsNullOrEmpty(reasoning)) + { + var msg = ChatMessage.ReasoningMessage("restored"); + msg.Content = reasoning; + msg.IsComplete = true; + msg.IsCollapsed = true; + msg.Timestamp = timestamp; + history.Add(msg); + } + } + + // Add assistant text content (skip if only tool requests with no text) + if (data.TryGetProperty("content", out var assistantContent)) + { + var content = assistantContent.GetString()?.Trim(); + if (!string.IsNullOrEmpty(content)) + { + var msg = ChatMessage.AssistantMessage(content); + msg.Timestamp = timestamp; + history.Add(msg); + } + } + break; } - } - else if (type == "assistant.message") - { - // Check if this message has tool requests (skip those, they're just "thinking") - bool hasToolRequests = data.TryGetProperty("toolRequests", out var tools) && - tools.ValueKind == JsonValueKind.Array && - tools.GetArrayLength() > 0; - - if (data.TryGetProperty("content", out var assistantContent)) + + case "tool.execution_start": + { + var toolName = data.TryGetProperty("toolName", out var tn) ? tn.GetString() ?? "" : ""; + var toolCallId = data.TryGetProperty("toolCallId", out var tc) ? tc.GetString() : null; + + // Skip report_intent — it's noise in history + if (toolName == "report_intent") break; + + var msg = ChatMessage.ToolCallMessage(toolName, toolCallId); + msg.Timestamp = timestamp; + history.Add(msg); + if (toolCallId != null) + toolCallMessages[toolCallId] = msg; + break; + } + + case "tool.execution_complete": { - var content = assistantContent.GetString(); - if (!string.IsNullOrEmpty(content) && !hasToolRequests) + var toolCallId = data.TryGetProperty("toolCallId", out var tc) ? tc.GetString() : null; + if (toolCallId != null && toolCallMessages.TryGetValue(toolCallId, out var msg)) { - assistantResponses.Add(content); - lastAssistantTimestamp = timestamp; + msg.IsComplete = true; + msg.IsSuccess = data.TryGetProperty("success", out var s) && s.GetBoolean(); + msg.IsCollapsed = true; + + if (data.TryGetProperty("result", out var result)) + { + // Prefer detailedContent, fall back to content + var content = result.TryGetProperty("detailedContent", out var dc) ? dc.GetString() : null; + if (string.IsNullOrEmpty(content) && result.TryGetProperty("content", out var c)) + content = c.GetString(); + msg.Content = content ?? ""; + } } + break; } } } - - // Flush final turn - if (lastUserMessage != null) - { - history.Add(new ChatMessage("user", lastUserMessage, lastUserTimestamp)); - if (assistantResponses.Count > 0) - { - var fullResponse = string.Join("\n\n", assistantResponses); - if (!string.IsNullOrEmpty(fullResponse)) - history.Add(new ChatMessage("assistant", fullResponse, lastAssistantTimestamp)); - } - } } catch { @@ -308,8 +347,21 @@ public async Task ResumeSessionAsync(string sessionId, string if (_sessions.ContainsKey(displayName)) throw new InvalidOperationException($"Session '{displayName}' already exists."); - // Load history from disk before resuming - var history = LoadHistoryFromDisk(sessionId); + // Load history: try DB first, fall back to parsing events.jsonl + List history; + if (await _chatDb.HasMessagesAsync(sessionId)) + { + history = await _chatDb.GetAllMessagesAsync(sessionId); + } + else + { + history = LoadHistoryFromDisk(sessionId); + if (history.Count > 0) + { + // Persist to DB for future fast loading + await _chatDb.BulkInsertAsync(sessionId, history); + } + } // Resume the session using the SDK var copilotSession = await _client.ResumeSessionAsync(sessionId, cancellationToken: cancellationToken); @@ -492,6 +544,26 @@ void Invoke(Action action) var resultStr = FormatToolResult(toolDone.Data.Result); var hasError = toolDone.Data.Error != null; + // Log raw result type for debugging + var rawResult = toolDone.Data.Result; + if (rawResult != null) + { + var resultType = rawResult.GetType(); + Invoke(() => OnDebug?.Invoke($"[ToolResult] {completeToolName} callId={completeCallId} type={resultType.FullName}")); + // Log all properties + foreach (var prop in resultType.GetProperties()) + { + try + { + var val = prop.GetValue(rawResult); + var valStr = val?.ToString() ?? "null"; + if (valStr.Length > 200) valStr = valStr[..200] + "..."; + Invoke(() => OnDebug?.Invoke($" .{prop.Name} = {valStr}")); + } + catch { } + } + } + // Skip filtered tools if (completeToolName != null && FilteredTools.Contains(completeToolName)) break; @@ -584,7 +656,8 @@ private static string FormatToolResult(object? result) try { var resultType = result.GetType(); - foreach (var propName in new[] { "Content", "content", "Message", "message", "Text", "text", "Value", "value" }) + // Prefer DetailedContent (has richer info like file paths) over Content + foreach (var propName in new[] { "DetailedContent", "detailedContent", "Content", "content", "Message", "message", "Text", "text", "Value", "value" }) { var prop = resultType.GetProperty(propName); if (prop != null) @@ -605,8 +678,13 @@ private void CompleteResponse(SessionState state) var response = state.CurrentResponse.ToString(); if (!string.IsNullOrEmpty(response)) { - state.Info.History.Add(new ChatMessage("assistant", response, DateTime.Now)); + var msg = new ChatMessage("assistant", response, DateTime.Now); + state.Info.History.Add(msg); state.Info.MessageCount = state.Info.History.Count; + + // Write-through to DB + if (!string.IsNullOrEmpty(state.Info.SessionId)) + _ = _chatDb.AddMessageAsync(state.Info.SessionId, msg); } state.ResponseCompletion?.TrySetResult(response); state.CurrentResponse.Clear(); @@ -655,6 +733,10 @@ public async Task SendPromptAsync(string sessionName, string prompt, Can state.Info.MessageCount = state.Info.History.Count; OnStateChanged?.Invoke(); + // Write-through to DB + if (!string.IsNullOrEmpty(state.Info.SessionId)) + _ = _chatDb.AddMessageAsync(state.Info.SessionId, state.Info.History.Last()); + Console.WriteLine($"[DEBUG] Sending prompt to session '{sessionName}': {prompt.Substring(0, Math.Min(50, prompt.Length))}..."); try diff --git a/wwwroot/app.css b/wwwroot/app.css index ae7e3915b6..830f5b6e30 100644 --- a/wwwroot/app.css +++ b/wwwroot/app.css @@ -127,3 +127,20 @@ h1:focus { .toast-notification strong { color: #48bb78; } + +@media (max-width: 640px) { + .toast-notification { + top: 10px; + bottom: auto; + right: 10px; + left: 10px; + max-width: none; + padding: 10px 14px; + font-size: 0.8rem; + border-radius: 8px; + transform: translateY(-20px); + } + .toast-notification.show { + transform: translateY(0); + } +} diff --git a/wwwroot/index.html b/wwwroot/index.html index 5ae313a27b..a74d6ce6ea 100644 --- a/wwwroot/index.html +++ b/wwwroot/index.html @@ -50,6 +50,30 @@ return (element.scrollHeight - element.scrollTop - element.clientHeight) < 150; }; + window.inspectMessages = function() { + var msgs = document.querySelector('.messages'); + if (!msgs) return 'No .messages element'; + var children = msgs.children; + var result = 'Container: w=' + msgs.clientWidth + ' h=' + msgs.clientHeight + ' scrollW=' + msgs.scrollWidth + ', display=' + getComputedStyle(msgs).display + ', flexDir=' + getComputedStyle(msgs).flexDirection + ', alignItems=' + getComputedStyle(msgs).alignItems + '\n'; + for (var i = 0; i < Math.min(children.length, 30); i++) { + var c = children[i]; + var cs = getComputedStyle(c); + result += i + ': <' + c.tagName + '> class="' + c.className.substring(0, 50) + '" w=' + c.clientWidth + '/' + c.offsetWidth + ' h=' + c.clientHeight + '/' + c.offsetHeight + ' display=' + cs.display + ' maxW=' + cs.maxWidth + ' width=' + cs.width + ' alignSelf=' + cs.alignSelf + ' overflow=' + cs.overflow + '\n'; + } + var toolCards = document.querySelectorAll('.tool-card'); + if (toolCards.length > 0) { + result += '\n=== TOOL CARDS ===\n'; + toolCards.forEach(function(tc, i) { + var tcs = getComputedStyle(tc); + var parent = tc.parentElement; + var ps = parent ? getComputedStyle(parent) : null; + result += 'TC' + i + ': w=' + tc.clientWidth + '/' + tc.offsetWidth + ' h=' + tc.clientHeight + '/' + tc.offsetHeight + ' display=' + tcs.display + ' width=' + tcs.width + ' minW=' + tcs.minWidth + ' overflow=' + tcs.overflow + '\n'; + if (parent) result += ' parent: <' + parent.tagName + '> class="' + parent.className.substring(0, 40) + '" w=' + parent.clientWidth + ' display=' + ps.display + ' width=' + ps.width + '\n'; + }); + } + return result; + }; + window.showNotification = function(sessionName, summary) { // Play a sound try {