@hienlh/ppm 0.19.2 → 0.19.4

package/src/types/chat.ts

@@ -51,8 +51,14 @@ export interface AIProvider {
   markAsResumed?(sessionId: string): void;
   isAvailable?(): Promise<boolean>;
   listModels?(): Promise<ModelOption[]>;
+  /**
+   * Skills the provider's own runtime would resolve for this session, for
+   * providers that own a skill system PPM cannot read off disk. Implemented by
+   * codex; absent for Claude, whose skills come from the shared disk discovery.
+   */
+  listSkills?(sessionId?: string): Promise<import("../providers/codex-app-server/codex-protocol").CodexSkill[]>;
   /** Provider-specific usage/quota (rate limits). Used by GET /chat/usage. */
-  getUsage?(): Promise<UsageInfo>;
+  getUsage?(sessionId?: string): Promise<UsageInfo>;
   /** True when a live streaming subprocess exists for this session */
   hasStreamingSession?(sessionId: string): boolean;
   /** Prompt-cache lifetime for this session, in ms — how long holding its subprocess pays. */

package/src/web/app.tsx

@@ -58,15 +58,9 @@ export function App() {
   const [authState, setAuthState] = useState<AuthState>("checking");
   const isMobileViewport = useIsMobile();
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const [drawerTab, setDrawerTab] = useState<"explorer" | "git" | "settings" | undefined>();
+  const [drawerTab, setDrawerTab] = useState<"explorer" | "git" | undefined>();
   const [projectSheetOpen, setProjectSheetOpen] = useState(false);
 
-  // Listen for "open-mobile-settings" event (from project bottom sheet)
-  useEffect(() => {
-    const handler = () => { setDrawerTab("settings"); setDrawerOpen(true); };
-    window.addEventListener("open-mobile-settings", handler);
-    return () => window.removeEventListener("open-mobile-settings", handler);
-  }, []);
   const [mountedProjects, setMountedProjects] = useState<Set<string>>(
     () => new Set(["__global__"]),
   );

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

@@ -325,7 +325,16 @@ export function ChatHistoryBar({
             >
               <Activity className="size-3" />
               {usageInfo.activeAccountLabel && (
-                <span className="text-text-secondary font-normal truncate max-w-[60px]">[{usageInfo.activeAccountLabel}]</span>
+                // Which account is serving this session, per provider. An email
+                // label is unreadable cut to 60px ("hienlh1298@…"), and the
+                // account is the thing a multi-account user checks here, so it
+                // gets the room and the full string on hover.
+                <span
+                  className="text-text-secondary font-normal truncate max-w-[110px]"
+                  title={usageInfo.activeAccountLabel}
+                >
+                  [{usageInfo.activeAccountLabel}]
+                </span>
               )}
               <span>5h:{fiveHourPct != null ? `${fiveHourPct}%` : "--%"}</span>
               <span className="text-text-subtle">·</span>

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

@@ -35,6 +35,21 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const [sessionId, setSessionId] = useState<string | null>(
     (metadata?.sessionId as string) ?? null,
   );
+
+  /**
+   * Follow the session id when the provider adopts its own.
+   *
+   * PPM creates a session under a uuid it mints, then codex (or the Claude SDK)
+   * reports the real id and the server re-keys to it. Everything written from
+   * that point — transcript, title, account binding — lands under the new id, so
+   * a tab left holding the original would reopen into an empty conversation even
+   * though the history is on disk. Setting it here also persists it to the tab's
+   * metadata through the effect below, which is what makes the fix survive a
+   * reload rather than only lasting the turn.
+   */
+  const handleSessionMigrated = useCallback((newSessionId: string) => {
+    setSessionId(newSessionId);
+  }, []);
   const [providerId, setProviderId] = useState<string>(
     (metadata?.providerId as string) ?? "claude",
   );
@@ -133,7 +148,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     bashPartialOutput,
     backgroundShells,
     killBackgroundShell,
-  } = useChat(sessionId, providerId, projectName);
+  } = useChat(sessionId, providerId, projectName, handleSessionMigrated);
 
   // Teammates keep working long after their spawn card scrolled away — a resume
   // arrives by SendMessage and writes no card at all. Poll the roster whenever this
@@ -754,6 +769,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
             permissionMode={permissionMode}
             onModeChange={setPermissionMode}
             providerId={providerId}
+            sessionId={sessionId ?? undefined}
             onProviderChange={!sessionId ? setProviderId : undefined}
             model={model}
             onModelChange={setModel}

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

@@ -107,6 +107,9 @@ interface MessageInputProps {
   onModeChange?: (mode: string) => void;
   /** Current provider ID */
   providerId?: string;
+  /** Live session id, when the tab has one. Scopes the slash list to the session's
+   *  own skill runtime (codex resolves skills per account home + project cwd). */
+  sessionId?: string;
   /** Provider change handler — undefined when session is active (locked) */
   onProviderChange?: (providerId: string) => void;
   /** Current per-session model (null = provider default) */
@@ -147,6 +150,7 @@ export const MessageInput = memo(function MessageInput({
   permissionMode,
   onModeChange,
   providerId,
+  sessionId,
   onProviderChange,
   model,
   onModelChange,
@@ -328,7 +332,7 @@ export const MessageInput = memo(function MessageInput({
       onSlashItemsLoaded?.([], []);
       return;
     }
-    fetchSlashItems(projectName)
+    fetchSlashItems(projectName, providerId, sessionId)
       .then((data) => {
         slashItemsRef.current = data.items;
         onSlashItemsLoaded?.(data.items, data.recentNames);
@@ -337,7 +341,7 @@ export const MessageInput = memo(function MessageInput({
         slashItemsRef.current = [];
         onSlashItemsLoaded?.([], []);
       });
-  }, [projectName, onSlashItemsLoaded]);
+  }, [projectName, providerId, sessionId, onSlashItemsLoaded]);
 
   // Load when projectName changes (cache hit after the first tab in a project)
   useEffect(() => { loadSlashItems(); }, [loadSlashItems]);
@@ -404,10 +408,13 @@ export const MessageInput = memo(function MessageInput({
       return;
     }
 
-    // Find the /query pattern before cursor and replace it with the command name
+    // Find the /query pattern before cursor and replace it with the command name.
+    // The item's own sigil is used, not a hardcoded `/`: a codex skill is invoked
+    // as `$imagegen`, so the composer must show the text that will actually be
+    // sent rather than leaving the server to silently rewrite it.
     const replaced = textBefore.replace(/(?:^|\s)\/\S*$/, (match) => {
       const prefix = stripTrigger(match);
-      return `${prefix}/${slashSelected.name} `;
+      return `${prefix}${slashSelected.invokeSigil ?? "/"}${slashSelected.name} `;
     });
     writeTextareas(replaced + textAfter);
     onSlashStateChange?.(false, "");

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

@@ -1115,6 +1115,20 @@ function InterleavedEvents({ events, isStreaming, projectName, bashPartialOutput
     if (event.type === "text") {
       textBuffer += event.content;
     } else if (event.type === "tool_use") {
+      // A call may be announced before it has anything to show and re-announced
+      // once it does — image generation starts with no file and no prompt, and
+      // only learns both when it finishes. The later event describes the same
+      // call, so it replaces the card rather than adding a second one.
+      const useId = (event as any).toolUseId;
+      const existing = useId
+        ? groups.find(
+            (g) => g.kind === "tool" && g.tool.type === "tool_use" && (g.tool as any).toolUseId === useId,
+          ) as (EventGroup & { kind: "tool" }) | undefined
+        : undefined;
+      if (existing) {
+        existing.tool = event;
+        continue;
+      }
       if (textBuffer) {
         groups.push({ kind: "text", content: textBuffer });
         textBuffer = "";

package/src/web/components/chat/slash-command-picker.tsx

@@ -15,6 +15,12 @@ export interface SlashItem {
   model?: string;
   /** Built-in only: which layer executes the command */
   handler?: "ppm" | "sdk" | "client";
+  /** Sigil the runtime needs; absent means `/`. Codex skills carry `$`. */
+  invokeSigil?: "/" | "$";
+  /** Pretty label the runtime supplies for itself (codex system skills). */
+  displayName?: string;
+  /** Runtime-supplied icon, inlined as a data URI by the server. */
+  iconDataUri?: string;
 }
 
 interface SlashCommandPickerProps {
@@ -181,7 +187,11 @@ export function SlashCommandPicker({
                 onClick={() => onSelect(item)}
               >
                 <span className="shrink-0 mt-0.5">
-                  {item.type === "builtin" ? (
+                  {item.iconDataUri ? (
+                    // The runtime shipped its own artwork (codex system skills).
+                    // Decorative: the name beside it already labels the row.
+                    <img src={item.iconDataUri} alt="" className="size-4 object-contain" />
+                  ) : item.type === "builtin" ? (
                     <Zap className="size-4 text-emerald-500" />
                   ) : item.type === "skill" ? (
                     <Sparkles className="size-4 text-warning" />
@@ -193,12 +203,21 @@ export function SlashCommandPicker({
                 </span>
                 <div className="min-w-0 flex-1">
                   <div className="flex items-baseline gap-2 min-w-0">
-                    <span className="font-medium text-sm truncate">/{item.name}</span>
+                    {/* Invocation string, shown with the sigil that will actually be
+                        sent — codex resolves its skills from `$name`, not `/name`. */}
+                    <span className="font-medium text-sm truncate">
+                      {item.invokeSigil ?? "/"}{item.name}
+                    </span>
+                    {item.displayName && item.displayName !== item.name && (
+                      <span className="text-xs text-text-2 truncate">{item.displayName}</span>
+                    )}
                     {item.argumentHint && (
                       <span className="text-xs text-text-subtle truncate">{item.argumentHint}</span>
                     )}
                     <span className="text-xs text-text-subtle capitalize ml-auto shrink-0 whitespace-nowrap">
-                      {item.scope === "bundled" ? "PPM" : item.scope === "user" ? "global" : item.type}
+                      {item.invokeSigil === "$"
+                        ? "Codex"
+                        : item.scope === "bundled" ? "PPM" : item.scope === "user" ? "global" : item.type}
                     </span>
                   </div>
                   {item.description && (

package/src/web/components/chat/tool-cards.tsx

@@ -36,6 +36,7 @@ import {
   Clock,
   Send,
   Users,
+  ImagePlus,
 } from "lucide-react";
 
 /**
@@ -86,6 +87,8 @@ function toolChip(
       return { Icon: ClipboardList, cls: "bg-accent-wash text-primary" };
     case "Skill":
       return { Icon: Sparkles, cls: "bg-accent-2/15 text-accent-2" };
+    case "ImageGen":
+      return { Icon: ImagePlus, cls: "bg-accent-2/15 text-accent-2" };
     default:
       return { Icon: Code, cls: "bg-panel-2 text-text-2" };
   }
@@ -115,13 +118,21 @@ function extractToolInfo(tool: ChatEvent): { toolName: string; input: Record<str
   return { toolName, input };
 }
 
+/** Tools whose `file_path` names an image the card should render inline. */
+const IMAGE_PATH_TOOLS = new Set([
+  "Read",
+  // Codex image generation. The picture it just wrote is the whole point of the
+  // card, so it is previewed exactly like a Read of that same file.
+  "ImageGen",
+]);
+
 /**
- * Path of the image a Read call targeted, or null when it is not a displayable image read.
+ * Path of the image a call targeted, or null when it is not a displayable image.
  * Only absolute paths qualify, matching what useBlobUrl can resolve to the external
- * raw-file endpoint — and what the Read tool always supplies.
+ * raw-file endpoint — and what both Read and ImageGen always supply.
  */
 function imageReadPath(tool: ChatEvent): string | null {
-  if (tool.type !== "tool_use" || tool.tool !== "Read") return null;
+  if (tool.type !== "tool_use" || !IMAGE_PATH_TOOLS.has(tool.tool)) return null;
   const path = (tool.input as Record<string, unknown> | undefined)?.file_path;
   if (typeof path !== "string" || !/^(\/|[A-Za-z]:[/\\])/.test(path)) return null;
   return isImageExtension(path) ? path : null;
@@ -187,6 +198,9 @@ export function ToolCard({
   // Hide the text output only when the result really carried an image. Extension is not
   // enough: an SVG or an undecodable format comes back as text that must stay visible.
   const resultIsImage = hasResult && resultHasImagePlaceholder(String((result as any).output ?? ""));
+  // When the card renders the picture, the preview below it already names the
+  // file, so echoing the path as result text just prints it a second time.
+  const previewIsTheResult = !!imagePath;
 
   // Read partial output for streaming Bash/PowerShell tools
   const toolUseId = tool.type === "tool_use" ? (tool as any).toolUseId as string | undefined : undefined;
@@ -264,7 +278,8 @@ export function ToolCard({
           {imagePath && (
             <ToolImagePreview filePath={imagePath} projectName={projectName ?? ""} />
           )}
-          {hasResult && !(isFileMutation && !isError) && !(resultIsImage && !isError) && (
+          {hasResult && !(isFileMutation && !isError) && !(resultIsImage && !isError)
+            && !(previewIsTheResult && !isError) && (
             <ToolResultView toolName={toolName} output={(result as any).output} />
           )}
         </div>
@@ -298,6 +313,19 @@ function ToolSummary({ name, input }: { name: string; input: Record<string, unkn
       return <><Globe className="size-3 inline" /> {name} <span className="text-text-subtle">{truncate(s(input.url), 50)}</span></>;
     case "ToolSearch":
       return <><Search className="size-3 inline" /> {name} <span className="text-text-subtle">{truncate(s(input.query), 50)}</span></>;
+    case "ImageGen": {
+      // The revised prompt codex generated is long and multi-line ("Use case:…
+      // Subject:… Lighting:…"); its first line is the useful label. The
+      // thumbnail below carries the actual result, so the header stays short.
+      const firstLine = s(input.prompt).split("\n").find((l) => l.trim()) ?? "";
+      const label = firstLine || basename(s(input.file_path));
+      return (
+        <>
+          <ImagePlus className="size-3 inline" /> Image
+          <span className="text-text-subtle"> {truncate(label, 50)}</span>
+        </>
+      );
+    }
     case "Agent":
     case "Task": {
       // Lead with the handle when there is one: it is both the identity of the
@@ -564,6 +592,21 @@ function ToolDetails({
           <TaskStatusBadge status="stopped" />
         </div>
       );
+    case "ImageGen":
+      // The picture is the card. Dumping the input as JSON put the file path on
+      // screen a third time — the thumbnail and the result line already carry
+      // it — and buried the one part worth reading, the prompt, inside quoting
+      // and escaped newlines.
+      return (
+        <div className="space-y-1">
+          {!!input.prompt && (
+            <p className="text-text-secondary whitespace-pre-wrap">{s(input.prompt)}</p>
+          )}
+          {input.transparentBackground === true && (
+            <p className="text-text-subtle">Transparent background</p>
+          )}
+        </div>
+      );
     default:
       return (
         <pre className="overflow-x-auto text-text-secondary font-mono whitespace-pre-wrap break-all">