claude-mux 0.7.0

package/web/src/lib/components/ui/dialog/dialog-content.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import DialogPortal from "./dialog-portal.svelte";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<DialogPortal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+			>
+				<XIcon />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</DialogPortal>

package/web/src/lib/components/ui/dialog/dialog-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

package/web/src/lib/components/ui/dialog/dialog-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/web/src/lib/components/ui/dialog/dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-start", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/web/src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+		className
+	)}
+	{...restProps}
+/>

package/web/src/lib/components/ui/dialog/dialog-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />

package/web/src/lib/components/ui/dialog/dialog-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-lg leading-none font-semibold", className)}
+	{...restProps}
+/>

package/web/src/lib/components/ui/dialog/dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />

package/web/src/lib/components/ui/dialog/dialog.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />

package/web/src/lib/components/ui/dialog/index.ts

@@ -0,0 +1,34 @@
+import Root from "./dialog.svelte";
+import Portal from "./dialog-portal.svelte";
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};

package/web/src/lib/components/ui/scroll-area/index.ts

@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};

package/web/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	bind:ref
+	data-slot="scroll-area-scrollbar"
+	{orientation}
+	class={cn(
+		"flex touch-none p-px transition-colors select-none",
+		orientation === "vertical" && "h-full w-2.5 border-s border-s-transparent",
+		orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ScrollAreaPrimitive.Thumb
+		data-slot="scroll-area-thumb"
+		class="bg-border relative flex-1 rounded-full"
+	/>
+</ScrollAreaPrimitive.Scrollbar>

package/web/src/lib/components/ui/scroll-area/scroll-area.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		viewportRef = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		scrollbarXClasses = "",
+		scrollbarYClasses = "",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		orientation?: "vertical" | "horizontal" | "both" | undefined;
+		scrollbarXClasses?: string | undefined;
+		scrollbarYClasses?: string | undefined;
+		viewportRef?: HTMLElement | null;
+	} = $props();
+</script>
+
+<ScrollAreaPrimitive.Root
+	bind:ref
+	data-slot="scroll-area"
+	class={cn("relative", className)}
+	{...restProps}
+>
+	<ScrollAreaPrimitive.Viewport
+		bind:ref={viewportRef}
+		data-slot="scroll-area-viewport"
+		class="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
+	>
+		{@render children?.()}
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>

package/web/src/lib/components/ui/textarea/index.ts

@@ -0,0 +1,7 @@
+import Root from "./textarea.svelte";
+
+export {
+	Root,
+	//
+	Root as Textarea,
+};

package/web/src/lib/components/ui/textarea/textarea.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "textarea",
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>

package/web/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

package/web/src/lib/server/auth.ts

@@ -0,0 +1,90 @@
+import { createHmac } from 'crypto';
+
+const COOKIE_NAME = 'claude-mux-session';
+const MAX_AGE = 60 * 60 * 24 * 7; // 7 days in seconds
+
+/**
+ * Check if authentication is enabled (CLAUDE_WATCH_PASSWORD env var is set)
+ */
+export function isAuthEnabled(): boolean {
+	return !!process.env.CLAUDE_WATCH_PASSWORD;
+}
+
+/**
+ * Get the configured password (empty string if not set)
+ */
+function getPassword(): string {
+	return process.env.CLAUDE_WATCH_PASSWORD || '';
+}
+
+/**
+ * Validate a password against the configured password
+ */
+export function validatePassword(password: string): boolean {
+	const expected = getPassword();
+	if (!expected) return false;
+
+	// Constant-time comparison to prevent timing attacks
+	if (password.length !== expected.length) return false;
+
+	let result = 0;
+	for (let i = 0; i < password.length; i++) {
+		result |= password.charCodeAt(i) ^ expected.charCodeAt(i);
+	}
+	return result === 0;
+}
+
+/**
+ * Create a signed auth token
+ * Format: timestamp:signature
+ */
+export function createAuthToken(): string {
+	const timestamp = Date.now().toString();
+	const signature = createHmac('sha256', getPassword()).update(timestamp).digest('hex');
+	return `${timestamp}:${signature}`;
+}
+
+/**
+ * Validate an auth token
+ */
+export function validateAuthToken(token: string | undefined): boolean {
+	if (!token || !isAuthEnabled()) return false;
+
+	const parts = token.split(':');
+	if (parts.length !== 2) return false;
+
+	const [timestamp, signature] = parts;
+
+	// Check token age (reject if older than MAX_AGE)
+	const tokenAge = Date.now() - parseInt(timestamp, 10);
+	if (isNaN(tokenAge) || tokenAge > MAX_AGE * 1000 || tokenAge < 0) {
+		return false;
+	}
+
+	// Verify signature
+	const expectedSignature = createHmac('sha256', getPassword()).update(timestamp).digest('hex');
+
+	// Constant-time comparison
+	if (signature.length !== expectedSignature.length) return false;
+
+	let result = 0;
+	for (let i = 0; i < signature.length; i++) {
+		result |= signature.charCodeAt(i) ^ expectedSignature.charCodeAt(i);
+	}
+	return result === 0;
+}
+
+/**
+ * Cookie configuration
+ */
+export const AUTH_COOKIE = {
+	name: COOKIE_NAME,
+	maxAge: MAX_AGE,
+	options: (isSecure: boolean) => ({
+		httpOnly: true,
+		sameSite: 'lax' as const,
+		path: '/',
+		maxAge: MAX_AGE,
+		secure: isSecure
+	})
+};

package/web/src/lib/stores/beads.svelte.ts

@@ -0,0 +1,163 @@
+import { browser } from '$app/environment';
+import { ReliableWebSocket } from './websocket-base.svelte';
+
+/**
+ * Beads issue from the API
+ */
+export interface BeadsIssue {
+	id: string;
+	title: string;
+	description?: string;
+	status: 'open' | 'in_progress' | 'blocked' | 'deferred' | 'closed';
+	priority: number;
+	issue_type: string;
+	owner?: string;
+	assignee?: string;
+	created_at?: string;
+	updated_at?: string;
+	dependencies?: { depends_on_id: string; type: string }[];
+}
+
+export interface BeadsMessage {
+	type: 'issues' | 'connected';
+	issues: BeadsIssue[];
+	project: string;
+	timestamp: number;
+}
+
+export type BeadsFilter = 'ready' | 'open' | 'all';
+
+/**
+ * BeadsStore - Real-time beads issues store with WebSocket support.
+ * Connects per-project and receives updates when issues change.
+ */
+class BeadsStore extends ReliableWebSocket {
+	issues = $state<BeadsIssue[]>([]);
+	filter = $state<BeadsFilter>('open');
+	currentProject = $state<string | null>(null);
+	loading = $state(false);
+	error = $state<string | null>(null);
+
+	/**
+	 * Get filtered issues based on current filter setting
+	 */
+	get filteredIssues(): BeadsIssue[] {
+		const issues = this.issues;
+		const filter = this.filter;
+
+		switch (filter) {
+			case 'ready':
+				// Ready = open with no blocking dependencies
+				return issues.filter(
+					(i) =>
+						i.status === 'open' &&
+						(!i.dependencies || !i.dependencies.some((d) => d.type === 'blocked_by'))
+				);
+			case 'open':
+				// Open = not closed or deferred
+				return issues.filter((i) => i.status !== 'closed' && i.status !== 'deferred');
+			case 'all':
+			default:
+				return issues;
+		}
+	}
+
+	/**
+	 * Get issue count for badge display
+	 */
+	get issueCount(): number {
+		return this.filteredIssues.length;
+	}
+
+	protected getWsUrl(): string {
+		const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+		const project = encodeURIComponent(this.currentProject || '');
+		return `${protocol}//${window.location.host}/api/beads/stream?project=${project}`;
+	}
+
+	protected getLogPrefix(): string {
+		return '[beads]';
+	}
+
+	protected shouldReconnect(): boolean {
+		// Only reconnect if we have a project set
+		return !!this.currentProject;
+	}
+
+	protected handleMessage(event: MessageEvent): void {
+		try {
+			const data = JSON.parse(event.data) as BeadsMessage;
+			if (data.issues) {
+				this.issues = data.issues;
+				this.error = null;
+			}
+		} catch (err) {
+			console.error('[beads] Failed to parse message:', err);
+		}
+	}
+
+	protected onConnected(): void {
+		this.loading = false;
+		this.error = null;
+	}
+
+	protected onDisconnected(): void {
+		// Keep issues visible during reconnection
+	}
+
+	/**
+	 * Connect to a project's beads stream
+	 */
+	setProject(project: string | null): void {
+		if (project === this.currentProject) return;
+
+		// Disconnect from previous project
+		if (this.currentProject) {
+			this.doDisconnect();
+		}
+
+		this.currentProject = project;
+		this.issues = [];
+		this.error = null;
+
+		// Connect to new project if valid
+		if (project && browser) {
+			this.loading = true;
+			this.doConnect();
+		}
+	}
+
+	/**
+	 * Set the filter type
+	 */
+	setFilter(filter: BeadsFilter): void {
+		this.filter = filter;
+	}
+
+	/**
+	 * Force refresh issues
+	 */
+	refresh(): void {
+		if (this.currentProject) {
+			this.forceReconnect();
+		}
+	}
+
+	/**
+	 * Manually connect (call from layout or page)
+	 */
+	connect(): void {
+		if (this.currentProject && browser) {
+			this.doConnect();
+		}
+	}
+
+	/**
+	 * Manually disconnect
+	 */
+	disconnect(): void {
+		this.doDisconnect();
+	}
+}
+
+export const beadsStore = new BeadsStore();

package/web/src/lib/stores/input-injection.svelte.ts

@@ -0,0 +1,39 @@
+/**
+ * Input injection store for passing issue IDs from sidebar to session input.
+ *
+ * Flow:
+ * 1. User taps issue in BeadsPanel
+ * 2. BeadsPanel sets pendingIssueId
+ * 3. Session page watches pendingIssueId
+ * 4. Session page inserts ID into textarea and clears pendingIssueId
+ */
+
+class InputInjectionStore {
+	/** The issue ID waiting to be inserted */
+	pendingIssueId = $state<string | null>(null);
+
+	/**
+	 * Set an issue ID to be injected into the session input
+	 */
+	inject(issueId: string): void {
+		this.pendingIssueId = issueId;
+	}
+
+	/**
+	 * Clear the pending injection (called after insertion)
+	 */
+	clear(): void {
+		this.pendingIssueId = null;
+	}
+
+	/**
+	 * Consume the pending injection (get and clear in one step)
+	 */
+	consume(): string | null {
+		const id = this.pendingIssueId;
+		this.pendingIssueId = null;
+		return id;
+	}
+}
+
+export const inputInjection = new InputInjectionStore();

package/web/src/lib/stores/preferences.svelte.ts

@@ -0,0 +1,55 @@
+import { browser } from '$app/environment';
+
+const STORAGE_KEY = 'claude-mux-preferences';
+
+interface Preferences {
+	terminalTheming: boolean;
+}
+
+const defaults: Preferences = {
+	terminalTheming: true
+};
+
+function loadPreferences(): Preferences {
+	if (!browser) return defaults;
+	try {
+		const stored = localStorage.getItem(STORAGE_KEY);
+		if (stored) {
+			return { ...defaults, ...JSON.parse(stored) };
+		}
+	} catch {
+		// Ignore parse errors
+	}
+	return defaults;
+}
+
+function savePreferences(prefs: Preferences): void {
+	if (!browser) return;
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
+	} catch {
+		// Ignore storage errors
+	}
+}
+
+class PreferencesStore {
+	private prefs = $state<Preferences>(loadPreferences());
+
+	get terminalTheming(): boolean {
+		return this.prefs.terminalTheming;
+	}
+
+	set terminalTheming(value: boolean) {
+		this.prefs.terminalTheming = value;
+		savePreferences(this.prefs);
+	}
+
+	toggle(key: keyof Preferences): void {
+		if (typeof this.prefs[key] === 'boolean') {
+			(this.prefs[key] as boolean) = !this.prefs[key];
+			savePreferences(this.prefs);
+		}
+	}
+}
+
+export const preferences = new PreferencesStore();