PureWeen · Redth · Feb 6, 2026 · Feb 6, 2026 · Feb 6, 2026 · Feb 6, 2026
diff --git a/AutoPilot.App.csproj b/AutoPilot.App.csproj
@@ -72,6 +72,8 @@
         <PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Maui" Version="$(MauiVersion)" />
         <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="10.0.0" />
+        <PackageReference Include="sqlite-net-pcl" Version="*" />
+        <PackageReference Include="SQLitePCLRaw.bundle_green" Version="*" />
     </ItemGroup>
 
     <!-- Prevent linker from trimming SDK event types needed for pattern matching -->

diff --git a/Components/Layout/MainLayout.razor b/Components/Layout/MainLayout.razor
@@ -1,13 +1,36 @@
 @inherits LayoutComponentBase
 
 <div class="page">
-    <div class="sidebar">
+    <div class="sidebar desktop-only">
         <SessionSidebar />
     </div>
 
+    <div class="mobile-top-bar mobile-only">
+        <SessionSidebar IsMobileTopBar="true" OnToggleFlyout="ToggleFlyout" />
+    </div>
+
     <main>
         <article class="content">
             @Body
         </article>
     </main>
+
+    <div class="flyout-backdrop mobile-only @(flyoutOpen ? "open" : "")" @onclick="CloseFlyout"></div>
+    <div class="flyout-panel mobile-only @(flyoutOpen ? "open" : "")">
+        <SessionSidebar IsFlyoutPanel="true" OnToggleFlyout="CloseFlyout" OnSessionSelected="CloseFlyout" />
+    </div>
 </div>
+
+@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
@@ -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
diff --git 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
@@ -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; }
+}