@nextclaw/ui 0.15.2 → 0.15.4

package/src/features/chat/stores/chat-thread.store.ts

@@ -8,8 +8,13 @@ import type {
 } from '@/shared/lib/api';
 import {
   normalizePersistedWorkspaceFileTab,
+  retainWorkspaceFileTabs,
   toPersistedWorkspaceFileTab,
 } from '@/features/chat/features/workspace/utils/chat-workspace-file-tab-persistence.utils';
+import {
+  CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH,
+  normalizeChatWorkspacePanelWidth,
+} from '@/features/chat/features/workspace/utils/chat-workspace-panel-layout.utils';
 
 export type ChatChildSessionTab = {
   sessionKey: string;
@@ -33,6 +38,9 @@ export type ChatWorkspaceFileTab = {
   line?: number | null;
   column?: number | null;
   rawText?: string | null;
+  /** Attachment/binary content URL for workspace-native media preview. */
+  contentUrl?: string | null;
+  mimeType?: string | null;
   beforeText?: string | null;
   afterText?: string | null;
   patchText?: string | null;
@@ -41,9 +49,21 @@ export type ChatWorkspaceFileTab = {
   fullLines?: ChatFileOperationLineViewModel[];
 };
 
+export type ChatWorkspacePanelKind =
+  | 'overview'
+  | 'child-sessions'
+  | 'child-session'
+  | 'side-chat-draft'
+  | 'project-files'
+  | 'file'
+  | 'cron';
+
 export type ChatWorkspaceNavigationEntry =
+  | { kind: 'overview' }
+  | { kind: 'child-sessions' }
   | { kind: 'child-session'; key: string }
   | { kind: 'side-chat-draft'; key: string }
+  | { kind: 'project-files' }
   | { kind: 'file'; key: string }
   | { kind: 'cron' };
 
@@ -66,7 +86,7 @@ export type ChatThreadSnapshot = {
   parentSessionKey?: string | null;
   parentSessionLabel?: string | null;
   workspacePanelParentKey?: string | null;
-  activeWorkspacePanelKind?: "child-session" | "side-chat-draft" | "file" | "cron" | null;
+  activeWorkspacePanelKind?: ChatWorkspacePanelKind | null;
   childSessionTabs: ChatChildSessionTab[];
   activeChildSessionKey?: string | null;
   activeSideChatDraft?: ChatWorkspaceSideChatDraft | null;
@@ -74,6 +94,7 @@ export type ChatThreadSnapshot = {
   activeWorkspaceFileKey?: string | null;
   workspaceNavigationHistory: ChatWorkspaceNavigationEntry[];
   workspaceNavigationHistoryIndex: number;
+  workspacePanelWidth: number;
   contextWindow?: SessionContextWindowView | null;
 };
 
@@ -95,6 +116,7 @@ type PersistedChatThreadStore = {
     activeWorkspaceFileKey?: unknown;
     workspaceNavigationHistory?: unknown;
     workspaceNavigationHistoryIndex?: unknown;
+    workspacePanelWidth?: unknown;
   };
 };
 
@@ -107,9 +129,10 @@ type PersistedChatWorkspaceSnapshot = Pick<
   | 'activeWorkspaceFileKey'
   | 'workspaceNavigationHistory'
   | 'workspaceNavigationHistoryIndex'
+  | 'workspacePanelWidth'
 >;
 
-type PersistedWorkspacePanelKind = 'child-session' | 'file' | 'cron';
+type PersistedWorkspacePanelKind = Exclude<ChatWorkspacePanelKind, 'side-chat-draft'>;
 
 const initialSnapshot: ChatThreadSnapshot = {
   sessionTypeLabel: null,
@@ -138,6 +161,7 @@ const initialSnapshot: ChatThreadSnapshot = {
   activeWorkspaceFileKey: null,
   workspaceNavigationHistory: [],
   workspaceNavigationHistoryIndex: 0,
+  workspacePanelWidth: CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH,
   contextWindow: null
 };
 
@@ -160,7 +184,14 @@ function normalizeHistoryIndex(value: unknown, maxIndex: number): number {
 function isWorkspacePanelKind(
   value: unknown,
 ): value is PersistedWorkspacePanelKind {
-  return value === 'child-session' || value === 'file' || value === 'cron';
+  return (
+    value === 'overview' ||
+    value === 'child-sessions' ||
+    value === 'child-session' ||
+    value === 'project-files' ||
+    value === 'file' ||
+    value === 'cron'
+  );
 }
 
 function normalizePersistedWorkspaceNavigationEntry(
@@ -169,8 +200,13 @@ function normalizePersistedWorkspaceNavigationEntry(
   if (!isRecord(value)) {
     return null;
   }
-  if (value.kind === 'cron') {
-    return { kind: 'cron' };
+  if (
+    value.kind === 'overview' ||
+    value.kind === 'child-sessions' ||
+    value.kind === 'project-files' ||
+    value.kind === 'cron'
+  ) {
+    return { kind: value.kind };
   }
   const key = normalizeOptionalString(value.key);
   if (!key || (value.kind !== 'child-session' && value.kind !== 'file')) {
@@ -191,6 +227,15 @@ function createWorkspaceNavigationEntryFromSnapshot({
   activeChildSessionKey: string | null;
   activeWorkspaceFileKey: string | null;
 }): ChatWorkspaceNavigationEntry | null {
+  if (activeWorkspacePanelKind === 'overview') {
+    return { kind: 'overview' };
+  }
+  if (activeWorkspacePanelKind === 'child-sessions') {
+    return { kind: 'child-sessions' };
+  }
+  if (activeWorkspacePanelKind === 'project-files') {
+    return { kind: 'project-files' };
+  }
   if (activeWorkspacePanelKind === 'cron') {
     return { kind: 'cron' };
   }
@@ -215,17 +260,25 @@ function normalizePersistedWorkspaceSnapshot(
   if (!isRecord(value)) {
     return null;
   }
-  const workspaceFileTabs = Array.isArray(value.workspaceFileTabs)
+  const workspacePanelParentKey = normalizeOptionalString(value.workspacePanelParentKey);
+  const activeWorkspaceFileKey = normalizeOptionalString(value.activeWorkspaceFileKey);
+  const normalizedWorkspaceFileTabs = Array.isArray(value.workspaceFileTabs)
     ? value.workspaceFileTabs
       .map(normalizePersistedWorkspaceFileTab)
       .filter((tab): tab is ChatWorkspaceFileTab => tab !== null)
-      .slice(-CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS)
     : [];
-  const activeWorkspaceFileKey = normalizeOptionalString(value.activeWorkspaceFileKey);
+  const workspaceFileTabs = retainWorkspaceFileTabs(
+    normalizedWorkspaceFileTabs,
+    activeWorkspaceFileKey,
+    CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS,
+  );
+  const sessionWorkspaceFileTabs = workspaceFileTabs.filter(
+    (tab) => tab.parentSessionKey === workspacePanelParentKey,
+  );
   const resolvedActiveWorkspaceFileKey =
-    activeWorkspaceFileKey && workspaceFileTabs.some((tab) => tab.key === activeWorkspaceFileKey)
+    activeWorkspaceFileKey && sessionWorkspaceFileTabs.some((tab) => tab.key === activeWorkspaceFileKey)
       ? activeWorkspaceFileKey
-      : workspaceFileTabs[0]?.key ?? null;
+      : sessionWorkspaceFileTabs[0]?.key ?? null;
   const activeWorkspacePanelKind = isWorkspacePanelKind(value.activeWorkspacePanelKind)
     ? value.activeWorkspacePanelKind
     : null;
@@ -262,13 +315,16 @@ function normalizePersistedWorkspaceSnapshot(
       : 0;
 
   return {
-    workspacePanelParentKey: normalizeOptionalString(value.workspacePanelParentKey),
+    workspacePanelParentKey,
     activeWorkspacePanelKind: resolvedActiveWorkspacePanelKind,
     activeChildSessionKey,
     workspaceFileTabs,
     activeWorkspaceFileKey: resolvedActiveWorkspaceFileKey,
     workspaceNavigationHistory,
     workspaceNavigationHistoryIndex,
+    workspacePanelWidth: normalizeChatWorkspacePanelWidth(
+      value.workspacePanelWidth,
+    ),
   };
 }
 
@@ -306,12 +362,16 @@ export const useChatThreadStore = create<ChatThreadStore>()(
                 ? null
                 : state.snapshot.activeWorkspacePanelKind,
             activeChildSessionKey: state.snapshot.activeChildSessionKey,
-            workspaceFileTabs: state.snapshot.workspaceFileTabs
-              .slice(-CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS)
+            workspaceFileTabs: retainWorkspaceFileTabs(
+              state.snapshot.workspaceFileTabs,
+              state.snapshot.activeWorkspaceFileKey,
+              CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS,
+            )
               .map(toPersistedWorkspaceFileTab),
             activeWorkspaceFileKey: state.snapshot.activeWorkspaceFileKey,
             workspaceNavigationHistory,
             workspaceNavigationHistoryIndex,
+            workspacePanelWidth: state.snapshot.workspacePanelWidth,
           }
         };
       },

package/src/features/cron/components/cron-config.tsx

@@ -38,7 +38,7 @@ import { cn } from "@/shared/lib/utils";
 import { t } from "@/shared/lib/i18n";
 import { PageLayout, PageHeader } from "@/app/components/layout/page-layout";
 import {
-  AlarmClock,
+  Search,
   RefreshCw,
   Trash2,
   Play,
@@ -77,16 +77,16 @@ function StatusBadge({ job }: { job: CronJobView }) {
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold",
+        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium",
         job.enabled
           ? "bg-emerald-50 text-emerald-700"
-          : "bg-gray-100 text-gray-500",
+          : "bg-muted text-muted-foreground",
       )}
     >
       <span
         className={cn(
           "h-1.5 w-1.5 rounded-full",
-          job.enabled ? "bg-emerald-400" : "bg-gray-400",
+          job.enabled ? "bg-emerald-500" : "bg-muted-foreground/50",
         )}
       />
       {job.enabled ? t("enabled") : t("disabled")}
@@ -104,10 +104,7 @@ function CronJobCard(props: {
   const [expanded, setExpanded] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
 
-  const barColor = job.enabled ? "bg-emerald-400" : "bg-gray-300";
-
   const handleCardClick = (e: React.MouseEvent) => {
-    // Don't expand when clicking switch or menu
     const target = e.target as HTMLElement;
     if (target.closest("[data-no-expand]")) return;
     setExpanded(!expanded);
@@ -116,44 +113,33 @@ function CronJobCard(props: {
   return (
     <div
       className={cn(
-        "group relative overflow-hidden rounded-xl border bg-white transition-all duration-150 cursor-pointer",
-        expanded
-          ? "border-gray-300 shadow-sm"
-          : "border-gray-200 hover:border-gray-300 hover:shadow-sm",
+        "group overflow-hidden rounded-xl border border-border/70 bg-card transition-colors cursor-pointer",
+        expanded ? "bg-muted/20" : "hover:bg-muted/30",
       )}
       onClick={handleCardClick}
     >
-      {/* Left color bar */}
-      <div
-        className={cn(
-          "absolute left-0 top-0 bottom-0 w-1 rounded-l-xl",
-          barColor,
-        )}
-      />
-
-      <div className="pl-4 pr-3 py-3">        {/* Row 1: name + badges + actions */}
-        <div className="flex items-center gap-3">
+      <div className="px-3 py-2.5">
+        <div className="flex items-center gap-2.5">
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2">
               {expanded ? (
-                <ChevronDown className="h-3.5 w-3.5 text-gray-400 shrink-0" />
+                <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
               ) : (
-                <ChevronRight className="h-3.5 w-3.5 text-gray-300 shrink-0 group-hover:text-gray-500 transition-colors" />
+                <ChevronRight className="h-3.5 w-3.5 text-muted-foreground/50 shrink-0 group-hover:text-muted-foreground transition-colors" />
               )}
-              <span className="text-sm font-semibold text-gray-900 truncate">
+              <span className="text-sm font-medium text-foreground truncate">
                 {job.name || job.id}
               </span>
               <StatusBadge job={job} />
-              {job.deleteAfterRun && (
-                <span className="rounded-full bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-600">
+              {job.deleteAfterRun ? (
+                <span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
                   {t("cronOneShot")}
                 </span>
-              )}
+              ) : null}
             </div>
           </div>
 
-          {/* Actions - stop propagation so they don't toggle expand */}
-          <div className="flex items-center gap-1.5 shrink-0" data-no-expand>
+          <div className="flex items-center gap-1 shrink-0" data-no-expand>
             <Switch
               checked={job.enabled}
               onCheckedChange={(checked) => onToggle(job, checked)}
@@ -163,7 +149,7 @@ function CronJobCard(props: {
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="h-8 w-8 text-gray-400 hover:text-gray-600"
+                  className="h-7 w-7 text-muted-foreground hover:text-foreground hover:bg-muted"
                   aria-label={t("cronMoreActions")}
                 >
                   <MoreVertical className="h-4 w-4" />
@@ -176,9 +162,9 @@ function CronJobCard(props: {
                     setMenuOpen(false);
                     onRun(job);
                   }}
-                  className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-100"
+                  className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground transition-colors hover:bg-muted"
                 >
-                  <Play className="h-3.5 w-3.5 text-gray-500" />
+                  <Play className="h-3.5 w-3.5 text-muted-foreground" />
                   {t("cronRunNow")}
                 </button>
                 <button
@@ -197,28 +183,27 @@ function CronJobCard(props: {
           </div>
         </div>
 
-        {/* Row 2: schedule + next run + last run (always visible) */}
-        <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-500 pl-6">
+        <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground pl-6">
           <span className="flex items-center gap-1">
-            <CalendarClock className="h-3 w-3 text-gray-400" />
-            <span className="font-mono text-gray-600">
+            <CalendarClock className="h-3 w-3 text-muted-foreground/70" />
+            <span className="font-mono text-foreground/80">
               {describeCronSchedule(job)}
             </span>
           </span>
-          {job.state.nextRunAt && (
+          {job.state.nextRunAt ? (
             <span className="flex items-center gap-1">
-              <Clock className="h-3 w-3 text-gray-400" />
+              <Clock className="h-3 w-3 text-muted-foreground/70" />
               <span>{formatRelativeTime(job.state.nextRunAt)}</span>
             </span>
-          )}
-          {job.state.lastRunAt && (
+          ) : null}
+          {job.state.lastRunAt ? (
             <span className="flex items-center gap-1" data-no-expand>
-              <span className="text-gray-300">•</span>
+              <span className="text-border">•</span>
               {job.state.lastStatus === "error" && job.state.lastError ? (
                 <TooltipProvider delayDuration={200}>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <span className="inline-flex items-center gap-0.5 text-orange-400 cursor-help">
+                      <span className="inline-flex items-center gap-0.5 text-orange-500 cursor-help">
                         <AlertCircle className="h-3 w-3" />
                       </span>
                     </TooltipTrigger>
@@ -235,8 +220,8 @@ function CronJobCard(props: {
                 <span
                   className={cn(
                     job.state.lastStatus === "ok"
-                      ? "text-emerald-400"
-                      : "text-gray-400",
+                      ? "text-emerald-500"
+                      : "text-muted-foreground/70",
                   )}
                 >
                   {job.state.lastStatus === "ok" ? "✓" : ""}
@@ -244,14 +229,13 @@ function CronJobCard(props: {
               )}
               <span>{formatRelativeTime(job.state.lastRunAt)}</span>
             </span>
-          )}
+          ) : null}
         </div>
 
-        {/* Row 3: message preview (always visible, 2 lines) */}
         <div className="mt-2 pl-6">
           <div
             className={cn(
-              "text-sm text-gray-600 break-words",
+              "text-sm text-muted-foreground break-words",
               !expanded && "line-clamp-2",
             )}
           >
@@ -259,40 +243,38 @@ function CronJobCard(props: {
           </div>
         </div>
 
-        {/* Expanded details */}
-        {expanded && (
-          <div className="mt-3 ml-6 space-y-3 animate-in fade-in-0 slide-in-from-top-1 duration-150">
-            {/* Metadata grid */}
+        {expanded ? (
+          <div className="mt-3 ml-6 space-y-3 border-t border-border/60 pt-3">
             <div className="grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-2 text-xs">
               <div>
-                <div className="text-[11px] text-gray-400 mb-0.5">
+                <div className="text-[11px] text-muted-foreground/70 mb-0.5">
                   {t("cronSessionLabel")}
                 </div>
                 <div
-                  className="text-gray-700 font-mono text-[11px] truncate"
+                  className="text-foreground/80 font-mono text-[11px] truncate"
                   title={describeCronSession(job)}
                 >
                   {describeCronSession(job)}
                 </div>
               </div>
               <div>
-                <div className="text-[11px] text-gray-400 mb-0.5">
+                <div className="text-[11px] text-muted-foreground/70 mb-0.5">
                   {t("cronNextRun")}
                 </div>
-                <div className="text-gray-700">
+                <div className="text-foreground/80">
                   {formatCronDate(job.state.nextRunAt)}
                 </div>
               </div>
               <div>
-                <div className="text-[11px] text-gray-400 mb-0.5">
+                <div className="text-[11px] text-muted-foreground/70 mb-0.5">
                   {t("cronLastRun")}
                 </div>
-                <div className="text-gray-700">
+                <div className="text-foreground/80">
                   {formatCronDate(job.state.lastRunAt)}
                 </div>
               </div>
               <div>
-                <div className="text-[11px] text-gray-400 mb-0.5">
+                <div className="text-[11px] text-muted-foreground/70 mb-0.5">
                   {t("cronLastStatus")}
                 </div>
                 <div
@@ -304,26 +286,26 @@ function CronJobCard(props: {
                         ? "text-red-600"
                         : job.state.lastStatus === "skipped"
                           ? "text-amber-600"
-                          : "text-gray-500",
+                          : "text-muted-foreground",
                   )}
                 >
                   {job.state.lastStatus ?? "-"}
                 </div>
               </div>
               <div>
-                <div className="text-[11px] text-gray-400 mb-0.5">
+                <div className="text-[11px] text-muted-foreground/70 mb-0.5">
                   {t("cronCreatedAt")}
                 </div>
-                <div className="text-gray-700">
+                <div className="text-foreground/80">
                   {formatCronDate(job.createdAt)}
                 </div>
               </div>
               <div>
-                <div className="text-[11px] text-gray-400 mb-0.5">
+                <div className="text-[11px] text-muted-foreground/70 mb-0.5">
                   {t("cronId")}
                 </div>
                 <div
-                  className="text-gray-700 font-mono text-[11px] truncate"
+                  className="text-foreground/80 font-mono text-[11px] truncate"
                   title={job.id}
                 >
                   {job.id}
@@ -331,14 +313,13 @@ function CronJobCard(props: {
               </div>
             </div>
 
-            {/* Error */}
-            {job.state.lastError && (
-              <div className="rounded-lg bg-red-50 border border-red-100 px-3 py-2 text-xs text-red-600 break-words">
+            {job.state.lastError ? (
+              <div className="rounded-lg bg-red-50/80 border border-red-100 px-3 py-2 text-xs text-red-600 break-words">
                 {job.state.lastError}
               </div>
-            )}
+            ) : null}
           </div>
-        )}
+        ) : null}
       </div>
     </div>
   );
@@ -397,7 +378,7 @@ export function CronConfig() {
           <Button
             variant="ghost"
             size="icon"
-            className="h-9 w-9 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100"
+            className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted"
             onClick={() => cronQuery.refetch()}
           >
             <RefreshCw
@@ -407,16 +388,16 @@ export function CronConfig() {
         }
       />
 
-      <div className="mb-5">
-        <div className="flex flex-wrap gap-3 items-center">
+      <div className="mb-4">
+        <div className="flex flex-wrap gap-2.5 items-center">
           <div className="relative flex-1 min-w-[240px]">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/70" />
             <Input
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder={t("cronSearchPlaceholder")}
               className="pl-9"
             />
-            <AlarmClock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
           </div>
           <div className="min-w-[140px]">
             <Select
@@ -437,7 +418,7 @@ export function CronConfig() {
               </SelectContent>
             </Select>
           </div>
-          <div className="text-xs text-gray-400 ml-auto tabular-nums">
+          <div className="text-xs text-muted-foreground ml-auto tabular-nums">
             {jobs.length} / {cronQuery.data?.total ?? 0}
           </div>
         </div>
@@ -445,22 +426,24 @@ export function CronConfig() {
 
       <div className="flex-1 overflow-auto custom-scrollbar">
         {cronQuery.isLoading ? (
-          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
-            <RefreshCw className="h-6 w-6 animate-spin mb-3" />
+          <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+            <RefreshCw className="h-5 w-5 animate-spin mb-3" />
             <span className="text-sm">{t("cronLoading")}</span>
           </div>
         ) : jobs.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
-            <ListTodo className="h-10 w-10 mb-3 text-gray-300" />
-            <span className="text-sm font-medium text-gray-500">
+          <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
+            <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-muted">
+              <ListTodo className="h-5 w-5 text-muted-foreground/70" />
+            </div>
+            <span className="text-sm font-medium text-foreground">
               {t("cronEmpty")}
             </span>
-            <span className="text-xs text-gray-400 mt-1">
+            <span className="text-xs text-muted-foreground mt-1">
               {t("cronEmptyGuide")}
             </span>
           </div>
         ) : (
-          <div className="space-y-2.5">
+          <div className="space-y-2">
             {jobs.map((job) => (
               <CronJobCard
                 key={job.id}

package/src/features/marketplace/components/detail-doc/__tests__/marketplace-detail-doc.test.tsx

@@ -1,11 +1,32 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type * as MarketplaceApi from "@/shared/lib/api";
 import {
   createMarketplaceDetailDocId,
   createMarketplaceDetailDocUrl,
   MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS,
   MARKETPLACE_DETAIL_TAB_KIND,
 } from "@/features/marketplace/components/marketplace-detail-doc";
-import { setMarketplaceDetailDocEntry } from "@/features/marketplace/stores/marketplace-detail-doc.store";
+import {
+  setMarketplaceDetailDocEntry,
+  useMarketplaceDetailDocStore,
+} from "@/features/marketplace/stores/marketplace-detail-doc.store";
+
+const mocks = vi.hoisted(() => ({
+  fetchMarketplaceSkillContent: vi.fn(),
+}));
+
+vi.mock("@/shared/lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof MarketplaceApi>();
+  return {
+    ...actual,
+    fetchMarketplaceSkillContent: mocks.fetchMarketplaceSkillContent,
+  };
+});
+
+vi.mock("@/shared/lib/i18n", () => ({
+  t: (key: string) => key,
+}));
 
 function renderDetail(detailId: string) {
   const renderer = MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS[MARKETPLACE_DETAIL_TAB_KIND];
@@ -31,6 +52,11 @@ function renderDetail(detailId: string) {
 }
 
 describe("Marketplace detail doc renderer", () => {
+  beforeEach(() => {
+    mocks.fetchMarketplaceSkillContent.mockReset();
+    useMarketplaceDetailDocStore.setState({ entries: {} });
+  });
+
   it("renders metadata and markdown content as React content", () => {
     const detailId = createMarketplaceDetailDocId("skill", "weather");
     setMarketplaceDetailDocEntry({
@@ -75,7 +101,7 @@ describe("Marketplace detail doc renderer", () => {
     expect(screen.getAllByText(/<script>alert\(1\)<\/script>/)).toHaveLength(1);
   });
 
-  it("renders loading and missing states inside the React panel", () => {
+  it("renders loading state and rehydrates missing skill details after refresh", async () => {
     const loadingId = createMarketplaceDetailDocId("skill", "loading");
     setMarketplaceDetailDocEntry({
       id: loadingId,
@@ -88,7 +114,15 @@ describe("Marketplace detail doc renderer", () => {
     const { rerender } = renderDetail(loadingId);
     expect(document.querySelector(".animate-pulse")).toBeTruthy();
 
-    const missingId = createMarketplaceDetailDocId("skill", "missing");
+    mocks.fetchMarketplaceSkillContent.mockResolvedValue({
+      metadataRaw: "name: weather",
+      bodyRaw: "# Weather Skill\n\nLocal forecast",
+      raw: "# Weather Skill\n\nLocal forecast",
+      source: "catalog",
+      sourceUrl: "https://example.com/weather",
+    });
+
+    const missingId = createMarketplaceDetailDocId("skill-preview", "weather");
     const renderer = MARKETPLACE_DETAIL_DOC_BROWSER_RENDERERS[MARKETPLACE_DETAIL_TAB_KIND];
     rerender(
       <>
@@ -100,7 +134,7 @@ describe("Marketplace detail doc renderer", () => {
           tab: {
             id: "tab-1",
             kind: MARKETPLACE_DETAIL_TAB_KIND,
-            title: "Missing",
+            title: "weather",
             currentUrl: createMarketplaceDetailDocUrl(missingId),
             history: [createMarketplaceDetailDocUrl(missingId)],
             historyIndex: 0,
@@ -110,6 +144,10 @@ describe("Marketplace detail doc renderer", () => {
       </>,
     );
 
-    expect(screen.getByText("Detail unavailable")).toBeTruthy();
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { name: "weather", level: 1 })).toBeTruthy();
+    });
+    expect(mocks.fetchMarketplaceSkillContent).toHaveBeenCalledWith("weather");
+    expect(screen.getByText("Local forecast")).toBeTruthy();
   });
 });