WIP: Prototype right panel tab splitting

apps/app/package.json

@@ -57,6 +57,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cronstrue": "^3.14.0",
+    "dockview-react": "^6.6.1",
     "jotai": "^2.19.0",
     "jotai-family": "^1.0.1",
     "mermaid": "^11.15.0",

apps/app/src/app.css

@@ -1,4 +1,5 @@
 @import "@fontsource-variable/inter";
+@import "dockview-react/dist/styles/dockview.css";
 @import "@/components/ui/theme.css";
 
 @layer base {
@@ -171,3 +172,168 @@
     display: none;
   }
 }
+
+.bb-right-panel-dock {
+  --dv-tabs-and-actions-container-height: 3rem;
+  --dv-tabs-and-actions-container-font-size: inherit;
+  --dv-group-view-background-color: var(--background);
+  --dv-tabs-and-actions-container-background-color: var(--background);
+  --dv-activegroup-visiblepanel-tab-background-color: var(--background);
+  --dv-activegroup-hiddenpanel-tab-background-color: var(--background);
+  --dv-inactivegroup-visiblepanel-tab-background-color: var(--background);
+  --dv-inactivegroup-hiddenpanel-tab-background-color: var(--background);
+  --dv-activegroup-visiblepanel-tab-color: var(--foreground);
+  --dv-activegroup-hiddenpanel-tab-color: var(--muted-foreground);
+  --dv-inactivegroup-visiblepanel-tab-color: var(--foreground);
+  --dv-inactivegroup-hiddenpanel-tab-color: var(--muted-foreground);
+  --dv-tab-divider-color: transparent;
+  --dv-separator-border: var(--border);
+  --dv-paneview-active-outline-color: var(--ring);
+  --dv-sash-color: transparent;
+  --dv-active-sash-color: color-mix(
+    in oklch,
+    var(--foreground) 28%,
+    transparent
+  );
+  --dv-drag-over-background-color: color-mix(
+    in oklch,
+    var(--accent) 24%,
+    transparent
+  );
+  --dv-drag-over-border-color: var(--ring);
+  --dv-overlay-z-index: 80;
+  --dv-tab-border-radius: 0;
+  --dv-border-radius: 0;
+  --dv-tab-margin: 0;
+  color: var(--foreground);
+  font: inherit;
+}
+
+.bb-right-panel-dock,
+.bb-right-panel-dock .dv-groupview,
+.bb-right-panel-dock .dv-content-container,
+.bb-right-panel-dock .dv-split-view-container,
+.bb-right-panel-dock .dv-view-container,
+.bb-right-panel-dock .dv-view {
+  background-color: var(--background);
+}
+
+.bb-right-panel-dock .dv-tabs-and-actions-container {
+  height: 3rem;
+  min-height: 3rem;
+  align-items: center;
+  gap: 0.5rem;
+  border: 0;
+  background-color: var(--background);
+  padding: 0 1rem;
+}
+
+.bb-right-panel-dock .dv-tabs-and-actions-container > .dv-scrollable {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+}
+
+.bb-right-panel-dock
+  .dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab
+  .dv-scrollable,
+.bb-right-panel-dock
+  .dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab
+  .dv-tabs-container,
+.bb-right-panel-dock
+  .dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab
+  .dv-tabs-container
+  .dv-tab {
+  flex-grow: 0;
+}
+
+.bb-right-panel-dock
+  .dv-tabs-and-actions-container.dv-single-tab.dv-full-width-single-tab
+  .dv-void-container {
+  flex-grow: 1;
+}
+
+.bb-right-panel-dock .dv-groupview {
+  min-width: 0;
+  min-height: 0;
+}
+
+.bb-right-panel-dock .dv-tabs-container {
+  height: auto;
+  min-height: 1.75rem;
+  align-items: center;
+  gap: 0.25rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-inline: 0;
+  scrollbar-width: none;
+}
+
+.bb-right-panel-dock .dv-tabs-container::-webkit-scrollbar {
+  display: none;
+}
+
+.bb-right-panel-dock
+  .dv-tabs-container.dv-horizontal
+  .dv-tab:not(:first-child)::before {
+  display: none;
+}
+
+.bb-right-panel-dock .dv-tab {
+  display: flex;
+  height: 1.75rem;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+}
+
+.bb-right-panel-dock .dv-tab:not(.dv-active-tab) {
+  opacity: 1;
+}
+
+.bb-right-panel-dock .dv-tab-content {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+}
+
+.bb-right-panel-dock .dv-right-actions-container {
+  align-items: center;
+}
+
+.bb-right-panel-dock .dv-void-container {
+  min-width: 0;
+}
+
+.bb-right-panel-dock-tab {
+  display: flex;
+  min-width: 0;
+  height: 1.75rem;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: var(--radius-md);
+  padding-inline: 0.5rem 0.25rem;
+  transition:
+    color 150ms,
+    background-color 150ms;
+}
+
+.bb-right-panel-dock-pill {
+  display: inline-flex;
+  min-width: 0;
+}
+
+.bb-right-panel-dock-actions {
+  margin-left: 0.25rem;
+}
+
+.bb-right-panel-dock-macos .dv-tabs-and-actions-container {
+  app-region: drag;
+  -webkit-app-region: drag;
+}
+
+.bb-right-panel-dock-reserve-left .dv-tabs-and-actions-container {
+  padding-left: 5rem;
+}