feat: more work on UI cleanup

Co-authored-by: Copilot <copilot@github.com>

priv/ui/app.css

@@ -537,8 +537,33 @@ button {
 
 .tab-close {
   margin-left: auto;
-  font-size: 11px;
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  line-height: 1;
   color: var(--vscode-descriptionForeground);
+  border-radius: 4px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.tab-close:hover {
+  background-color: var(--vscode-toolbar-hoverBackground);
+  color: var(--vscode-tab-activeForeground);
+}
+
+.output-item-details {
+  margin: 4px 0 0;
+  padding: 8px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.03);
+  color: inherit;
+  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+  white-space: pre-wrap;
+  user-select: text;
 }
 
 .editor-shell {
@@ -936,16 +961,31 @@ button {
   gap: 8px;
 }
 
+.panel-tabs {
+  display: flex;
+  gap: 2px;
+}
+
 .panel-tab {
-  padding: 8px 10px;
-  border-radius: 999px;
   background: transparent;
-  color: var(--muted);
+  border: none;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--vscode-tab-inactiveForeground);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+}
+
+.panel-tab:hover {
+  color: var(--vscode-tab-activeForeground);
+  background: transparent;
 }
 
 .panel-tab.active {
-  background: var(--accent-soft);
-  color: var(--ink);
+  color: var(--vscode-tab-activeForeground);
+  border-bottom-color: var(--vscode-focusBorder);
+  background: transparent;
 }
 
 .assistant-content {
@@ -956,29 +996,42 @@ button {
 }
 
 .status-bar {
-  height: 34px;
+  height: 22px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 0 12px;
-  background: var(--status);
-  border-top: 1px solid var(--line);
+  background-color: var(--vscode-statusBar-background);
+  color: var(--vscode-statusBar-foreground);
+  font-size: 12px;
+  padding: 0 8px;
+  user-select: none;
+  flex-wrap: nowrap;
+  gap: 0;
+  border-top: none;
 }
 
 .status-bar-left,
 .status-bar-right {
   display: flex;
-  gap: 8px;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
   min-width: 0;
 }
 
 .status-bar-item {
-  max-width: 180px;
-  padding: 4px 8px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.06);
-  font-size: 11px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  height: 100%;
+  max-width: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-radius: 0;
+  background: transparent;
+  font-size: 12px;
 }
 
 @media (max-width: 1100px) {