@hienlh/ppm 0.11.17 → 0.12.0

package/src/types/chat.ts

@@ -56,6 +56,14 @@ export interface SessionConfig {
   title?: string;
 }
 
+export interface ProjectTag {
+  id: number;
+  projectPath: string;
+  name: string;
+  color: string;
+  sortOrder: number;
+}
+
 export interface SessionInfo {
   id: string;
   providerId: string;
@@ -64,6 +72,7 @@ export interface SessionInfo {
   createdAt: string;
   updatedAt?: string;
   pinned?: boolean;
+  tag?: { id: number; name: string; color: string } | null;
 }
 
 export interface SessionListResponse {

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

@@ -1,14 +1,16 @@
 import { useState, useEffect, useCallback, useRef } from "react";
-import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Bug, ClipboardCheck, Pin, PinOff, Trash2, Users, Bot } from "lucide-react";
+import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Bug, ClipboardCheck, Pin, PinOff, Trash2, Users, Bot, Tags } from "lucide-react";
 import { Activity } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
 import { useNotificationStore } from "@/stores/notification-store";
 import { AISettingsSection } from "@/components/settings/ai-settings-section";
+import { TagSettingsSection } from "@/components/settings/tag-settings-section";
+import { SessionContextMenu } from "./session-context-menu";
 import { UsageDetailPanel } from "./usage-badge";
 import { TeamActivityPanel } from "./team-activity-panel";
 import { ProviderBadge } from "./provider-selector";
-import type { SessionInfo, SessionListResponse } from "../../../types/chat";
+import type { SessionInfo, SessionListResponse, ProjectTag } from "../../../types/chat";
 import type { UsageInfo } from "../../../types/chat";
 import type { TeamMessageItem } from "@/hooks/use-chat";
 
@@ -108,6 +110,10 @@ export function ChatHistoryBar({
   const [editingTitle, setEditingTitle] = useState("");
   const [hasMore, setHasMore] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
+  const [projectTags, setProjectTags] = useState<ProjectTag[]>([]);
+  const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
+  const [tagCounts, setTagCounts] = useState<Record<number, number>>({});
+  const [showTagSettings, setShowTagSettings] = useState(false);
   const editInputRef = useRef<HTMLInputElement>(null);
   const openTab = useTabStore((s) => s.openTab);
   const PAGE_SIZE = 50;
@@ -155,6 +161,22 @@ export function ChatHistoryBar({
     if (activePanel === "history" && sessions.length === 0) load();
   }, [activePanel]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Fetch tags
+  const loadTags = useCallback(async () => {
+    if (!projectName) return;
+    try {
+      const data = await api.get<{ tags: ProjectTag[]; counts: Record<number, number> }>(
+        `${projectUrl(projectName)}/tags`,
+      );
+      setProjectTags(data.tags);
+      setTagCounts(data.counts);
+    } catch { /* silent */ }
+  }, [projectName]);
+
+  useEffect(() => {
+    if (activePanel === "history" && projectName) loadTags();
+  }, [activePanel, projectName, loadTags]);
+
   function openSession(session: SessionInfo) {
     if (onSelectSession) {
       onSelectSession(session);
@@ -222,10 +244,35 @@ export function ChatHistoryBar({
     } catch { /* silent */ }
   }, [projectName]);
 
-  // Filter sessions by search query
-  const filteredSessions = searchQuery.trim()
-    ? sessions.filter((s) => (s.title || "").toLowerCase().includes(searchQuery.toLowerCase()))
-    : sessions;
+  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(); // Refetch counts from API for accuracy
+  }, [loadTags]);
+
+  // Keyboard shortcuts: 1-9 to assign tags to current session
+  useEffect(() => {
+    if (activePanel !== "history") return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      const num = parseInt(e.key);
+      if (num >= 1 && num <= projectTags.length && sessionId) {
+        const tag = projectTags[num - 1];
+        if (tag) {
+          api.patch(`${projectUrl(projectName)}/chat/sessions/${sessionId}/tag`, { tagId: tag.id }).catch(() => {});
+          handleTagChanged(sessionId, { id: tag.id, name: tag.name, color: tag.color });
+        }
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [activePanel, projectTags, sessionId, projectName, handleTagChanged]);
+
+  // Filter sessions by search query + tag
+  const filteredSessions = sessions.filter((s) => {
+    if (searchQuery.trim() && !(s.title || "").toLowerCase().includes(searchQuery.toLowerCase())) return false;
+    if (selectedTagId !== null && s.tag?.id !== selectedTagId) return false;
+    return true;
+  });
 
   // Usage badge display — only meaningful for Claude (SDK) provider
   const isClaudeProvider = !providerId || providerId === "claude";
@@ -368,6 +415,45 @@ export function ChatHistoryBar({
             </button>
           </div>
 
+          {/* Tag filter chips */}
+          {projectTags.length > 0 && (
+            <div className="flex items-center gap-1 px-2 py-1 overflow-x-auto border-b border-border/30 scrollbar-none">
+              <button
+                onClick={() => setSelectedTagId(null)}
+                className={`shrink-0 rounded-md border px-2 py-1 text-[10px] transition-colors ${
+                  selectedTagId === null ? "bg-primary/20 border-primary text-primary" : "border-border bg-surface text-text-secondary"
+                }`}
+              >All ({sessions.length})</button>
+              {projectTags.map((tag) => (
+                <button
+                  key={tag.id}
+                  onClick={() => setSelectedTagId(selectedTagId === tag.id ? null : tag.id)}
+                  className={`shrink-0 flex items-center gap-1 rounded-md border px-2 py-1 text-[10px] transition-colors ${
+                    selectedTagId === tag.id ? "border-current" : "border-border bg-surface"
+                  }`}
+                  style={selectedTagId === tag.id ? { backgroundColor: tag.color + "20", color: tag.color, borderColor: tag.color } : undefined}
+                >
+                  <span className="size-2 rounded-full shrink-0" style={{ backgroundColor: tag.color }} />
+                  {tag.name} ({tagCounts[tag.id] ?? 0})
+                </button>
+              ))}
+              <button
+                onClick={() => setShowTagSettings(!showTagSettings)}
+                className={`shrink-0 p-1 rounded transition-colors ${showTagSettings ? "text-primary bg-primary/10" : "text-text-subtle hover:text-text-secondary"}`}
+                title="Manage tags"
+              >
+                <Tags className="size-3" />
+              </button>
+            </div>
+          )}
+
+          {/* Tag management panel (inline) */}
+          {showTagSettings && (
+            <div className="border-b border-border/30 px-2 py-2 max-h-[180px] overflow-y-auto bg-surface-elevated/50">
+              <TagSettingsSection projectName={projectName} onTagsChanged={loadTags} />
+            </div>
+          )}
+
           <div className="max-h-[200px] overflow-y-auto">
             {loading && sessions.length === 0 ? (
               <div className="flex items-center justify-center py-3">
@@ -380,11 +466,23 @@ export function ChatHistoryBar({
             ) : (
               <>
                 {filteredSessions.map((session) => (
-                  <div
+                  <SessionContextMenu
                     key={session.id}
+                    session={session}
+                    projectName={projectName}
+                    projectTags={projectTags}
+                    onTogglePin={togglePin}
+                    onStartEditing={startEditing}
+                    onDeleteSession={deleteSession}
+                    onTagChanged={handleTagChanged}
+                  >
+                  <div
                     className="flex items-center gap-2 w-full px-3 py-1.5 text-left hover:bg-surface-elevated transition-colors group"
                   >
                     <ProviderBadge providerId={session.providerId} />
+                    {session.tag && (
+                      <span className="size-2 rounded-full shrink-0" style={{ backgroundColor: session.tag.color }} title={session.tag.name} />
+                    )}
                     {editingId === session.id ? (
                       <form
                         className="flex items-center gap-1 flex-1 min-w-0"
@@ -450,6 +548,7 @@ export function ChatHistoryBar({
                       <span className="text-[10px] text-text-subtle shrink-0 w-10 text-right">{formatDate(session.updatedAt)}</span>
                     )}
                   </div>
+                  </SessionContextMenu>
                 ))}
                 {hasMore && !searchQuery && (
                   <button

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

@@ -1,6 +1,8 @@
 import { useState, useEffect, useCallback } from "react";
 import { Bot, ChevronDown, ChevronUp, MessageSquare, Pin, PinOff } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
+import { useProjectTags, TagChipBar } from "./tag-filter-chips";
+import { SessionContextMenu } from "./session-context-menu";
 import type { SessionInfo } from "../../../types/chat";
 
 const MAX_RECENT_SESSIONS = 5;
@@ -33,6 +35,8 @@ export function ChatWelcome({ projectName, onSelectSession }: ChatWelcomeProps)
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
   const [loading, setLoading] = useState(false);
   const [showAll, setShowAll] = useState(false);
+  const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
+  const { projectTags, tagCounts, loadTags } = useProjectTags(projectName);
 
   const loadSessions = useCallback(async () => {
     if (!projectName) return;
@@ -72,41 +76,58 @@ export function ChatWelcome({ projectName, onSelectSession }: ChatWelcomeProps)
     }
   }, [projectName]);
 
-  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={() => onSelectSession(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={projectName}
+        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={() => onSelectSession(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" />}
-        </span>
-      </button>
+          <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>
+      </SessionContextMenu>
     );
   }
 
@@ -117,6 +138,12 @@ export function ChatWelcome({ projectName, onSelectSession }: ChatWelcomeProps)
         <p className="text-sm">Send a message to start a new conversation</p>
       </div>
 
+      {!loading && sessions.length > 0 && (
+        <div className="w-full max-w-sm px-4">
+          <TagChipBar projectTags={projectTags} tagCounts={tagCounts} totalCount={sessions.length} selectedTagId={selectedTagId} onSelect={setSelectedTagId} />
+        </div>
+      )}
+
       {!loading && pinnedSessions.length > 0 && (
         <div className="flex flex-col gap-2 w-full max-w-sm px-4">
           <p className="text-xs text-text-subtle text-center">Pinned</p>

package/src/web/components/chat/session-context-menu.tsx

@@ -0,0 +1,101 @@
+import { useCallback } from "react";
+import { Check, Pin, PinOff, Pencil, Trash2, Tag } from "lucide-react";
+import {
+  ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem,
+  ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent,
+  ContextMenuSeparator,
+} from "@/components/ui/context-menu";
+import { api, projectUrl } from "@/lib/api-client";
+import type { SessionInfo, ProjectTag } from "../../../types/chat";
+
+interface SessionContextMenuProps {
+  session: SessionInfo;
+  projectName: string;
+  projectTags: ProjectTag[];
+  children: React.ReactNode;
+  onTogglePin: (e: React.MouseEvent, session: SessionInfo) => void;
+  onStartEditing?: (session: SessionInfo, e: React.MouseEvent) => void;
+  onDeleteSession?: (e: React.MouseEvent, session: SessionInfo) => void;
+  onTagChanged: (sessionId: string, tag: { id: number; name: string; color: string } | null) => void;
+}
+
+export function SessionContextMenu({
+  session, projectName, projectTags, children,
+  onTogglePin, onStartEditing, onDeleteSession, onTagChanged,
+}: SessionContextMenuProps) {
+  const assignTag = useCallback(async (tagId: number | null) => {
+    try {
+      if (tagId) {
+        await api.patch(`${projectUrl(projectName)}/chat/sessions/${session.id}/tag`, { tagId });
+        const tag = projectTags.find((t) => t.id === tagId);
+        if (tag) onTagChanged(session.id, { id: tag.id, name: tag.name, color: tag.color });
+      } else {
+        await api.del(`${projectUrl(projectName)}/chat/sessions/${session.id}/tag`);
+        onTagChanged(session.id, null);
+      }
+    } catch { /* silent */ }
+  }, [session.id, projectName, projectTags, onTagChanged]);
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        {children}
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem
+          onClick={(e) => onTogglePin(e as unknown as React.MouseEvent, session)}
+        >
+          {session.pinned ? <PinOff className="size-3.5 mr-2" /> : <Pin className="size-3.5 mr-2" />}
+          {session.pinned ? "Unpin" : "Pin"}
+        </ContextMenuItem>
+        {onStartEditing && (
+          <ContextMenuItem
+            onClick={(e) => onStartEditing(session, e as unknown as React.MouseEvent)}
+          >
+            <Pencil className="size-3.5 mr-2" />
+            Rename
+          </ContextMenuItem>
+        )}
+
+        {projectTags.length > 0 && (
+          <ContextMenuSub>
+            <ContextMenuSubTrigger>
+              <Tag className="size-3.5 mr-2" />
+              Set Tag
+            </ContextMenuSubTrigger>
+            <ContextMenuSubContent>
+              {projectTags.map((tag) => (
+                <ContextMenuItem key={tag.id} onClick={() => assignTag(tag.id)}>
+                  <span className="size-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: tag.color }} />
+                  {tag.name}
+                  {session.tag?.id === tag.id && <Check className="size-3 ml-auto" />}
+                </ContextMenuItem>
+              ))}
+              {session.tag && (
+                <>
+                  <ContextMenuSeparator />
+                  <ContextMenuItem onClick={() => assignTag(null)}>
+                    Remove tag
+                  </ContextMenuItem>
+                </>
+              )}
+            </ContextMenuSubContent>
+          </ContextMenuSub>
+        )}
+
+        {onDeleteSession && (
+          <>
+            <ContextMenuSeparator />
+            <ContextMenuItem
+              className="text-red-500 focus:text-red-500"
+              onClick={(e) => onDeleteSession(e as unknown as React.MouseEvent, session)}
+            >
+              <Trash2 className="size-3.5 mr-2" />
+              Delete
+            </ContextMenuItem>
+          </>
+        )}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/src/web/components/chat/session-picker.tsx

@@ -99,6 +99,9 @@ export function SessionPicker({
         <div className="flex flex-col min-w-0 flex-1">
           <span className="flex items-center gap-1.5 truncate text-xs font-medium">
             <ProviderBadge providerId={session.providerId} />
+            {session.tag && (
+              <span className="size-2 rounded-full shrink-0" style={{ backgroundColor: session.tag.color }} title={session.tag.name} />
+            )}
             {session.title}
           </span>
           <span className="text-xs text-text-subtle">

package/src/web/components/chat/tag-filter-chips.tsx

@@ -0,0 +1,58 @@
+import { useState, useEffect, useCallback } from "react";
+import { api, projectUrl } from "@/lib/api-client";
+import type { ProjectTag } from "../../../types/chat";
+
+/** Fetch project tags + counts; returns state for filter chips */
+export function useProjectTags(projectName: string | undefined) {
+  const [projectTags, setProjectTags] = useState<ProjectTag[]>([]);
+  const [tagCounts, setTagCounts] = useState<Record<number, number>>({});
+
+  const loadTags = useCallback(async () => {
+    if (!projectName) return;
+    try {
+      const data = await api.get<{ tags: ProjectTag[]; counts: Record<number, number> }>(
+        `${projectUrl(projectName)}/tags`,
+      );
+      setProjectTags(data.tags);
+      setTagCounts(data.counts);
+    } catch { /* silent */ }
+  }, [projectName]);
+
+  useEffect(() => { loadTags(); }, [loadTags]);
+
+  return { projectTags, tagCounts, loadTags };
+}
+
+/** Horizontal chip bar for filtering sessions by tag */
+export function TagChipBar({ projectTags, tagCounts, totalCount, selectedTagId, onSelect }: {
+  projectTags: ProjectTag[];
+  tagCounts: Record<number, number>;
+  totalCount: number;
+  selectedTagId: number | null;
+  onSelect: (tagId: number | null) => void;
+}) {
+  if (projectTags.length === 0) return null;
+  return (
+    <div className="flex items-center gap-1 px-2 py-1.5 overflow-x-auto scrollbar-none">
+      <button
+        onClick={() => onSelect(null)}
+        className={`shrink-0 rounded-md border px-2 py-1 text-[10px] transition-colors ${
+          selectedTagId === null ? "bg-primary/20 border-primary text-primary" : "border-border bg-surface text-text-secondary hover:bg-surface-elevated"
+        }`}
+      >All ({totalCount})</button>
+      {projectTags.map((tag) => (
+        <button
+          key={tag.id}
+          onClick={() => onSelect(selectedTagId === tag.id ? null : tag.id)}
+          className={`shrink-0 flex items-center gap-1 rounded-md border px-2 py-1 text-[10px] transition-colors ${
+            selectedTagId === tag.id ? "border-current" : "border-border bg-surface hover:bg-surface-elevated"
+          }`}
+          style={selectedTagId === tag.id ? { backgroundColor: tag.color + "20", color: tag.color, borderColor: tag.color } : undefined}
+        >
+          <span className="size-2 rounded-full shrink-0" style={{ backgroundColor: tag.color }} />
+          {tag.name} ({tagCounts[tag.id] ?? 0})
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/web/components/extensions/extension-webview.tsx

@@ -1,6 +1,5 @@
 import { useRef, useEffect, useState, useCallback } from "react";
 import { useExtensionStore } from "@/stores/extension-store";
-import { useTabStore } from "@/stores/tab-store";
 import { getAuthToken } from "@/lib/api-client";
 import { Loader2 } from "lucide-react";
 
@@ -30,9 +29,10 @@ interface ExtensionWebviewProps {
 export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
   const panelId = metadata?.panelId as string | undefined;
   const viewType = metadata?.viewType as string | undefined;
-  const currentProject = useTabStore((s) => s.currentProject);
-  // Prefer currentProject (reflects URL/active project) over stale tab metadata
-  const projectName = currentProject || (metadata?.projectName as string | undefined) || undefined;
+  // Use the tab's own project name (frozen at creation time) — NOT the global
+  // currentProject. Old project's ExtensionWebview must not react to project
+  // switches, which would dispatch commands for the wrong project.
+  const projectName = (metadata?.projectName as string | undefined) || undefined;
   const [timedOut, setTimedOut] = useState(false);
   // Track whether extensions are activated (contributions received from WS)
   const extensionsReady = useExtensionStore((s) => s.contributions !== null);
@@ -62,12 +62,9 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
 
   // On reload: resolve project path and dispatch command once.
   // Wait for extensions to be activated (contributions received) before dispatching.
-  // Skip if project-sync effect already dispatched for this project
-  // (panel is briefly undefined during dispose→recreate transition).
   useEffect(() => {
     if (panel || !viewType || !extensionsReady) return;
-    // If we already dispatched for this project (via project-sync effect),
-    // don't dispatch again — the panel is just temporarily missing.
+    // Already dispatched for this project — panel is just temporarily missing
     if (projectName && projectName === prevProjectRef.current) return;
     if (projectName) prevProjectRef.current = projectName;
     const command = viewType.includes(".") ? viewType : `${viewType}.view`;
@@ -94,31 +91,6 @@ export function ExtensionWebview({ metadata }: ExtensionWebviewProps) {
     return () => { cancelled = true; };
   }, [panel, viewType, projectName, extensionsReady]);
 
-  // When panel exists, ensure correct project is loaded.
-  // On mount: dispatch command so extension can reload if project differs.
-  // On project switch: dispatch command with new project path.
-  // Extension deduplicates same-project calls (noop if already correct).
-  useEffect(() => {
-    if (!panel || !viewType || !projectName) return;
-    // Skip if we already dispatched for this project
-    if (projectName === prevProjectRef.current) return;
-    prevProjectRef.current = projectName;
-    const command = viewType.includes(".") ? viewType : `${viewType}.view`;
-    (async () => {
-      try {
-        const token = getAuthToken();
-        const res = await fetch("/api/projects", token ? { headers: { Authorization: `Bearer ${token}` } } : {});
-        const json = await res.json() as { ok: boolean; data?: { name: string; path: string }[] };
-        const match = json.data?.find((p) => p.name === projectName);
-        if (match) {
-          window.dispatchEvent(new CustomEvent("ext:command:execute", {
-            detail: { command, args: [match.path] },
-          }));
-        }
-      } catch {}
-    })();
-  }, [panel, viewType, projectName]);
-
   // Check activation errors for this extension
   const extensionId = metadata?.extensionId as string | undefined;
   const activationError = useExtensionStore((s) => {

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>