conductor-oss 0.2.16 → 0.2.18

package/web/.next/standalone/packages/web/src/app/sessions/[id]/page.tsx

@@ -1,120 +1,7 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
-import { useParams, useRouter } from "next/navigation";
-import { AppShell } from "@/components/layout/AppShell";
-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";
+import SessionPageClient from "@/features/sessions/SessionPageClient";
 
 export default function SessionPage() {
-  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("/");
-          }}
-        />
-      }
-    >
-      <div className="min-h-0 flex-1 overflow-hidden">
-        <SessionDetail sessionId={params.id} />
-      </div>
-    </AppShell>
-  );
+  return <SessionPageClient />;
 }

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

@@ -1,6 +1,6 @@
 "use client";
 
-import type { CSSProperties, ReactNode } from "react";
+import { useEffect, useState, type CSSProperties, type ReactNode } from "react";
 import { PanelLeftOpen, PanelRightClose } from "lucide-react";
 import { cn } from "@/lib/cn";
 
@@ -11,13 +11,63 @@ interface AppShellProps {
   onToggleSidebar: () => void;
 }
 
+const DEFAULT_SIDEBAR_WIDTH = 356;
+const MIN_SIDEBAR_WIDTH = 296;
+const MAX_SIDEBAR_WIDTH = 460;
+const SIDEBAR_WIDTH_STORAGE_KEY = "conductor-workspace-sidebar-width";
+
 export function AppShell({
   sidebar,
   children,
   sidebarOpen,
   onToggleSidebar,
 }: AppShellProps) {
-  const shellStyle = { "--workspace-sidebar-width": "356px" } as CSSProperties;
+  const [sidebarWidth, setSidebarWidth] = useState(DEFAULT_SIDEBAR_WIDTH);
+  const [resizing, setResizing] = useState(false);
+
+  useEffect(() => {
+    try {
+      const stored = window.localStorage.getItem(SIDEBAR_WIDTH_STORAGE_KEY);
+      const parsed = stored ? Number.parseInt(stored, 10) : Number.NaN;
+      if (Number.isFinite(parsed)) {
+        setSidebarWidth(Math.min(MAX_SIDEBAR_WIDTH, Math.max(MIN_SIDEBAR_WIDTH, parsed)));
+      }
+    } catch {
+      // Ignore invalid persisted width values.
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!resizing) return;
+
+    const handlePointerMove = (event: MouseEvent) => {
+      const nextWidth = Math.min(MAX_SIDEBAR_WIDTH, Math.max(MIN_SIDEBAR_WIDTH, event.clientX));
+      setSidebarWidth(nextWidth);
+    };
+
+    const handlePointerUp = () => {
+      setResizing(false);
+    };
+
+    window.addEventListener("mousemove", handlePointerMove);
+    window.addEventListener("mouseup", handlePointerUp);
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+
+    return () => {
+      window.removeEventListener("mousemove", handlePointerMove);
+      window.removeEventListener("mouseup", handlePointerUp);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+      try {
+        window.localStorage.setItem(SIDEBAR_WIDTH_STORAGE_KEY, String(sidebarWidth));
+      } catch {
+        // Ignore storage write failures.
+      }
+    };
+  }, [resizing, sidebarWidth]);
+
+  const shellStyle = { "--workspace-sidebar-width": `${sidebarWidth}px` } as CSSProperties;
 
   return (
     <div
@@ -45,6 +95,16 @@ export function AppShell({
         {sidebar}
       </aside>
 
+      {sidebarOpen ? (
+        <div
+          className="absolute bottom-0 left-[var(--workspace-sidebar-width)] top-0 z-30 hidden w-2 -translate-x-1/2 cursor-col-resize lg:block"
+          onMouseDown={() => setResizing(true)}
+          aria-hidden="true"
+        >
+          <div className="mx-auto h-full w-px bg-transparent transition-colors hover:bg-[var(--vk-border)]" />
+        </div>
+      ) : null}
+
       {sidebarOpen && (
         <button
           type="button"

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

@@ -18,17 +18,19 @@ export const TopBar = memo(function TopBar({ session, fallbackTitle, onOpenPrefe
       <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>
+      {onOpenPreferences ? (
+        <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>
+      ) : null}
     </header>
   );
 });

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

@@ -1,9 +1,9 @@
 "use client";
 
-import { memo } from "react";
-import { Plus } from "lucide-react";
+import { memo, useMemo } from "react";
+import { Layers3, Plus } from "lucide-react";
 import { cn } from "@/lib/cn";
-import type { DashboardSession } from "@/lib/types";
+import { getAttentionLevel, type DashboardSession } from "@/lib/types";
 import { Sidebar } from "@/components/layout/Sidebar";
 
 interface ProjectItem {
@@ -34,16 +34,47 @@ export const WorkspaceSidebarPanel = memo(function WorkspaceSidebarPanel({
   onArchiveSession,
   onCreateWorkspace,
 }: WorkspaceSidebarPanelProps) {
+  const sessionCountByProject = useMemo(() => {
+    const counts = new Map<string, { total: number; active: number }>();
+
+    for (const session of sessions) {
+      if (session.status === "archived") continue;
+      const current = counts.get(session.projectId) ?? { total: 0, active: 0 };
+      current.total += 1;
+      if (getAttentionLevel(session) !== "done") {
+        current.active += 1;
+      }
+      counts.set(session.projectId, current);
+    }
+
+    return counts;
+  }, [sessions]);
+
+  const totalActiveSessions = useMemo(() => {
+    return sessions.filter((session) => session.status !== "archived" && getAttentionLevel(session) !== "done").length;
+  }, [sessions]);
+
   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>
+      <section className="border-b border-[var(--vk-border)] px-4 py-4">
+        <div className="flex items-start gap-3">
+          <span className="inline-flex h-10 w-10 items-center justify-center rounded-[10px] border border-[var(--vk-border)] bg-[var(--vk-bg-main)] text-[var(--vk-text-normal)]">
+            <Layers3 className="h-4 w-4" />
+          </span>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-[15px] font-medium leading-[21px] text-[var(--vk-text-strong)]">
+              {orgLabel}
+            </p>
+            <p className="mt-1 text-[12px] text-[var(--vk-text-muted)]">
+              {projects.length} projects, {totalActiveSessions} active sessions
+            </p>
+          </div>
+        </div>
+
         <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)]"
+          className="mt-3 inline-flex h-8 w-full items-center justify-center gap-1 rounded-[6px] 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" />
@@ -56,8 +87,24 @@ export const WorkspaceSidebarPanel = memo(function WorkspaceSidebarPanel({
           <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">
+          <button
+            type="button"
+            onClick={() => onSelectProject(null)}
+            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]",
+              selectedProjectId === null
+                ? "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-[var(--vk-text-muted)]" />
+            <span className="truncate">All projects</span>
+            <span className="ml-auto text-[11px] text-[var(--vk-text-muted)]">{sessions.length}</span>
+          </button>
+
           {projects.map((project) => {
             const selected = selectedProjectId === project.id;
+            const counts = sessionCountByProject.get(project.id) ?? { total: 0, active: 0 };
             return (
               <button
                 key={project.id}
@@ -70,8 +117,19 @@ export const WorkspaceSidebarPanel = memo(function WorkspaceSidebarPanel({
                     : "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>
+                <span className="mt-1 h-2.5 w-2.5 shrink-0 rounded-full bg-[#3c83f6]" />
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate">{project.id}</span>
+                  {project.description ? (
+                    <span className="block truncate text-[11px] text-[var(--vk-text-muted)]">
+                      {project.description}
+                    </span>
+                  ) : null}
+                </span>
+                <span className="shrink-0 text-right">
+                  <span className="block text-[11px] text-[var(--vk-text-normal)]">{counts.active} active</span>
+                  <span className="block text-[10px] text-[var(--vk-text-muted)]">{counts.total} total</span>
+                </span>
               </button>
             );
           })}