conductor-oss 0.2.16 → 0.2.18

package/web/.next/standalone/packages/web/src/features/dashboard/components/WorkspaceOverview.tsx

@@ -0,0 +1,296 @@
+"use client";
+
+import { useMemo } from "react";
+import {
+  ArrowRight,
+  FolderGit2,
+  FolderKanban,
+  GitBranch,
+  Layers3,
+  Sparkles,
+} from "lucide-react";
+import { Button } from "@/components/ui/Button";
+import { Badge } from "@/components/ui/Badge";
+import { Card, CardContent, CardHeader } from "@/components/ui/Card";
+import { getAttentionLevel, type DashboardSession } from "@/lib/types";
+import type { ConfigProject } from "@/hooks/useConfig";
+
+type WorkspaceView = "chat" | "board";
+
+interface WorkspaceOverviewProps {
+  projects: ConfigProject[];
+  sessions: DashboardSession[];
+  selectedProjectId: string | null;
+  workspaceView: WorkspaceView;
+  agentCount: number;
+  onCreateWorkspace: () => void;
+  onSelectProject: (projectId: string | null) => void;
+  onSelectSession: (sessionId: string) => void;
+  onShowView: (view: WorkspaceView) => void;
+}
+
+type ProjectSummary = {
+  id: string;
+  description: string | null;
+  branch: string;
+  totalSessions: number;
+  activeSessions: number;
+};
+
+function formatRelativeTime(isoDate: string): string {
+  const diffMs = Date.now() - new Date(isoDate).getTime();
+  if (!Number.isFinite(diffMs) || diffMs < 60_000) return "Updated now";
+  const minutes = Math.floor(diffMs / 60_000);
+  if (minutes < 60) return `Updated ${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `Updated ${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `Updated ${days}d ago`;
+}
+
+function getStatusTone(session: DashboardSession): "success" | "warning" | "error" | "outline" {
+  const level = getAttentionLevel(session);
+  if (level === "merge") return "success";
+  if (level === "review" || level === "respond") return "warning";
+  if (session.status === "errored" || session.status === "killed") return "error";
+  return "outline";
+}
+
+function getStatusLabel(session: DashboardSession): string {
+  const level = getAttentionLevel(session);
+  if (level === "merge") return "Ready";
+  if (level === "respond") return "Needs input";
+  if (level === "review") return "Review";
+  if (level === "pending") return "Pending";
+  if (level === "done") return "Done";
+  return "Running";
+}
+
+export function WorkspaceOverview({
+  projects,
+  sessions,
+  selectedProjectId,
+  workspaceView,
+  agentCount,
+  onCreateWorkspace,
+  onSelectProject,
+  onSelectSession,
+  onShowView,
+}: WorkspaceOverviewProps) {
+  const visibleSessions = useMemo(
+    () => sessions.filter((session) => session.status !== "archived"),
+    [sessions],
+  );
+
+  const projectSummaries = useMemo<ProjectSummary[]>(() => {
+    return projects
+      .map((project) => {
+        const projectSessions = visibleSessions.filter((session) => session.projectId === project.id);
+        const activeSessions = projectSessions.filter((session) => getAttentionLevel(session) !== "done").length;
+
+        return {
+          id: project.id,
+          description: project.description,
+          branch: project.defaultBranch || "main",
+          totalSessions: projectSessions.length,
+          activeSessions,
+        };
+      })
+      .sort((left, right) => right.activeSessions - left.activeSessions || right.totalSessions - left.totalSessions || left.id.localeCompare(right.id));
+  }, [projects, visibleSessions]);
+
+  const recentSessions = useMemo(() => {
+    return [...visibleSessions]
+      .sort((left, right) => new Date(right.lastActivityAt).getTime() - new Date(left.lastActivityAt).getTime())
+      .slice(0, 5);
+  }, [visibleSessions]);
+
+  const activeSessions = visibleSessions.filter((session) => getAttentionLevel(session) !== "done").length;
+  const needsAttention = visibleSessions.filter((session) => {
+    const level = getAttentionLevel(session);
+    return level === "merge" || level === "respond" || level === "review";
+  }).length;
+  const mergeReady = visibleSessions.filter((session) => getAttentionLevel(session) === "merge").length;
+  const selectedProject = projectSummaries.find((project) => project.id === selectedProjectId) ?? null;
+
+  const statCards = [
+    { label: "Projects", value: String(projects.length), icon: FolderGit2 },
+    { label: "Active sessions", value: String(activeSessions), icon: Layers3 },
+    { label: "Need attention", value: String(needsAttention), icon: Sparkles },
+    { label: "Merge ready", value: String(mergeReady), icon: GitBranch },
+  ];
+
+  return (
+    <div className="border-b border-[var(--vk-border)] bg-[linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0))]">
+      <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-4 px-3 py-3 sm:px-4">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+          <div className="max-w-3xl">
+            <p className="text-[11px] uppercase tracking-[0.12em] text-[var(--vk-text-muted)]">
+              Frontend Control Surface
+            </p>
+            <h1 className="mt-1 text-[24px] font-semibold leading-[1.05] tracking-[-0.04em] text-[var(--vk-text-strong)] sm:text-[30px]">
+              Operate workspaces, sessions, and agents from one surface.
+            </h1>
+            <p className="mt-2 max-w-2xl text-[13px] leading-6 text-[var(--vk-text-muted)]">
+              The current design language stays intact, but the workspace entrypoint now exposes status, recent activity,
+              and project context without forcing you into a blank composer first.
+            </p>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
+            <div className="inline-flex rounded-[6px] border border-[var(--vk-border)] p-1">
+              <button
+                type="button"
+                onClick={() => onShowView("chat")}
+                className={`min-h-[32px] rounded-[4px] px-3 text-[13px] ${
+                  workspaceView === "chat"
+                    ? "bg-[var(--vk-bg-active)] text-[var(--vk-text-strong)]"
+                    : "text-[var(--vk-text-muted)] hover:bg-[var(--vk-bg-hover)]"
+                }`}
+              >
+                Chat launchpad
+              </button>
+              <button
+                type="button"
+                onClick={() => onShowView("board")}
+                className={`min-h-[32px] rounded-[4px] px-3 text-[13px] ${
+                  workspaceView === "board"
+                    ? "bg-[var(--vk-bg-active)] text-[var(--vk-text-strong)]"
+                    : "text-[var(--vk-text-muted)] hover:bg-[var(--vk-bg-hover)]"
+                }`}
+              >
+                Board view
+              </button>
+            </div>
+
+            <Button variant="outline" size="md" onClick={onCreateWorkspace}>
+              Add workspace
+            </Button>
+          </div>
+        </div>
+
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+          {statCards.map(({ label, value, icon: Icon }) => (
+            <Card key={label} className="bg-[color:color-mix(in_srgb,var(--vk-bg-panel)_86%,transparent)]">
+              <CardContent className="flex items-center gap-3 py-3">
+                <span className="inline-flex h-10 w-10 items-center justify-center rounded-[6px] border border-[var(--vk-border)] bg-[var(--vk-bg-main)] text-[var(--vk-text-normal)]">
+                  <Icon className="h-4 w-4" />
+                </span>
+                <div>
+                  <p className="text-[11px] uppercase tracking-[0.08em] text-[var(--vk-text-muted)]">{label}</p>
+                  <p className="mt-1 text-[22px] font-semibold text-[var(--vk-text-strong)]">{value}</p>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        <div className="grid gap-3 xl:grid-cols-[1.35fr_0.95fr]">
+          <Card>
+            <CardHeader className="justify-between">
+              <div>
+                <p className="text-[14px] font-semibold text-[var(--vk-text-strong)]">Recent sessions</p>
+                <p className="text-[12px] text-[var(--vk-text-muted)]">Jump back into active work without hunting through the sidebar.</p>
+              </div>
+              <Badge variant="outline">{visibleSessions.length}</Badge>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              {recentSessions.length === 0 ? (
+                <p className="text-[13px] text-[var(--vk-text-muted)]">No sessions yet. Create one from the launchpad below.</p>
+              ) : recentSessions.map((session) => (
+                <button
+                  key={session.id}
+                  type="button"
+                  onClick={() => onSelectSession(session.id)}
+                  className="flex w-full items-center gap-3 rounded-[6px] border border-[var(--vk-border)] bg-[var(--vk-bg-main)] px-3 py-3 text-left transition-colors hover:bg-[var(--vk-bg-hover)]"
+                >
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      <p className="truncate text-[14px] font-medium text-[var(--vk-text-strong)]">
+                        {session.summary?.trim() || session.projectId}
+                      </p>
+                      <Badge variant={getStatusTone(session)}>{getStatusLabel(session)}</Badge>
+                    </div>
+                    <p className="mt-1 truncate text-[12px] text-[var(--vk-text-muted)]">
+                      {session.projectId}
+                      {session.branch ? ` · ${session.branch}` : ""}
+                      {session.issueId ? ` · ${session.issueId}` : ""}
+                    </p>
+                  </div>
+                  <div className="shrink-0 text-right">
+                    <p className="text-[11px] text-[var(--vk-text-muted)]">{formatRelativeTime(session.lastActivityAt)}</p>
+                    <ArrowRight className="ml-auto mt-2 h-4 w-4 text-[var(--vk-text-muted)]" />
+                  </div>
+                </button>
+              ))}
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="justify-between">
+              <div>
+                <p className="text-[14px] font-semibold text-[var(--vk-text-strong)]">Project focus</p>
+                <p className="text-[12px] text-[var(--vk-text-muted)]">
+                  {selectedProject ? `Selected: ${selectedProject.id}` : "Select a project to scope new work."}
+                </p>
+              </div>
+              <Badge variant="outline">{agentCount} agents</Badge>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <button
+                type="button"
+                onClick={() => onSelectProject(null)}
+                className={`flex w-full items-center justify-between rounded-[6px] border px-3 py-2 text-left ${
+                  selectedProjectId === null
+                    ? "border-[var(--vk-border)] bg-[var(--vk-bg-hover)] text-[var(--vk-text-strong)]"
+                    : "border-[var(--vk-border)] bg-[var(--vk-bg-main)] text-[var(--vk-text-normal)] hover:bg-[var(--vk-bg-hover)]"
+                }`}
+              >
+                <span>All projects</span>
+                <Badge variant="outline">{visibleSessions.length}</Badge>
+              </button>
+
+              {projectSummaries.length === 0 ? (
+                <p className="text-[13px] text-[var(--vk-text-muted)]">No configured projects yet.</p>
+              ) : projectSummaries.slice(0, 6).map((project) => (
+                <button
+                  key={project.id}
+                  type="button"
+                  onClick={() => onSelectProject(project.id)}
+                  className={`flex w-full items-start justify-between gap-3 rounded-[6px] border px-3 py-2.5 text-left ${
+                    selectedProjectId === project.id
+                      ? "border-[var(--vk-border)] bg-[var(--vk-bg-hover)]"
+                      : "border-[var(--vk-border)] bg-[var(--vk-bg-main)] hover:bg-[var(--vk-bg-hover)]"
+                  }`}
+                >
+                  <div className="min-w-0">
+                    <p className="truncate text-[13px] font-medium text-[var(--vk-text-strong)]">{project.id}</p>
+                    <p className="truncate text-[12px] text-[var(--vk-text-muted)]">
+                      {project.description?.trim() || `Default branch: ${project.branch}`}
+                    </p>
+                  </div>
+                  <div className="shrink-0 text-right">
+                    <p className="text-[12px] text-[var(--vk-text-strong)]">{project.activeSessions} active</p>
+                    <p className="text-[11px] text-[var(--vk-text-muted)]">{project.totalSessions} total</p>
+                  </div>
+                </button>
+              ))}
+
+              {selectedProject ? (
+                <div className="rounded-[6px] border border-[var(--vk-border)] bg-[var(--vk-bg-main)] px-3 py-3">
+                  <div className="flex items-center gap-2">
+                    <FolderKanban className="h-4 w-4 text-[var(--vk-text-muted)]" />
+                    <p className="text-[13px] font-medium text-[var(--vk-text-strong)]">{selectedProject.id}</p>
+                  </div>
+                  <p className="mt-2 text-[12px] leading-5 text-[var(--vk-text-muted)]">
+                    {selectedProject.description?.trim() || "This project is ready to launch work from chat or board mode."}
+                  </p>
+                </div>
+              ) : null}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

package/web/.next/standalone/packages/web/src/features/sessions/SessionPageClient.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { AppShell } from "@/components/layout/AppShell";
+import { TopBar } from "@/components/layout/TopBar";
+import { WorkspaceSidebarPanel } from "@/components/layout/WorkspaceSidebarPanel";
+import { SessionDetail } from "@/components/sessions/SessionDetail";
+import { useConfig } from "@/hooks/useConfig";
+import { useSessions } from "@/hooks/useSessions";
+import type { DashboardSession } from "@/lib/types";
+
+export default function SessionPageClient() {
+  const params = useParams<{ id: string }>();
+  const router = useRouter();
+  const { projects } = useConfig();
+  const { sessions, refresh } = useSessions();
+  const dashboardSessions = sessions as unknown as DashboardSession[];
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (window.innerWidth < 1024) {
+      setSidebarOpen(false);
+    }
+  }, []);
+
+  const selectedSession = useMemo(
+    () => dashboardSessions.find((session) => session.id === params.id) ?? null,
+    [dashboardSessions, params.id],
+  );
+
+  useEffect(() => {
+    if (selectedSession?.projectId) {
+      setSelectedProjectId(selectedSession.projectId);
+      return;
+    }
+    if (!selectedProjectId && projects.length > 0) {
+      setSelectedProjectId(projects[0]?.id ?? null);
+    }
+  }, [projects, selectedProjectId, selectedSession?.projectId]);
+
+  const toggleSidebar = () => setSidebarOpen((prev) => !prev);
+
+  const closeSidebarOnMobile = () => {
+    if (typeof window !== "undefined" && window.innerWidth < 1024) {
+      setSidebarOpen(false);
+    }
+  };
+
+  async function handleArchiveSession(sessionId: string) {
+    let res = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/archive`, {
+      method: "POST",
+    });
+    let data = (await res.json().catch(() => null)) as
+      | { ok?: boolean; error?: string }
+      | null;
+
+    if (res.status === 404) {
+      res = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/actions`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "archive" }),
+      });
+      data = (await res.json().catch(() => null)) as
+        | { ok?: boolean; error?: string }
+        | null;
+    }
+
+    if (!res.ok) {
+      throw new Error(data?.error ?? `Failed to archive session: ${res.status}`);
+    }
+
+    if (sessionId === params.id) {
+      router.push("/");
+      return;
+    }
+
+    await refresh();
+  }
+
+  if (!params.id) {
+    return (
+      <div className="flex h-dvh min-h-[100dvh] items-center justify-center">
+        <span className="text-[13px] text-[var(--text-muted)]">No session ID provided</span>
+      </div>
+    );
+  }
+
+  return (
+    <AppShell
+      sidebarOpen={sidebarOpen}
+      onToggleSidebar={toggleSidebar}
+      sidebar={
+        <WorkspaceSidebarPanel
+          orgLabel="conductor-oss"
+          projects={projects}
+          selectedProjectId={selectedProjectId}
+          onSelectProject={(projectId) => {
+            setSelectedProjectId(projectId);
+          }}
+          sessions={dashboardSessions}
+          selectedSessionId={params.id}
+          onSelectSession={(sessionId) => {
+            router.push(`/sessions/${encodeURIComponent(sessionId)}?tab=chat`);
+            closeSidebarOnMobile();
+          }}
+          onArchiveSession={handleArchiveSession}
+          onCreateWorkspace={() => {
+            router.push("/");
+          }}
+        />
+      }
+    >
+      <TopBar
+        session={selectedSession}
+        fallbackTitle={selectedSession?.projectId ?? "Session"}
+      />
+      <div className="min-h-0 flex-1 overflow-hidden">
+        <SessionDetail sessionId={params.id} />
+      </div>
+    </AppShell>
+  );
+}

package/web/.next/standalone/packages/web/src/hooks/useSessionFeed.ts

@@ -4,9 +4,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { NormalizedChatEntry } from "@/lib/chatFeed";
 import { subscribeToSnapshotEvents } from "@/lib/liveEvents";
 import { TERMINAL_STATUSES, type SSESnapshotEvent } from "@/lib/types";
-const ACTIVE_POLL_INTERVAL_MS = 1000;
-const HIDDEN_POLL_INTERVAL_MS = 1000;
-const TERMINAL_POLL_INTERVAL_MS = 10_000;
+const ACTIVE_POLL_INTERVAL_MS = 4_000;
+const HIDDEN_POLL_INTERVAL_MS = 15_000;
+const TERMINAL_POLL_INTERVAL_MS = 30_000;
 
 interface SessionFeedResponse {
   entries?: NormalizedChatEntry[];
@@ -209,26 +209,29 @@ export function useSessionFeed(sessionId: string | null | undefined): UseSession
     window.addEventListener("focus", handleWindowFocus);
     document.addEventListener("visibilitychange", handleVisibilityChange);
 
-    let intervalId: number | null = null;
+    let pollTimeoutId: number | null = null;
+
+    const stopPolling = () => {
+      if (pollTimeoutId === null) return;
+      window.clearTimeout(pollTimeoutId);
+      pollTimeoutId = null;
+    };
 
     const startPolling = () => {
-      if (intervalId !== null) return;
+      stopPolling();
       const interval = terminalRef.current
         ? TERMINAL_POLL_INTERVAL_MS
         : document.visibilityState === "visible"
           ? ACTIVE_POLL_INTERVAL_MS
           : HIDDEN_POLL_INTERVAL_MS;
-      intervalId = window.setInterval(() => {
-        void refresh();
+      pollTimeoutId = window.setTimeout(async () => {
+        await refresh();
+        if (mountedRef.current) {
+          startPolling();
+        }
       }, interval);
     };
 
-    const stopPolling = () => {
-      if (intervalId === null) return;
-      window.clearInterval(intervalId);
-      intervalId = null;
-    };
-
     startPolling();
     const unsubscribe = subscribeToSnapshotEvents((payload: SSESnapshotEvent) => {
       if (!mountedRef.current) return;
@@ -247,6 +250,7 @@ export function useSessionFeed(sessionId: string | null | undefined): UseSession
       }
       snapshotSignatureRef.current = signature;
       void refresh();
+      startPolling();
     });
 
     return () => {

package/web/.next/standalone/packages/web/src/hooks/useSessions.ts

@@ -18,6 +18,9 @@ interface UseSessionsReturn {
   refresh: () => Promise<void>;
 }
 
+const ACTIVE_FALLBACK_POLL_INTERVAL_MS = 15_000;
+const HIDDEN_FALLBACK_POLL_INTERVAL_MS = 45_000;
+
 function sessionsEqual(left: Session[], right: Session[]): boolean {
   if (left === right) return true;
   if (left.length !== right.length) return false;
@@ -90,19 +93,28 @@ export function useSessions(projectId?: string | null): UseSessionsReturn {
 
     let pollingId: number | null = null;
 
-    const startPolling = () => {
-      if (pollingId !== null) return;
-      pollingId = window.setInterval(() => {
-        if (mountedRef.current) void fetchSessions();
-      }, 3000);
-    };
+    const getPollDelay = () =>
+      document.visibilityState === "visible"
+        ? ACTIVE_FALLBACK_POLL_INTERVAL_MS
+        : HIDDEN_FALLBACK_POLL_INTERVAL_MS;
 
     const stopPolling = () => {
       if (pollingId === null) return;
-      window.clearInterval(pollingId);
+      window.clearTimeout(pollingId);
       pollingId = null;
     };
 
+    const startPolling = () => {
+      stopPolling();
+      pollingId = window.setTimeout(async () => {
+        if (!mountedRef.current) return;
+        await fetchSessions();
+        if (mountedRef.current) {
+          startPolling();
+        }
+      }, getPollDelay());
+    };
+
     startPolling();
     const unsubscribe = subscribeToSnapshotEvents((data: SSESnapshotEvent) => {
       if (!mountedRef.current) return;
@@ -112,10 +124,28 @@ export function useSessions(projectId?: string | null): UseSessionsReturn {
       setLoading(false);
     });
 
+    const refresh = () => {
+      void fetchSessions();
+      startPolling();
+    };
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        refresh();
+      } else {
+        startPolling();
+      }
+    };
+
+    window.addEventListener("focus", refresh);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
     return () => {
       mountedRef.current = false;
       unsubscribe();
       stopPolling();
+      window.removeEventListener("focus", refresh);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
     };
   }, [applySessions, fetchSessions, projectId]);
 

package/web/.next/static/chunks/1e67fbc3874d3f51.js

@@ -0,0 +1 @@
+(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,69971,e=>{"use strict";var c=e.i(95187);let r=(0,c.createServerReference)("00c0a601f70ee423bfba0ca90a896e1583105820a8",c.callServer,void 0,c.findSourceMapURL,"createOrReadKeylessAction");e.s(["createOrReadKeylessAction",()=>r])},23151,e=>{"use strict";e.s([],29135),e.i(29135);var c=e.i(95187);let r=(0,c.createServerReference)("401ec4cb0b784bfb9223c4bd7b67f802fc28f88168",c.callServer,void 0,c.findSourceMapURL,"syncKeylessConfigAction");var t=e.i(69971);let s=(0,c.createServerReference)("006b576f68969d56679602f2efafd04f16e06733df",c.callServer,void 0,c.findSourceMapURL,"deleteKeylessAction");var i=e.i(51688);e.s(["createOrReadKeylessAction",()=>t.createOrReadKeylessAction,"deleteKeylessAction",()=>s,"detectKeylessEnvDriftAction",()=>i.detectKeylessEnvDriftAction,"syncKeylessConfigAction",()=>r],23151)}]);