@nextclaw/ui 0.15.2 → 0.15.4

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

@@ -8,9 +8,9 @@ import type {
 import { Skeleton } from '@/shared/components/ui/skeleton';
 import { t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
+import { useMarketplaceDetailDocEntry } from '@/features/marketplace/hooks/use-marketplace-detail-doc-entry';
 import {
   setMarketplaceDetailDocEntry,
-  useMarketplaceDetailDocStore,
   type MarketplaceDetailDocEntry,
 } from '@/features/marketplace/stores/marketplace-detail-doc.store';
 
@@ -422,13 +422,17 @@ function MarketplaceDetailDocContent({ entry }: { entry: MarketplaceDetailDocEnt
 
 function MarketplaceDetailDoc({ currentUrl }: { currentUrl: string }) {
   const detailId = readMarketplaceDetailDocId(currentUrl);
-  const entry = useMarketplaceDetailDocStore((state) => (detailId ? state.entries[detailId] : undefined));
-  if (!detailId || !entry) {
+  const entry = useMarketplaceDetailDocEntry(detailId);
+
+  if (!detailId) {
     return <MarketplaceDetailUnavailable />;
   }
-  if (entry.status === 'loading') {
+  if (!entry || entry.status === 'loading') {
     return <MarketplaceDetailSkeleton />;
   }
+  if (entry.status === 'error' && !entry.contentRaw) {
+    return <MarketplaceDetailUnavailable />;
+  }
   return <MarketplaceDetailDocContent entry={entry} />;
 }
 

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

@@ -37,7 +37,7 @@ export function FilterPanel({
             value={searchText}
             onChange={(event) => onSearchTextChange(event.target.value)}
             placeholder={searchPlaceholder}
-            className="h-9 w-full rounded-xl border border-gray-200/80 pl-9 pr-9 text-sm focus:outline-none focus:ring-1 focus:ring-primary/40"
+            className="h-9 w-full rounded-xl border border-border/75 bg-card pl-9 pr-9 text-sm transition-colors focus:outline-none focus:ring-0 focus:border-border"
           />
           {isRefreshing && (
             <Loader2

package/src/features/marketplace/hooks/use-marketplace-detail-doc-entry.ts

@@ -0,0 +1,84 @@
+import { useEffect } from 'react';
+import { fetchMarketplaceSkillContent } from '@/shared/lib/api';
+import { t } from '@/shared/lib/i18n';
+import {
+  setMarketplaceDetailDocEntry,
+  useMarketplaceDetailDocStore,
+} from '@/features/marketplace/stores/marketplace-detail-doc.store';
+
+function parseMarketplaceDetailScopeKey(
+  detailId: string,
+): { scope: string; key: string } | null {
+  const separator = detailId.indexOf(':');
+  if (separator <= 0 || separator >= detailId.length - 1) {
+    return null;
+  }
+  return {
+    scope: detailId.slice(0, separator),
+    key: detailId.slice(separator + 1),
+  };
+}
+
+function isRehydratableSkillScope(scope: string): boolean {
+  return scope === 'skill' || scope === 'skill-preview';
+}
+
+export function useMarketplaceDetailDocEntry(detailId: string | null) {
+  const entry = useMarketplaceDetailDocStore((state) =>
+    detailId ? state.entries[detailId] : undefined,
+  );
+
+  useEffect(() => {
+    if (!detailId || useMarketplaceDetailDocStore.getState().entries[detailId]) {
+      return;
+    }
+    const parsed = parseMarketplaceDetailScopeKey(detailId);
+    if (!parsed || !isRehydratableSkillScope(parsed.scope)) {
+      return;
+    }
+
+    let cancelled = false;
+    const title = parsed.key;
+    const typeLabel = t('marketplaceTypeSkill');
+
+    void fetchMarketplaceSkillContent(parsed.key)
+      .then((content) => {
+        if (cancelled) {
+          return;
+        }
+        setMarketplaceDetailDocEntry({
+          id: detailId,
+          title,
+          typeLabel,
+          spec: parsed.key,
+          status: 'ready',
+          summary: t('marketplaceInstalledLocalSummary'),
+          metadataRaw: content.metadataRaw,
+          contentRaw: content.bodyRaw || content.raw,
+          sourceUrl: content.sourceUrl,
+          sourceLabel: content.source ? `Source (${content.source})` : undefined,
+        });
+      })
+      .catch(() => {
+        if (cancelled) {
+          return;
+        }
+        setMarketplaceDetailDocEntry({
+          id: detailId,
+          title,
+          typeLabel,
+          spec: parsed.key,
+          status: 'error',
+          summary: t('marketplaceInstalledLocalSummary'),
+          metadataRaw: JSON.stringify({ skill: parsed.key }, null, 2),
+          contentRaw: t('marketplaceDetailUnavailableDescription'),
+        });
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [detailId]);
+
+  return entry;
+}

package/src/features/panel-apps/components/panel-apps-list.tsx

@@ -204,7 +204,7 @@ function PanelAppsEmptyGuide({
         <button
           type="button"
           onClick={onRefresh}
-          className="mt-4 inline-flex items-center justify-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+          className="mt-4 inline-flex items-center justify-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
         >
           <RefreshCw className="h-3.5 w-3.5" />
           {t('panelAppsRefresh')}
@@ -245,7 +245,7 @@ function PanelAppsEmptyGuideStep({
       <button
         type="button"
         onClick={onAction}
-        className="flex w-full gap-2 rounded-md bg-muted/60 px-3 py-2.5 text-left transition-colors hover:bg-accent/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+        className="flex w-full gap-2 rounded-md bg-muted/60 px-3 py-2.5 text-left transition-colors hover:bg-accent/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
       >
         {content}
       </button>

package/src/features/right-panel-resources/components/right-panel-resource-home-page.tsx

@@ -80,7 +80,7 @@ export function RightPanelResourceHomePage({ open }: RightPanelResourceHomePageP
                 key={item.id}
                 type="button"
                 onClick={() => openTarget(item.target)}
-                className="group flex min-h-[68px] flex-col items-center gap-1.5 rounded-md px-1.5 py-1.5 text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="group flex min-h-[68px] flex-col items-center gap-1.5 rounded-md px-1.5 py-1.5 text-center focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
               >
                 <span className={cn('flex h-10 w-10 shrink-0 items-center justify-center rounded-md transition-colors', view.accentClassName, view.hoverAccentClassName)}>
                   {view.icon}

package/src/features/settings/pages/__tests__/appearance-settings-page.test.tsx

@@ -1,25 +1,42 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { beforeEach, describe, expect, it } from 'vitest';
-import { AppearanceSettingsPage } from '@/features/settings/pages/appearance-settings-page';
-import { useSideDockStore } from '@/features/side-dock';
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it } from "vitest";
+import { AppearanceSettingsPage } from "@/features/settings/pages/appearance-settings-page";
+import { useChatMessageLayoutStore } from "@/features/chat";
+import { useSideDockStore } from "@/features/side-dock";
 
-describe('AppearanceSettingsPage', () => {
+describe("AppearanceSettingsPage", () => {
   beforeEach(() => {
     window.localStorage.clear();
+    useChatMessageLayoutStore.getState().setLayout("card");
     useSideDockStore.getState().setVisible(true);
     useSideDockStore.getState().setPinnedItems([]);
   });
 
-  it('reopens the SideDock from the appearance settings switch', () => {
+  it("reopens the SideDock from the appearance settings switch", () => {
     useSideDockStore.getState().setVisible(false);
 
     render(<AppearanceSettingsPage />);
 
-    const visibilitySwitch = screen.getByRole('switch', { name: 'Show SideDock' });
-    expect(visibilitySwitch.getAttribute('aria-checked')).toBe('false');
+    const visibilitySwitch = screen.getByRole("switch", {
+      name: "Show SideDock",
+    });
+    expect(visibilitySwitch.getAttribute("aria-checked")).toBe("false");
 
     fireEvent.click(visibilitySwitch);
 
     expect(useSideDockStore.getState().isVisible).toBe(true);
   });
+
+  it("switches the chat message layout from appearance settings", () => {
+    render(<AppearanceSettingsPage />);
+
+    const cardOption = screen.getByRole("radio", { name: /^Cards/ });
+    const flatOption = screen.getByRole("radio", { name: /^Flat/ });
+    expect(cardOption.getAttribute("aria-checked")).toBe("true");
+
+    fireEvent.click(flatOption);
+
+    expect(flatOption.getAttribute("aria-checked")).toBe("true");
+    expect(useChatMessageLayoutStore.getState().layout).toBe("flat");
+  });
 });

package/src/features/settings/pages/appearance-settings-page.tsx

@@ -1,33 +1,112 @@
-import { Palette } from 'lucide-react';
-import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
-import { SettingRow } from '@/shared/components/settings/setting-row';
-import { Card, CardContent, CardHeader, CardTitle } from '@/shared/components/ui/card';
-import { Switch } from '@/shared/components/ui/switch';
-import { useSideDockStore } from '@/features/side-dock';
-import { t } from '@/shared/lib/i18n';
+import type { ChatMessageLayout } from "@nextclaw/agent-chat-ui";
+import { Check, Palette } from "lucide-react";
+import { PageHeader, PageLayout } from "@/app/components/layout/page-layout";
+import { useChatMessageLayoutStore } from "@/features/chat";
+import { SettingRow } from "@/shared/components/settings/setting-row";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/components/ui/card";
+import { Switch } from "@/shared/components/ui/switch";
+import { useSideDockStore } from "@/features/side-dock";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+const CHAT_MESSAGE_LAYOUT_OPTIONS: Array<{
+  value: ChatMessageLayout;
+  labelKey: string;
+  descriptionKey: string;
+}> = [
+  {
+    value: "card",
+    labelKey: "chatMessageLayoutCard",
+    descriptionKey: "chatMessageLayoutCardDescription",
+  },
+  {
+    value: "flat",
+    labelKey: "chatMessageLayoutFlat",
+    descriptionKey: "chatMessageLayoutFlatDescription",
+  },
+];
 
 export function AppearanceSettingsPage() {
+  const messageLayout = useChatMessageLayoutStore((state) => state.layout);
+  const setMessageLayout = useChatMessageLayoutStore(
+    (state) => state.setLayout,
+  );
   const isSideDockVisible = useSideDockStore((state) => state.isVisible);
   const setSideDockVisible = useSideDockStore((state) => state.setVisible);
 
   return (
     <PageLayout>
-      <PageHeader title={t('appearance')} />
+      <PageHeader title={t("appearance")} />
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Palette className="h-4 w-4" />
-            {t('appearance')}
+            {t("appearance")}
           </CardTitle>
         </CardHeader>
-        <CardContent>
+        <CardContent className="space-y-4">
+          <SettingRow
+            title={t("chatMessageLayoutTitle")}
+            description={t("chatMessageLayoutDescription")}
+          >
+            <div
+              role="radiogroup"
+              aria-label={t("chatMessageLayoutTitle")}
+              className="grid gap-2 sm:grid-cols-2"
+            >
+              {CHAT_MESSAGE_LAYOUT_OPTIONS.map((option) => {
+                const selected = option.value === messageLayout;
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    role="radio"
+                    aria-checked={selected}
+                    onClick={() => setMessageLayout(option.value)}
+                    className={cn(
+                      "flex min-w-0 items-start gap-3 rounded-xl border px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+                      selected
+                        ? "border-primary/35 bg-primary/5 text-foreground"
+                        : "border-border bg-card text-muted-foreground hover:border-border/80 hover:bg-muted/45 hover:text-foreground",
+                    )}
+                  >
+                    <span
+                      className={cn(
+                        "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border",
+                        selected
+                          ? "border-primary bg-primary text-primary-foreground"
+                          : "border-border bg-background",
+                      )}
+                    >
+                      {selected ? (
+                        <Check className="h-2.5 w-2.5" strokeWidth={3} />
+                      ) : null}
+                    </span>
+                    <span className="min-w-0">
+                      <span className="block text-sm font-medium">
+                        {t(option.labelKey)}
+                      </span>
+                      <span className="mt-1 block text-xs leading-5 text-muted-foreground">
+                        {t(option.descriptionKey)}
+                      </span>
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </SettingRow>
           <SettingRow
-            title={t('sideDockVisibilityTitle')}
-            description={t('sideDockVisibilityDescription')}
+            title={t("sideDockVisibilityTitle")}
+            description={t("sideDockVisibilityDescription")}
             control={
               <Switch
                 id="appearance-side-dock-visible"
-                aria-label={t('sideDockVisibilityTitle')}
+                aria-label={t("sideDockVisibilityTitle")}
                 checked={isSideDockVisible}
                 onCheckedChange={setSideDockVisible}
               />

package/src/features/side-dock/components/side-dock.tsx

@@ -95,7 +95,7 @@ function SideDockButton({
             onClick={() => onOpen(item)}
             className={cn(
               'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors',
-              'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
               active
                 ? 'bg-primary/10 text-primary'
                 : 'bg-transparent',
@@ -113,7 +113,7 @@ function SideDockButton({
               event.stopPropagation();
               onUnpin(item);
             }}
-            className="absolute -right-1 -top-1 hidden h-4 w-4 items-center justify-center rounded-full bg-background text-muted-foreground shadow-sm ring-1 ring-border/70 transition-colors hover:bg-muted hover:text-foreground group-hover:flex focus-visible:flex focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="absolute -right-1 -top-1 hidden h-4 w-4 items-center justify-center rounded-full bg-background text-muted-foreground shadow-sm ring-1 ring-border/70 transition-colors hover:bg-muted hover:text-foreground group-hover:flex focus-visible:flex focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
             <X className="h-3 w-3" aria-hidden="true" />
           </button>
@@ -144,7 +144,7 @@ function SideDockActionButton({
           onClick={onClick}
           className={cn(
             'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors',
-            'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
           )}
         >
           <Icon className="h-5 w-5" aria-hidden="true" />