@hienlh/ppm 0.2.20 → 0.2.21

package/src/web/app.tsx

@@ -3,8 +3,10 @@ import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { PanelLayout } from "@/components/layout/panel-layout";
 import { Sidebar } from "@/components/layout/sidebar";
+import { ProjectBar } from "@/components/layout/project-bar";
 import { MobileNav } from "@/components/layout/mobile-nav";
 import { MobileDrawer } from "@/components/layout/mobile-drawer";
+import { ProjectBottomSheet } from "@/components/layout/project-bottom-sheet";
 import { LoginScreen } from "@/components/auth/login-screen";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore } from "@/stores/tab-store";
@@ -17,12 +19,17 @@ import { useUrlSync, parseUrlState } from "@/hooks/use-url-sync";
 import { useGlobalKeybindings } from "@/hooks/use-global-keybindings";
 import { useHealthCheck } from "@/hooks/use-health-check";
 import { CommandPalette } from "@/components/layout/command-palette";
+import { cn } from "@/lib/utils";
 
 type AuthState = "checking" | "authenticated" | "unauthenticated";
 
 export function App() {
   const [authState, setAuthState] = useState<AuthState>("checking");
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [projectSheetOpen, setProjectSheetOpen] = useState(false);
+  const [mountedProjects, setMountedProjects] = useState<Set<string>>(
+    () => new Set(["__global__"]),
+  );
   const theme = useSettingsStore((s) => s.theme);
   const fetchProjects = useProjectStore((s) => s.fetchProjects);
   const fetchServerInfo = useSettingsStore((s) => s.fetchServerInfo);
@@ -113,6 +120,15 @@ export function App() {
     useTabStore.getState().switchProject(projectName);
   }, [activeProject?.name]);
 
+  // Keep-alive: mount workspace on first visit, never unmount
+  useEffect(() => {
+    const projectName = activeProject?.name ?? "__global__";
+    setMountedProjects((prev) => {
+      if (prev.has(projectName)) return prev;
+      return new Set([...prev, projectName]);
+    });
+  }, [activeProject?.name]);
+
   // On initial auth with no project selected, ensure a tab set exists
   useEffect(() => {
     if (authState === "authenticated" && !activeProject) {
@@ -138,22 +154,38 @@ export function App() {
     return <LoginScreen onSuccess={handleLoginSuccess} />;
   }
 
+  const activeProjectName = activeProject?.name ?? "__global__";
+
   return (
     <TooltipProvider>
       <div className="h-dvh flex flex-col bg-background text-foreground overflow-hidden">
         {/* Main layout */}
         <div className="flex flex-1 overflow-hidden">
+          {/* Desktop project bar (far left, non-collapsible) */}
+          <ProjectBar />
+
           {/* Desktop sidebar */}
           <Sidebar />
 
-          {/* Content area */}
-          <main className="flex-1 overflow-hidden pb-12 md:pb-0">
-            <PanelLayout />
-          </main>
+          {/* Content area — keep-alive per project */}
+          {[...mountedProjects].map((projectName) => (
+            <div
+              key={projectName}
+              className={cn(
+                "flex-1 overflow-hidden pb-12 md:pb-0",
+                activeProjectName !== projectName && "hidden",
+              )}
+            >
+              <PanelLayout projectName={projectName} />
+            </div>
+          ))}
         </div>
 
         {/* Mobile bottom nav */}
-        <MobileNav onMenuPress={() => setDrawerOpen(true)} />
+        <MobileNav
+          onMenuPress={() => setDrawerOpen(true)}
+          onProjectsPress={() => setProjectSheetOpen(true)}
+        />
 
         {/* Mobile drawer overlay */}
         <MobileDrawer
@@ -161,6 +193,12 @@ export function App() {
           onClose={() => setDrawerOpen(false)}
         />
 
+        {/* Mobile project bottom sheet */}
+        <ProjectBottomSheet
+          isOpen={projectSheetOpen}
+          onClose={() => setProjectSheetOpen(false)}
+        />
+
         {/* Command palette (Shift+Shift) */}
         <CommandPalette open={paletteOpen} onClose={closePalette} />
 

package/src/web/components/chat/chat-history-panel.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useState, useCallback } from "react";
+import { MessageSquare, Loader2, RefreshCw } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+import { useTabStore } from "@/stores/tab-store";
+import type { SessionInfo } from "../../../types/chat";
+
+interface ChatHistoryPanelProps {
+  projectName?: string;
+}
+
+function formatDate(iso: string): string {
+  try {
+    return new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+  } catch {
+    return "";
+  }
+}
+
+export function ChatHistoryPanel({ projectName }: ChatHistoryPanelProps) {
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const openTab = useTabStore((s) => s.openTab);
+
+  const load = useCallback(async () => {
+    if (!projectName) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await api.get<SessionInfo[]>(`${projectUrl(projectName)}/chat/sessions`);
+      setSessions(data);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to load sessions");
+    } finally {
+      setLoading(false);
+    }
+  }, [projectName]);
+
+  useEffect(() => { load(); }, [load]);
+
+  if (!projectName) {
+    return (
+      <div className="flex items-center justify-center h-32 text-xs text-text-subtle px-4 text-center">
+        Select a project to view chat history
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-24">
+        <Loader2 className="size-4 animate-spin text-text-subtle" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center gap-2 p-4 text-xs text-text-subtle">
+        <span>{error}</span>
+        <button onClick={load} className="flex items-center gap-1 hover:text-text-secondary transition-colors">
+          <RefreshCw className="size-3" /> Retry
+        </button>
+      </div>
+    );
+  }
+
+  if (sessions.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-32 gap-2 text-xs text-text-subtle">
+        <MessageSquare className="size-5" />
+        <span>No chat sessions yet</span>
+      </div>
+    );
+  }
+
+  function openSession(session: SessionInfo) {
+    openTab({
+      type: "chat",
+      title: session.title || "Chat",
+      projectId: projectName ?? null,
+      metadata: { projectName, sessionId: session.id },
+      closable: true,
+    });
+  }
+
+  return (
+    <div className="flex flex-col">
+      {sessions.map((session) => (
+        <button
+          key={session.id}
+          onClick={() => openSession(session)}
+          className="flex items-start gap-2 px-3 py-2 text-left hover:bg-surface-elevated transition-colors border-b border-border/50 last:border-0"
+        >
+          <MessageSquare className="size-3.5 shrink-0 mt-0.5 text-text-subtle" />
+          <div className="flex-1 min-w-0">
+            <p className="text-xs font-medium truncate text-text-primary">{session.title || "Untitled"}</p>
+            {session.updatedAt && (
+              <p className="text-[10px] text-text-subtle">{formatDate(session.updatedAt)}</p>
+            )}
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/web/components/chat/chat-tab.tsx

@@ -4,12 +4,11 @@ import { api, projectUrl } from "@/lib/api-client";
 import { useChat } from "@/hooks/use-chat";
 import { useUsage } from "@/hooks/use-usage";
 import { useTabStore } from "@/stores/tab-store";
-import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { buildBugReport, openGithubIssue, copyToClipboard } from "@/lib/report-bug";
 import { MessageList } from "./message-list";
 import { MessageInput, type ChatAttachment } from "./message-input";
-import { SessionPicker } from "./session-picker";
+import { Bot } from "lucide-react";
 import { SlashCommandPicker, type SlashItem } from "./slash-command-picker";
 import { FilePicker } from "./file-picker";
 import { UsageBadge, UsageDetailPanel } from "./usage-badge";
@@ -53,13 +52,25 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const [externalFiles, setExternalFiles] = useState<File[] | null>(null);
   const dragCounterRef = useRef(0);
 
-  const activeProject = useProjectStore((s) => s.activeProject);
+  // Use tab's own project, not global activeProject (keep-alive: hidden tabs must not react to switches)
+  const projectName = (metadata?.projectName as string) ?? "";
   const updateTab = useTabStore((s) => s.updateTab);
   const version = useSettingsStore((s) => s.version);
 
+  // Fetch AI model name
+  const [modelName, setModelName] = useState<string>("");
+  useEffect(() => {
+    api.get<{ default_provider: string; providers: Record<string, { model?: string }> }>("/api/settings/ai")
+      .then((ai) => {
+        const provider = ai.providers[ai.default_provider];
+        setModelName(provider?.model ?? ai.default_provider);
+      })
+      .catch(() => {});
+  }, []);
+
   // Usage runs independently — auto-refreshes on interval
   const { usageInfo, usageLoading, lastUpdatedAt, refreshUsage, mergeUsage } =
-    useUsage(activeProject?.name ?? "", providerId);
+    useUsage(projectName, providerId);
 
   // Persist sessionId and providerId to tab metadata so reload restores the session
   useEffect(() => {
@@ -80,18 +91,17 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     reconnect,
     refetchMessages,
     isConnected,
-  } = useChat(sessionId, providerId, activeProject?.name ?? "", { onUsageEvent: mergeUsage });
+  } = useChat(sessionId, providerId, projectName, { onUsageEvent: mergeUsage });
 
   const handleNewSession = useCallback(() => {
-    const projectName = activeProject?.name ?? null;
     useTabStore.getState().openTab({
       type: "chat",
       title: "AI Chat",
       metadata: { projectName },
-      projectId: projectName,
+      projectId: projectName || null,
       closable: true,
     });
-  }, [activeProject?.name]);
+  }, [projectName]);
 
   const handleSelectSession = useCallback((session: SessionInfo) => {
     setSessionId(session.id);
@@ -127,7 +137,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
 
       if (!sessionId) {
         try {
-          const pName = activeProject?.name ?? (metadata?.project as string) ?? "";
+          const pName = projectName;
           const session = await api.post<Session>(`${projectUrl(pName)}/chat/sessions`, {
             providerId,
             title: content.slice(0, 50),
@@ -145,7 +155,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
       }
       sendMessage(fullContent);
     },
-    [sessionId, providerId, metadata?.project, sendMessage, buildMessageWithAttachments, activeProject?.name],
+    [sessionId, providerId, projectName, sendMessage, buildMessageWithAttachments],
   );
 
   // --- Slash picker handlers ---
@@ -243,19 +253,17 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         pendingApproval={pendingApproval}
         onApprovalResponse={respondToApproval}
         isStreaming={isStreaming}
-        projectName={activeProject?.name}
+        projectName={projectName}
       />
 
       {/* Bottom toolbar */}
       <div className="border-t border-border bg-background shrink-0">
         {/* Session bar */}
         <div className="flex items-center justify-between px-3 py-1.5 border-b border-border/50">
-          <SessionPicker
-            currentSessionId={sessionId}
-            onSelectSession={handleSelectSession}
-            onNewSession={handleNewSession}
-            projectName={activeProject?.name}
-          />
+          <div className="flex items-center gap-1.5 text-xs text-text-secondary px-1">
+            <Bot className="size-3.5" />
+            <span className="truncate max-w-[180px]">{modelName || "AI"}</span>
+          </div>
           <div className="flex items-center gap-2">
             <UsageBadge
               usage={usageInfo}
@@ -265,7 +273,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
             {sessionId && (
               <button
                 onClick={async () => {
-                  const text = await buildBugReport(version, { sessionId, projectName: activeProject?.name });
+                  const text = await buildBugReport(version, { sessionId, projectName: projectName });
                   setBugReportText(text);
                   setCopied(false);
                 }}
@@ -323,7 +331,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           onSend={handleSend}
           isStreaming={isStreaming}
           onCancel={cancelStreaming}
-          projectName={activeProject?.name}
+          projectName={projectName}
           onSlashStateChange={handleSlashStateChange}
           onSlashItemsLoaded={setSlashItems}
           slashSelected={slashSelected}