claude-mux 0.7.0

package/web/.svelte-kit/adapter-bun/entries/pages/_layout.svelte.js

@@ -0,0 +1,499 @@
+import { Z as attr_class, _ as attr_style, $ as stringify, a0 as attr, a1 as ensure_array_like, a2 as store_get, a3 as unsubscribe_stores, a4 as head } from "../../chunks/index2.js";
+import { R as ReliableWebSocket, s as sessionStore, a as stateColor, p as page, o as onDestroy } from "../../chunks/sessions.svelte.js";
+import { g as goto } from "../../chunks/client.js";
+import { B as Badge } from "../../chunks/AllSessionsPanel.svelte_svelte_type_style_lang.js";
+import { B as Button } from "../../chunks/button.js";
+import "clsx";
+import { B as BROWSER } from "../../chunks/false.js";
+import { e as escape_html } from "../../chunks/context.js";
+import "@sveltejs/kit/internal";
+import "../../chunks/exports.js";
+import "../../chunks/utils.js";
+import "@sveltejs/kit/internal/server";
+import "../../chunks/state.svelte.js";
+const browser = BROWSER;
+class BeadsStore extends ReliableWebSocket {
+  issues = [];
+  filter = "open";
+  currentProject = null;
+  loading = false;
+  error = null;
+  /**
+   * Get filtered issues based on current filter setting
+   */
+  get filteredIssues() {
+    const issues = this.issues;
+    const filter = this.filter;
+    switch (filter) {
+      case "ready":
+        return issues.filter((i) => i.status === "open" && (!i.dependencies || !i.dependencies.some((d) => d.type === "blocked_by")));
+      case "open":
+        return issues.filter((i) => i.status !== "closed" && i.status !== "deferred");
+      case "all":
+      default:
+        return issues;
+    }
+  }
+  /**
+   * Get issue count for badge display
+   */
+  get issueCount() {
+    return this.filteredIssues.length;
+  }
+  getWsUrl() {
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const project = encodeURIComponent(this.currentProject || "");
+    return `${protocol}//${window.location.host}/api/beads/stream?project=${project}`;
+  }
+  getLogPrefix() {
+    return "[beads]";
+  }
+  shouldReconnect() {
+    return !!this.currentProject;
+  }
+  handleMessage(event) {
+    try {
+      const data = JSON.parse(event.data);
+      if (data.issues) {
+        this.issues = data.issues;
+        this.error = null;
+      }
+    } catch (err) {
+      console.error("[beads] Failed to parse message:", err);
+    }
+  }
+  onConnected() {
+    this.loading = false;
+    this.error = null;
+  }
+  onDisconnected() {
+  }
+  /**
+   * Connect to a project's beads stream
+   */
+  setProject(project) {
+    if (project === this.currentProject) return;
+    if (this.currentProject) {
+      this.doDisconnect();
+    }
+    this.currentProject = project;
+    this.issues = [];
+    this.error = null;
+  }
+  /**
+   * Set the filter type
+   */
+  setFilter(filter) {
+    this.filter = filter;
+  }
+  /**
+   * Force refresh issues
+   */
+  refresh() {
+    if (this.currentProject) {
+      this.forceReconnect();
+    }
+  }
+  /**
+   * Manually connect (call from layout or page)
+   */
+  connect() {
+    if (this.currentProject && browser) ;
+  }
+  /**
+   * Manually disconnect
+   */
+  disconnect() {
+    this.doDisconnect();
+  }
+}
+const beadsStore = new BeadsStore();
+function IssueItem($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { issue } = $$props;
+    let expanded = false;
+    function statusColor(status) {
+      switch (status) {
+        case "in_progress":
+          return "#27ae60";
+        case // green
+        "open":
+          return "#f39c12";
+        case // yellow
+        "blocked":
+          return "#e74c3c";
+        case // red
+        "closed":
+        case "deferred":
+        default:
+          return "#888888";
+      }
+    }
+    function priorityColor(priority) {
+      switch (priority) {
+        case 0:
+          return "#e74c3c";
+        case // red - critical
+        1:
+          return "#e67e22";
+        case // orange - high
+        2:
+          return "#f39c12";
+        case // yellow - medium
+        3:
+          return "#3498db";
+        case // blue - low
+        4:
+        default:
+          return "#888888";
+      }
+    }
+    $$renderer2.push(`<div${attr_class("issue-wrapper svelte-1yk20pg", void 0, { "expanded": expanded })}><button class="issue-item svelte-1yk20pg" type="button"><span class="status-dot svelte-1yk20pg"${attr_style(`background: ${stringify(statusColor(issue.status))}`)}></span> <span class="issue-title svelte-1yk20pg">${escape_html(issue.title)}</span> <span class="priority-badge svelte-1yk20pg"${attr_style(`background: ${stringify(priorityColor(issue.priority))}`)}>P${escape_html(issue.priority)}</span> <iconify-icon${attr("icon", "mdi:chevron-down")} class="chevron svelte-1yk20pg"></iconify-icon></button> `);
+    {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]--></div>`);
+  });
+}
+function BeadsPanel($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    function setFilter(filter) {
+      beadsStore.setFilter(filter);
+    }
+    const filters = [
+      { label: "Ready", value: "ready" },
+      { label: "Open", value: "open" },
+      { label: "All", value: "all" }
+    ];
+    $$renderer2.push(`<div class="beads-panel svelte-ye9143"><button class="panel-header svelte-ye9143" type="button"><iconify-icon icon="mdi:checkbox-multiple-marked-outline"></iconify-icon> <span>Issues</span> `);
+    Badge($$renderer2, {
+      variant: "outline",
+      class: "ml-auto issue-count",
+      children: ($$renderer3) => {
+        $$renderer3.push(`<!---->${escape_html(beadsStore.issueCount)}`);
+      },
+      $$slots: { default: true }
+    });
+    $$renderer2.push(`<!----> <iconify-icon${attr("icon", "mdi:chevron-down")} class="chevron svelte-ye9143"></iconify-icon></button> `);
+    {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<div class="panel-content svelte-ye9143"><div class="filter-buttons svelte-ye9143"><!--[-->`);
+      const each_array = ensure_array_like(filters);
+      for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+        let f = each_array[$$index];
+        Button($$renderer2, {
+          variant: beadsStore.filter === f.value ? "default" : "ghost",
+          size: "sm",
+          onclick: () => setFilter(f.value),
+          class: "filter-btn",
+          children: ($$renderer3) => {
+            $$renderer3.push(`<!---->${escape_html(f.label)}`);
+          },
+          $$slots: { default: true }
+        });
+      }
+      $$renderer2.push(`<!--]--></div> <div>`);
+      if (beadsStore.loading) {
+        $$renderer2.push("<!--[-->");
+        $$renderer2.push(`<div class="loading svelte-ye9143">Loading issues...</div>`);
+      } else {
+        $$renderer2.push("<!--[!-->");
+        if (beadsStore.error) {
+          $$renderer2.push("<!--[-->");
+          $$renderer2.push(`<div class="error svelte-ye9143">${escape_html(beadsStore.error)}</div>`);
+        } else {
+          $$renderer2.push("<!--[!-->");
+          if (beadsStore.filteredIssues.length === 0) {
+            $$renderer2.push("<!--[-->");
+            $$renderer2.push(`<div class="empty svelte-ye9143">No issues</div>`);
+          } else {
+            $$renderer2.push("<!--[!-->");
+            $$renderer2.push(`<!--[-->`);
+            const each_array_1 = ensure_array_like(beadsStore.filteredIssues);
+            for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
+              let issue = each_array_1[$$index_1];
+              IssueItem($$renderer2, { issue });
+            }
+            $$renderer2.push(`<!--]-->`);
+          }
+          $$renderer2.push(`<!--]-->`);
+        }
+        $$renderer2.push(`<!--]-->`);
+      }
+      $$renderer2.push(`<!--]--></div></div>`);
+    }
+    $$renderer2.push(`<!--]--></div>`);
+  });
+}
+function ScreenshotsPanel($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { sessionId, screenshots } = $$props;
+    let viewingScreenshot = null;
+    let touchStartX = 0;
+    let touchCurrentX = 0;
+    let isSwiping = false;
+    async function dismissScreenshot(path) {
+      await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/screenshots?path=${encodeURIComponent(path)}`, { method: "DELETE" });
+      if (viewingScreenshot === path) {
+        viewingScreenshot = null;
+      }
+    }
+    function closeModal() {
+      viewingScreenshot = null;
+      resetSwipe();
+    }
+    function getFilename(path) {
+      return path.split("/").pop() || path;
+    }
+    function resetSwipe() {
+      isSwiping = false;
+      touchStartX = 0;
+      touchCurrentX = 0;
+    }
+    const swipeOffset = isSwiping ? Math.min(0, touchCurrentX - touchStartX) : 0;
+    $$renderer2.push(`<div class="screenshots-panel svelte-i8iwb7"><button class="panel-header svelte-i8iwb7" type="button"><iconify-icon icon="mdi:image-multiple"></iconify-icon> <span>Screenshots</span> `);
+    Badge($$renderer2, {
+      variant: "outline",
+      class: "ml-auto screenshot-count",
+      children: ($$renderer3) => {
+        $$renderer3.push(`<!---->${escape_html(screenshots.length)}`);
+      },
+      $$slots: { default: true }
+    });
+    $$renderer2.push(`<!----> <iconify-icon${attr("icon", "mdi:chevron-down")} class="chevron svelte-i8iwb7"></iconify-icon></button> `);
+    {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<div class="panel-content svelte-i8iwb7">`);
+      if (screenshots.length === 0) {
+        $$renderer2.push("<!--[-->");
+        $$renderer2.push(`<div class="empty svelte-i8iwb7">No screenshots</div>`);
+      } else {
+        $$renderer2.push("<!--[!-->");
+        $$renderer2.push(`<div class="screenshots-grid svelte-i8iwb7"><!--[-->`);
+        const each_array = ensure_array_like(screenshots);
+        for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+          let screenshot = each_array[$$index];
+          $$renderer2.push(`<div class="screenshot-item svelte-i8iwb7"><button class="thumbnail svelte-i8iwb7"${attr("title", getFilename(screenshot.path))}><img${attr("src", `/api/files/image?path=${stringify(encodeURIComponent(screenshot.path))}`)}${attr("alt", getFilename(screenshot.path))} loading="lazy" class="svelte-i8iwb7"/></button> `);
+          Button($$renderer2, {
+            variant: "ghost",
+            size: "icon-sm",
+            class: "dismiss-btn",
+            onclick: () => dismissScreenshot(screenshot.path),
+            title: "Dismiss screenshot",
+            children: ($$renderer3) => {
+              $$renderer3.push(`<iconify-icon icon="mdi:close"></iconify-icon>`);
+            },
+            $$slots: { default: true }
+          });
+          $$renderer2.push(`<!----></div>`);
+        }
+        $$renderer2.push(`<!--]--></div>`);
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    }
+    $$renderer2.push(`<!--]--></div> `);
+    if (viewingScreenshot) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<div class="modal-overlay svelte-i8iwb7" role="dialog" aria-modal="true" tabindex="-1"><div class="modal-content svelte-i8iwb7"${attr_style(`transform: translateX(${stringify(swipeOffset)}px)`)} role="document"><img${attr("src", `/api/files/image?path=${stringify(encodeURIComponent(viewingScreenshot))}`)}${attr("alt", getFilename(viewingScreenshot))} class="modal-image svelte-i8iwb7"/> <div class="modal-actions svelte-i8iwb7">`);
+      Button($$renderer2, {
+        variant: "secondary",
+        size: "sm",
+        onclick: closeModal,
+        class: "modal-btn",
+        children: ($$renderer3) => {
+          $$renderer3.push(`<iconify-icon icon="mdi:close"></iconify-icon> <span>Close</span>`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer2.push(`<!----> `);
+      Button($$renderer2, {
+        variant: "destructive",
+        size: "sm",
+        onclick: () => dismissScreenshot(viewingScreenshot),
+        class: "modal-btn",
+        children: ($$renderer3) => {
+          $$renderer3.push(`<iconify-icon icon="mdi:delete"></iconify-icon> <span>Delete</span>`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer2.push(`<!----></div> <div class="swipe-hint svelte-i8iwb7"><iconify-icon icon="mdi:gesture-swipe-left"></iconify-icon> <span>Swipe left to close</span></div></div></div>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+function SessionsSidebar($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    var $$store_subs;
+    let { onSelect, hideSessionsList = false } = $$props;
+    store_get($$store_subs ??= {}, "$page", page).url.pathname.startsWith("/session/");
+    const currentTarget = store_get($$store_subs ??= {}, "$page", page).params.target ? decodeURIComponent(store_get($$store_subs ??= {}, "$page", page).params.target) : null;
+    const currentSession = sessionStore.sessions.find((s) => s.tmux_target === currentTarget || s.id === currentTarget);
+    const projectName = (() => {
+      const cwd = currentSession?.cwd || currentSession?.git_root;
+      if (!cwd) return null;
+      const parts = cwd.split("/").filter(Boolean);
+      return parts[parts.length - 1] || null;
+    })();
+    const projectSessions = (() => {
+      const projectRoot = currentSession?.git_root || currentSession?.cwd;
+      if (!projectRoot) return sessionStore.sessions;
+      return sessionStore.sessions.filter((s) => s.git_root === projectRoot || s.cwd === projectRoot);
+    })();
+    async function newSession() {
+      const cwd = currentSession?.cwd || currentSession?.git_root;
+      if (!cwd) return;
+      const res = await fetch("/api/projects/new-session", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cwd })
+      });
+      const data = await res.json();
+      if (data.ok && data.session) {
+        data.session + ":1.1";
+        onSelect?.();
+        goto();
+      }
+    }
+    $$renderer2.push(`<nav class="sidebar-sessions svelte-1wiqrar"><div class="sidebar-header svelte-1wiqrar"><a href="/" class="home-link svelte-1wiqrar"><iconify-icon icon="mdi:folder-outline"></iconify-icon> <span>${escape_html(projectName || "Sessions")}</span></a> `);
+    if (currentSession?.cwd) {
+      $$renderer2.push("<!--[-->");
+      Button($$renderer2, {
+        variant: "ghost",
+        size: "icon-sm",
+        onclick: newSession,
+        title: "New session in this project",
+        class: "new-session-btn",
+        children: ($$renderer3) => {
+          $$renderer3.push(`<iconify-icon icon="mdi:plus"></iconify-icon>`);
+        },
+        $$slots: { default: true }
+      });
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]--></div> <div class="scroll-content svelte-1wiqrar">`);
+    if (!hideSessionsList) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<div class="sessions-panel"><button class="panel-header svelte-1wiqrar" type="button"><iconify-icon icon="mdi:console"></iconify-icon> <span>Sessions</span> `);
+      Badge($$renderer2, {
+        variant: "outline",
+        class: "ml-auto session-count",
+        children: ($$renderer3) => {
+          $$renderer3.push(`<!---->${escape_html(projectSessions.length)}`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer2.push(`<!----> <iconify-icon${attr("icon", "mdi:chevron-down")} class="chevron svelte-1wiqrar"></iconify-icon></button> `);
+      {
+        $$renderer2.push("<!--[-->");
+        $$renderer2.push(`<div class="sessions-list svelte-1wiqrar">`);
+        const each_array = ensure_array_like(projectSessions);
+        if (each_array.length !== 0) {
+          $$renderer2.push("<!--[-->");
+          for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+            let session = each_array[$$index];
+            if (session.tmux_target) {
+              $$renderer2.push("<!--[-->");
+              $$renderer2.push(`<a${attr("href", `/session/${stringify(encodeURIComponent(session.tmux_target))}`)}${attr_class("session-item svelte-1wiqrar", void 0, {
+                "active": session.tmux_target === currentTarget || session.id === currentTarget
+              })}><span class="icon-slot svelte-1wiqrar"><span class="state-dot svelte-1wiqrar"${attr_style(`background: ${stringify(stateColor(session.state))}`)}></span></span> <div class="session-info svelte-1wiqrar"><div class="session-name svelte-1wiqrar">${escape_html(session.pane_title || session.tmux_target)}</div> `);
+              if (session.current_action) {
+                $$renderer2.push("<!--[-->");
+                $$renderer2.push(`<div class="session-action svelte-1wiqrar">${escape_html(session.current_action)}</div>`);
+              } else {
+                $$renderer2.push("<!--[!-->");
+              }
+              $$renderer2.push(`<!--]--></div></a>`);
+            } else {
+              $$renderer2.push("<!--[!-->");
+            }
+            $$renderer2.push(`<!--]-->`);
+          }
+        } else {
+          $$renderer2.push("<!--[!-->");
+          $$renderer2.push(`<div class="empty svelte-1wiqrar">No active sessions</div>`);
+        }
+        $$renderer2.push(`<!--]--></div>`);
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (currentSession?.beads_enabled) {
+      $$renderer2.push("<!--[-->");
+      BeadsPanel($$renderer2, {
+        project: currentSession.git_root
+      });
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (currentSession?.screenshots && currentSession.screenshots.length > 0) {
+      $$renderer2.push("<!--[-->");
+      ScreenshotsPanel($$renderer2, {
+        sessionId: currentSession.id,
+        screenshots: currentSession.screenshots
+      });
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]--></div></nav>`);
+    if ($$store_subs) unsubscribe_stores($$store_subs);
+  });
+}
+function _layout($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    var $$store_subs;
+    let { children } = $$props;
+    let drawerOpen = false;
+    let isDesktop = false;
+    const DEFAULT_WIDTH = 250;
+    let sidebarWidth = DEFAULT_WIDTH;
+    let isResizing = false;
+    let isResizingSplit = false;
+    const showSidebar = store_get($$store_subs ??= {}, "$page", page).url.pathname.startsWith("/session/");
+    onDestroy(() => {
+      sessionStore.disconnect();
+    });
+    function closeDrawer() {
+      drawerOpen = false;
+    }
+    head("12qhfyh", $$renderer2, ($$renderer3) => {
+      $$renderer3.push(`<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"><\/script>`);
+    });
+    if (showSidebar) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<div${attr_class("app-shell svelte-12qhfyh", void 0, {
+        "split-view": isDesktop,
+        "resizing-any": isResizingSplit
+      })}>`);
+      {
+        $$renderer2.push("<!--[!-->");
+      }
+      $$renderer2.push(`<!--]--> <main class="content svelte-12qhfyh"><button class="hamburger svelte-12qhfyh" aria-label="Toggle menu"><iconify-icon icon="mdi:menu"></iconify-icon></button> `);
+      children($$renderer2);
+      $$renderer2.push(`<!----></main> <aside${attr_class("sidebar svelte-12qhfyh", void 0, { "open": drawerOpen, "resizing": isResizing })}${attr_style(`--sidebar-width: ${stringify(sidebarWidth)}px`)}><div class="resize-handle resize-handle-left svelte-12qhfyh" role="separator" aria-orientation="vertical"></div> `);
+      SessionsSidebar($$renderer2, { onSelect: closeDrawer, hideSessionsList: isDesktop });
+      $$renderer2.push(`<!----> <div class="resize-handle resize-handle-right svelte-12qhfyh" role="separator" aria-orientation="vertical"></div></aside> `);
+      if (drawerOpen) {
+        $$renderer2.push("<!--[-->");
+        $$renderer2.push(`<button class="backdrop svelte-12qhfyh" aria-label="Close menu"></button>`);
+      } else {
+        $$renderer2.push("<!--[!-->");
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+      children($$renderer2);
+      $$renderer2.push(`<!---->`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    if ($$store_subs) unsubscribe_stores($$store_subs);
+  });
+}
+export {
+  _layout as default
+};