@hienlh/ppm 0.22.2 → 0.22.3

package/src/services/chat.service.ts

@@ -11,6 +11,7 @@ import type {
   ChatMessage,
   SendMessageOpts,
 } from "../providers/provider.interface.ts";
+import { compareSessionsByActivity } from "../types/chat.ts";
 
 class ChatService {
   // Delivery hints only: a restart/eviction safely sends a fresh snapshot.
@@ -75,10 +76,7 @@ class ChatService {
         }
       }
     }
-    return all.sort(
-      (a, b) =>
-        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-    );
+    return all.sort(compareSessionsByActivity);
   }
 
   async deleteSession(

package/src/services/project-content-search.service.ts

@@ -0,0 +1,119 @@
+import { access } from "node:fs/promises";
+import { dirname, resolve } from "node:path";
+
+export class ProjectSearchError extends Error {
+  constructor(message: string, public status: 400 | 500 | 503 | 504 = 500) { super(message); }
+}
+
+interface ResolverOptions {
+  platform?: string;
+  which?: (name: string) => string | null;
+  exists?: (path: string) => Promise<boolean>;
+  programFiles?: string;
+  programFilesX86?: string;
+}
+
+/** Git for Windows ships GNU grep even when its usr/bin is absent from PATH. */
+export async function resolveProjectSearchGrep(options: ResolverOptions = {}): Promise<string | undefined> {
+  const which = options.which ?? ((name: string) => Bun.which(name));
+  const direct = which("grep");
+  if (direct) return direct;
+  if ((options.platform ?? process.platform) !== "win32") return;
+  const exists = options.exists ?? (async (path: string) => { try { await access(path); return true; } catch { return false; } });
+  const git = which("git");
+  const roots = git ? [resolve(dirname(git), ".."), resolve(dirname(git), "../..")] : [];
+  for (const base of [options.programFiles ?? process.env.ProgramFiles, options.programFilesX86 ?? process.env["ProgramFiles(x86)"]]) {
+    if (base) roots.push(resolve(base, "Git"));
+  }
+  for (const root of roots) {
+    const candidate = resolve(root, "usr/bin/grep.exe");
+    if (await exists(candidate)) return candidate;
+  }
+}
+
+/** Convert glob pattern (VSCode-style) to RegExp for path filtering.
+ *  - `*.ts`       → matches any .ts file in any directory
+ *  - `src/**`     → matches any file under src/
+ *  - `src/**\/*.ts` → matches .ts files under src/
+ */
+function globToPathRegex(glob: string): RegExp {
+  const escaped = glob
+    .replace(/[.+^${}()|[\]\\]/g, "\\$&") // escape regex special chars
+    .replace(/\*\*/g, "\x00") // temp placeholder for **
+    .replace(/\*/g, "[^/]*") // * = within one segment
+    .replace(/\x00/g, ".*") // ** = across segments
+    .replace(/\?/g, "[^/]"); // ? = single non-slash char
+  // No slash in pattern → match at any depth (like **/<pattern>)
+  const re = glob.includes("/") ? `^${escaped}($|/)` : `(^|/)${escaped}($|/)`;
+  return new RegExp(re);
+}
+
+export interface ProjectSearchOptions {
+  query: string;
+  caseSensitive?: boolean;
+  wholeWord?: boolean;
+  regex?: boolean;
+  include?: string;
+}
+
+export async function searchProjectContent(projectPath: string, options: ProjectSearchOptions,
+  dependencies: { resolveGrep?: () => Promise<string | undefined>; timeoutMs?: number; maxBytes?: number } = {}) {
+  const empty = { results: [] as Array<{ file: string; matches: Array<{ lineNum: number; content: string }> }>, total: 0 };
+  if (options.query.length < (options.regex ? 1 : 2)) return empty;
+  const executable = await (dependencies.resolveGrep ?? resolveProjectSearchGrep)();
+  if (!executable) throw new ProjectSearchError("Content search needs GNU grep. Install Git for Windows, or make grep available on PATH, then retry.", 503);
+  const excluded = ["node_modules", ".git", "dist", ".next", "build", ".turbo", "coverage", "__pycache__"];
+  // Long --null also works with BSD grep, where -Z means decompress.
+  const flags = ["-rHn", "--null", "--max-count=5", "-I", options.regex ? "-E" : "-F", ...(options.caseSensitive ? [] : ["-i"]), ...(options.wholeWord ? ["-w"] : [])];
+  const proc = Bun.spawn({ cmd: [executable, ...flags, ...excluded.flatMap((dir) => ["--exclude-dir", dir]),
+    "--exclude=*.min.js", "--exclude=*.map", "--exclude=*.lock", "--exclude=bun.lock", "--", options.query, "."],
+    cwd: projectPath, stdout: "pipe", stderr: "pipe" });
+  let failure: ProjectSearchError | undefined;
+  let bytes = 0;
+  const stop = (error: ProjectSearchError) => { failure ??= error; proc.kill(); };
+  const timer = setTimeout(() => stop(new ProjectSearchError("Content search timed out. Narrow the query or choose a smaller project and retry.", 504)), dependencies.timeoutMs ?? 10_000);
+  async function collect(stream: ReadableStream<Uint8Array>): Promise<string> {
+    const reader = stream.getReader();
+    const decoder = new TextDecoder();
+    let text = "";
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        bytes += value.byteLength;
+        if (bytes > (dependencies.maxBytes ?? 8 * 1024 * 1024)) {
+          stop(new ProjectSearchError("Too many search results. Narrow the query or choose a smaller project and retry.", 400));
+        } else text += decoder.decode(value, { stream: true });
+      }
+      return text + decoder.decode();
+    } finally { reader.releaseLock(); }
+  }
+  let raw: string, stderr: string, code: number;
+  try { [raw, stderr, code] = await Promise.all([collect(proc.stdout), collect(proc.stderr), proc.exited]); }
+  finally { clearTimeout(timer); if (proc.exitCode === null) proc.kill(); }
+  if (failure) throw failure;
+  if (code !== 0 && code !== 1) {
+    const invalidPattern = options.regex && /regular expression|unmatched|unterminated|invalid range|trailing backslash|repetition/i.test(stderr);
+    throw new ProjectSearchError(invalidPattern ? "Invalid regular expression. Check the pattern and retry." : "Content search failed. Check file permissions and the search tool, then retry.", invalidPattern ? 400 : 500);
+  }
+  if (code === 1) return empty;
+  const filters = (options.include ?? "").split(",").map((s) => s.trim()).filter(Boolean).map(globToPathRegex);
+  const files = new Map<string, Array<{ lineNum: number; content: string }>>();
+  // grep --null separates filenames with NUL: colons, spaces and newlines are safe.
+  let offset = 0;
+  while (offset < raw.length) {
+    const separator = raw.indexOf("\0", offset);
+    if (separator < 0) break;
+    const end = raw.indexOf("\n", separator + 1);
+    const recordEnd = end < 0 ? raw.length : end;
+    const file = raw.slice(offset, separator).replace(/^\.\//, "");
+    const record = /^(\d+):(.*)$/s.exec(raw.slice(separator + 1, recordEnd));
+    offset = recordEnd + 1;
+    if (!record || (filters.length && !filters.some((filter) => filter.test(file)))) continue;
+    const matches = files.get(file) ?? [];
+    matches.push({ lineNum: Number(record[1]), content: record[2]!.trimEnd() });
+    files.set(file, matches);
+  }
+  const results = Array.from(files, ([file, matches]) => ({ file, matches }));
+  return { results, total: results.reduce((sum, result) => sum + result.matches.length, 0) };
+}

package/src/types/chat.ts

@@ -119,6 +119,24 @@ export interface SessionInfo {
   tag?: { id: number; name: string; color: string } | null;
 }
 
+/**
+ * Keeps every history surface in the same order: pinned conversations first,
+ * then the conversation most recently written to. Older providers may not
+ * expose an update timestamp, so their creation time remains the fallback.
+ */
+export function compareSessionsByActivity(a: SessionInfo, b: SessionInfo): number {
+  if (a.pinned && !b.pinned) return -1;
+  if (!a.pinned && b.pinned) return 1;
+  return sessionActivityTime(b) - sessionActivityTime(a);
+}
+
+function sessionActivityTime(session: SessionInfo): number {
+  const updated = session.updatedAt ? Date.parse(session.updatedAt) : NaN;
+  if (Number.isFinite(updated)) return updated;
+  const created = Date.parse(session.createdAt);
+  return Number.isFinite(created) ? created : 0;
+}
+
 export interface SessionListResponse {
   sessions: SessionInfo[];
   hasMore: boolean;

package/src/web/app.tsx

@@ -41,6 +41,7 @@ import { useIsMobile } from "@/hooks/use-is-mobile";
 import { UploadProgressPanel } from "@/components/os-explorer/upload/upload-progress-panel";
 import { cn } from "@/lib/utils";
 import { isRecoveryReloadPending } from "@/lib/chunk-recovery";
+import { OnboardingRoot } from "@/components/onboarding/onboarding-root";
 
 // Lazy: the explorer feature (views, actions, skins, icon map) is the same heavy bundle the
 // desktop floating window already keeps out of the initial chunk (see `WINDOW_CONTENT`) —
@@ -61,7 +62,7 @@ export function App() {
   const [authState, setAuthState] = useState<AuthState>("checking");
   const isMobileViewport = useIsMobile();
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const [drawerTab, setDrawerTab] = useState<"explorer" | "git" | undefined>();
+  const [drawerTab, setDrawerTab] = useState<"explorer" | "git" | "search" | "history" | undefined>();
   const [projectSheetOpen, setProjectSheetOpen] = useState(false);
 
   const [mountedProjects, setMountedProjects] = useState<Set<string>>(
@@ -351,6 +352,13 @@ export function App() {
           isOpen={projectSheetOpen}
           onClose={() => setProjectSheetOpen(false)}
         />
+        <OnboardingRoot
+          paletteOpen={paletteOpen}
+          navigationOpen={drawerOpen || projectSheetOpen}
+          openProjects={() => setProjectSheetOpen(true)}
+          openNavigation={(tab) => { setDrawerTab(tab as "explorer" | "git" | "search" | "history"); setDrawerOpen(true); }}
+          closeNavigation={() => { setDrawerOpen(false); setProjectSheetOpen(false); }}
+        />
 
         {/* Command palette (Shift+Shift) */}
         <CommandPalette open={paletteOpen} onClose={closePalette} initialQuery={paletteInitialQuery} />

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

@@ -1,3 +1,4 @@
+import { usePanelStore } from "@/stores/panel-store";
 import { useState, useEffect, useCallback, useRef, type MouseEvent } from "react";
 import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, Pin, PinOff, Trash2, Users, Bot, Tags, CalendarX2 } from "@/lib/icons";
 import { Activity } from "@/lib/icons";
@@ -16,7 +17,7 @@ import { TeamActivityPanel } from "./team-activity-panel";
 import { ProviderBadge } from "./provider-selector";
 import { formatRelativeDate } from "@/lib/format-date";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
-import type { SessionInfo, SessionListResponse, ProjectTag } from "../../../types/chat";
+import { compareSessionsByActivity, type SessionInfo, type SessionListResponse, type ProjectTag } from "../../../types/chat";
 import type { UsageInfo } from "../../../types/chat";
 import type { TeamMessageItem } from "@/hooks/use-chat";
 
@@ -30,6 +31,7 @@ interface TeamActivityState {
 }
 
 interface ChatHistoryBarProps {
+  tabId?: string;
   projectName: string;
   usageInfo: UsageInfo;
   usageLoading?: boolean;
@@ -72,6 +74,7 @@ function pctColor(pct: number): string {
 }
 
 export function ChatHistoryBar({
+  tabId,
   projectName, usageInfo, usageLoading, refreshUsage, lastFetchedAt,
   sessionId, providerId, pickedAccountLabel, pickedAccountId, onSelectAccount,
   onSelectSession, onBugReport, isConnected, onReload,
@@ -168,6 +171,10 @@ export function ChatHistoryBar({
   }, [activePanel, projectName, loadTags]);
 
   function openSession(session: SessionInfo) {
+    if (tabId) window.dispatchEvent(new CustomEvent("ppm:onboarding-evidence", {
+      detail: { type: "history-opened", projectName, tabId, sessionId: session.id,
+        visible: !document.hidden && Object.values(usePanelStore.getState().panels).some((panel) => panel.activeTabId === tabId) },
+    }));
     if (onSelectSession) {
       onSelectSession(session);
       setActivePanel(null);
@@ -215,11 +222,7 @@ export function ChatHistoryBar({
       }
       setSessions((prev) => {
         const updated = prev.map((s) => s.id === session.id ? { ...s, pinned: !s.pinned } : s);
-        return updated.sort((a, b) => {
-          if (a.pinned && !b.pinned) return -1;
-          if (!a.pinned && b.pinned) return 1;
-          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-        });
+        return updated.sort(compareSessionsByActivity);
       });
     } catch { /* silent */ }
   }, [projectName]);
@@ -301,6 +304,7 @@ export function ChatHistoryBar({
         <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto scrollbar-none">
           {/* History */}
           <button
+            data-onboarding="chat-history"
             onClick={() => togglePanel("history")}
             className={`shrink-0 flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] transition-colors ${
               activePanel === "history" ? "text-primary bg-primary/10" : "text-text-secondary hover:text-foreground hover:bg-surface-elevated"
@@ -526,6 +530,7 @@ export function ChatHistoryBar({
                     onTagChanged={handleTagChanged}
                   >
                   <div
+                    data-onboarding="chat-history-session"
                     className={cn(
                       "flex items-center gap-2 w-full px-3 py-1.5 text-left hover:bg-surface-elevated transition-colors group",
                       isUnread && "font-medium text-foreground",

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

@@ -4,6 +4,7 @@ import { toast } from "sonner";
 import { api, projectUrl } from "@/lib/api-client";
 import { selectInlineImages } from "@/lib/image-resize-limits";
 import { splitAttachmentMarkers } from "@/lib/attachment-marker-split";
+import type { ChatAttemptEvent } from "@/lib/chat-attempt-lifecycle";
 import { useChat } from "@/hooks/use-chat";
 import { useUsage } from "@/hooks/use-usage";
 import { useTabStore } from "@/stores/tab-store";
@@ -256,6 +257,16 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
    */
   const [servingAccount, setServingAccount] = useState<{ id: string; label: string | null } | null>(null);
 
+  const tourTabActive = usePanelStore((state) => Object.values(state.panels).some((panel) => panel.activeTabId === tabId));
+  const observeAttempt = useCallback((event: ChatAttemptEvent) => {
+    if (!tabId) return;
+    const visible = !document.hidden && Object.values(usePanelStore.getState().panels).some((panel) => panel.activeTabId === tabId);
+    const types = { started: "chat-started", succeeded: "chat-succeeded", failed: "chat-failed", session: "chat-session" } as const;
+    window.dispatchEvent(new CustomEvent("ppm:onboarding-evidence", {
+      detail: { ...event, type: types[event.type], projectName, tabId, visible },
+    }));
+  }, [projectName, tabId]);
+
   const {
     messages,
     renderedMessages,
@@ -293,7 +304,17 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
     bashPartialOutput,
     backgroundShells,
     killBackgroundShell,
-  } = useChat(sessionId, providerId, projectName, handleSessionMigrated);
+  } = useChat(sessionId, providerId, projectName, handleSessionMigrated, observeAttempt);
+
+  useEffect(() => {
+    if (!tabId || !tourTabActive || draftLoading || isStreaming) return;
+    const announce = () => window.dispatchEvent(new CustomEvent("ppm:onboarding-evidence", {
+      detail: { type: "chat-opened", projectName, tabId, sessionId, visible: !document.hidden },
+    }));
+    announce();
+    window.addEventListener("ppm:onboarding-refresh", announce);
+    return () => window.removeEventListener("ppm:onboarding-refresh", announce);
+  }, [tabId, projectName, sessionId, tourTabActive, draftLoading, isStreaming]);
 
   // The stream's report is the second writer. A turn that ran — or was forced onto another
   // account mid-flight — is ground truth, and it arrives after whatever the picker last said.
@@ -868,6 +889,7 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
 
   return (
     <div
+      data-onboarding="chat"
       className="flex flex-col h-full relative"
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
@@ -942,6 +964,7 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
       <div className="border-t border-border bg-panel shrink-0">
         {/* Unified toolbar: History, Config, Usage, Bug report, Connection */}
         <ChatHistoryBar
+          tabId={tabId}
           projectName={projectName}
           usageInfo={usageInfo}
           usageLoading={usageLoading}
@@ -1010,6 +1033,7 @@ function ChatTabContent({ metadata, tabId }: ChatTabProps) {
         {/* Input — gate on first draft load to avoid empty→filled flash, then keep mounted */}
         {(inputReady || !draftLoading) && (
           <MessageInput
+            draftReady={!draftLoading}
             tabId={tabId}
             onSend={handleInputSend}
             isStreaming={isStreaming}

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

@@ -1,5 +1,6 @@
 import { Bot } from "@/lib/icons";
 import { SessionListPanel } from "./session-list-panel";
+import { OnboardingEntry } from "@/components/onboarding/onboarding-entry";
 import type { SessionInfo } from "../../../types/chat";
 
 interface ChatWelcomeProps {
@@ -13,6 +14,7 @@ export function ChatWelcome({ projectName, onSelectSession }: ChatWelcomeProps)
       <div className="flex flex-col items-center gap-3">
         <Bot className="size-10 text-text-subtle" />
         <p className="text-sm">Send a message to start a new conversation</p>
+        <OnboardingEntry compact />
       </div>
 
       <SessionListPanel

package/src/web/components/chat/message-events.tsx

@@ -153,7 +153,7 @@ export function InterleavedEvents({ events, isStreaming, projectName, bashPartia
     <>
       {groups.map((group, i) => {
         if (group.kind === "thinking") {
-          return <ThinkingBlock key={`think-${i}`} content={group.content} isStreaming={isStreaming && i === groups.length - 1} />;
+          return <ThinkingBlock key={`think-${i}`} content={group.content} projectName={projectName} isStreaming={isStreaming && i === groups.length - 1} />;
         }
         if (group.kind === "text") {
           const isLast = isStreaming && i === groups.length - 1;
@@ -169,8 +169,8 @@ export function InterleavedEvents({ events, isStreaming, projectName, bashPartia
   );
 }
 
-/** Collapsible thinking block — shows Claude's reasoning, collapsed by default when done */
-function ThinkingBlock({ content, isStreaming }: { content: string; isStreaming: boolean }) {
+/** Collapsible thinking block — shows the provider's safe reasoning summary, collapsed by default when done */
+function ThinkingBlock({ content, projectName, isStreaming }: { content: string; projectName?: string; isStreaming: boolean }) {
   const [expanded, setExpanded] = useState(isStreaming);
   const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -198,8 +198,8 @@ function ThinkingBlock({ content, isStreaming }: { content: string; isStreaming:
       </button>
       {expanded && (
         <div ref={scrollRef} className="max-h-60 overflow-y-auto">
-          <div className="px-2 pb-2 text-text-subtle/80 whitespace-pre-wrap text-[11px] leading-relaxed">
-            {content}
+          <div className="px-2 pb-2 text-text-subtle/80 text-[11px] leading-relaxed">
+            <MarkdownContent content={content} projectName={projectName} isStreaming={isStreaming} />
           </div>
         </div>
       )}
@@ -270,4 +270,4 @@ export function ThinkingIndicator({ lastMessage, phase, elapsed, statusMessage }
       )}
     </div>
   );
-}
+}

package/src/web/components/chat/message-input.tsx

@@ -1,3 +1,4 @@
+import { usePanelStore } from "@/stores/panel-store";
 import { useState, useRef, useCallback, useEffect, memo, type KeyboardEvent, type DragEvent, type ClipboardEvent } from "react";
 import { ArrowUp, Square, Paperclip, Loader2, Mic, MicOff, Zap, ListOrdered, Clock, Bot, X } from "@/lib/icons";
 import { useVoiceInput } from "@/hooks/use-voice-input";
@@ -68,6 +69,7 @@ export interface ChatAttachment {
 export type MessagePriority = 'now' | 'next' | 'later';
 
 interface MessageInputProps {
+  draftReady?: boolean;
   /** Tab id of the owning chat tab — addresses "Send to Chat" at this tab only. */
   tabId?: string;
   onSend: (content: string, attachments: ChatAttachment[], priority?: MessagePriority) => void;
@@ -135,6 +137,7 @@ interface MessageInputProps {
 
 export const MessageInput = memo(function MessageInput({
   tabId,
+  draftReady = true,
   onSend,
   isStreaming,
   onCancel,
@@ -320,6 +323,25 @@ export const MessageInput = memo(function MessageInput({
     }
   }, [initialValue]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // A tour suggestion is an explicit user action. Hydrated or typed drafts always win.
+  useEffect(() => {
+    const suggest = (event: Event) => {
+      const detail = (event as CustomEvent).detail;
+      if (!draftReady || disabled || isStreaming || valueRef.current || attachments.length || agentTag || !tabId) return;
+      if (detail?.projectName !== projectName || (detail.tabId && detail.tabId !== tabId) || typeof detail.text !== "string") return;
+      const panels = usePanelStore.getState();
+      const active = detail.tabId
+        ? Object.values(panels.panels).some((panel) => panel.activeTabId === tabId)
+        : panels.panels[panels.focusedPanelId]?.activeTabId === tabId;
+      if (!active || document.hidden) return;
+      writeTextareas(detail.text);
+      onContentChange?.(detail.text);
+      getVisibleTextarea()?.focus();
+    };
+    window.addEventListener("ppm:onboarding-prompt", suggest);
+    return () => window.removeEventListener("ppm:onboarding-prompt", suggest);
+  }, [draftReady, disabled, isStreaming, attachments.length, agentTag, tabId, projectName, onContentChange, writeTextareas, getVisibleTextarea]);
+
   // Parent-driven clear (e.g. cancelling an edit) — skip initial mount (0).
   useEffect(() => {
     if (clearSignal) writeTextareas("");
@@ -850,7 +872,7 @@ export const MessageInput = memo(function MessageInput({
   const showCancel = isStreaming && !hasContent;
 
   return (
-    <div className="p-2 md:p-3">
+    <div data-onboarding="chat-input" className="p-2 md:p-3">
       {/* Rounded input container */}
       <div
         className="border border-border rounded-[var(--rad)] bg-panel shadow-[var(--shadow-float)] cursor-text"

package/src/web/components/chat/model-thinking-selector.tsx

@@ -10,6 +10,10 @@ interface ModelOption {
   label: string;
 }
 
+// Shared by chat tabs; keep successful lists visible while refreshing an old entry.
+const modelCache = new Map<string, { models: ModelOption[]; expiry: number }>();
+const MODEL_CACHE_TTL = 5 * 60 * 1000;
+
 interface ModelThinkingSelectorProps {
   model: string | null;
   effort: string | null;
@@ -46,6 +50,8 @@ export function ModelThinkingSelector({
   providerId,
   disabled,
 }: ModelThinkingSelectorProps) {
+  const cacheKey = JSON.stringify([projectName, providerId]);
+  const cached = modelCache.get(cacheKey);
   const [modelResult, setModelResult] = useState<{
     projectName: string;
     providerId: string;
@@ -54,7 +60,7 @@ export function ModelThinkingSelector({
   } | null>(null);
   // Never render another provider/project's options, even before effects run.
   const result = modelResult?.projectName === projectName && modelResult.providerId === providerId
-    ? modelResult : null;
+    ? modelResult : cached ? { ...cached, error: false } : null;
   const models = result?.models ?? [];
   const loading = Boolean(projectName && providerId && !result);
   const modelStatus = loading ? "Loading models..." : result?.error
@@ -67,16 +73,21 @@ export function ModelThinkingSelector({
     let active = true;
     setModelResult(null);
     if (!projectName || !providerId) return;
+    const entry = modelCache.get(cacheKey);
+    if (entry && Date.now() < entry.expiry) return;
     api
       .get<ModelOption[]>(`${projectUrl(projectName)}/chat/providers/${providerId}/models`)
       .then((models) => {
-        if (active) setModelResult({ projectName, providerId, models });
+        // The backend also returns [] on discovery failure. Don't replace a usable list.
+        const usable = models.length > 0 ? models : entry?.models ?? models;
+        if (active && models.length > 0) modelCache.set(cacheKey, { models, expiry: Date.now() + MODEL_CACHE_TTL });
+        if (active) setModelResult({ projectName, providerId, models: usable });
       })
       .catch(() => {
-        if (active) setModelResult({ projectName, providerId, models: [], error: true });
+        if (active) setModelResult({ projectName, providerId, models: entry?.models ?? [], error: !entry });
       });
     return () => { active = false; };
-  }, [projectName, providerId]);
+  }, [projectName, providerId, cacheKey]);
 
   useEffect(() => {
     if (disabled) setOpen(false);

package/src/web/components/chat/session-list-panel.tsx

@@ -8,7 +8,7 @@ import { SessionContextMenu } from "./session-context-menu";
 import { ProviderBadge } from "./provider-selector";
 import { useNotificationStore, notificationTint } from "@/stores/notification-store";
 import { cn } from "@/lib/utils";
-import type { SessionInfo, ProjectTag } from "../../../types/chat";
+import { compareSessionsByActivity, type SessionInfo, type ProjectTag } from "../../../types/chat";
 
 const MAX_RECENT_SESSIONS = 5;
 const FETCH_SESSIONS_LIMIT = 20;
@@ -62,11 +62,7 @@ export function SessionListPanel({ projectName, onSelectSession, className }: Se
       }
       setSessions((prev) => {
         const updated = prev.map((s) => s.id === session.id ? { ...s, pinned: !s.pinned } : s);
-        return updated.sort((a, b) => {
-          if (a.pinned && !b.pinned) return -1;
-          if (!a.pinned && b.pinned) return 1;
-          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-        });
+        return updated.sort(compareSessionsByActivity);
       });
     } catch {
       // silently ignore

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

@@ -3,7 +3,7 @@ import { api, projectUrl } from "@/lib/api-client";
 import { Plus, Trash2, MessageSquare, ChevronDown, Pin, PinOff, Search, X } from "@/lib/icons";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { ProviderBadge } from "./provider-selector";
-import type { SessionInfo } from "../../../types/chat";
+import { compareSessionsByActivity, type SessionInfo } from "../../../types/chat";
 
 interface SessionPickerProps {
   currentSessionId: string | null;
@@ -81,11 +81,7 @@ export function SessionPicker({
       }
       setSessions((prev) => {
         const updated = prev.map((s) => s.id === session.id ? { ...s, pinned: !s.pinned } : s);
-        return updated.sort((a, b) => {
-          if (a.pinned && !b.pinned) return -1;
-          if (!a.pinned && b.pinned) return 1;
-          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-        });
+        return updated.sort(compareSessionsByActivity);
       });
     } catch {
       // Silently fail