feat(panel): island, rail by day, companion mode beside a deep note, cached index and threads, obsidian skin for strips

src/state.svelte.ts

@@ -5,4 +5,6 @@ export class PanelState {
   selected = $state<string | null>(null);
   follow = $state(true);
   sourcePath = $state("");
+  // The selected conversation is the open note's own: show activity, not a copy.
+  companion = $state(false);
 }

src/tailwind.css

@@ -47,10 +47,21 @@
 
   --sidebar: var(--background-secondary);
   --sidebar-accent: var(--background-modifier-hover);
+  --rack: var(--background-secondary);
+  --strip: var(--background-primary);
+  --attention: oklch(0.72 0.16 72);
+  --attention-foreground: oklch(0.5 0.14 70);
+  --shadow-lift:
+    0 6px 16px -10px rgb(0 0 0 / 0.35), 0 1px 2px rgb(0 0 0 / 0.08);
+  --shadow-float:
+    0 20px 50px -20px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.1);
   --radius: 0.45rem;
 }
 
 .theme-dark .beaver-root {
+  --attention: oklch(0.8 0.15 75);
+  --attention-foreground: oklch(0.85 0.14 78);
+  --strip: var(--background-primary-alt);
   --note: oklch(0.84 0.14 88);
   --warn: oklch(0.8 0.13 75);
   --status-done: oklch(0.74 0.14 155);
@@ -75,6 +86,12 @@
   --color-note: var(--note);
   --color-sidebar: var(--sidebar);
   --color-sidebar-accent: var(--sidebar-accent);
+  --color-rack: var(--rack);
+  --color-strip: var(--strip);
+  --color-attention: var(--attention);
+  --color-attention-foreground: var(--attention-foreground);
+  --shadow-lift: var(--shadow-lift);
+  --shadow-float: var(--shadow-float);
 
   --color-status-new: var(--status-new);
   --color-status-done: var(--status-done);
@@ -178,7 +195,9 @@
 }
 
 .beaver-root.beaver-root button {
-  text-align: inherit;
+  justify-content: flex-start;
+  width: auto;
+  text-align: left;
   cursor: pointer;
 }
 
@@ -397,3 +416,67 @@
     font-weight: var(--font-medium, 500) !important;
   }
 }
+
+/* Strips and the island are buttons here; the reset above flattens buttons,
+   so the vocabulary is restated at the reset's own specificity. */
+.beaver-root.beaver-root .strip {
+  display: grid;
+  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
+  align-items: center;
+  justify-content: stretch;
+  justify-items: stretch;
+  width: 100%;
+  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
+  text-align: left;
+  background: var(--strip);
+  border-bottom: 1px solid var(--border);
+  border-radius: 0;
+}
+.beaver-root.beaver-root .strip:hover,
+.beaver-root.beaver-root .strip:focus-visible {
+  background: var(--strip);
+  box-shadow: var(--shadow-lift);
+}
+.beaver-root.beaver-root .strip:first-child {
+  border-top-left-radius: var(--radius-md);
+  border-top-right-radius: var(--radius-md);
+}
+.beaver-root.beaver-root .strip:last-child {
+  border-bottom: 0;
+  border-bottom-right-radius: var(--radius-md);
+  border-bottom-left-radius: var(--radius-md);
+}
+.beaver-root.beaver-root .strip[aria-current="true"] {
+  background: color-mix(in oklab, var(--strip) 85%, var(--primary) 15%);
+}
+.beaver-root.beaver-root .strip[data-state="waiting"] {
+  box-shadow: var(--shadow-lift);
+  transform: translateX(0.5rem);
+}
+.beaver-root.beaver-root .strip.strip-child {
+  padding-left: 1.75rem;
+}
+.beaver-root.beaver-root button.island {
+  display: inline-flex;
+  gap: 0.625rem;
+  align-items: center;
+  height: 2.125rem;
+  padding: 0 0.875rem 0 0.75rem;
+  white-space: nowrap;
+  background: var(--strip);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+}
+.beaver-root.beaver-root button.island:hover {
+  background: var(--strip);
+}
+.beaver-root.beaver-root button.island:disabled {
+  opacity: 1;
+}
+.beaver-root.beaver-root .bay-rack {
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius-md) + 1px);
+}
+.beaver-root.beaver-root .strip-child::before {
+  left: 1.125rem;
+}

src/ui/app.svelte

@@ -5,6 +5,7 @@
   import type { ApiClient } from "$lib/api/client";
   import EmptyState from "$lib/components/empty-state.svelte";
   import { Button } from "$lib/components/ui/button";
+  import { panelCache } from "$lib/panel/cache";
   import { providePanelHost } from "$lib/panel/host";
   import { ConversationIndex } from "$lib/panel/index.svelte";
   import PanelShell from "$lib/panel/panel-shell.svelte";
@@ -36,17 +37,19 @@
 
   // Props are read once: the view remounts the tree when settings change.
   // svelte-ignore state_referenced_locally
-  providePanelHost(
-    obsidianHost({
+  const cache = panelCache(`beaver.panel:${client?.base ?? "none"}`);
+  const host = providePanelHost({
+    ...obsidianHost({
       app,
       component,
       sourcePath: () => state.sourcePath,
       vaultSubpath,
-    })
-  );
+    }),
+    cache,
+  });
 
   // svelte-ignore state_referenced_locally
-  const index = client ? new ConversationIndex(() => client) : null;
+  const index = client ? new ConversationIndex(() => client, cache) : null;
 </script>
 
 <BitsConfig defaultPortalTo={layer}>
@@ -54,7 +57,9 @@
     {#if client && index}
       <PanelShell
         {client}
+        companion={state.companion}
         {index}
+        onOpenFile={(path) => host.openNote?.(`мета/бобер/${path}`)}
         showFollow
         bind:follow={state.follow}
         bind:selected={state.selected}

src/view.ts

@@ -119,11 +119,17 @@ export class PanelView extends ItemView {
     const id = this.plugin.conversationIdOf(file);
     if (id) {
       this.state.selected = id;
+      this.state.companion = !this.inTabs();
     }
   }
 
   show(id: string): void {
     this.state.selected = id;
+    this.state.companion = false;
+  }
+
+  private inTabs(): boolean {
+    return this.leaf.getRoot() === this.app.workspace.rootSplit;
   }
 
   // Settings changed: the client is built from them, so rebuild the tree.