fix: more stuff moved into liveview

priv/ui/app.css

@@ -161,7 +161,7 @@ button {
 .window-titlebar-menu-dropdown {
   position: absolute;
   top: 30px;
-  left: 6px;
+  left: var(--bds-titlebar-menu-left, 6px);
   min-width: 210px;
   padding: 6px;
   display: flex;
@@ -2046,7 +2046,7 @@ button {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 14px;
+  padding: 12px;
 }
 
 .assistant-sidebar-header {
@@ -2086,10 +2086,10 @@ button {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  padding: 12px;
+  padding: 8px;
   border: 1px solid var(--vscode-panel-border);
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--vscode-sideBar-background) 78%, var(--vscode-editor-background));
+  border-radius: 6px;
+  background: var(--vscode-editorWidget-background, rgba(0, 0, 0, 0.2));
 }
 
 .assistant-sidebar-context-row {
@@ -2127,13 +2127,13 @@ button {
 
 .assistant-sidebar-prompt {
   width: 100%;
-  min-height: 112px;
+  min-height: 120px;
   resize: vertical;
   border: 1px solid var(--vscode-input-border);
-  border-radius: 10px;
+  border-radius: 6px;
   background: var(--vscode-input-background);
   color: var(--vscode-input-foreground);
-  padding: 10px 12px;
+  padding: 10px;
   font: inherit;
 }
 
@@ -2164,17 +2164,17 @@ button {
   gap: 6px;
   padding: 12px;
   border: 1px solid var(--vscode-panel-border);
-  border-radius: 10px;
+  border-radius: 6px;
   border-bottom-width: 1px;
-  background: color-mix(in srgb, var(--vscode-sideBar-background) 82%, var(--vscode-editor-background));
+  background: var(--vscode-editorWidget-background, rgba(0, 0, 0, 0.2));
 }
 
 .assistant-sidebar-message.user {
-  background: color-mix(in srgb, var(--vscode-list-hoverBackground) 76%, transparent);
+  background: var(--vscode-list-hoverBackground);
 }
 
 .assistant-sidebar-message.assistant {
-  background: color-mix(in srgb, var(--vscode-sideBar-background) 70%, var(--vscode-editor-background));
+  background: var(--vscode-editorWidget-background, rgba(0, 0, 0, 0.2));
 }
 
 .status-bar {
@@ -2216,6 +2216,55 @@ button {
   font-size: 12px;
 }
 
+.status-bar-item .task-message-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 300px;
+}
+
+.task-spinner {
+  width: 10px;
+  height: 10px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.panel-content {
+  padding: 8px;
+}
+
+.task-list {
+  gap: 4px;
+}
+
+.output-list,
+.git-log-list {
+  gap: 6px;
+}
+
+.task-entry {
+  padding: 8px;
+  border-bottom: none;
+  border-radius: 4px;
+  background-color: var(--vscode-sideBar-background);
+}
+
+.output-entry {
+  padding: 8px;
+  border-bottom: none;
+  border-radius: 4px;
+  background-color: var(--vscode-sideBar-background);
+  font-size: 12px;
+  color: var(--vscode-editor-foreground);
+}
+
 @media (max-width: 1100px) {
   .editor-frame {
     grid-template-columns: 1fr;

priv/ui/live.js

@@ -129,6 +129,28 @@ document.addEventListener("DOMContentLoaded", () => {
         this.syncStoredUiLanguage();
         this.destroyOverlaySync = syncTitlebarOverlayInsets();
 
+        this.syncTitlebarMenuAnchor = () => {
+          const titlebar = this.el.querySelector("[data-testid='window-titlebar']");
+          const dropdown = this.el.querySelector("[data-testid='window-titlebar-menu-dropdown']");
+          const openGroup = titlebar?.dataset.openMenuGroup;
+
+          if (!dropdown || !titlebar || !openGroup) {
+            return;
+          }
+
+          const button = this.getTitlebarMenuButtons().find((candidate) => candidate.dataset.menuGroup === openGroup);
+
+          if (!button) {
+            return;
+          }
+
+          const titlebarRect = titlebar.getBoundingClientRect();
+          const buttonRect = button.getBoundingClientRect();
+          const left = Math.max(6, Math.round(buttonRect.left - titlebarRect.left));
+
+          dropdown.style.setProperty("--bds-titlebar-menu-left", `${left}px`);
+        };
+
         this.handleMouseDown = (event) => {
           const handle = event.target.closest("[data-role='resize-handle']");
 
@@ -183,27 +205,6 @@ document.addEventListener("DOMContentLoaded", () => {
           }
         };
 
-        this.menuIsOpen = () => {
-          const titlebar = this.el.querySelector("[data-testid='window-titlebar']");
-          return Boolean(titlebar?.dataset.openMenuGroup);
-        };
-
-        this.handleTitlebarPointerDown = (event) => {
-          if (!this.menuIsOpen()) {
-            return;
-          }
-
-          if (event.target.closest("[data-testid='window-titlebar-menu-button']")) {
-            return;
-          }
-
-          if (event.target.closest("[data-testid='window-titlebar-menu-dropdown']")) {
-            return;
-          }
-
-          this.pushEvent("close_titlebar_menu", {});
-        };
-
         this.handleChange = (event) => {
           const select = event.target.closest(".status-bar-language-select");
 
@@ -237,17 +238,14 @@ document.addEventListener("DOMContentLoaded", () => {
           });
         };
 
-        this.handleEscapeKey = (event) => {
-          if (event.key === "Escape" && this.menuIsOpen()) {
-            this.pushEvent("close_titlebar_menu", {});
-          }
-        };
-
         window.addEventListener("bds:native-menu-action", this.handleNativeMenuAction);
         window.addEventListener("keydown", this.handleShortcutKeyDown, true);
-        window.addEventListener("keydown", this.handleEscapeKey, true);
-        window.addEventListener("pointerdown", this.handleTitlebarPointerDown, true);
         this.el.addEventListener("change", this.handleChange);
+        this.syncTitlebarMenuAnchor();
+      },
+
+      updated() {
+        this.syncTitlebarMenuAnchor();
       },
 
       destroyed() {
@@ -255,8 +253,6 @@ document.addEventListener("DOMContentLoaded", () => {
         this.el.removeEventListener("change", this.handleChange);
         window.removeEventListener("bds:native-menu-action", this.handleNativeMenuAction);
         window.removeEventListener("keydown", this.handleShortcutKeyDown, true);
-        window.removeEventListener("keydown", this.handleEscapeKey, true);
-        window.removeEventListener("pointerdown", this.handleTitlebarPointerDown, true);
         if (this.destroyOverlaySync) {
           this.destroyOverlaySync();
         }