@hienlh/ppm 0.11.18 → 0.12.1

package/src/web/components/layout/editor-panel.tsx

@@ -4,6 +4,8 @@ import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { useTabStore, type TabType } from "@/stores/tab-store";
 import { api, projectUrl } from "@/lib/api-client";
+import { useProjectTags, TagChipBar } from "@/components/chat/tag-filter-chips";
+import { SessionContextMenu } from "@/components/chat/session-context-menu";
 import type { SessionInfo } from "../../../types/chat";
 import { TabBar } from "./tab-bar";
 import { SplitDropOverlay } from "./split-drop-overlay";
@@ -111,6 +113,8 @@ function EmptyPanel({ panelId }: { panelId: string }) {
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
   const [loadingSessions, setLoadingSessions] = useState(false);
   const [showAll, setShowAll] = useState(false);
+  const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
+  const { projectTags, tagCounts, loadTags } = useProjectTags(activeProject?.name);
 
   const loadSessions = useCallback(async () => {
     if (!activeProject?.name) return;
@@ -176,41 +180,58 @@ function EmptyPanel({ panelId }: { panelId: string }) {
     );
   }
 
-  const pinnedSessions = sessions.filter((s) => s.pinned);
-  const allRecentSessions = sessions.filter((s) => !s.pinned);
+  const handleTagChanged = useCallback((sid: string, tag: { id: number; name: string; color: string } | null) => {
+    setSessions((prev) => prev.map((s) => s.id === sid ? { ...s, tag } : s));
+    loadTags();
+  }, [loadTags]);
+
+  const filtered = selectedTagId !== null ? sessions.filter((s) => s.tag?.id === selectedTagId) : sessions;
+  const pinnedSessions = filtered.filter((s) => s.pinned);
+  const allRecentSessions = filtered.filter((s) => !s.pinned);
   const recentSessions = showAll ? allRecentSessions : allRecentSessions.slice(0, MAX_RECENT_SESSIONS);
   const hasMore = allRecentSessions.length > MAX_RECENT_SESSIONS;
 
   function renderSessionRow(session: SessionInfo) {
     return (
-      <button
+      <SessionContextMenu
         key={session.id}
-        onClick={() => openSession(session)}
-        className="group flex items-center gap-2.5 w-full px-3 py-2.5 text-left hover:bg-surface-elevated active:bg-surface-elevated transition-colors border-b border-border/50 last:border-0"
+        session={session}
+        projectName={activeProject!.name}
+        projectTags={projectTags}
+        onTogglePin={togglePin}
+        onTagChanged={handleTagChanged}
       >
-        <MessageSquare className="size-3.5 shrink-0 text-text-subtle" />
-        <span className="flex-1 min-w-0 text-xs font-medium truncate text-text-primary">
-          {session.title || "Untitled"}
-        </span>
-        {session.updatedAt && (
-          <span className="text-[10px] text-text-subtle shrink-0">
-            {formatRelativeDate(session.updatedAt)}
-          </span>
-        )}
-        <span
-          role="button"
-          tabIndex={0}
-          onClick={(e) => togglePin(e, session)}
-          className={`p-1 rounded transition-colors shrink-0 ${
-            session.pinned
-              ? "text-primary hover:text-primary/70"
-              : "text-text-subtle can-hover:opacity-0 can-hover:group-hover:opacity-100 hover:text-text-primary"
-          }`}
-          aria-label={session.pinned ? "Unpin session" : "Pin session"}
+        <button
+          onClick={() => openSession(session)}
+          className="group flex items-center gap-2.5 w-full px-3 py-2.5 text-left hover:bg-surface-elevated active:bg-surface-elevated transition-colors border-b border-border/50 last:border-0"
         >
-          {session.pinned ? <PinOff className="size-3" /> : <Pin className="size-3" />}
+          <MessageSquare className="size-3.5 shrink-0 text-text-subtle" />
+          {session.tag && (
+            <span className="size-2 rounded-full shrink-0" style={{ backgroundColor: session.tag.color }} title={session.tag.name} />
+          )}
+          <span className="flex-1 min-w-0 text-xs font-medium truncate text-text-primary">
+            {session.title || "Untitled"}
+          </span>
+          {session.updatedAt && (
+            <span className="text-[10px] text-text-subtle shrink-0">
+              {formatRelativeDate(session.updatedAt)}
+            </span>
+          )}
+          <span
+            role="button"
+            tabIndex={0}
+            onClick={(e) => togglePin(e, session)}
+            className={`p-1 rounded transition-colors shrink-0 ${
+              session.pinned
+                ? "text-primary hover:text-primary/70"
+                : "text-text-subtle can-hover:opacity-0 can-hover:group-hover:opacity-100 hover:text-text-primary"
+            }`}
+            aria-label={session.pinned ? "Unpin session" : "Pin session"}
+          >
+            {session.pinned ? <PinOff className="size-3" /> : <Pin className="size-3" />}
         </span>
-      </button>
+        </button>
+      </SessionContextMenu>
     );
   }
 
@@ -234,6 +255,12 @@ function EmptyPanel({ panelId }: { panelId: string }) {
           })}
         </div>
 
+        {activeProject && !loadingSessions && sessions.length > 0 && (
+          <div className="w-full max-w-sm">
+            <TagChipBar projectTags={projectTags} tagCounts={tagCounts} totalCount={sessions.length} selectedTagId={selectedTagId} onSelect={setSelectedTagId} />
+          </div>
+        )}
+
         {activeProject && !loadingSessions && pinnedSessions.length > 0 && (
           <div className="flex flex-col gap-2 w-full max-w-sm">
             <p className="text-xs text-text-subtle text-center">Pinned</p>

package/src/web/components/layout/tab-bar.tsx

@@ -20,6 +20,12 @@ import { useTabDrag } from "@/hooks/use-tab-drag";
 import { useTouchTabDrag, wasTouchDragRecent } from "@/hooks/use-touch-tab-drag";
 import { openCommandPalette } from "@/hooks/use-global-keybindings";
 import { api, projectUrl } from "@/lib/api-client";
+import { useProjectTags } from "@/components/chat/tag-filter-chips";
+import {
+  ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent,
+  ContextMenuItem, ContextMenuSeparator,
+} from "@/components/ui/context-menu";
+import { Tag, Check } from "lucide-react";
 import { useNotificationStore, notificationColor } from "@/stores/notification-store";
 import { useStreamingStore } from "@/stores/streaming-store";
 import { useTabOverflow, getHiddenUnreadDirection } from "@/hooks/use-tab-overflow";
@@ -64,6 +70,37 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
     useTabDrag(effectivePanelId);
   const { handleTouchStart, handleTouchMove, handleTouchEnd } = useTouchTabDrag(effectivePanelId);
 
+  const { projectTags, loadTags } = useProjectTags(activeProject?.name);
+  const [sessionTagMap, setSessionTagMap] = useState<Record<string, { id: number; name: string; color: string }>>({});
+
+  // Fetch session tags for open chat tabs
+  const chatSessionIds = tabs.filter((t) => t.type === "chat" && t.metadata?.sessionId).map((t) => t.metadata!.sessionId as string);
+  useEffect(() => {
+    if (!activeProject?.name || chatSessionIds.length === 0) return;
+    api.get<{ sessions: { id: string; tag?: { id: number; name: string; color: string } | null }[] }>(
+      `${projectUrl(activeProject.name)}/chat/sessions?limit=50`,
+    ).then((data) => {
+      const map: Record<string, { id: number; name: string; color: string }> = {};
+      for (const s of data.sessions) { if (s.tag) map[s.id] = s.tag; }
+      setSessionTagMap(map);
+    }).catch(() => {});
+  }, [activeProject?.name, chatSessionIds.join(",")]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const assignTagToSession = useCallback(async (sessionId: string, tagId: number | null) => {
+    if (!activeProject?.name) return;
+    try {
+      if (tagId !== null) {
+        await api.patch(`${projectUrl(activeProject.name)}/chat/sessions/${sessionId}/tag`, { tagId });
+        const tag = projectTags.find((t) => t.id === tagId);
+        if (tag) setSessionTagMap((prev) => ({ ...prev, [sessionId]: { id: tag.id, name: tag.name, color: tag.color } }));
+      } else {
+        await api.del(`${projectUrl(activeProject.name)}/chat/sessions/${sessionId}/tag`);
+        setSessionTagMap((prev) => { const n = { ...prev }; delete n[sessionId]; return n; });
+      }
+      loadTags();
+    } catch { /* silent */ }
+  }, [activeProject?.name, projectTags, loadTags]);
+
   const notifications = useNotificationStore((s) => s.notifications);
   const streamingSessions = useStreamingStore((s) => s.sessions);
   const { canScrollLeft, canScrollRight, scrollLeft: doScrollLeft, scrollRight: doScrollRight } =
@@ -219,6 +256,35 @@ export const TabBar = memo(function TabBar({ panelId }: TabBarProps) {
               }}
               onRename={tab.type === "chat" ? (title) => handleRenameTab(tab, title) : undefined}
               onContextAction={(action) => handleTabContextAction(tab, action)}
+              tagColor={sessionId ? sessionTagMap[sessionId]?.color : undefined}
+              extraMenuContent={sessionId && projectTags.length > 0 ? (
+                <>
+                  <ContextMenuSub>
+                    <ContextMenuSubTrigger>
+                      <Tag className="size-3.5 mr-2" />
+                      Set Tag
+                    </ContextMenuSubTrigger>
+                    <ContextMenuSubContent>
+                      {projectTags.map((pt) => (
+                        <ContextMenuItem key={pt.id} onClick={() => assignTagToSession(sessionId, pt.id)}>
+                          <span className="size-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: pt.color }} />
+                          {pt.name}
+                          {sessionTagMap[sessionId]?.id === pt.id && <Check className="size-3 ml-auto" />}
+                        </ContextMenuItem>
+                      ))}
+                      {sessionTagMap[sessionId] && (
+                        <>
+                          <ContextMenuSeparator />
+                          <ContextMenuItem onClick={() => assignTagToSession(sessionId, null)}>
+                            Remove tag
+                          </ContextMenuItem>
+                        </>
+                      )}
+                    </ContextMenuSubContent>
+                  </ContextMenuSub>
+                  <ContextMenuSeparator />
+                </>
+              ) : undefined}
             />
             );
           })}

package/src/web/components/settings/tag-settings-section.tsx

@@ -0,0 +1,167 @@
+import { useState, useEffect, useCallback } from "react";
+import { Plus, Trash2, Pencil, Check, X, RotateCcw } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
+import type { ProjectTag } from "../../../types/chat";
+
+interface TagSettingsSectionProps {
+  projectName: string;
+  onTagsChanged?: () => void;
+}
+
+export function TagSettingsSection({ projectName, onTagsChanged }: TagSettingsSectionProps) {
+  const [tags, setTags] = useState<ProjectTag[]>([]);
+  const [defaultTagId, setDefaultTagId] = useState<number | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [editName, setEditName] = useState("");
+  const [editColor, setEditColor] = useState("");
+  const [newName, setNewName] = useState("");
+  const [newColor, setNewColor] = useState("#22c55e");
+  const [showAdd, setShowAdd] = useState(false);
+
+  const baseUrl = `${projectUrl(projectName)}/tags`;
+
+  const loadTags = useCallback(async () => {
+    try {
+      const data = await api.get<{ tags: ProjectTag[]; defaultTagId: number | null }>(baseUrl);
+      setTags(data.tags);
+      setDefaultTagId(data.defaultTagId);
+    } catch { /* silent */ }
+    setLoading(false);
+  }, [baseUrl]);
+
+  useEffect(() => { loadTags(); }, [loadTags]);
+
+  const handleCreate = async () => {
+    if (!newName.trim()) return;
+    try {
+      await api.post(baseUrl, { name: newName.trim(), color: newColor });
+      setNewName("");
+      setShowAdd(false);
+      loadTags();
+      onTagsChanged?.();
+    } catch { /* silent */ }
+  };
+
+  const handleUpdate = async (id: number) => {
+    try {
+      await api.patch(`${baseUrl}/${id}`, { name: editName.trim() || undefined, color: editColor || undefined });
+      setEditingId(null);
+      loadTags();
+      onTagsChanged?.();
+    } catch { /* silent */ }
+  };
+
+  const handleDelete = async (id: number, name: string) => {
+    if (!window.confirm(`Delete tag "${name}"? Sessions with this tag will become untagged.`)) return;
+    try {
+      await api.del(`${baseUrl}/${id}`);
+      loadTags();
+      onTagsChanged?.();
+    } catch { /* silent */ }
+  };
+
+  const handleSetDefault = async (tagId: number) => {
+    const newId = tagId === defaultTagId ? null : tagId;
+    try {
+      await api.patch(`${baseUrl}/default-tag`, { tagId: newId });
+      setDefaultTagId(newId);
+    } catch { /* silent */ }
+  };
+
+  const handleReset = async () => {
+    try {
+      await api.post(`${baseUrl}/reset`, {});
+      loadTags();
+      onTagsChanged?.();
+    } catch { /* silent */ }
+  };
+
+  if (loading) return <p className="text-[11px] text-muted-foreground animate-pulse">Loading tags...</p>;
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <h3 className="text-xs font-medium text-muted-foreground">Session Tags</h3>
+        <div className="flex items-center gap-1">
+          <button onClick={handleReset} className="p-1 rounded text-text-subtle hover:text-text-secondary" title="Reset to defaults">
+            <RotateCcw className="size-3" />
+          </button>
+          <button onClick={() => setShowAdd(!showAdd)} className="p-1 rounded text-primary hover:bg-primary/10" title="Add tag">
+            <Plus className="size-3.5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Add form */}
+      {showAdd && (
+        <div className="flex items-center gap-1.5 px-1">
+          <input type="color" value={newColor} onChange={(e) => setNewColor(e.target.value)} className="size-6 rounded cursor-pointer border-0 p-0" />
+          <input
+            value={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter") handleCreate(); if (e.key === "Escape") setShowAdd(false); }}
+            placeholder="Tag name"
+            className="flex-1 min-w-0 bg-surface-elevated text-[11px] text-text-primary px-2 py-1 rounded border border-border outline-none focus:border-primary"
+            autoFocus
+          />
+          <button onClick={handleCreate} className="p-1 text-green-500 hover:text-green-400"><Check className="size-3.5" /></button>
+          <button onClick={() => setShowAdd(false)} className="p-1 text-text-subtle hover:text-text-secondary"><X className="size-3.5" /></button>
+        </div>
+      )}
+
+      {/* Tag list */}
+      <div className="space-y-0.5">
+        {tags.map((tag) => (
+          <div key={tag.id} className="flex items-center gap-1.5 px-1 py-1 rounded hover:bg-surface-elevated group">
+            {editingId === tag.id ? (
+              <>
+                <input type="color" value={editColor} onChange={(e) => setEditColor(e.target.value)} className="size-5 rounded cursor-pointer border-0 p-0" />
+                <input
+                  value={editName}
+                  onChange={(e) => setEditName(e.target.value)}
+                  onKeyDown={(e) => { if (e.key === "Enter") handleUpdate(tag.id); if (e.key === "Escape") setEditingId(null); }}
+                  className="flex-1 min-w-0 bg-surface-elevated text-[11px] px-1.5 py-0.5 rounded border border-border outline-none focus:border-primary"
+                  autoFocus
+                />
+                <button onClick={() => handleUpdate(tag.id)} className="p-0.5 text-green-500"><Check className="size-3" /></button>
+                <button onClick={() => setEditingId(null)} className="p-0.5 text-text-subtle"><X className="size-3" /></button>
+              </>
+            ) : (
+              <>
+                <span className="size-3 rounded-full shrink-0" style={{ backgroundColor: tag.color }} />
+                <span className="flex-1 text-[11px] text-text-primary truncate">{tag.name}</span>
+                <button
+                  onClick={() => handleSetDefault(tag.id)}
+                  className={`px-1.5 py-0.5 rounded text-[9px] font-medium transition-colors ${
+                    tag.id === defaultTagId
+                      ? "bg-primary/15 text-primary border border-primary/30"
+                      : "text-text-subtle border border-transparent can-hover:opacity-0 can-hover:group-hover:opacity-100 hover:bg-surface-elevated hover:border-border"
+                  }`}
+                  title={tag.id === defaultTagId ? "Default tag (click to unset)" : "Set as default for new sessions"}
+                >
+                  {tag.id === defaultTagId ? "Default" : "Set default"}
+                </button>
+                <button
+                  onClick={() => { setEditingId(tag.id); setEditName(tag.name); setEditColor(tag.color); }}
+                  className="p-0.5 rounded text-text-subtle hover:text-text-secondary can-hover:opacity-0 can-hover:group-hover:opacity-100"
+                >
+                  <Pencil className="size-3" />
+                </button>
+                <button
+                  onClick={() => handleDelete(tag.id, tag.name)}
+                  className="p-0.5 rounded text-text-subtle hover:text-red-400 can-hover:opacity-0 can-hover:group-hover:opacity-100"
+                >
+                  <Trash2 className="size-3" />
+                </button>
+              </>
+            )}
+          </div>
+        ))}
+        {tags.length === 0 && (
+          <p className="text-[11px] text-muted-foreground py-2 text-center">No tags. Click + to create one.</p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/web/hooks/use-extension-ws.ts

@@ -151,10 +151,15 @@ export function useExtensionWs(enabled = true) {
             if (t) { existingTabId = t.id; break; }
           }
           if (existingTabId) {
-            // Tab already exists — update metadata with new panelId (panel was recreated)
+            // Tab already exists — update metadata with new panelId (panel was recreated).
+            // Preserve existing metadata (e.g. projectName) since updateTab replaces metadata entirely.
+            const existingTab = ps.grid.flat().reduce<Record<string, unknown> | undefined>((acc, pid) => {
+              if (acc) return acc;
+              return ps.panels[pid]?.tabs.find(tab => tab.id === existingTabId)?.metadata;
+            }, undefined);
             useTabStore.getState().updateTab(existingTabId, {
               title: msg.title,
-              metadata: { viewType: viewTypeSlug, panelId: msg.panelId, extensionId: msg.extensionId },
+              metadata: { ...existingTab, viewType: viewTypeSlug, panelId: msg.panelId, extensionId: msg.extensionId },
             });
             // Focus the existing tab so Cmd+G / command palette switches to it
             useTabStore.getState().setActiveTab(existingTabId);

package/src/web/styles/globals.css

@@ -172,6 +172,7 @@ html, body {
 
 .markdown-content pre {
   overflow-x: auto;
+  overflow-y: hidden;
   border-radius: 6px;
   background: var(--color-background);
   padding: 0.5rem;
@@ -179,6 +180,19 @@ html, body {
   font-family: var(--font-mono);
   border: 1px solid var(--color-border);
   margin: 0.5rem 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+}
+
+.markdown-content pre::-webkit-scrollbar {
+  height: 4px;
+}
+.markdown-content pre::-webkit-scrollbar-track {
+  background: transparent;
+}
+.markdown-content pre::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 9999px;
 }
 
 .markdown-content code {