@nextclaw/ui 0.14.1-beta.0 → 0.14.1

package/src/features/chat/features/welcome/components/chat-welcome.tsx

@@ -0,0 +1,121 @@
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+import { Bot } from 'lucide-react';
+import { ChatSessionProjectDialog } from '@/features/chat/features/session/components/session-header/chat-session-project-dialog';
+import { ChatWelcomeAgentPicker } from '@/features/chat/features/welcome/components/chat-welcome-agent-picker';
+import { ChatWelcomeCapabilityGrid } from '@/features/chat/features/welcome/components/chat-welcome-capability-grid';
+import { ChatWelcomeProjectPicker } from '@/features/chat/features/welcome/components/chat-welcome-project-picker';
+import { ChatWelcomeSessionTypePicker } from '@/features/chat/features/welcome/components/chat-welcome-session-type-picker';
+import type { ChatWelcomeProjectOption } from '@/features/chat/features/welcome/utils/chat-welcome-project-options.utils';
+import type { ChatInputSnapshot } from '@/features/chat/stores/chat-input.store';
+import type { AgentProfileView } from '@/shared/lib/api';
+import { t } from '@/shared/lib/i18n';
+
+type SessionTypeOption = ChatInputSnapshot['sessionTypeOptions'][number];
+
+type ChatWelcomeProps = {
+  agents: AgentProfileView[];
+  inputSlot?: ReactNode;
+  defaultProjectRoot?: string | null;
+  projectOptions: readonly ChatWelcomeProjectOption[];
+  selectedAgentId: string;
+  selectedProjectRoot?: string | null;
+  selectedSessionType: string;
+  sessionTypeOptions: readonly SessionTypeOption[];
+  onSelectAgent: (agentId: string) => void;
+  onSelectPrompt: (prompt: string) => void;
+  onSelectProjectRoot?: (projectRoot: string) => Promise<void> | void;
+  onSelectSessionType: (sessionType: string) => void;
+};
+
+export function ChatWelcome({
+  agents,
+  defaultProjectRoot,
+  inputSlot,
+  projectOptions,
+  selectedAgentId,
+  selectedProjectRoot,
+  selectedSessionType,
+  sessionTypeOptions,
+  onSelectAgent,
+  onSelectPrompt,
+  onSelectProjectRoot,
+  onSelectSessionType,
+}: ChatWelcomeProps) {
+  const selectedAgent = agents.find((agent) => agent.id === selectedAgentId) ?? null;
+  const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false);
+  const [isProjectSaving, setIsProjectSaving] = useState(false);
+  const resolvedProjectRoot = selectedProjectRoot ?? defaultProjectRoot ?? null;
+
+  const saveProjectRoot = async (projectRoot: string) => {
+    if (!onSelectProjectRoot) {
+      return;
+    }
+    setIsProjectSaving(true);
+    try {
+      await onSelectProjectRoot(projectRoot);
+      setIsProjectDialogOpen(false);
+    } finally {
+      setIsProjectSaving(false);
+    }
+  };
+  const selectableProjectRoot = Boolean(onSelectProjectRoot);
+
+  return (
+    <div className="flex min-h-full items-center justify-center px-4 py-8 sm:p-8">
+      <div className="min-w-0 w-full max-w-[min(760px,100%)]">
+        <div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10">
+          <Bot className="h-8 w-8 text-primary" />
+        </div>
+
+        <div className="text-center">
+          <h2 className="text-2xl font-semibold text-gray-950 sm:text-3xl">
+            {t('chatWelcomeTitle')}
+          </h2>
+          <p className="mt-3 text-sm font-medium text-gray-500 sm:text-base">
+            {t('chatWelcomeSubtitle')}
+          </p>
+        </div>
+
+        {inputSlot ? <div className="mt-8">{inputSlot}</div> : null}
+
+        <div className="mt-3 flex flex-wrap items-center gap-2 px-1 text-sm text-gray-500">
+          {onSelectProjectRoot ? (
+            <ChatWelcomeProjectPicker
+              defaultProjectRoot={defaultProjectRoot}
+              isSaving={isProjectSaving}
+              projectOptions={projectOptions}
+              projectRoot={resolvedProjectRoot}
+              selectable={selectableProjectRoot}
+              onOpenProjectDialog={() => setIsProjectDialogOpen(true)}
+              onSelectProjectRoot={saveProjectRoot}
+            />
+          ) : null}
+          <ChatWelcomeAgentPicker
+            agents={agents}
+            selectedAgent={selectedAgent}
+            selectedAgentId={selectedAgentId}
+            onSelectAgent={onSelectAgent}
+          />
+          <ChatWelcomeSessionTypePicker
+            options={sessionTypeOptions}
+            selectedSessionType={selectedSessionType}
+            onSelectSessionType={onSelectSessionType}
+          />
+        </div>
+
+        <ChatWelcomeCapabilityGrid onSelectPrompt={onSelectPrompt} />
+      </div>
+
+      {onSelectProjectRoot ? (
+        <ChatSessionProjectDialog
+          open={isProjectDialogOpen}
+          currentProjectRoot={resolvedProjectRoot}
+          isSaving={isProjectSaving}
+          onOpenChange={setIsProjectDialogOpen}
+          onSave={saveProjectRoot}
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/features/chat/features/welcome/utils/__tests__/chat-welcome-project-options.utils.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import { buildChatWelcomeProjectOptions } from "@/features/chat/features/welcome/utils/chat-welcome-project-options.utils";
+import type { NcpSessionSummaryView } from "@/shared/lib/api";
+
+function createSummary(
+  overrides: Partial<NcpSessionSummaryView> & { sessionId: string },
+): NcpSessionSummaryView {
+  return {
+    sessionId: overrides.sessionId,
+    agentId: "main",
+    createdAt: overrides.createdAt ?? "2026-06-10T10:00:00.000Z",
+    updatedAt: overrides.updatedAt ?? "2026-06-10T10:00:00.000Z",
+    lastMessageAt: overrides.lastMessageAt,
+    messageCount: 1,
+    metadata: overrides.metadata ?? {},
+    status: "idle",
+  };
+}
+
+describe("buildChatWelcomeProjectOptions", () => {
+  it("builds recent project options from session summaries", () => {
+    const options = buildChatWelcomeProjectOptions({
+      defaultProjectRoot: "/Users/demo/.nextclaw/workspace",
+      sessionSummaries: [
+        createSummary({
+          sessionId: "session-1",
+          lastMessageAt: "2026-06-10T10:00:00.000Z",
+          metadata: { project_root: "/tmp/project-alpha" },
+        }),
+        createSummary({
+          sessionId: "session-2",
+          lastMessageAt: "2026-06-11T10:00:00.000Z",
+          metadata: { project_root: "/tmp/project-alpha" },
+        }),
+      ],
+    });
+
+    expect(options).toEqual([
+      {
+        projectRoot: "/Users/demo/.nextclaw/workspace",
+        projectName: "workspace",
+        sessionCount: 0,
+        isDefault: true,
+      },
+      {
+        projectRoot: "/tmp/project-alpha",
+        projectName: "project-alpha",
+        sessionCount: 2,
+        isDefault: false,
+      },
+    ]);
+  });
+});

package/src/features/chat/features/welcome/utils/__tests__/chat-welcome-selection.utils.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import {
+  resolveChatWelcomeAgents,
+  resolveChatWelcomeSelectedAgent,
+  resolveChatWelcomeSelectedSessionType,
+} from "@/features/chat/features/welcome/utils/chat-welcome-selection.utils";
+
+const agents = [
+  { id: "main", displayName: "Main", runtime: "native" },
+  { id: "engineer", displayName: "Engineer", runtime: "codex" },
+];
+
+describe("chat welcome selection utils", () => {
+  it("falls back to the selected agent when agent loading is empty", () => {
+    expect(
+      resolveChatWelcomeAgents({
+        agents: [],
+        fallbackAgentId: "main",
+      }),
+    ).toEqual([{ id: "main" }]);
+  });
+
+  it("resolves the selected welcome agent", () => {
+    expect(
+      resolveChatWelcomeSelectedAgent({
+        agents,
+        agentId: "engineer",
+      })?.runtime,
+    ).toBe("codex");
+  });
+
+  it("resolves the session type from the selected agent runtime", () => {
+    expect(
+      resolveChatWelcomeSelectedSessionType({
+        agents,
+        agentId: "engineer",
+        defaultSessionType: "native",
+        pendingSessionType: null,
+        selectedSessionType: null,
+        sessionTypeOptions: [
+          { value: "native" },
+          { value: "codex" },
+        ],
+      }),
+    ).toBe("codex");
+  });
+
+  it("prefers an explicit session type over the selected agent runtime", () => {
+    expect(
+      resolveChatWelcomeSelectedSessionType({
+        agents,
+        agentId: "engineer",
+        defaultSessionType: "native",
+        pendingSessionType: "native",
+        selectedSessionType: "native",
+        sessionTypeOptions: [
+          { value: "native" },
+          { value: "codex" },
+        ],
+      }),
+    ).toBe("native");
+  });
+});

package/src/features/chat/features/welcome/utils/__tests__/chat-welcome-visibility.utils.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+import { shouldShowChatWelcome } from "@/features/chat/features/welcome/utils/chat-welcome-visibility.utils";
+
+function createVisibilitySnapshot(
+  overrides: Partial<Parameters<typeof shouldShowChatWelcome>[0]> = {},
+): Parameters<typeof shouldShowChatWelcome>[0] {
+  return {
+    canDeleteSession: false,
+    hasSubmittedDraftMessage: false,
+    isSending: false,
+    messages: [],
+    ...overrides,
+  };
+}
+
+describe("shouldShowChatWelcome", () => {
+  it("shows the welcome entry for an untouched draft", () => {
+    expect(shouldShowChatWelcome(createVisibilitySnapshot())).toBe(true);
+  });
+
+  it("keeps the welcome entry hidden after a draft send attempt", () => {
+    expect(
+      shouldShowChatWelcome(
+        createVisibilitySnapshot({ hasSubmittedDraftMessage: true }),
+      ),
+    ).toBe(false);
+  });
+
+  it("keeps the welcome entry hidden for an existing session", () => {
+    expect(
+      shouldShowChatWelcome(createVisibilitySnapshot({ canDeleteSession: true })),
+    ).toBe(false);
+  });
+});

package/src/features/chat/features/welcome/utils/chat-welcome-project-options.utils.ts

@@ -0,0 +1,71 @@
+import type { NcpSessionSummaryView } from "@/shared/lib/api";
+import { adaptNcpSessionSummaries } from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
+import { getSessionProjectName } from "@/shared/lib/session-project";
+
+export type ChatWelcomeProjectOption = {
+  projectRoot: string;
+  projectName: string;
+  sessionCount: number;
+  isDefault: boolean;
+};
+
+function readSessionActivityAt(session: {
+  createdAt: string;
+  lastMessageAt?: string;
+}): number {
+  return new Date(session.lastMessageAt ?? session.createdAt).getTime();
+}
+
+export function buildChatWelcomeProjectOptions(params: {
+  defaultProjectRoot: string | null;
+  sessionSummaries: readonly NcpSessionSummaryView[];
+}): ChatWelcomeProjectOption[] {
+  const { defaultProjectRoot, sessionSummaries } = params;
+  const groups = new Map<
+    string,
+    ChatWelcomeProjectOption & { latestUpdatedAt: number }
+  >();
+
+  for (const session of adaptNcpSessionSummaries([...sessionSummaries])) {
+    const projectRoot = session.projectRoot?.trim();
+    if (!projectRoot) {
+      continue;
+    }
+    const existing = groups.get(projectRoot);
+    const latestUpdatedAt = readSessionActivityAt(session);
+    if (existing) {
+      existing.sessionCount += 1;
+      existing.latestUpdatedAt = Math.max(existing.latestUpdatedAt, latestUpdatedAt);
+      continue;
+    }
+    groups.set(projectRoot, {
+      projectRoot,
+      projectName:
+        session.projectName?.trim() ||
+        getSessionProjectName(projectRoot) ||
+        projectRoot,
+      sessionCount: 1,
+      isDefault: projectRoot === defaultProjectRoot,
+      latestUpdatedAt,
+    });
+  }
+
+  if (defaultProjectRoot && !groups.has(defaultProjectRoot)) {
+    groups.set(defaultProjectRoot, {
+      projectRoot: defaultProjectRoot,
+      projectName: getSessionProjectName(defaultProjectRoot) ?? defaultProjectRoot,
+      sessionCount: 0,
+      isDefault: true,
+      latestUpdatedAt: Number.POSITIVE_INFINITY,
+    });
+  }
+
+  return [...groups.values()]
+    .sort((left, right) => {
+      if (left.isDefault !== right.isDefault) {
+        return left.isDefault ? -1 : 1;
+      }
+      return right.latestUpdatedAt - left.latestUpdatedAt;
+    })
+    .map(({ latestUpdatedAt: _latestUpdatedAt, ...option }) => option);
+}

package/src/features/chat/features/welcome/utils/chat-welcome-selection.utils.ts

@@ -0,0 +1,79 @@
+import {
+  normalizeSessionType,
+  resolveAgentRuntimeSessionType,
+} from "@/features/chat/features/session-type/utils/chat-session-type.utils";
+import type { AgentProfileView } from "@/shared/lib/api";
+
+type SessionTypeOptionLike = {
+  value: string;
+};
+
+export function resolveChatWelcomeAgents(params: {
+  agents: AgentProfileView[] | null | undefined;
+  fallbackAgentId: string;
+}): AgentProfileView[] {
+  const { agents, fallbackAgentId } = params;
+  return (agents?.length ?? 0) > 0 ? (agents ?? []) : [{ id: fallbackAgentId }];
+}
+
+export function resolveChatWelcomeSelectedAgent(params: {
+  agents: AgentProfileView[];
+  agentId: string;
+}): AgentProfileView | null {
+  return params.agents.find((agent) => agent.id === params.agentId) ?? null;
+}
+
+function resolveAvailableSessionType(
+  value: string | null | undefined,
+  options: readonly SessionTypeOptionLike[],
+): string | null {
+  if (typeof value !== "string" || value.trim().length === 0) {
+    return null;
+  }
+  const normalized = normalizeSessionType(value);
+  return options.some((option) => option.value === normalized) ? normalized : null;
+}
+
+export function resolveChatWelcomeSelectedSessionType(params: {
+  agents?: AgentProfileView[];
+  agentId?: string;
+  defaultSessionType: string;
+  pendingSessionType: string | null | undefined;
+  selectedSessionType: string | null | undefined;
+  sessionTypeOptions: readonly SessionTypeOptionLike[];
+}): string {
+  const {
+    agentId,
+    agents,
+    defaultSessionType,
+    pendingSessionType,
+    selectedSessionType,
+    sessionTypeOptions,
+  } = params;
+  const explicitSessionType =
+    resolveAvailableSessionType(selectedSessionType, sessionTypeOptions) ??
+    resolveAvailableSessionType(pendingSessionType, sessionTypeOptions);
+  if (explicitSessionType) {
+    return explicitSessionType;
+  }
+
+  const agentSessionType =
+    agents && agentId
+      ? resolveAvailableSessionType(
+          resolveAgentRuntimeSessionType(
+            resolveChatWelcomeSelectedAgent({
+              agents,
+              agentId,
+            }),
+            defaultSessionType,
+          ),
+          sessionTypeOptions,
+        )
+      : null;
+  return (
+    agentSessionType ??
+    resolveAvailableSessionType(defaultSessionType, sessionTypeOptions) ??
+    sessionTypeOptions[0]?.value ??
+    normalizeSessionType(defaultSessionType)
+  );
+}

package/src/features/chat/features/welcome/utils/chat-welcome-visibility.utils.ts

@@ -0,0 +1,17 @@
+import type { ChatThreadSnapshot } from "@/features/chat/stores/chat-thread.store";
+
+type ChatWelcomeVisibilitySnapshot = Pick<
+  ChatThreadSnapshot,
+  "canDeleteSession" | "hasSubmittedDraftMessage" | "isSending" | "messages"
+>;
+
+export function shouldShowChatWelcome(
+  snapshot: ChatWelcomeVisibilitySnapshot,
+): boolean {
+  return (
+    !snapshot.canDeleteSession &&
+    !snapshot.hasSubmittedDraftMessage &&
+    snapshot.messages.length === 0 &&
+    !snapshot.isSending
+  );
+}

package/src/features/chat/managers/__tests__/chat-input.manager.test.ts

@@ -138,6 +138,46 @@ describe('ChatInputManager', () => {
     );
   });
 
+  it('uses the default workspace as the project root for a blank draft send', async () => {
+    useChatInputStore.setState({
+      snapshot: {
+        ...useChatInputStore.getState().snapshot,
+        defaultProjectRoot: '/Users/demo/.nextclaw/workspace',
+      },
+    });
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        sessionKey: null,
+      },
+    });
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: null,
+      },
+    });
+    const chatRunManager = {
+      sendMessage: vi.fn().mockResolvedValue(undefined),
+      stopCurrentRun: vi.fn().mockResolvedValue(undefined),
+    } as unknown as ConstructorParameters<typeof ChatInputManager>[0];
+    const sessionListManager = {
+      ensureDraftSession: vi.fn(() => 'materialized-draft-session'),
+    } as unknown as ConstructorParameters<typeof ChatInputManager>[1];
+    const manager = new ChatInputManager(
+      chatRunManager,
+      sessionListManager,
+    );
+
+    await manager.send();
+
+    expect(chatRunManager.sendMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        projectRoot: '/Users/demo/.nextclaw/workspace',
+      }),
+    );
+  });
+
   it('does not send while the runtime is still blocked during startup', async () => {
     useChatInputStore.setState({
       snapshot: {
@@ -251,6 +291,11 @@ describe('ChatInputManager', () => {
     expect(useChatInputStore.getState().snapshot.composerNodes).toEqual(originalComposerNodes);
   });
 
+});
+
+describe('ChatInputManager composer focus', () => {
+  beforeEach(resetChatInputManagerStoreState);
+
   it('creates and consumes one-shot composer focus requests', () => {
     const manager = new ChatInputManager(
       {} as ConstructorParameters<typeof ChatInputManager>[0],
@@ -268,6 +313,26 @@ describe('ChatInputManager', () => {
     manager.consumeComposerFocusRequest(request!.id);
     expect(useChatInputStore.getState().snapshot.composerFocusRequest).toBeNull();
   });
+
+  it('applies prompt suggestions to the composer and requests focus', () => {
+    const manager = new ChatInputManager(
+      {} as ConstructorParameters<typeof ChatInputManager>[0],
+      {} as ConstructorParameters<typeof ChatInputManager>[1],
+    );
+
+    manager.applyPromptSuggestion('  Build a release plan  ');
+
+    expect(useChatInputStore.getState().snapshot).toMatchObject({
+      draft: 'Build a release plan',
+      composerNodes: [
+        expect.objectContaining({
+          type: 'text',
+          text: 'Build a release plan',
+        }),
+      ],
+      composerFocusRequest: { id: 1, placement: 'end' },
+    });
+  });
 });
 
 describe('ChatInputManager configuration sync', () => {

package/src/features/chat/managers/chat-input.manager.ts

@@ -29,6 +29,7 @@ import type { ChatModelOption } from '@/features/chat/types/chat-input.types';
 import { normalizeSessionType } from '@/features/chat/features/session-type/utils/chat-session-type.utils';
 import { systemStatusManager } from '@/features/system-status';
 import { shouldClearPendingProjectRootOverride } from '@/features/chat/features/session/utils/chat-run-metadata.utils';
+import { normalizeSessionProjectRootValue } from '@/shared/lib/session-project';
 
 function resolveModelForSend(value: string): string | undefined {
   return value || undefined;
@@ -142,15 +143,19 @@ export class ChatInputManager {
     sessionKey: string | null | undefined;
     selectedSessionProjectRoot: string | null | undefined;
   }): string | null => {
+    const { sessionKey, selectedSessionProjectRoot } = params;
     const { pendingProjectRoot, pendingProjectRootSessionKey } =
       useChatInputStore.getState().snapshot;
     if (
       pendingProjectRoot !== null &&
-      (!params.sessionKey || params.sessionKey === pendingProjectRootSessionKey)
+      (!sessionKey || sessionKey === pendingProjectRootSessionKey)
     ) {
       return pendingProjectRoot;
     }
-    return params.selectedSessionProjectRoot ?? null;
+    if (!sessionKey) {
+      return useChatInputStore.getState().snapshot.defaultProjectRoot;
+    }
+    return selectedSessionProjectRoot ?? null;
   };
 
   clearPendingProjectRootOverrideForSession = (params: {
@@ -194,6 +199,15 @@ export class ChatInputManager {
     this.syncComposerSnapshot(createChatComposerNodesFromDraft(value));
   };
 
+  applyPromptSuggestion = (prompt: string) => {
+    const normalizedPrompt = prompt.trim();
+    if (!normalizedPrompt) {
+      return;
+    }
+    this.setDraft(normalizedPrompt);
+    this.requestComposerFocusAtEnd();
+  };
+
   requestComposerFocusAtEnd = () => {
     const currentRequest = useChatInputStore.getState().snapshot.composerFocusRequest;
     useChatInputStore.getState().setSnapshot({
@@ -257,6 +271,14 @@ export class ChatInputManager {
     });
   };
 
+  setPendingProjectRoot = (projectRoot: string | null) => {
+    const normalizedProjectRoot = normalizeSessionProjectRootValue(projectRoot);
+    useChatInputStore.getState().setSnapshot({
+      pendingProjectRoot: normalizedProjectRoot,
+      pendingProjectRootSessionKey: null,
+    });
+  };
+
   send = async () => {
     const inputSnapshot = useChatInputStore.getState().snapshot;
     const sessionSnapshot = useChatSessionListStore.getState().snapshot;

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

@@ -19,6 +19,7 @@ export type ChatInputSnapshot = {
   pendingSessionType: string;
   pendingProjectRoot: string | null;
   pendingProjectRootSessionKey: string | null;
+  defaultProjectRoot: string | null;
   defaultSessionType: string;
   canStopGeneration: boolean;
   stopDisabledReason: string | null;
@@ -69,6 +70,7 @@ const initialSnapshot: ChatInputSnapshot = {
   pendingSessionType: 'native',
   pendingProjectRoot: null,
   pendingProjectRootSessionKey: null,
+  defaultProjectRoot: null,
   defaultSessionType: 'native',
   canStopGeneration: false,
   stopDisabledReason: null,

package/src/features/chat/types/chat-input-bar.types.ts

@@ -37,6 +37,11 @@ export type ChatInputBarAdapterTexts = {
   modelNoOptionsLabel: string;
   recentModelsLabel: string;
   allModelsLabel: string;
+  favoriteModelsLabel: string;
+  modelSearchPlaceholder: string;
+  modelSearchEmptyLabel: string;
+  favoriteModelLabel: string;
+  unfavoriteModelLabel: string;
   thinkingLabels: Record<ChatThinkingLevel, string>;
   noModelOptionsLabel: string;
   configureProviderLabel: string;

package/src/features/marketplace/components/__tests__/marketplace-page.test.tsx

@@ -236,6 +236,30 @@ describe("MarketplacePage", () => {
     expect(card?.textContent).not.toContain("Skill");
   });
 
+  it("hides redundant skill tags while keeping useful tags", () => {
+    mocks.itemsQuery = createItemsQuery({
+      data: {
+        total: 1,
+        page: 1,
+        pageSize: 20,
+        totalPages: 1,
+        sort: "relevance",
+        items: [
+          createMarketplaceItem({
+            tags: ["skill", "automation", "Skill", "ops"],
+          }),
+        ],
+      } satisfies MarketplaceListView,
+    });
+
+    render(<MarketplacePage forcedType="skills" />);
+
+    expect(screen.queryByText("skill")).toBeNull();
+    expect(screen.queryByText("Skill")).toBeNull();
+    expect(screen.getAllByText("automation").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("ops").length).toBeGreaterThan(0);
+  });
+
   it("does not dim the loaded list during background refresh", () => {
     mocks.itemsQuery = createItemsQuery({
       data: {

package/src/features/marketplace/components/curated-shelves/marketplace-shelf-card.tsx

@@ -46,7 +46,7 @@ export function SkillShelfCard(props: {
         layout === "rail" ? "w-[260px] shrink-0" : "w-full min-w-0",
       )}
     >
-      <div>
+      <div className="flex min-h-0 flex-1 flex-col">
         <div className="mb-2.5 flex min-w-0 items-start gap-2.5">
           <MarketplaceItemIcon name={item.name} fallback={item.install.spec} />
           <div className="min-w-0 flex-1 pt-0.5">
@@ -97,17 +97,22 @@ function formatShelfMeta(item: MarketplaceItemSummary) {
 }
 
 function TagLine({ tags }: { tags: string[] }) {
-  const visibleTags = tags.slice(0, 2);
+  const visibleTags = tags.filter(isVisibleShelfTag).slice(0, 2);
   if (visibleTags.length === 0) {
     return null;
   }
   return (
-    <div className="mt-2 truncate text-[11px] font-medium text-gray-400">
+    <div className="mt-auto truncate pt-2 text-[11px] font-medium text-gray-400">
       {visibleTags.join(" / ")}
     </div>
   );
 }
 
+function isVisibleShelfTag(tag: string) {
+  const normalized = tag.trim().toLowerCase();
+  return normalized.length > 0 && normalized !== "skill";
+}
+
 function formatUpdatedAt(value: string) {
   const date = value.slice(0, 10);
   return date || value;