@hienlh/ppm 0.5.1 → 0.5.3

package/src/providers/claude-agent-sdk.ts

@@ -10,9 +10,9 @@ import type {
   SessionInfo,
   ChatEvent,
   ChatMessage,
-  UsageInfo,
 } from "./provider.interface.ts";
 import { configService } from "../services/config.service.ts";
+import { updateFromSdkEvent } from "../services/claude-usage.service.ts";
 import { resolve } from "node:path";
 import { homedir } from "node:os";
 import { readFileSync, writeFileSync, existsSync, mkdirSync } from "node:fs";
@@ -67,8 +67,6 @@ export class ClaudeAgentSdkProvider implements AIProvider {
   private activeQueries = new Map<string, { close: () => void }>();
   /** Fork source: ppmSessionId → sourceSessionId (used on first message to fork) */
   private forkSources = new Map<string, string>();
-  /** Latest known usage/rate-limit info (shared across all sessions) */
-  private latestUsage: UsageInfo = {};
 
   /** Read current provider config from yaml (fresh each call) */
   private getProviderConfig(): Partial<import("../types/config.ts").AIProviderConfig> {
@@ -96,9 +94,14 @@ export class ClaudeAgentSdkProvider implements AIProvider {
     const existing = this.activeSessions.get(sessionId);
     if (existing) return existing;
 
+    // Check if we have a mapped SDK session ID (from a previous query)
+    const mappedSdkId = getSdkSessionId(sessionId);
+
     try {
       const sdkSessions = await sdkListSessions({ limit: 100 });
-      const found = sdkSessions.find((s) => s.sessionId === sessionId);
+      const found = sdkSessions.find(
+        (s) => s.sessionId === sessionId || s.sessionId === mappedSdkId,
+      );
       if (found) {
         const meta: Session = {
           id: sessionId,
@@ -114,6 +117,8 @@ export class ClaudeAgentSdkProvider implements AIProvider {
       // SDK not available
     }
 
+    // Session not found in SDK history — treat as new so first message
+    // creates a fresh SDK session instead of trying to resume.
     const meta: Session = {
       id: sessionId,
       providerId: this.id,
@@ -121,7 +126,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
       createdAt: new Date().toISOString(),
     };
     this.activeSessions.set(sessionId, meta);
-    this.messageCount.set(sessionId, 1);
+    this.messageCount.set(sessionId, 0);
     return meta;
   }
 
@@ -263,6 +268,7 @@ export class ClaudeAgentSdkProvider implements AIProvider {
     let assistantContent = "";
     let resultSubtype: string | undefined;
     let resultNumTurns: number | undefined;
+    let resultContextWindowPct: number | undefined;
 
     try {
       const providerConfig = this.getProviderConfig();
@@ -466,19 +472,14 @@ export class ClaudeAgentSdkProvider implements AIProvider {
           continue;
         }
 
-        // Rate limit event — extract utilization percentages
+        // Rate limit event — write to shared usage cache (REST endpoint serves it)
         if ((msg as any).type === "rate_limit_event") {
           const info = (msg as any).rate_limit_info;
           if (info) {
             const rateLimitType = info.rateLimitType as string | undefined;
             const utilization = info.utilization as number | undefined;
             if (rateLimitType && utilization != null) {
-              const usage: Record<string, number> = {};
-              if (rateLimitType === "five_hour") usage.fiveHour = utilization;
-              else if (rateLimitType.startsWith("seven_day")) usage.sevenDay = utilization;
-              // Cache latest rate limits
-              Object.assign(this.latestUsage, usage);
-              yield { type: "usage", usage };
+              updateFromSdkEvent(rateLimitType, utilization);
             }
           }
           continue;
@@ -513,11 +514,9 @@ export class ClaudeAgentSdkProvider implements AIProvider {
           const result = msg as any;
           const subtype = result.subtype as string | undefined;
 
-          // Yield final cost + any rate limit info from result
-          const usage: Record<string, unknown> = {};
-          if (result.total_cost_usd != null) usage.totalCostUsd = result.total_cost_usd;
-          if (Object.keys(usage).length > 0) {
-            yield { type: "usage", usage };
+          // Write cost to shared usage cache
+          if (result.total_cost_usd != null) {
+            updateFromSdkEvent(undefined, undefined, result.total_cost_usd);
           }
 
           // Surface non-success subtypes as errors so FE can display them
@@ -542,6 +541,19 @@ export class ClaudeAgentSdkProvider implements AIProvider {
           // Store subtype and numTurns for the done event
           resultSubtype = subtype;
           resultNumTurns = result.num_turns as number | undefined;
+
+          // Extract context window usage from modelUsage
+          const modelUsage = (result.modelUsage ?? result.model_usage) as Record<string, any> | undefined;
+          if (modelUsage) {
+            for (const usage of Object.values(modelUsage)) {
+              const cw = usage.contextWindow ?? 0;
+              if (cw > 0) {
+                const total = (usage.inputTokens ?? 0) + (usage.outputTokens ?? 0);
+                resultContextWindowPct = Math.min(Math.round((total / cw) * 100), 100);
+                break;
+              }
+            }
+          }
           break;
         }
       }
@@ -565,13 +577,10 @@ export class ClaudeAgentSdkProvider implements AIProvider {
       sessionId,
       resultSubtype: resultSubtype as any,
       numTurns: resultNumTurns,
+      contextWindowPct: resultContextWindowPct,
     };
   }
 
-  /** Get latest cached usage/rate-limit info */
-  getUsage(): UsageInfo {
-    return { ...this.latestUsage };
-  }
 
   /** Abort an active query for a session */
   abortQuery(sessionId: string): void {

package/src/server/helpers/resolve-project.ts

@@ -1,4 +1,4 @@
-import { resolve } from "node:path";
+import { resolve, sep } from "node:path";
 import { configService } from "../../services/config.service.ts";
 
 /**
@@ -15,7 +15,7 @@ export function resolveProjectPath(nameOrPath: string): string {
   // Path fallback — must be within a registered project
   const abs = resolve(nameOrPath);
   const allowed = projects.some(
-    (p) => abs === resolve(p.path) || abs.startsWith(resolve(p.path) + "/"),
+    (p) => abs === resolve(p.path) || abs.startsWith(resolve(p.path) + sep),
   );
   if (!allowed) throw new Error(`Project not found: ${nameOrPath}`);
   return abs;

package/src/server/index.ts

@@ -282,9 +282,10 @@ export async function startServer(options: {
     const { openSync } = await import("node:fs");
     const logFile = resolve(ppmDir, "ppm.log");
     const logFd = openSync(logFile, "a");
+    const { resolve: resolvePath } = await import("node:path");
     const child = Bun.spawn({
       cmd: [
-        process.execPath, "run", import.meta.dir + "/index.ts", "__serve__",
+        process.execPath, "run", resolvePath(import.meta.dir, "index.ts"), "__serve__",
         String(port), host, options.config ?? "",
       ],
       stdio: ["ignore", logFd, logFd],

package/src/server/routes/chat.ts

@@ -40,6 +40,7 @@ chatRoutes.get("/usage", async (c) => {
     weekly: usage.weekly,
     weeklyOpus: usage.weeklyOpus,
     weeklySonnet: usage.weeklySonnet,
+    totalCostUsd: usage.totalCostUsd,
   }));
 });
 

package/src/server/ws/chat.ts

@@ -75,6 +75,7 @@ async function runStreamLoop(sessionId: string, providerId: string, content: str
 
   // Heartbeat interval — declared outside try so finally can clear it
   let heartbeat: ReturnType<typeof setInterval> | undefined;
+  let lastContextWindowPct: number | undefined;
 
   try {
     const userPreview = content.slice(0, 200);
@@ -127,7 +128,8 @@ async function runStreamLoop(sessionId: string, providerId: string, content: str
       } else if (evType === "error") {
         logSessionEvent(sessionId, "ERROR", ev.message ?? JSON.stringify(ev).slice(0, 300));
       } else if (evType === "done") {
-        logSessionEvent(sessionId, "DONE", `subtype=${ev.resultSubtype ?? "none"} turns=${ev.numTurns ?? "?"}`);
+        logSessionEvent(sessionId, "DONE", `subtype=${ev.resultSubtype ?? "none"} turns=${ev.numTurns ?? "?"} ctx=${ev.contextWindowPct ?? "?"}%`);
+        if (ev.contextWindowPct != null) lastContextWindowPct = ev.contextWindowPct;
         // Fire-and-forget push notification
         import("../../services/push-notification.service.ts").then(({ pushService }) => {
           const project = entry.projectName || "Project";
@@ -170,7 +172,7 @@ async function runStreamLoop(sessionId: string, providerId: string, content: str
   } finally {
     if (heartbeat) clearInterval(heartbeat);
     // Always send done — guarantees FE resets isStreaming even if provider didn't yield done
-    safeSend(sessionId, { type: "done", sessionId });
+    safeSend(sessionId, { type: "done", sessionId, contextWindowPct: lastContextWindowPct });
     entry.abort = undefined;
     entry.isStreaming = false;
     entry.pendingApprovalEvent = undefined;

package/src/services/claude-usage.service.ts

@@ -17,6 +17,8 @@ export interface ClaudeUsage {
   weekly?: LimitBucket;
   weeklyOpus?: LimitBucket;
   weeklySonnet?: LimitBucket;
+  /** Cumulative cost from SDK result events */
+  totalCostUsd?: number;
 }
 
 const API_URL = "https://api.anthropic.com/api/oauth/usage";
@@ -153,6 +155,38 @@ export function getCachedUsage(): ClaudeUsage {
   return cache;
 }
 
+/**
+ * Merge SDK rate-limit / cost events into the cache so the REST endpoint
+ * always returns the freshest data — even when the OAuth Usage API is unreachable.
+ */
+export function updateFromSdkEvent(
+  rateLimitType?: string,
+  utilization?: number,
+  costUsd?: number,
+): void {
+  if (rateLimitType && utilization != null) {
+    if (rateLimitType === "five_hour") {
+      cache.session = {
+        ...(cache.session ?? { resetsAt: "", resetsInMinutes: null, resetsInHours: null, windowHours: 5 }),
+        utilization,
+      };
+    } else if (rateLimitType.startsWith("seven_day")) {
+      const key: keyof ClaudeUsage =
+        rateLimitType === "seven_day_opus" ? "weeklyOpus"
+          : rateLimitType === "seven_day_sonnet" ? "weeklySonnet"
+          : "weekly";
+      cache[key] = {
+        ...(cache[key] as LimitBucket ?? { resetsAt: "", resetsInMinutes: null, resetsInHours: null, windowHours: 168 }),
+        utilization,
+      };
+    }
+    if (!cache.lastFetchedAt) cache.lastFetchedAt = new Date().toISOString();
+  }
+  if (costUsd != null) {
+    cache.totalCostUsd = (cache.totalCostUsd ?? 0) + costUsd;
+  }
+}
+
 /** Force immediate refresh (e.g. after a chat completes) */
 export async function refreshUsageNow(): Promise<ClaudeUsage> {
   await fetchWithRetry();

package/src/services/config.service.ts

@@ -23,12 +23,18 @@ class ConfigService {
     ].filter(Boolean) as string[];
 
     for (const p of searchPaths) {
-      if (existsSync(p)) {
+      const found = existsSync(p);
+      if (!found) {
+        console.log(`[config] Not found: ${p}`);
+        continue;
+      }
+      try {
         const raw = readFileSync(p, "utf-8");
         const parsed = yaml.load(raw) as Partial<PpmConfig> | null;
         if (parsed) {
           this.config = { ...structuredClone(DEFAULT_CONFIG), ...parsed };
           this.configPath = p;
+          console.log(`[config] Loaded from: ${p}`);
           // Auto-generate token if auth enabled but token is empty
           if (this.config.auth.enabled && !this.config.auth.token) {
             this.config.auth.token = randomBytes(16).toString("hex");
@@ -40,10 +46,14 @@ class ConfigService {
           }
           return this.config;
         }
+        console.log(`[config] Empty or invalid YAML: ${p}`);
+      } catch (err) {
+        console.error(`[config] Error reading ${p}:`, (err as Error).message);
       }
     }
 
     // No config found — create default
+    console.log(`[config] No config found, creating default at ${GLOBAL_CONFIG_PATH}`);
     this.config = this.createDefault();
     return this.config;
   }

package/src/types/api.ts

@@ -33,6 +33,5 @@ export type ChatWsServerMessage =
   | { type: "tool_use"; tool: string; input: unknown; toolUseId?: string; parentToolUseId?: string }
   | { type: "tool_result"; output: string; isError?: boolean; toolUseId?: string; parentToolUseId?: string }
   | { type: "approval_request"; requestId: string; tool: string; input: unknown }
-  | { type: "usage"; usage: { totalCostUsd?: number; fiveHour?: number; sevenDay?: number } }
-  | { type: "done"; sessionId: string }
+  | { type: "done"; sessionId: string; contextWindowPct?: number }
   | { type: "error"; message: string };

package/src/types/chat.ts

@@ -80,9 +80,8 @@ export type ChatEvent =
   | { type: "tool_use"; tool: string; input: unknown; toolUseId?: string; parentToolUseId?: string; children?: ChatEvent[] }
   | { type: "tool_result"; output: string; isError?: boolean; toolUseId?: string; parentToolUseId?: string }
   | { type: "approval_request"; requestId: string; tool: string; input: unknown }
-  | { type: "usage"; usage: UsageInfo }
   | { type: "error"; message: string }
-  | { type: "done"; sessionId: string; resultSubtype?: ResultSubtype; numTurns?: number };
+  | { type: "done"; sessionId: string; resultSubtype?: ResultSubtype; numTurns?: number; contextWindowPct?: number };
 
 export type ToolApprovalHandler = (
   tool: string,

package/src/web/components/chat/attachment-chips.tsx

@@ -10,7 +10,7 @@ export function AttachmentChips({ attachments, onRemove }: AttachmentChipsProps)
   if (attachments.length === 0) return null;
 
   return (
-    <div className="flex flex-wrap gap-1.5 px-3 pt-2">
+    <div className="flex flex-wrap gap-1.5 px-2 md:px-4 pt-2">
       {attachments.map((att) => (
         <div
           key={att.id}

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

@@ -13,6 +13,7 @@ type PanelType = "history" | "config" | "usage" | null;
 interface ChatHistoryBarProps {
   projectName: string;
   usageInfo: UsageInfo;
+  contextWindowPct?: number | null;
   usageLoading?: boolean;
   refreshUsage?: () => void;
   lastFetchedAt?: string | null;
@@ -47,7 +48,7 @@ function pctColor(pct: number): string {
 }
 
 export function ChatHistoryBar({
-  projectName, usageInfo, usageLoading, refreshUsage, lastFetchedAt,
+  projectName, usageInfo, contextWindowPct, usageLoading, refreshUsage, lastFetchedAt,
   sessionId, onSelectSession, onBugReport, isConnected, onReconnect,
 }: ChatHistoryBarProps) {
   const [activePanel, setActivePanel] = useState<PanelType>(null);
@@ -142,8 +143,11 @@ export function ChatHistoryBar({
           <span>5h:{fiveHourPct != null ? `${fiveHourPct}%` : "--%"}</span>
           <span className="text-text-subtle">·</span>
           <span>Wk:{sevenDayPct != null ? `${sevenDayPct}%` : "--%"}</span>
-          {lastFetchedAt && (
-            <span className="text-text-subtle/50 font-normal text-[9px] ml-0.5">{relativeTime(lastFetchedAt)}</span>
+          {contextWindowPct != null && (
+            <>
+              <span className="text-text-subtle">·</span>
+              <span className={pctColor(contextWindowPct)}>Ctx:{contextWindowPct}%</span>
+            </>
           )}
         </button>
 

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

@@ -50,7 +50,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const version = useSettingsStore((s) => s.version);
 
   // Usage runs independently — auto-refreshes on interval
-  const { usageInfo, usageLoading, lastFetchedAt, refreshUsage, mergeUsage } =
+  const { usageInfo, usageLoading, lastFetchedAt, refreshUsage } =
     useUsage(projectName, providerId);
 
   // Persist sessionId and providerId to tab metadata so reload restores the session
@@ -69,13 +69,14 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     connectingElapsed,
     thinkingWarningThreshold,
     pendingApproval,
+    contextWindowPct,
     sendMessage,
     respondToApproval,
     cancelStreaming,
     reconnect,
     refetchMessages,
     isConnected,
-  } = useChat(sessionId, providerId, projectName, { onUsageEvent: mergeUsage });
+  } = useChat(sessionId, providerId, projectName);
 
   // Auto-send pending message for forked sessions (set by handleFork)
   const pendingForkMsgRef = useRef(metadata?.pendingMessage as string | undefined);
@@ -282,6 +283,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
         <ChatHistoryBar
           projectName={projectName}
           usageInfo={usageInfo}
+          contextWindowPct={contextWindowPct}
           usageLoading={usageLoading}
           refreshUsage={refreshUsage}
           lastFetchedAt={lastFetchedAt}

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

@@ -57,6 +57,7 @@ export function MessageInput({
   const [value, setValue] = useState(initialValue ?? "");
   const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const mobileTextareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const slashItemsRef = useRef<SlashItem[]>([]);
   const fileItemsRef = useRef<FileNode[]>([]);
@@ -238,7 +239,7 @@ export function MessageInput({
           );
         });
       }
-      textareaRef.current?.focus();
+      (mobileTextareaRef.current ?? textareaRef.current)?.focus();
     },
     [uploadFile],
   );
@@ -266,9 +267,8 @@ export function MessageInput({
       if (att.previewUrl) URL.revokeObjectURL(att.previewUrl);
     }
     setAttachments([]);
-    if (textareaRef.current) {
-      textareaRef.current.style.height = "auto";
-    }
+    if (textareaRef.current) textareaRef.current.style.height = "auto";
+    if (mobileTextareaRef.current) mobileTextareaRef.current.style.height = "auto";
   }, [value, attachments, disabled, onSend, onSlashStateChange, onFileStateChange]);
 
   const handleKeyDown = useCallback(
@@ -320,8 +320,8 @@ export function MessageInput({
     [updatePickerState],
   );
 
-  const handleInput = useCallback(() => {
-    const el = textareaRef.current;
+  const handleInput = useCallback((e?: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const el = e?.target ?? textareaRef.current;
     if (!el) return;
     el.style.height = "auto";
     el.style.height = Math.min(el.scrollHeight, 160) + "px";
@@ -382,14 +382,13 @@ export function MessageInput({
 
   return (
     <div className="p-2 md:p-3 bg-background">
-      {/* Attachment chips (above input) */}
-      <AttachmentChips attachments={attachments} onRemove={removeAttachment} />
-
       {/* Rounded input container */}
       <div
         className="border border-border rounded-xl md:rounded-2xl bg-surface shadow-sm cursor-text"
-        onClick={() => !disabled && textareaRef.current?.focus()}
+        onClick={() => !disabled && (mobileTextareaRef.current ?? textareaRef.current)?.focus()}
       >
+        {/* Attachment chips (inside container, aligned with input) */}
+        <AttachmentChips attachments={attachments} onRemove={removeAttachment} />
         {/* Mobile: single row — attach + textarea + send */}
         <div className="flex items-end gap-1 md:hidden px-2 py-2">
           <button
@@ -402,9 +401,9 @@ export function MessageInput({
             <Paperclip className="size-4" />
           </button>
           <textarea
-            ref={textareaRef}
+            ref={mobileTextareaRef}
             value={value}
-            onChange={(e) => { handleChange(e.target.value); handleInput(); }}
+            onChange={(e) => { handleChange(e.target.value); handleInput(e); }}
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
             onDrop={handleDrop}
@@ -412,7 +411,7 @@ export function MessageInput({
             placeholder={isStreaming ? "Follow-up..." : "Ask anything..."}
             disabled={disabled}
             rows={1}
-            className="flex-1 resize-none bg-transparent py-1.5 text-sm text-foreground placeholder:text-text-subtle focus:outline-none disabled:opacity-50 max-h-32"
+            className="flex-1 resize-none bg-transparent py-1.5 text-sm text-foreground placeholder:text-text-subtle focus:outline-none disabled:opacity-50 max-h-20"
           />
           {showCancel ? (
             <button
@@ -439,7 +438,7 @@ export function MessageInput({
           <textarea
             ref={textareaRef}
             value={value}
-            onChange={(e) => { handleChange(e.target.value); handleInput(); }}
+            onChange={(e) => { handleChange(e.target.value); handleInput(e); }}
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
             onDrop={handleDrop}

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

@@ -5,6 +5,7 @@ import type { ChatMessage, ChatEvent } from "../../../types/chat";
 import type { StreamingStatus } from "@/hooks/use-chat";
 import { ToolCard } from "./tool-cards";
 import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
+import { basename } from "@/lib/utils";
 
 import {
   AlertCircle,
@@ -164,7 +165,7 @@ function parseUserAttachments(content: string): { files: string[]; text: string
 
 /** Build a preview URL for an uploaded file (served from /chat/uploads/:filename) */
 function uploadPreviewUrl(filePath: string, projectName?: string): string {
-  const filename = filePath.split("/").pop() ?? "";
+  const filename = basename(filePath);
   // Use a generic project name — the upload route is project-scoped but files are global
   return `/api/project/${encodeURIComponent(projectName ?? "_")}/chat/uploads/${encodeURIComponent(filename)}`;
 }
@@ -195,13 +196,13 @@ function UserBubble({ content, projectName, onFork }: { content: string; project
                 <AuthImage
                   key={i}
                   src={uploadPreviewUrl(filePath, projectName)}
-                  alt={filePath.split("/").pop() ?? "image"}
+                  alt={basename(filePath) || "image"}
                 />
               ) : isPdfPath(filePath) ? (
                 <AuthFileLink
                   key={i}
                   src={uploadPreviewUrl(filePath, projectName)}
-                  filename={filePath.split("/").pop() ?? "document.pdf"}
+                  filename={basename(filePath) || "document.pdf"}
                   mimeType="application/pdf"
                 />
               ) : (
@@ -210,7 +211,7 @@ function UserBubble({ content, projectName, onFork }: { content: string; project
                   className="flex items-center gap-1.5 rounded-md border border-border bg-background/50 px-2 py-1 text-xs text-text-secondary"
                 >
                   <FileText className="size-3.5 shrink-0" />
-                  <span className="truncate max-w-40">{filePath.split("/").pop()}</span>
+                  <span className="truncate max-w-40">{basename(filePath)}</span>
                 </div>
               ),
             )}

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

@@ -21,6 +21,7 @@ import {
 } from "lucide-react";
 import type { ChatEvent } from "../../../types/chat";
 import { useTabStore } from "@/stores/tab-store";
+import { basename } from "@/lib/utils";
 
 /** Extract tool name and input from a ChatEvent */
 function extractToolInfo(tool: ChatEvent): { toolName: string; input: Record<string, unknown> } {
@@ -165,7 +166,7 @@ function ToolDetails({
     if (!projectName) return;
     openTab({
       type: "editor",
-      title: filePath.split("/").pop() ?? filePath,
+      title: basename(filePath),
       metadata: { filePath, projectName },
       projectId: projectName,
       closable: true,
@@ -176,7 +177,7 @@ function ToolDetails({
   const openEditDiff = (filePath: string, oldStr: string, newStr: string) => {
     openTab({
       type: "git-diff",
-      title: `Diff ${filePath.split("/").pop() ?? filePath}`,
+      title: `Diff ${basename(filePath)}`,
       metadata: { filePath, projectName, original: oldStr, modified: newStr },
       projectId: projectName ?? null,
       closable: true,
@@ -453,10 +454,6 @@ function MiniMarkdown({ content, maxHeight = "max-h-48" }: { content: string; ma
   return <MarkdownRenderer content={content} className={`text-text-secondary overflow-auto ${maxHeight}`} />;
 }
 
-function basename(path?: string): string {
-  if (!path) return "";
-  return path.split("/").pop() ?? path;
-}
 
 function truncate(str?: string, max = 50): string {
   if (!str) return "";

package/src/web/components/editor/code-editor.tsx

@@ -5,6 +5,7 @@ import { MarkdownRenderer } from "@/components/shared/markdown-renderer";
 import { api, projectUrl, getAuthToken } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
 import { useSettingsStore } from "@/stores/settings-store";
+import { basename } from "@/lib/utils";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
 import { Loader2, FileWarning, ExternalLink, Code, Eye, WrapText } from "lucide-react";
 
@@ -91,7 +92,7 @@ export function CodeEditor({ metadata, tabId }: CodeEditorProps) {
   // Update tab title unsaved indicator
   useEffect(() => {
     if (!ownTab) return;
-    const baseName = filePath?.split("/").pop() ?? "Untitled";
+    const baseName = filePath ? basename(filePath) : "Untitled";
     const newTitle = unsaved ? `${baseName} \u25CF` : baseName;
     if (ownTab.title !== newTitle) updateTab(ownTab.id, { title: newTitle });
   }, [unsaved]); // eslint-disable-line react-hooks/exhaustive-deps

package/src/web/components/editor/diff-viewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useState, useMemo, useRef } from "react";
 import { DiffEditor } from "@monaco-editor/react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useSettingsStore } from "@/stores/settings-store";
@@ -43,6 +43,20 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   const { wordWrap, toggleWordWrap } = useSettingsStore();
   const monacoTheme = useMonacoTheme();
 
+  // Measure container height — Monaco needs explicit pixel height on mobile
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerHeight, setContainerHeight] = useState<number | undefined>();
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      if (entry) setContainerHeight(Math.floor(entry.contentRect.height));
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
   useEffect(() => {
     if (isInline) return;
     if (!projectName) return;
@@ -92,6 +106,10 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
     return langFile ? getMonacoLanguage(langFile) : "plaintext";
   }, [filePath, file1, file2]);
 
+  // Force inline on mobile (<768px) since side-by-side is too narrow
+  const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+  const renderSideBySide = !isMobile && expandMode === "both";
+
   if (!projectName && !isInline) {
     return (
       <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
@@ -125,9 +143,6 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
     );
   }
 
-  // expandMode left/right → inline diff (Monaco has no single-side mode)
-  const renderSideBySide = expandMode === "both";
-
   const expandToggle = (
     <div className="flex items-center gap-0.5 shrink-0">
       <button type="button"
@@ -163,24 +178,30 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   return (
     <div className="flex flex-col h-full">
       {/* Monaco DiffEditor */}
-      <div className="flex-1 overflow-hidden">
-        <DiffEditor
-          height="100%"
-          language={language}
-          original={original}
-          modified={modified}
-          theme={monacoTheme}
-          options={{
-            fontSize: 13,
-            fontFamily: "Menlo, Monaco, Consolas, monospace",
-            wordWrap: wordWrap ? "on" : "off",
-            renderSideBySide,
-            readOnly: true,
-            automaticLayout: true,
-            scrollBeyondLastLine: false,
-          }}
-          loading={<Loader2 className="size-5 animate-spin text-text-subtle" />}
-        />
+      <div ref={containerRef} className="flex-1 overflow-hidden">
+        {containerHeight && containerHeight > 0 ? (
+          <DiffEditor
+            height={containerHeight}
+            language={language}
+            original={original}
+            modified={modified}
+            theme={monacoTheme}
+            options={{
+              fontSize: isMobile ? 11 : 13,
+              fontFamily: "Menlo, Monaco, Consolas, monospace",
+              wordWrap: isMobile ? "on" : wordWrap ? "on" : "off",
+              renderSideBySide,
+              readOnly: true,
+              automaticLayout: true,
+              scrollBeyondLastLine: false,
+            }}
+            loading={<Loader2 className="size-5 animate-spin text-text-subtle" />}
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full">
+            <Loader2 className="size-5 animate-spin text-text-subtle" />
+          </div>
+        )}
       </div>
     </div>
   );