conductor-oss 0.2.15 → 0.2.16

package/web/.next/standalone/packages/web/src/components/layout/AppShell.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import type { CSSProperties, ReactNode } from "react";
+import { PanelLeftOpen, PanelRightClose } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+interface AppShellProps {
+  sidebar: ReactNode;
+  children: ReactNode;
+  sidebarOpen: boolean;
+  onToggleSidebar: () => void;
+}
+
+export function AppShell({
+  sidebar,
+  children,
+  sidebarOpen,
+  onToggleSidebar,
+}: AppShellProps) {
+  const shellStyle = { "--workspace-sidebar-width": "356px" } as CSSProperties;
+
+  return (
+    <div
+      style={shellStyle}
+      className="relative flex h-dvh min-h-[100dvh] w-full max-w-full overflow-hidden bg-[var(--vk-bg-main)] text-[var(--vk-text-normal)]"
+    >
+      {sidebarOpen && (
+        <button
+          type="button"
+          className="absolute inset-0 z-20 bg-black/45 lg:hidden"
+          onClick={onToggleSidebar}
+          aria-label="Close workspace panel"
+        />
+      )}
+
+      <aside
+        className={cn(
+          "absolute inset-y-0 left-0 z-30 flex h-full w-[min(90vw,var(--workspace-sidebar-width))] flex-col border-r border-[var(--vk-border)] bg-[var(--vk-bg-panel)] transition-transform duration-200 lg:relative lg:w-[var(--workspace-sidebar-width)]",
+          sidebarOpen
+            ? "translate-x-0"
+            : "-translate-x-full lg:-translate-x-0 lg:w-0 lg:overflow-hidden lg:border-r-0",
+          "lg:left-auto",
+        )}
+      >
+        {sidebar}
+      </aside>
+
+      {sidebarOpen && (
+        <button
+          type="button"
+          onClick={onToggleSidebar}
+          className="absolute left-[var(--workspace-sidebar-width)] top-2 z-40 hidden h-7 w-7 -translate-x-1/2 items-center justify-center rounded-[4px] border border-[var(--vk-border)] bg-[var(--vk-bg-panel)] text-[var(--vk-text-muted)] shadow-[0_0_0_1px_rgba(0,0,0,0.25)] hover:bg-[var(--vk-bg-hover)] lg:inline-flex"
+          aria-label="Hide workspace panel"
+        >
+          <PanelRightClose className="h-4 w-4" />
+        </button>
+      )}
+
+      <main className="relative flex min-w-0 flex-1 flex-col overflow-hidden bg-[var(--vk-bg-main)]">
+        {!sidebarOpen && (
+          <button
+            type="button"
+            onClick={onToggleSidebar}
+            className="absolute left-2 top-2 z-40 inline-flex h-7 w-7 items-center justify-center rounded-[4px] border border-[var(--vk-border)] bg-[var(--vk-bg-panel)] text-[var(--vk-text-muted)] hover:bg-[var(--vk-bg-hover)]"
+            aria-label="Open workspace panel"
+          >
+            <PanelLeftOpen className="h-4 w-4" />
+          </button>
+        )}
+        {children}
+      </main>
+    </div>
+  );
+}

package/web/.next/standalone/packages/web/src/components/layout/EmptyState.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Compass } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/Card";
+
+interface LayoutEmptyStateProps {
+  totalSessions: number;
+  activeSessions: number;
+  totalCost: number;
+}
+
+export function LayoutEmptyState({
+  totalSessions,
+  activeSessions,
+  totalCost,
+}: LayoutEmptyStateProps) {
+  return (
+    <div className="flex flex-1 items-center justify-center px-5 py-8">
+      <Card className="w-full max-w-2xl">
+        <CardContent className="flex flex-col items-center gap-4 py-9 text-center">
+          <div className="flex h-16 w-16 items-center justify-center rounded-[var(--radius-lg)] border border-[var(--border-soft)] bg-[var(--bg-panel)]">
+            <Compass className="h-7 w-7 text-[var(--accent)]" />
+          </div>
+
+          <div>
+            <h2 className="text-[17px] font-semibold text-[var(--text-strong)]">Select a session</h2>
+            <p className="mt-1 text-[13px] text-[var(--text-muted)]">
+              Pick a live session from the left rail to open chat, terminal, and diff views.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 gap-2 text-left sm:grid-cols-3">
+            <Metric label="Total" value={String(totalSessions)} />
+            <Metric label="Active" value={String(activeSessions)} />
+            <Metric
+              label="Est. Cost"
+              value={totalCost > 0 ? `$${totalCost.toFixed(2)}` : "$0.00"}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function Metric({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="surface-panel min-w-[120px] rounded-[var(--radius-sm)] border px-3 py-2">
+      <p className="text-[10px] uppercase tracking-[0.08em] text-[var(--text-faint)]">{label}</p>
+      <p className="mt-1 text-[14px] font-semibold tabular-nums text-[var(--text-normal)]">{value}</p>
+    </div>
+  );
+}

package/web/.next/standalone/packages/web/src/components/layout/Sidebar.tsx

@@ -0,0 +1,318 @@
+"use client";
+
+import { useMemo, useState, type KeyboardEvent, type MouseEvent } from "react";
+import { Archive, Search } from "lucide-react";
+import type { DashboardSession, AttentionLevel } from "@/lib/types";
+import { getAttentionLevel } from "@/lib/types";
+import { cn } from "@/lib/cn";
+
+interface SidebarProps {
+  sessions: DashboardSession[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  onArchive?: (id: string) => Promise<void> | void;
+  onCreateWorkspace?: () => void;
+  showHeader?: boolean;
+}
+
+const SESSION_ICON_DOTS = [
+  { top: 0, left: 1, delay: "0ms", opacity: 1 },
+  { top: 0, left: 9, delay: "120ms", opacity: 0.9 },
+  { top: 6, left: 1, delay: "240ms", opacity: 0.8 },
+  { top: 6, left: 9, delay: "360ms", opacity: 0.7 },
+  { top: 12, left: 1, delay: "480ms", opacity: 0.6 },
+  { top: 12, left: 9, delay: "600ms", opacity: 0.45 },
+] as const;
+
+function formatAge(isoDate: string): string {
+  const diffMs = Date.now() - new Date(isoDate).getTime();
+  if (diffMs < 0 || !Number.isFinite(diffMs)) return "now";
+  const minutes = Math.floor(diffMs / 60_000);
+  if (minutes < 1) return "now";
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+function getSessionLabel(session: DashboardSession): string {
+  const worktree = session.metadata["worktree"]?.trim() ?? "";
+  if (!worktree) return "local";
+  const normalized = worktree.replace(/\\/g, "/").replace(/\/+$/, "");
+  return normalized.includes("/worktrees/") ? "worktree" : "local";
+}
+
+function getSessionSubtitle(session: DashboardSession): string {
+  const branch = session.branch?.trim();
+  if (branch) return branch;
+
+  const summary = session.summary?.trim() || session.metadata["summary"]?.trim();
+  if (summary) return summary;
+
+  if (session.status?.trim()) {
+    return session.status.replace(/[_-]+/g, " ");
+  }
+
+  return session.id.slice(0, 8);
+}
+
+function parseDiffStats(session: DashboardSession): { additions: number; deletions: number } | null {
+  const candidates = [
+    session.metadata["lastStderr"],
+    session.metadata["summary"],
+    session.summary,
+  ];
+
+  for (const candidate of candidates) {
+    if (!candidate) continue;
+    const match = candidate.match(/(\d+)\s+insertions?\(\+\),\s+(\d+)\s+deletions?\(-\)/i);
+    if (!match) continue;
+    const additions = Number.parseInt(match[1] ?? "0", 10);
+    const deletions = Number.parseInt(match[2] ?? "0", 10);
+    if (Number.isFinite(additions) && Number.isFinite(deletions)) {
+      return { additions, deletions };
+    }
+  }
+
+  return null;
+}
+
+function getStatusBadge(session: DashboardSession, level: AttentionLevel): { label: string; className: string } {
+  const summary = `${session.summary ?? ""} ${session.metadata["summary"] ?? ""}`.toLowerCase();
+
+  if (session.status === "killed" || summary.includes("interrupted")) {
+    return {
+      label: "Interrupted",
+      className: "text-[var(--vk-orange)]",
+    };
+  }
+
+  switch (level) {
+    case "merge":
+      return {
+        label: "Ready",
+        className: "text-[var(--vk-green)]",
+      };
+    case "respond":
+      return {
+        label: "Needs input",
+        className: "text-[var(--vk-red)]",
+      };
+    case "review":
+      return {
+        label: "Review",
+        className: "text-[var(--vk-orange)]",
+      };
+    case "working":
+      return {
+        label: "Running",
+        className: "text-[#4e87f3]",
+      };
+    case "done":
+      return {
+        label: "Done",
+        className: "text-[var(--vk-text-muted)]",
+      };
+    default:
+      return {
+        label: "Queued",
+        className: "text-[var(--vk-text-muted)]",
+      };
+  }
+}
+
+function SessionRuntimeIcon({ running }: { running: boolean }) {
+  return (
+    <span className="mt-1 inline-flex h-4 w-4 shrink-0 items-center justify-center text-[var(--vk-orange)]">
+      <span className="relative h-[12px] w-[10px]">
+        {SESSION_ICON_DOTS.map((dot, index) => (
+          <span
+            key={index}
+            className={cn(
+              "absolute h-[2px] w-[2px] rounded-full bg-current",
+              running && "animate-pulse",
+            )}
+            style={{
+              top: `${Math.round(dot.top * 0.75)}px`,
+              left: `${Math.round(dot.left * 0.75)}px`,
+              opacity: dot.opacity,
+              animationDelay: dot.delay,
+            }}
+          />
+        ))}
+      </span>
+    </span>
+  );
+}
+
+export function Sidebar({
+  sessions,
+  selectedId,
+  onSelect,
+  onArchive,
+  onCreateWorkspace,
+  showHeader = true,
+}: SidebarProps) {
+  const [search, setSearch] = useState("");
+  const [archivingId, setArchivingId] = useState<string | null>(null);
+  const [archiveError, setArchiveError] = useState<string | null>(null);
+
+  const filtered = useMemo(() => {
+    const visibleSessions = sessions.filter((session) => session.status !== "archived");
+    if (!search.trim()) return visibleSessions;
+    const q = search.toLowerCase();
+
+    return visibleSessions.filter((session) => {
+      const summary = session.summary ?? "";
+      const branch = session.branch ?? "";
+      const agent = session.metadata["agent"] ?? "";
+      const label = getSessionLabel(session);
+      const subtitle = getSessionSubtitle(session);
+      return (
+        session.id.toLowerCase().includes(q) ||
+        session.projectId.toLowerCase().includes(q) ||
+        summary.toLowerCase().includes(q) ||
+        branch.toLowerCase().includes(q) ||
+        agent.toLowerCase().includes(q) ||
+        label.toLowerCase().includes(q) ||
+        subtitle.toLowerCase().includes(q)
+      );
+    });
+  }, [search, sessions]);
+
+  const handleSessionKeyDown = (event: KeyboardEvent<HTMLDivElement>, sessionId: string) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onSelect(sessionId);
+    }
+  };
+
+  const handleArchive = async (event: MouseEvent<HTMLButtonElement>, sessionId: string) => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (!onArchive || archivingId === sessionId) return;
+    setArchivingId(sessionId);
+    try {
+      await onArchive(sessionId);
+    } catch (error) {
+      console.error("Failed to archive session", error);
+      setArchiveError(sessionId);
+      window.setTimeout(() => setArchiveError(null), 3000);
+    } finally {
+      setArchivingId((current) => (current === sessionId ? null : current));
+    }
+  };
+
+  const orderedSessions = useMemo(() => {
+    return [...filtered].sort(
+      (a, b) => new Date(b.lastActivityAt).getTime() - new Date(a.lastActivityAt).getTime(),
+    );
+  }, [filtered]);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      {showHeader && (
+        <div className="flex h-[33px] items-center gap-1 px-2">
+          <p className="text-[16px] text-[var(--vk-text-normal)]">Workspaces</p>
+          {onCreateWorkspace && (
+            <button
+              type="button"
+              onClick={onCreateWorkspace}
+              className="ml-auto inline-flex h-5 w-5 items-center justify-center rounded-[3px] text-[var(--vk-orange)] hover:bg-[var(--vk-bg-hover)] lg:hidden"
+              aria-label="New workspace"
+            >
+              <span className="text-[14px]">+</span>
+            </button>
+          )}
+        </div>
+      )}
+
+      <div className={cn("flex h-[38px] items-center px-2 pb-1.5", !showHeader && "pt-1.5")}>
+        <label className="flex h-[30px] flex-1 items-center rounded-[3px] border border-[var(--vk-border)] bg-[var(--vk-bg-panel)] px-2">
+          <Search className="h-3.5 w-3.5 text-[var(--vk-text-muted)]" />
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search..."
+            className="ml-1.5 w-full bg-transparent text-[14px] text-[var(--vk-text-normal)] outline-none placeholder:text-[var(--vk-text-muted)]"
+          />
+        </label>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-2 pb-2">
+        {orderedSessions.length === 0 ? (
+          <p className="px-2 py-2 text-[14px] text-[var(--vk-text-muted)]">No sessions</p>
+        ) : (
+          <div className="space-y-2">
+            {orderedSessions.map((session) => {
+              const level = getAttentionLevel(session);
+              const diffStats = parseDiffStats(session);
+              const statusBadge = getStatusBadge(session, level);
+              const isSelected = session.id === selectedId;
+              const isRunning = level === "working";
+              const isArchiving = archivingId === session.id;
+              const hasArchiveError = archiveError === session.id;
+
+              return (
+                <div
+                  key={session.id}
+                  onClick={() => onSelect(session.id)}
+                  onKeyDown={(event) => handleSessionKeyDown(event, session.id)}
+                  role="button"
+                  tabIndex={0}
+                  className={cn(
+                    "group flex w-full items-start gap-3 rounded-[8px] border px-3 py-3 text-left transition-colors",
+                    isSelected
+                      ? "border-[rgba(234,122,42,0.28)] bg-[rgba(255,255,255,0.08)]"
+                      : "border-[var(--vk-border)] bg-[rgba(255,255,255,0.02)] hover:bg-[var(--vk-bg-hover)]",
+                  )}
+                >
+                  <SessionRuntimeIcon running={isRunning} />
+
+                  <span className="min-w-0 flex-1">
+                    <span className="flex items-start gap-2">
+                      <span className="min-w-0 flex-1 truncate text-[14px] font-medium text-[var(--vk-text-strong)]">
+                        {getSessionLabel(session)}
+                      </span>
+                      <span className="shrink-0 rounded-[8px] bg-[rgba(255,255,255,0.06)] px-2.5 py-1 text-[11px] font-medium">
+                        {diffStats ? (
+                          <span className="flex items-center gap-2">
+                            <span className="text-[#18c58f]">+{diffStats.additions}</span>
+                            <span className="text-[#f26d6d]">-{diffStats.deletions}</span>
+                          </span>
+                        ) : (
+                          <span className={statusBadge.className}>{statusBadge.label}</span>
+                        )}
+                      </span>
+                    </span>
+                    <span className="mt-1 block truncate text-[12px] text-[var(--vk-text-muted)]">
+                      {getSessionSubtitle(session)}
+                    </span>
+                  </span>
+                  {onArchive ? (
+                    <button
+                      type="button"
+                      onClick={(event) => void handleArchive(event, session.id)}
+                      disabled={isArchiving}
+                      className={cn(
+                        "mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px] border border-[var(--vk-border)] text-[var(--vk-text-muted)] transition",
+                        "opacity-70 group-hover:opacity-100 focus-visible:opacity-100",
+                        "hover:border-[var(--vk-border)] hover:bg-[var(--vk-bg-hover)] hover:text-[var(--vk-text-normal)]",
+                        isArchiving && "cursor-wait opacity-100",
+                      )}
+                      aria-label={`Archive session ${session.id}`}
+                      title={hasArchiveError ? "Archive failed" : "Archive session"}
+                    >
+                      <Archive className={cn("h-3.5 w-3.5", hasArchiveError && "text-red-400")} />
+                    </button>
+                  ) : null}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/web/.next/standalone/packages/web/src/components/layout/TopBar.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { memo } from "react";
+import { Settings } from "lucide-react";
+import type { DashboardSession } from "@/lib/types";
+
+interface TopBarProps {
+  session: DashboardSession | null;
+  fallbackTitle?: string;
+  onOpenPreferences?: () => void;
+}
+
+export const TopBar = memo(function TopBar({ session, fallbackTitle, onOpenPreferences }: TopBarProps) {
+  const title = session?.summary ?? fallbackTitle ?? "Create Workspace";
+
+  return (
+    <header className="flex h-[36px] items-center border-b border-[var(--vk-border)] bg-[var(--vk-bg-panel)] px-2 text-[11px] text-[var(--vk-text-muted)] sm:h-[33px]">
+      <div className="min-w-0 flex-1 text-center">
+        <span className="block truncate">{title}</span>
+      </div>
+      <div className="ml-1 flex shrink-0">
+        <button
+          type="button"
+          onClick={onOpenPreferences}
+          className="inline-flex h-6 w-6 items-center justify-center rounded-[4px] text-[var(--vk-text-muted)] hover:bg-[var(--vk-bg-hover)] hover:text-[var(--vk-text-normal)]"
+          aria-label="Open preferences"
+          title="Preferences"
+        >
+          <Settings className="h-3.5 w-3.5" />
+        </button>
+      </div>
+    </header>
+  );
+});

package/web/.next/standalone/packages/web/src/components/layout/WorkspaceSidebarPanel.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { memo } from "react";
+import { Plus } from "lucide-react";
+import { cn } from "@/lib/cn";
+import type { DashboardSession } from "@/lib/types";
+import { Sidebar } from "@/components/layout/Sidebar";
+
+interface ProjectItem {
+  id: string;
+  description?: string | null;
+}
+
+interface WorkspaceSidebarPanelProps {
+  orgLabel: string;
+  projects: ProjectItem[];
+  selectedProjectId: string | null;
+  onSelectProject: (projectId: string | null) => void;
+  sessions: DashboardSession[];
+  selectedSessionId: string | null;
+  onSelectSession: (sessionId: string) => void;
+  onArchiveSession?: (sessionId: string) => Promise<void> | void;
+  onCreateWorkspace: () => void;
+}
+
+export const WorkspaceSidebarPanel = memo(function WorkspaceSidebarPanel({
+  orgLabel,
+  projects,
+  selectedProjectId,
+  onSelectProject,
+  sessions,
+  selectedSessionId,
+  onSelectSession,
+  onArchiveSession,
+  onCreateWorkspace,
+}: WorkspaceSidebarPanelProps) {
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col bg-[var(--vk-bg-panel)]">
+      <section className="flex h-[57px] items-center border-b border-[var(--vk-border)] px-4">
+        <p className="truncate text-[15px] font-medium leading-[21px] text-[var(--vk-text-strong)]">
+          {orgLabel}
+        </p>
+        <button
+          type="button"
+          onClick={onCreateWorkspace}
+          className="ml-auto inline-flex h-7 items-center gap-1 rounded-[4px] border border-[var(--vk-border)] px-2 text-[12px] text-[var(--vk-text-normal)] hover:bg-[var(--vk-bg-hover)]"
+          aria-label="Add workspace"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          <span>Add Workspace</span>
+        </button>
+      </section>
+
+      <section className="border-b border-[var(--vk-border)] pb-2 pt-1.5">
+        <div className="flex h-[28px] items-center px-3">
+          <p className="text-[11px] uppercase tracking-[0.08em] text-[var(--vk-text-muted)]">Projects</p>
+        </div>
+        <div className="max-h-[260px] overflow-y-auto px-2">
+          {projects.map((project) => {
+            const selected = selectedProjectId === project.id;
+            return (
+              <button
+                key={project.id}
+                type="button"
+                onClick={() => onSelectProject(project.id)}
+                className={cn(
+                  "mb-1.5 flex w-full items-center gap-3 rounded-[6px] px-3 py-2.5 text-left text-[14px] leading-[21px]",
+                  selected
+                    ? "bg-[var(--vk-bg-hover)] text-[var(--vk-text-normal)]"
+                    : "text-[var(--vk-text-muted)] hover:bg-[var(--vk-bg-hover)]",
+                )}
+              >
+                <span className="h-2.5 w-2.5 rounded-full bg-[#3c83f6]" />
+                <span className="truncate">{project.id}</span>
+              </button>
+            );
+          })}
+        </div>
+      </section>
+
+      <section className="flex min-h-0 flex-1 flex-col pt-1.5">
+        <Sidebar
+          sessions={sessions}
+          selectedId={selectedSessionId}
+          onSelect={onSelectSession}
+          onArchive={onArchiveSession}
+          onCreateWorkspace={onCreateWorkspace}
+          showHeader={false}
+        />
+      </section>
+    </div>
+  );
+});