ux: plan mode moved

web/app.js

@@ -50,9 +50,11 @@ const updateModalClose = document.getElementById("update-modal-close");
 const updateModalInstall = document.getElementById("update-modal-install");
 const updateModalReleases = document.getElementById("update-modal-releases");
 const plansRefreshButton = document.getElementById("plans-refresh");
+const plansCloseButton = document.getElementById("plans-close");
 const planForm = document.getElementById("plan-form");
 const plansStatusEl = document.getElementById("plans-status");
 const plansDashboardEl = document.getElementById("plans-dashboard");
+const plansRailListEl = document.getElementById("plans-rail-list");
 
 let ollamaOnline = true;
 let latestUpdate = null;
@@ -742,7 +744,6 @@ function toggleSidebarPanel(panelName) {
   const panels = {
     settings: { panel: settingsPanel, button: settingsToggle },
     memory: { panel: memoryPanel, button: memoryToggle },
-    plans: { panel: plansPanel, button: plansToggle },
     ollama: { panel: ollamaPanel, button: ollamaToggle },
   };
   const target = panels[panelName];
@@ -763,7 +764,6 @@ function toggleSidebarPanel(panelName) {
       checkForUpdate();
     }
     if (panelName === "memory") refreshMemory();
-    if (panelName === "plans") refreshPlans();
     if (panelName === "ollama") {
       refreshConfig();
       refreshOllamaStatus();
@@ -971,6 +971,19 @@ function closeNegotiationPanel() {
   negotiationStatusEl.textContent = "";
 }
 
+function openPlansPanel(openPlanId = null) {
+  if (!plansPanel) return;
+  plansPanel.hidden = false;
+  plansToggle?.setAttribute("aria-expanded", "true");
+  refreshPlans(openPlanId);
+}
+
+function closePlansPanel() {
+  if (!plansPanel) return;
+  plansPanel.hidden = true;
+  plansToggle?.setAttribute("aria-expanded", "false");
+}
+
 function renderNegotiationMessages(data) {
   negotiationMessagesEl.innerHTML = "";
   const items = Array.isArray(data) ? data : [data].filter(Boolean);
@@ -1062,13 +1075,47 @@ async function createPlan(event) {
 }
 
 async function refreshPlans(openPlanId = null) {
-  if (!plansDashboardEl) return;
+  if (!plansDashboardEl && !plansRailListEl) return;
   try {
     const response = await fetch("/api/plans");
     const result = await response.json();
-    await renderPlans(result.plans || [], openPlanId);
+    const plans = result.plans || [];
+    renderPlansRail(plans);
+    if (plansDashboardEl) await renderPlans(plans, openPlanId);
   } catch (error) {
-    plansDashboardEl.textContent = `Plans failed: ${fetchErrorMessage(error)}`;
+    if (plansDashboardEl) plansDashboardEl.textContent = `Plans failed: ${fetchErrorMessage(error)}`;
+    if (plansRailListEl) plansRailListEl.textContent = `Plans failed: ${fetchErrorMessage(error)}`;
+  }
+}
+
+function renderPlansRail(plans) {
+  if (!plansRailListEl) return;
+  plansRailListEl.innerHTML = "";
+  if (!plans.length) {
+    plansRailListEl.innerHTML = '<div class="pending-empty">No plans</div>';
+    return;
+  }
+  for (const plan of plans.slice(0, 5)) {
+    const row = document.createElement("button");
+    row.type = "button";
+    row.className = "plan-rail-item";
+    const title = document.createElement("span");
+    title.className = "plan-rail-title";
+    title.textContent = plan.title || "Untitled plan";
+    const status = document.createElement("span");
+    status.className = "plan-rail-status";
+    status.textContent = plan.status || "plan";
+    row.append(title, status);
+    row.addEventListener("click", () => openPlansPanel(plan.id));
+    plansRailListEl.appendChild(row);
+  }
+  if (plans.length > 5) {
+    const more = document.createElement("button");
+    more.type = "button";
+    more.className = "plan-rail-item";
+    more.textContent = `${plans.length - 5} more`;
+    more.addEventListener("click", () => openPlansPanel());
+    plansRailListEl.appendChild(more);
   }
 }
 
@@ -1385,9 +1432,13 @@ configRefreshButton?.addEventListener("click", refreshConfig);
 configForm?.addEventListener("submit", saveConfig);
 settingsToggle?.addEventListener("click", () => toggleSidebarPanel("settings"));
 memoryToggle?.addEventListener("click", () => toggleSidebarPanel("memory"));
-plansToggle?.addEventListener("click", () => toggleSidebarPanel("plans"));
+plansToggle?.addEventListener("click", () => {
+  if (plansPanel?.hidden) openPlansPanel();
+  else closePlansPanel();
+});
 ollamaToggle?.addEventListener("click", () => toggleSidebarPanel("ollama"));
 plansRefreshButton?.addEventListener("click", () => refreshPlans());
+plansCloseButton?.addEventListener("click", closePlansPanel);
 planForm?.addEventListener("submit", createPlan);
 ollamaForm?.addEventListener("submit", saveOllamaConfig);
 ollamaRefreshButton?.addEventListener("click", refreshOllamaStatus);

web/index.html

@@ -9,7 +9,7 @@
   </head>
   <body>
     <main class="shell">
-      <nav class="chat-rail collapsed" id="chat-rail" aria-label="Chats and inbox">
+      <nav class="chat-rail collapsed" id="chat-rail" aria-label="Chats, plans, and inbox">
         <div class="chat-rail-top">
           <button class="icon-button" id="chat-sidebar-toggle" type="button" title="Chats" aria-expanded="false">
             <i data-lucide="panel-left" aria-hidden="true"></i>
@@ -25,6 +25,15 @@
             <div class="rail-heading">Chats</div>
             <div class="chat-list" id="chat-list"></div>
           </section>
+          <section class="chat-nav-section">
+            <div class="rail-heading-row">
+              <div class="rail-heading">Plans</div>
+              <button class="rail-icon-button" id="plans-toggle" type="button" title="Plans" aria-expanded="false" aria-controls="plans-panel">
+                <i data-lucide="list-checks" aria-hidden="true"></i>
+              </button>
+            </div>
+            <div class="plans-rail-list" id="plans-rail-list"></div>
+          </section>
           <section class="chat-nav-section">
             <div class="rail-heading">Inbox</div>
             <div class="inbox-list" id="inbox-list"></div>
@@ -42,6 +51,7 @@
               <h1>TraderAI</h1>
               <p>Institutional marketplace intelligence for UEX operations</p>
             </div>
+            <span class="brand-short" aria-hidden="true">LBC</span>
           </div>
           <div class="status" id="status">Ready</div>
         </header>
@@ -69,10 +79,6 @@
               <i data-lucide="brain" aria-hidden="true"></i>
               <span>Memory</span>
             </button>
-            <button class="sidebar-tool-button" id="plans-toggle" type="button" aria-expanded="false" aria-controls="plans-panel" title="Plans">
-              <i data-lucide="list-checks" aria-hidden="true"></i>
-              <span>Plans</span>
-            </button>
             <button class="sidebar-tool-button" id="ollama-toggle" type="button" aria-expanded="false" aria-controls="ollama-panel" title="Ollama">
               <img class="sidebar-tool-image" src="/static/art/ollama-icon.svg" alt="" onerror="this.remove();">
               <i data-lucide="bot" aria-hidden="true"></i>
@@ -123,29 +129,6 @@
             <button class="danger-button" id="memory-clear" type="button">Clear Selected</button>
             <div id="memory-inspector" class="memory-inspector"></div>
           </div>
-          <div class="sidebar-panel" id="plans-panel" hidden>
-            <div class="section-title-row">
-              <h2>Plans</h2>
-              <button class="secondary small-button" id="plans-refresh" type="button">Refresh</button>
-            </div>
-            <form class="config-form" id="plan-form">
-              <label>Title<input id="plan-title" type="text" placeholder="Wikelo Idris parts"></label>
-              <label>Objective<input id="plan-objective" type="text" placeholder="Find and draft deals for the parts I list"></label>
-              <label>Kind
-                <select id="plan-kind">
-                  <option value="buying">Buying</option>
-                  <option value="custom">Custom</option>
-                </select>
-              </label>
-              <label>Items<textarea id="plan-items" rows="4" placeholder="One item per line, optionally: name | quantity | max unit price"></textarea></label>
-              <label>Instructions<textarea id="plan-instructions" rows="3" placeholder="Extra guidance for custom or buying plans"></textarea></label>
-              <label>Cron Cadence<input id="plan-cadence" type="text" placeholder="0 */6 * * *"></label>
-              <label>Message Tone<input id="plan-tone" type="text" placeholder="polite and concise"></label>
-              <button type="submit">Create Plan</button>
-              <div class="config-status" id="plans-status"></div>
-            </form>
-            <div class="plans-dashboard" id="plans-dashboard"></div>
-          </div>
           <div class="sidebar-panel" id="ollama-panel" hidden>
             <div class="section-title-row">
               <h2>Ollama</h2>
@@ -186,6 +169,41 @@
       </form>
       <div class="config-status" id="negotiation-status"></div>
     </div>
+    <div class="floating-panel plans-floating-panel" id="plans-panel" hidden>
+      <div class="floating-panel-header">
+        <div>
+          <p class="eyebrow">Continual work</p>
+          <h2>Plans</h2>
+        </div>
+        <div class="floating-panel-actions">
+          <button class="icon-button light" id="plans-refresh" type="button" title="Refresh plans">
+            <i data-lucide="refresh-cw" aria-hidden="true"></i>
+          </button>
+          <button class="icon-button light" id="plans-close" type="button" title="Close">
+            <i data-lucide="x" aria-hidden="true"></i>
+          </button>
+        </div>
+      </div>
+      <div class="plans-panel-body">
+        <form class="config-form" id="plan-form">
+          <label>Title<input id="plan-title" type="text" placeholder="Wikelo Idris parts"></label>
+          <label>Objective<input id="plan-objective" type="text" placeholder="Find and draft deals for the parts I list"></label>
+          <label>Kind
+            <select id="plan-kind">
+              <option value="buying">Buying</option>
+              <option value="custom">Custom</option>
+            </select>
+          </label>
+          <label>Items<textarea id="plan-items" rows="4" placeholder="One item per line, optionally: name | quantity | max unit price"></textarea></label>
+          <label>Instructions<textarea id="plan-instructions" rows="3" placeholder="Extra guidance for custom or buying plans"></textarea></label>
+          <label>Cron Cadence<input id="plan-cadence" type="text" placeholder="0 */6 * * *"></label>
+          <label>Message Tone<input id="plan-tone" type="text" placeholder="polite and concise"></label>
+          <button type="submit">Create Plan</button>
+          <div class="config-status" id="plans-status"></div>
+        </form>
+        <div class="plans-dashboard" id="plans-dashboard"></div>
+      </div>
+    </div>
     <div class="modal-backdrop" id="update-modal" hidden>
       <section class="update-modal-card">
         <div class="section-title-row">

web/styles.css

@@ -105,7 +105,7 @@ body::before {
 
 .chat-rail-content {
   display: grid;
-  grid-template-rows: minmax(0, 1fr) minmax(140px, 34%);
+  grid-template-rows: minmax(0, 1fr) minmax(92px, 20%) minmax(130px, 30%);
   gap: 16px;
   min-height: 0;
   padding-top: 16px;
@@ -131,8 +131,41 @@ body::before {
   text-transform: uppercase;
 }
 
+.rail-heading-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.rail-heading-row .rail-heading {
+  margin-bottom: 0;
+}
+
+.rail-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--line-strong);
+  border-radius: 8px;
+  background: #fff9e9;
+  color: var(--forest);
+  box-shadow: 0 8px 18px rgba(38, 58, 27, 0.08);
+}
+
+.rail-icon-button svg {
+  width: 15px;
+  height: 15px;
+}
+
 .chat-list,
-.inbox-list {
+.inbox-list,
+.plans-rail-list {
   display: grid;
   gap: 8px;
   max-height: calc(100% - 26px);
@@ -140,7 +173,8 @@ body::before {
 }
 
 .chat-item,
-.inbox-item {
+.inbox-item,
+.plan-rail-item {
   display: grid;
   align-items: center;
   gap: 6px;
@@ -159,13 +193,33 @@ body::before {
   grid-template-columns: minmax(0, 1fr) auto auto;
 }
 
+.plan-rail-item {
+  grid-template-columns: minmax(0, 1fr) auto;
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--line);
+  background: rgba(255, 250, 240, 0.78);
+  color: var(--brown);
+  font-family: Inter, "Segoe UI", Arial, sans-serif;
+  text-align: left;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.plan-rail-item:hover {
+  background: #edf3df;
+  color: var(--brown);
+  box-shadow: none;
+}
+
 .chat-item.active {
   border-color: rgba(52, 83, 38, 0.42);
   background: #edf3df;
 }
 
 .chat-title,
-.inbox-title {
+.inbox-title,
+.plan-rail-title {
   min-width: 0;
   overflow: hidden;
   color: var(--brown);
@@ -198,6 +252,22 @@ body::before {
   -webkit-box-orient: vertical;
 }
 
+.plan-rail-title {
+  white-space: nowrap;
+}
+
+.plan-rail-status {
+  min-width: 0;
+  padding: 3px 6px;
+  border: 1px solid rgba(52, 83, 38, 0.2);
+  border-radius: 999px;
+  background: #edf3df;
+  color: var(--forest);
+  font-size: 10px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
 .actions {
   padding: 28px;
   overflow: auto;
@@ -230,6 +300,10 @@ body::before {
   min-width: 0;
 }
 
+.brand-short {
+  display: none;
+}
+
 .logo-wrap {
   position: relative;
   display: grid;
@@ -869,6 +943,26 @@ button {
   line-height: 1.45;
 }
 
+.floating-panel-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.plans-floating-panel {
+  grid-template-rows: auto minmax(0, 1fr);
+  width: min(680px, calc(100vw - 28px));
+}
+
+.plans-panel-body {
+  display: grid;
+  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
+  gap: 16px;
+  min-height: 0;
+  padding: 16px;
+  overflow: auto;
+}
+
 button:hover {
   background: linear-gradient(180deg, #3d612c, #263e1b);
   box-shadow: 0 18px 34px rgba(31, 52, 22, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
@@ -926,8 +1020,10 @@ button.secondary {
 
 .sidebar-tool-buttons {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   justify-content: flex-end;
+  width: 100%;
+  min-width: 0;
   gap: 8px;
 }
 
@@ -935,9 +1031,10 @@ button.secondary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  flex: 0 1 42px;
   gap: 0;
   width: 42px;
-  min-width: 42px;
+  min-width: 36px;
   min-height: 42px;
   padding: 9px;
   overflow: hidden;
@@ -951,6 +1048,7 @@ button.secondary {
   white-space: nowrap;
   box-shadow: 0 10px 22px rgba(38, 58, 27, 0.08);
   transition:
+    flex-basis 180ms ease,
     width 180ms ease,
     gap 180ms ease,
     padding 180ms ease,
@@ -963,6 +1061,7 @@ button.secondary {
 
 .sidebar-tool-button:hover,
 .sidebar-tool-button:focus-visible {
+  flex-basis: 108px;
   width: 108px;
   gap: 7px;
   padding-inline: 12px;
@@ -1411,8 +1510,17 @@ pre {
 }
 
 @media (max-width: 620px) {
+  body {
+    background: var(--cream);
+  }
+
+  body::before {
+    display: none;
+  }
+
   .shell {
     gap: 14px;
+    grid-template-rows: minmax(0, 1fr) minmax(220px, 34vh);
     padding: 10px;
   }
 
@@ -1421,40 +1529,104 @@ pre {
     border-radius: 22px;
   }
 
+  .chat-rail {
+    position: fixed;
+    inset: 10px auto auto 10px;
+    z-index: 10;
+    width: min(320px, calc(100vw - 20px));
+    height: calc(100vh - 20px);
+    max-height: calc(100vh - 20px);
+  }
+
+  .chat-rail.collapsed {
+    width: 48px;
+    height: 48px;
+    min-height: 48px;
+    max-height: 48px;
+    padding: 4px;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .chat-rail.collapsed .chat-rail-top {
+    display: block;
+  }
+
+  .chat-rail.collapsed #new-chat {
+    display: none;
+  }
+
   .topbar {
-    align-items: flex-start;
+    display: flex;
-    grid-template-columns: 1fr;
+    align-items: center;
-    padding: 22px;
+    justify-content: center;
+    min-height: 68px;
+    padding: 10px 58px 10px 66px;
+    border-bottom-color: var(--line);
+    background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%);
   }
 
   .brand-block {
-    align-items: flex-start;
+    align-items: center;
+    justify-content: center;
+    gap: 9px;
+    min-width: 0;
   }
 
   .logo-wrap {
-    width: 58px;
+    width: 28px;
-    height: 58px;
+    height: 28px;
-    flex-basis: 58px;
+    flex: 0 0 28px;
-    border-radius: 18px;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    color: var(--brown);
+  }
+
+  .logo-wrap::before {
+    content: "";
+    display: block;
+    width: 28px;
+    height: 28px;
+    background: currentColor;
+    -webkit-mask: url("/static/art/LBC_Logo.png") center / contain no-repeat;
+    mask: url("/static/art/LBC_Logo.png") center / contain no-repeat;
   }
 
   .logo-wrap img {
-    width: 45px;
+    display: none;
-    height: 45px;
+  }
+
+  .brand-copy {
+    display: contents;
+  }
+
+  .brand-copy p,
+  .status {
+    display: none;
   }
 
   h1 {
-    font-size: 31px;
+    color: var(--brown);
+    font-size: 22px;
+    line-height: 1;
+    text-shadow: none;
   }
 
-  .eyebrow {
+  .brand-short {
-    font-size: 10px;
+    display: inline-flex;
-    letter-spacing: 0.08em;
+    align-items: center;
+    color: var(--brown);
+    font-family: "Playfair Display", Georgia, serif;
+    font-size: 18px;
+    font-weight: 800;
+    line-height: 1;
   }
 
   .messages,
-  .actions,
+  .actions {
-  .chat-rail {
     padding: 22px;
   }
 
@@ -1484,4 +1656,8 @@ pre {
   .message-phase {
     grid-column: 1;
   }
+
+  .plans-panel-body {
+    grid-template-columns: 1fr;
+  }
 }