@nextclaw/ui 0.12.11 → 0.12.13

package/src/features/marketplace/components/mcp/mcp-marketplace-page.tsx

@@ -0,0 +1,446 @@
+/* eslint-disable max-lines-per-function */
+import { useEffect, useMemo, useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceItemSummary,
+  MarketplaceMcpDoctorResult,
+  MarketplaceSort,
+} from "@/shared/lib/api";
+import {
+  fetchMcpMarketplaceContent,
+  doctorMcpMarketplaceItem,
+} from "@/shared/lib/api";
+import { PageLayout } from "@/app/components/layout/page-layout";
+import {
+  MarketplaceInfiniteScrollStatus,
+  MarketplaceListSkeleton,
+  FilterPanel,
+} from "@/features/marketplace/components/marketplace-page-parts";
+import { buildLocaleFallbacks } from "@/features/marketplace/components/marketplace-localization";
+import { McpMarketplaceCard } from "@/features/marketplace/components/mcp/mcp-marketplace-card";
+import {
+  buildDocDataUrl,
+  buildInstalledRecordLookup,
+  findInstalledRecordForItem,
+  readSummary,
+} from "@/features/marketplace/components/mcp/mcp-marketplace-doc";
+import {
+  DoctorDialog,
+  InstallDialog,
+} from "@/features/marketplace/components/mcp/mcp-marketplace-dialogs";
+import { NoticeCard } from "@/shared/components/ui/notice-card";
+import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
+import {
+  useInstallMcpMarketplaceItem,
+  useManageMcpMarketplaceItem,
+  useMcpMarketplaceInstalled,
+  useMcpMarketplaceItems,
+} from "@/features/marketplace/hooks/use-mcp-marketplace";
+import { useDocBrowser } from "@/shared/components/doc-browser";
+import { useI18n } from "@/app/components/i18n-provider";
+import { t } from "@/shared/lib/i18n";
+import { useInfiniteScrollLoader } from "@/shared/hooks/use-infinite-scroll-loader";
+import { cn } from "@/shared/lib/utils";
+import { Sparkles, PackageCheck } from "lucide-react";
+
+type ScopeType = "catalog" | "installed";
+
+const PAGE_SIZE = 12;
+
+export function McpMarketplacePage() {
+  const [scope, setScope] = useState<ScopeType>("catalog");
+  const [searchText, setSearchText] = useState("");
+  const [query, setQuery] = useState("");
+  const [sort, setSort] = useState<MarketplaceSort>("relevance");
+  const [installingItem, setInstallingItem] =
+    useState<MarketplaceItemSummary | null>(null);
+  const [doctorTarget, setDoctorTarget] = useState<string | null>(null);
+  const [doctorResult, setDoctorResult] =
+    useState<MarketplaceMcpDoctorResult | null>(null);
+  const { language } = useI18n();
+  const docBrowser = useDocBrowser();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+  const localeFallbacks = useMemo(
+    () => buildLocaleFallbacks(language),
+    [language],
+  );
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      setQuery(searchText.trim());
+    }, 250);
+    return () => window.clearTimeout(timer);
+  }, [searchText]);
+
+  const itemsQuery = useMcpMarketplaceItems({
+    q: query || undefined,
+    sort,
+    pageSize: PAGE_SIZE,
+  });
+  const installedQuery = useMcpMarketplaceInstalled();
+
+  const infiniteScroll = useInfiniteScrollLoader({
+    disabled:
+      scope !== "catalog" ||
+      itemsQuery.isError ||
+      !itemsQuery.hasNextPage ||
+      itemsQuery.isFetchingNextPage,
+    onLoadMore: () => itemsQuery.fetchNextPage(),
+    watchValue: `${scope}:${query}:${sort}:${itemsQuery.data?.loadedItems ?? 0}:${itemsQuery.data?.loadedPages ?? 0}`,
+  });
+  const { containerRef, sentinelRef } = infiniteScroll;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container && typeof container.scrollTo === "function") {
+      container.scrollTo({ top: 0 });
+    }
+  }, [containerRef, query, scope, sort]);
+
+  const installMutation = useInstallMcpMarketplaceItem();
+  const manageMutation = useManageMcpMarketplaceItem();
+  const doctorMutation = useMutation({
+    mutationFn: doctorMcpMarketplaceItem,
+    onSuccess: (result, name) => {
+      setDoctorTarget(name);
+      setDoctorResult(result);
+    },
+  });
+
+  const installedRecordLookup = useMemo(() => {
+    return buildInstalledRecordLookup(installedQuery.data?.records ?? []);
+  }, [installedQuery.data?.records]);
+
+  const installedRecords = useMemo(() => {
+    const entries = installedQuery.data?.records ?? [];
+    return entries.filter((record) => {
+      const text = [
+        record.id ?? "",
+        record.label ?? "",
+        record.catalogSlug ?? "",
+        record.description ?? "",
+        record.descriptionZh ?? "",
+      ]
+        .join(" ")
+        .toLowerCase();
+      return query ? text.includes(query.toLowerCase()) : true;
+    });
+  }, [installedQuery.data?.records, query]);
+
+  const openDoc = async (
+    item?: MarketplaceItemSummary,
+    record?: MarketplaceInstalledRecord,
+  ) => {
+    const title = item?.name ?? record?.label ?? record?.id ?? "MCP";
+    const dedupeKey = item
+      ? `marketplace:mcp:${item.slug}`
+      : `marketplace:mcp:${record?.id ?? record?.spec ?? title}`;
+    const openOptions = { title, kind: "content" as const, dedupeKey };
+    const summary = readSummary(localeFallbacks, item, record);
+    if (!item) {
+      const url = buildDocDataUrl(
+        title,
+        JSON.stringify(record ?? {}, null, 2),
+        t("marketplaceInstalledLocalSummary"),
+        record?.docsUrl,
+        summary,
+      );
+      docBrowser.open(url, openOptions);
+      return;
+    }
+    try {
+      const content = await fetchMcpMarketplaceContent(item.slug);
+      const url = buildDocDataUrl(
+        title,
+        content.metadataRaw || JSON.stringify(item, null, 2),
+        content.bodyRaw || content.raw,
+        content.sourceUrl,
+        summary,
+      );
+      docBrowser.open(url, openOptions);
+    } catch (error) {
+      const url = buildDocDataUrl(
+        title,
+        JSON.stringify(
+          { error: error instanceof Error ? error.message : String(error) },
+          null,
+          2,
+        ),
+        summary,
+        undefined,
+        summary,
+      );
+      docBrowser.open(url, openOptions);
+    }
+  };
+
+  const handleInstall = async (payload: {
+    name: string;
+    allAgents: boolean;
+    inputs: Record<string, string>;
+  }) => {
+    if (!installingItem) {
+      return;
+    }
+    await installMutation.mutateAsync({
+      spec: installingItem.slug,
+      name: payload.name.trim(),
+      allAgents: payload.allAgents,
+      inputs: payload.inputs,
+    });
+    setInstallingItem(null);
+  };
+
+  const handleManage = async (
+    action: "enable" | "disable" | "remove",
+    record: MarketplaceInstalledRecord,
+  ) => {
+    const target = record.id || record.spec;
+    if (!target) {
+      return;
+    }
+    if (action === "remove") {
+      const confirmed = await confirm({
+        title: `${t("marketplaceMcpRemoveTitle")} ${target}?`,
+        description: t("marketplaceMcpRemoveDescription"),
+        confirmLabel: t("marketplaceMcpRemove"),
+        variant: "destructive",
+      });
+      if (!confirmed) {
+        return;
+      }
+    }
+    await manageMutation.mutateAsync({
+      action,
+      id: target,
+      spec: record.spec,
+    });
+  };
+
+  const scopeTabs = [
+    { id: "catalog", label: t("marketplaceMcpTabCatalog"), icon: Sparkles },
+    {
+      id: "installed",
+      label: t("marketplaceMcpTabInstalled"),
+      icon: PackageCheck,
+      count: installedQuery.data?.total ?? 0,
+    },
+  ] as const;
+
+  return (
+    <PageLayout className="flex h-full min-h-0 flex-col pb-0 px-0">
+      <div className="flex flex-col gap-6 w-full max-w-[1400px] h-full min-h-0 mx-auto">
+        
+        {/* Modern App Store Hero for MCP */}
+        <div className="relative overflow-hidden rounded-[32px] bg-gradient-to-br from-[#0F172A] via-[#1E1B4B] to-[#312E81] px-10 py-14 text-white shadow-xl isolate">
+          <div className="absolute top-0 right-0 -m-32 opacity-30 pointer-events-none mix-blend-screen scale-150 transform-gpu">
+            <div className="w-[500px] h-[500px] rounded-full bg-gradient-to-tl from-fuchsia-500/40 via-purple-500/30 to-indigo-500/20 blur-[80px]"></div>
+          </div>
+          <div className="absolute bottom-0 left-0 -m-32 opacity-20 pointer-events-none mix-blend-screen transform-gpu">
+            <div className="w-[400px] h-[400px] rounded-full bg-gradient-to-tr from-blue-500/40 to-cyan-500/20 blur-[80px]"></div>
+          </div>
+          
+          <div className="relative z-10 flex flex-col gap-3">
+            <h1 className="text-[38px] font-extrabold tracking-[-0.02em] leading-tight drop-shadow-sm text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-white/70">
+              {t("marketplaceMcpPageTitle")}
+            </h1>
+            <p className="text-[17px] font-medium text-purple-100/70 max-w-2xl leading-relaxed tracking-wide">
+              {t("marketplaceMcpPageDescription")}
+            </p>
+          </div>
+        </div>
+
+        {/* Custom Nav & Filter Row */}
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mt-2">
+          {/* Custom App Store Tabs */}
+          <div className="flex items-center gap-1.5 p-1 bg-gray-100/60 backdrop-blur-sm rounded-2xl w-fit border border-gray-200/50 shadow-inner">
+            {scopeTabs.map((tab) => {
+              const isActive = scope === tab.id;
+              const Icon = tab.icon;
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => setScope(tab.id as ScopeType)}
+                  className={cn(
+                    "relative flex items-center gap-2 px-5 py-2.5 rounded-xl font-semibold text-[14px] transition-all duration-300",
+                    isActive
+                      ? "text-gray-900 bg-white shadow-[0_2px_10px_rgb(0,0,0,0.06)]"
+                      : "text-gray-500 hover:text-gray-700 hover:bg-gray-200/40"
+                  )}
+                >
+                  <Icon className={cn("w-4 h-4", isActive ? "text-primary" : "text-gray-400")} />
+                  {tab.label}
+                  {tab.id === 'installed' && typeof tab.count === 'number' && (
+                    <span className={cn(
+                      "ml-1 flex items-center justify-center h-5 px-1.5 min-w-5 rounded-full text-[11px] font-bold transition-colors",
+                      isActive ? "bg-primary/10 text-primary" : "bg-gray-200 text-gray-500"
+                    )}>
+                      {tab.count}
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="flex-1 w-full md:max-w-md">
+            <FilterPanel
+              scope={scope === "catalog" ? "all" : "installed"}
+              searchText={searchText}
+              searchPlaceholder={t("marketplaceMcpSearchPlaceholder")}
+              sort={sort}
+              onSearchTextChange={setSearchText}
+              onSortChange={setSort}
+            />
+          </div>
+        </div>
+
+        <section className="flex min-h-0 flex-1 flex-col mt-2">
+          <div className="flex items-center justify-between mb-4 px-1">
+            <h3 className="text-[18px] font-bold tracking-tight text-gray-900 flex items-center gap-2">
+              {scope === "catalog"
+                ? t("marketplaceMcpSectionCatalog")
+                : t("marketplaceMcpSectionInstalled")}
+              <span className="flex items-center justify-center h-6 px-2 rounded-lg bg-gray-100 text-[12px] font-semibold text-gray-500">
+                {scope === "catalog"
+                  ? (itemsQuery.data?.total ?? 0)
+                  : (installedQuery.data?.total ?? 0)}
+              </span>
+            </h3>
+          </div>
+
+          <div
+            ref={containerRef}
+            className="min-h-0 flex-1 overflow-y-auto pr-3 pb-8 -mx-1 px-1 custom-scrollbar"
+            aria-busy={itemsQuery.isLoading || itemsQuery.isFetchingNextPage}
+          >
+            <div className="grid grid-cols-1 gap-[22px] md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 items-stretch">
+              {scope === "catalog" && itemsQuery.isLoading && (
+                <MarketplaceListSkeleton count={PAGE_SIZE} />
+              )}
+
+              {scope === "catalog" &&
+                !itemsQuery.isLoading &&
+                (itemsQuery.data?.items ?? []).map((item) => {
+                  const installed = findInstalledRecordForItem(
+                    item,
+                    installedRecordLookup,
+                  );
+                  return (
+                    <McpMarketplaceCard
+                      key={item.id}
+                      item={item}
+                      record={installed}
+                      localeFallbacks={localeFallbacks}
+                      onOpen={() => void openDoc(item, installed)}
+                      onInstall={() => setInstallingItem(item)}
+                      onToggle={
+                        installed
+                          ? () =>
+                              void handleManage(
+                                installed.enabled === false
+                                  ? "enable"
+                                  : "disable",
+                                installed,
+                              )
+                          : undefined
+                      }
+                      onDoctor={
+                        installed
+                          ? () => {
+                              setDoctorTarget(installed.id ?? null);
+                              setDoctorResult(null);
+                              void doctorMutation.mutateAsync(installed.id ?? "");
+                            }
+                          : undefined
+                      }
+                      onRemove={
+                        installed
+                          ? () => void handleManage("remove", installed)
+                          : undefined
+                      }
+                    />
+                  );
+                })}
+              {scope === "installed" &&
+                installedRecords.map((record) => (
+                  <McpMarketplaceCard
+                    key={record.id ?? record.spec}
+                    record={record}
+                    localeFallbacks={localeFallbacks}
+                    onOpen={() => void openDoc(undefined, record)}
+                    onToggle={() =>
+                      void handleManage(
+                        record.enabled === false ? "enable" : "disable",
+                        record,
+                      )
+                    }
+                    onDoctor={() => {
+                      setDoctorTarget(record.id ?? null);
+                      setDoctorResult(null);
+                      void doctorMutation.mutateAsync(record.id ?? "");
+                    }}
+                    onRemove={() => void handleManage("remove", record)}
+                  />
+                ))}
+            </div>
+
+            {scope === "catalog" && itemsQuery.isError && (
+              <NoticeCard
+                tone="danger"
+                title={t("marketplaceMcpSectionCatalog")}
+                description={itemsQuery.error.message}
+              />
+            )}
+            {scope === "installed" && installedQuery.isError && (
+              <NoticeCard
+                tone="danger"
+                title={t("marketplaceMcpSectionInstalled")}
+                description={installedQuery.error.message}
+              />
+            )}
+            {scope === "catalog" &&
+              !itemsQuery.isLoading &&
+              !itemsQuery.isError &&
+              (itemsQuery.data?.items?.length ?? 0) === 0 && (
+                <div className="flex flex-col items-center justify-center py-20 bg-gray-50/50 rounded-3xl border border-dashed border-gray-200 mt-4">
+                  <p className="text-[15px] font-medium text-gray-500">{t("marketplaceNoMcp")}</p>
+                </div>
+              )}
+            {scope === "installed" && !installedQuery.isError && installedRecords.length === 0 && (
+              <div className="flex flex-col items-center justify-center py-20 bg-gray-50/50 rounded-3xl border border-dashed border-gray-200 mt-4">
+                <p className="text-[15px] font-medium text-gray-500">{t("marketplaceNoInstalledMcp")}</p>
+              </div>
+            )}
+
+            {scope === "catalog" && !itemsQuery.isError && (
+              <MarketplaceInfiniteScrollStatus
+                hasMore={Boolean(itemsQuery.hasNextPage)}
+                loading={itemsQuery.isFetchingNextPage}
+                sentinelRef={sentinelRef}
+              />
+            )}
+          </div>
+        </section>
+
+      </div>
+
+      <InstallDialog
+        item={installingItem}
+        open={Boolean(installingItem)}
+        pending={installMutation.isPending}
+        onOpenChange={(open) => !open && setInstallingItem(null)}
+        onSubmit={handleInstall}
+      />
+      <DoctorDialog
+        open={Boolean(doctorTarget)}
+        targetName={doctorTarget}
+        result={doctorResult}
+        pending={doctorMutation.isPending}
+        onOpenChange={(open) => !open && setDoctorTarget(null)}
+      />
+      <ConfirmDialog />
+    </PageLayout>
+  );
+}

package/src/{hooks/useMarketplace.ts → features/marketplace/hooks/use-marketplace.ts}

@@ -1,10 +1,10 @@
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
-import { t } from '@/lib/i18n';
+import { t } from '@/shared/lib/i18n';
 import {
   applyInstallResultToInstalledView,
   applyManageResultToInstalledView
-} from '@/components/marketplace/marketplace-installed-cache';
+} from '@/features/marketplace/utils/marketplace-installed-cache.utils';
 import {
   fetchMarketplaceItem,
   fetchMarketplaceInstalled,
@@ -13,14 +13,14 @@ import {
   installMarketplaceItem,
   manageMarketplaceItem,
   type MarketplaceListParams
-} from '@/api/marketplace';
+} from '@/shared/lib/api';
 import type {
   MarketplaceInstallRequest,
   MarketplaceInstalledView,
   MarketplaceItemType,
   MarketplaceManageRequest
-} from '@/api/types';
-import { collapseMarketplaceListPages } from '@/hooks/marketplace-list-pages';
+} from '@/shared/lib/api';
+import { collapseMarketplaceListPages } from '@/features/marketplace/utils/marketplace-list-pages.utils';
 import { useMemo } from 'react';
 
 export function useMarketplaceItems(params: MarketplaceListParams) {

package/src/{hooks/useMcpMarketplace.ts → features/marketplace/hooks/use-mcp-marketplace.ts}

@@ -10,9 +10,9 @@ import {
   installMcpMarketplaceItem,
   manageMcpMarketplaceItem,
   type McpMarketplaceListParams
-} from '@/api/mcp-marketplace';
-import { t } from '@/lib/i18n';
-import { collapseMarketplaceListPages } from '@/hooks/marketplace-list-pages';
+} from '@/shared/lib/api';
+import { t } from '@/shared/lib/i18n';
+import { collapseMarketplaceListPages } from '@/features/marketplace/utils/marketplace-list-pages.utils';
 import { useMemo } from 'react';
 
 export function useMcpMarketplaceItems(params: McpMarketplaceListParams) {

package/src/features/marketplace/index.ts

@@ -0,0 +1,26 @@
+export { MarketplacePage } from './components/marketplace-page';
+export { McpMarketplacePage } from './components/mcp/mcp-marketplace-page';
+export {
+  useInstallMarketplaceItem,
+  useManageMarketplaceItem,
+  useMarketplaceItem,
+  useMarketplaceItems,
+  useMarketplaceRecommendations,
+  useMarketplaceInstalled,
+} from './hooks/use-marketplace';
+export {
+  fetchMcpMarketplaceContent,
+  useDoctorMcpMarketplaceItem,
+  useInstallMcpMarketplaceItem,
+  useManageMcpMarketplaceItem,
+  useMcpMarketplaceContent,
+  useMcpMarketplaceInstalled,
+  useMcpMarketplaceItem,
+  useMcpMarketplaceItems,
+  useMcpMarketplaceRecommendations,
+} from './hooks/use-mcp-marketplace';
+export {
+  applyInstallResultToInstalledView,
+  applyManageResultToInstalledView,
+} from './utils/marketplace-installed-cache.utils';
+export { collapseMarketplaceListPages } from './utils/marketplace-list-pages.utils';

package/src/{components/marketplace/marketplace-installed-cache.test.ts → features/marketplace/utils/marketplace-installed-cache.utils.test.ts}

@@ -4,11 +4,11 @@ import type {
   MarketplaceInstallResult,
   MarketplaceManageRequest,
   MarketplaceManageResult
-} from '@/api/types';
+} from '@/shared/lib/api';
 import {
   applyInstallResultToInstalledView,
   applyManageResultToInstalledView
-} from '@/components/marketplace/marketplace-installed-cache';
+} from './marketplace-installed-cache.utils';
 
 describe('marketplace-installed-cache', () => {
   it('adds a plugin record immediately after install success', () => {

package/src/{components/marketplace/marketplace-installed-cache.ts → features/marketplace/utils/marketplace-installed-cache.utils.ts}

@@ -6,7 +6,7 @@ import type {
   MarketplaceManageRequest,
   MarketplaceManageResult,
   MarketplaceItemType
-} from '@/api/types';
+} from '@/shared/lib/api';
 
 function dedupeSpecs(records: MarketplaceInstalledRecord[]): string[] {
   return Array.from(new Set(records.map((record) => record.spec).filter(Boolean)));

package/src/{hooks/marketplace-list-pages.ts → features/marketplace/utils/marketplace-list-pages.utils.ts}

@@ -1,5 +1,5 @@
 import type { InfiniteData } from '@tanstack/react-query';
-import type { MarketplaceListView } from '@/api/types';
+import type { MarketplaceListView } from '@/shared/lib/api';
 
 export type InfiniteMarketplaceListView = MarketplaceListView & {
   pages: MarketplaceListView[];

package/src/{pwa → features/pwa}/components/pwa-install-entry.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { PwaInstallBanner, PwaInstallCard, PwaUpdateBanner } from '@/pwa/components/pwa-install-entry';
-import { usePwaStore, createInitialPwaState } from '@/pwa/stores/pwa.store';
+import { PwaInstallBanner, PwaInstallCard, PwaUpdateBanner } from '@/features/pwa';
+import { usePwaStore, createInitialPwaState } from '@/features/pwa/stores/pwa.store';
 
 describe('PwaInstallCard', () => {
   beforeEach(() => {

package/src/{pwa → features/pwa}/components/pwa-install-entry.tsx

@@ -1,10 +1,10 @@
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { usePwaStore } from '@/pwa/stores/pwa.store';
-import { pwaInstallManager } from '@/pwa/managers/pwa-install.manager';
-import { pwaRuntimeManager } from '@/pwa/managers/pwa-runtime.manager';
-import { t } from '@/lib/i18n';
-import { cn } from '@/lib/utils';
+import { Button } from '@/shared/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
+import { usePwaStore } from '@/features/pwa/stores/pwa.store';
+import { pwaInstallManager } from '@/features/pwa/managers/pwa-install.manager';
+import { pwaRuntimeManager } from '@/features/pwa/managers/pwa-runtime.manager';
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
 import { Download, RefreshCw, Smartphone, X } from 'lucide-react';
 
 function InstallStatusBadge() {

package/src/features/pwa/index.ts

@@ -0,0 +1,4 @@
+export { PwaInstallBanner, PwaInstallCard, PwaUpdateBanner } from './components/pwa-install-entry';
+export { startNextClawPwa } from './managers/pwa-bootstrap.manager';
+export { pwaInstallManager } from './managers/pwa-install.manager';
+export { pwaShellThemeManager } from './managers/pwa-shell-theme.manager';

package/src/{pwa/register-pwa.ts → features/pwa/managers/pwa-bootstrap.manager.ts}

@@ -1,5 +1,5 @@
-import { pwaInstallManager } from '@/pwa/managers/pwa-install.manager';
-import { pwaRuntimeManager } from '@/pwa/managers/pwa-runtime.manager';
+import { pwaInstallManager } from '@/features/pwa/managers/pwa-install.manager';
+import { pwaRuntimeManager } from '@/features/pwa/managers/pwa-runtime.manager';
 
 let pwaStarted = false;
 

package/src/{pwa → features/pwa}/managers/pwa-install.manager.test.ts

@@ -1,10 +1,10 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { PwaInstallManager } from '@/pwa/managers/pwa-install.manager';
+import { PwaInstallManager } from '@/features/pwa/managers/pwa-install.manager';
 import {
   PWA_INSTALL_BANNER_DISMISS_STORAGE_KEY,
   PWA_INSTALL_BANNER_LEGACY_UNTIL_STORAGE_KEY
-} from '@/pwa/pwa-install-banner.storage';
-import { usePwaStore, createInitialPwaState } from '@/pwa/stores/pwa.store';
+} from '@/features/pwa/utils/pwa-install-banner.utils';
+import { usePwaStore, createInitialPwaState } from '@/features/pwa/stores/pwa.store';
 
 function createMatchMedia(matches = false): typeof window.matchMedia {
   return vi.fn().mockImplementation(() => ({

package/src/{pwa → features/pwa}/managers/pwa-install.manager.ts

@@ -1,12 +1,12 @@
-import { usePwaStore, createInitialPwaState } from '@/pwa/stores/pwa.store';
-import type { PwaInstallBlockedReason, PwaInstallMethod, PwaInstallPromptOutcome, PwaInstallabilityState } from '@/pwa/pwa.types';
-import { pwaRuntimeManager } from '@/pwa/managers/pwa-runtime.manager';
+import { usePwaStore, createInitialPwaState } from '@/features/pwa/stores/pwa.store';
+import type { PwaInstallBlockedReason, PwaInstallMethod, PwaInstallPromptOutcome, PwaInstallabilityState } from '@/features/pwa/types/pwa.types';
+import { pwaRuntimeManager } from '@/features/pwa/managers/pwa-runtime.manager';
 import {
   clearPwaInstallBannerDismissal,
   dismissPwaInstallBanner,
   isPwaInstallBannerDismissed
-} from '@/pwa/pwa-install-banner.storage';
-import { t } from '@/lib/i18n';
+} from '@/features/pwa/utils/pwa-install-banner.utils';
+import { t } from '@/shared/lib/i18n';
 import { toast } from 'sonner';
 
 type InstallabilityResolution = {

package/src/{pwa → features/pwa}/managers/pwa-runtime.manager.ts

@@ -1,4 +1,4 @@
-import { usePwaStore } from '@/pwa/stores/pwa.store';
+import { usePwaStore } from '@/features/pwa/stores/pwa.store';
 
 const PWA_DEV_RESET_SESSION_KEY = 'nextclaw-pwa-dev-sw-reset';
 

package/src/{pwa → features/pwa}/managers/pwa-shell-theme.manager.test.ts

@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it } from 'vitest';
-import { pwaShellThemeManager } from '@/pwa/managers/pwa-shell-theme.manager';
+import { pwaShellThemeManager } from '@/features/pwa';
 
 describe('PwaShellThemeManager', () => {
   beforeEach(() => {

package/src/{pwa → features/pwa}/managers/pwa-shell-theme.manager.ts

@@ -1,4 +1,4 @@
-import type { UiTheme } from '@/lib/theme';
+import type { UiTheme } from '@/shared/lib/theme';
 
 const PWA_SHELL_THEME_COLORS: Record<UiTheme, string> = {
   warm: '#F9F8F5',

package/src/{pwa → features/pwa}/stores/pwa.store.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
-import { isPwaInstallBannerDismissed } from '@/pwa/pwa-install-banner.storage';
-import type { PwaInstallStateSnapshot } from '@/pwa/pwa.types';
+import { isPwaInstallBannerDismissed } from '@/features/pwa/utils/pwa-install-banner.utils';
+import type { PwaInstallStateSnapshot } from '@/features/pwa/types/pwa.types';
 
 export function createInitialPwaState(): PwaInstallStateSnapshot {
   return {