feat(sidecars): add proxied sidecar tabs (#279)

## Summary
- add SideCar support across the server and UI, including proxied tabs,
picker/settings flows, and websocket-aware proxying
- unify top-level tab handling so workspace instances and SideCars share
the same tab model and navigation flows
- limit SideCars to port-based services only, removing server-managed
process control from the final API and UI

---------

Co-authored-by: Shantur <shantur@Mac.home>
Co-authored-by: Shantur <shantur@Shanturs-MacBook-Pro-M5.local>

packages/ui/src/components/instance-tabs.tsx

@@ -1,6 +1,5 @@
 import { Component, For, Show, createMemo } from "solid-js"
 import { Dynamic } from "solid-js/web"
-import type { Instance } from "../types/instance"
 import InstanceTab from "./instance-tab"
 import KeyboardHint from "./keyboard-hint"
 import { Plus, MonitorUp, Bell, BellOff, Settings } from "lucide-solid"
@@ -9,12 +8,13 @@ import { useI18n } from "../lib/i18n"
 import { isOsNotificationSupportedSync } from "../lib/os-notifications"
 import { useConfig } from "../stores/preferences"
 import { openSettings } from "../stores/settings-screen"
+import type { AppTabRecord } from "../stores/app-tabs"
 
 interface InstanceTabsProps {
-  instances: Map<string, Instance>
-  activeInstanceId: string | null
-  onSelect: (instanceId: string) => void
-  onClose: (instanceId: string) => void
+  tabs: AppTabRecord[]
+  activeTabId: string | null
+  onSelect: (tabId: string) => void
+  onClose: (tabId: string) => void
   onNew: () => void
 }
 
@@ -42,15 +42,25 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
         <div class="tab-scroll">
           <div class="tab-strip">
             <div class="tab-strip-tabs">
-              <For each={Array.from(props.instances.entries())}>
-                {([id, instance]) => (
-                  <InstanceTab
-                    instance={instance}
-                    active={id === props.activeInstanceId}
-                    onSelect={() => props.onSelect(id)}
-                    onClose={() => props.onClose(id)}
-                  />
-                )}
+              <For each={props.tabs}>
+                {(tab) =>
+                  tab.kind === "instance" ? (
+                    <InstanceTab
+                      instance={tab.instance}
+                      active={tab.id === props.activeTabId}
+                      onSelect={() => props.onSelect(tab.id)}
+                      onClose={() => props.onClose(tab.id)}
+                    />
+                  ) : (
+                    <div class={`tab-pill ${tab.id === props.activeTabId ? "tab-pill-active" : ""}`}>
+                      <button class="tab-pill-button" onClick={() => props.onSelect(tab.id)}>
+                        <span class="truncate max-w-[180px]">{tab.sidecarTab.name}</span>
+                      </button>
+                      <button class="tab-pill-close" onClick={() => props.onClose(tab.id)} aria-label={tab.sidecarTab.name}>
+                        ×
+                      </button>
+                    </div>
+                  )}
               </For>
               <button
                 class="new-tab-button"
@@ -62,7 +72,7 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
               </button>
             </div>
             <div class="tab-strip-spacer" />
-            <Show when={Array.from(props.instances.entries()).length > 1}>
+            <Show when={props.tabs.length > 1}>
               <div class="tab-shortcuts">
                 <KeyboardHint
                   shortcuts={[keyboardRegistry.get("instance-prev")!, keyboardRegistry.get("instance-next")!].filter(