From 0b6d9d4aa8b73467493dff849a86f5ab91d6a355 Mon Sep 17 00:00:00 2001 From: Mark IJbema Date: Mon, 16 Mar 2026 20:55:56 +0100 Subject: [PATCH 1/4] test(marketplace): add visual regression stories for skills tab MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add Storybook stories for marketplace components with mock data: - Skills tab with items (6 mock skills across 5 categories) - Skills tab with some items installed (project + global) - Skills tab empty state - Skills tab loading state - Single skill card (not installed) - Installed skill card All stories render SkillsMarketplace and ItemCard directly with mock props — no API requests are made. --- packages/kilo-vscode/debug-storybook.log | 20 ++ .../src/stories/marketplace.stories.tsx | 204 ++++++++++++++++++ 2 files changed, 224 insertions(+) create mode 100644 packages/kilo-vscode/debug-storybook.log create mode 100644 packages/kilo-vscode/webview-ui/src/stories/marketplace.stories.tsx diff --git a/packages/kilo-vscode/debug-storybook.log b/packages/kilo-vscode/debug-storybook.log new file mode 100644 index 00000000000..7cdfd66f4b2 --- /dev/null +++ b/packages/kilo-vscode/debug-storybook.log @@ -0,0 +1,20 @@ +[20:55:00.557] [INFO] storybook v10.2.10 +[20:55:01.689] [DEBUG] Getting package.json info for /Users/mark/dev/kilo/kilocode-3/packages/kilo-vscode/package.json... +[20:55:01.810] [INFO] Storybook collects completely anonymous usage telemetry. We use it to shape Storybook's roadmap and prioritize features. You can learn more, including how to opt out, at https://storybook.js.org/telemetry +[20:55:01.844] [DEBUG] Serving static files from packages/kilo-vscode/assets/icons at /icons +[20:55:01.846] [INFO] Starting... +[20:55:01.853] [WARN] unable to find package.json for @anthropic-ai/sdk +[20:55:01.853] [WARN] unable to find package.json for @kilocode/kilo-i18n +[20:55:01.855] [WARN] unable to find package.json for openai +[20:55:01.985] [DEBUG] Starting preview.. +[20:55:03.009] [ERROR] SB_BUILDER-VITE_0001 (NoStatsForViteDevError): Unable to write preview stats as the Vite builder does not support stats in dev mode. + +Please remove the `--stats-json` flag when running in dev mode. + at Object.toJson (file:///Users/mark/dev/kilo/kilocode-3/node_modules/.bun/@storybook+builder-vite@10.2.18+b653ea5c071f4641/node_modules/@storybook/builder-vite/dist/index.js:1916:13) + at buildDevStandalone (file:///Users/mark/dev/kilo/kilocode-3/node_modules/.bun/storybook@10.2.10+fb0deef8c1f94819/node_modules/storybook/dist/core-server/index.js:7622:38) + at process.processTicksAndRejections (node:internal/process/task_queues:105:5) + at async withTelemetry (file:///Users/mark/dev/kilo/kilocode-3/node_modules/.bun/storybook@10.2.10+fb0deef8c1f94819/node_modules/storybook/dist/_node-chunks/chunk-S3MWHNYJ.js:218:12) + at async dev (file:///Users/mark/dev/kilo/kilocode-3/node_modules/.bun/storybook@10.2.10+fb0deef8c1f94819/node_modules/storybook/dist/bin/core.js:2734:3) + at async _Command. (file:///Users/mark/dev/kilo/kilocode-3/node_modules/.bun/storybook@10.2.10+fb0deef8c1f94819/node_modules/storybook/dist/bin/core.js:2803:92) +[20:55:03.010] [WARN] Broken build, fix the error above. +You may need to refresh the browser. \ No newline at end of file diff --git a/packages/kilo-vscode/webview-ui/src/stories/marketplace.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/marketplace.stories.tsx new file mode 100644 index 00000000000..6ad7245cc11 --- /dev/null +++ b/packages/kilo-vscode/webview-ui/src/stories/marketplace.stories.tsx @@ -0,0 +1,204 @@ +/** @jsxImportSource solid-js */ +/** + * Stories for Marketplace components. + * + * Renders SkillsMarketplace and ItemCard directly with mock data + * so no API requests are made. + */ + +import type { Meta, StoryObj } from "storybook-solidjs-vite" +import { StoryProviders } from "./StoryProviders" +import SkillsMarketplace from "../components/marketplace/SkillsMarketplace" +import ItemCard from "../components/marketplace/ItemCard" +import type { SkillMarketplaceItem, MarketplaceInstalledMetadata } from "../types/marketplace" +import "../components/marketplace/marketplace.css" + +const meta: Meta = { + title: "Marketplace", + parameters: { layout: "fullscreen" }, +} +export default meta +type Story = StoryObj + +// --------------------------------------------------------------------------- +// Mock data +// --------------------------------------------------------------------------- + +const MOCK_SKILLS: SkillMarketplaceItem[] = [ + { + type: "skill", + id: "nextjs-developer", + name: "Next.js Developer", + displayName: "Next.js Developer", + description: + "Expert at building Next.js applications with App Router, server components, and modern React patterns.", + category: "web-development", + displayCategory: "Web Development", + githubUrl: "https://github.com/example/nextjs-developer", + content: "https://example.com/nextjs-developer.tar.gz", + }, + { + type: "skill", + id: "python-data-science", + name: "Python Data Science", + displayName: "Python Data Science", + description: + "Analyzes data using pandas, numpy, and matplotlib. Creates visualizations and builds machine learning models.", + category: "data-science", + displayCategory: "Data Science", + githubUrl: "https://github.com/example/python-data-science", + content: "https://example.com/python-data-science.tar.gz", + author: "DataTeam", + }, + { + type: "skill", + id: "rust-systems", + name: "Rust Systems", + displayName: "Rust Systems", + description: "Systems programming with Rust. Memory safety, concurrency, and performance optimization.", + category: "systems", + displayCategory: "Systems", + githubUrl: "https://github.com/example/rust-systems", + content: "https://example.com/rust-systems.tar.gz", + }, + { + type: "skill", + id: "react-native-mobile", + name: "React Native Mobile", + displayName: "React Native Mobile", + description: "Build cross-platform mobile apps with React Native, Expo, and native modules.", + category: "mobile", + displayCategory: "Mobile", + githubUrl: "https://github.com/example/react-native-mobile", + content: "https://example.com/react-native-mobile.tar.gz", + author: "MobileDev", + }, + { + type: "skill", + id: "devops-kubernetes", + name: "DevOps Kubernetes", + displayName: "DevOps Kubernetes", + description: "Container orchestration with Kubernetes. Helm charts, deployments, and cluster management.", + category: "devops", + displayCategory: "DevOps", + githubUrl: "https://github.com/example/devops-kubernetes", + content: "https://example.com/devops-kubernetes.tar.gz", + }, + { + type: "skill", + id: "api-design", + name: "API Design", + displayName: "API Design", + description: "Design RESTful and GraphQL APIs with OpenAPI specs, authentication, and rate limiting.", + category: "web-development", + displayCategory: "Web Development", + githubUrl: "https://github.com/example/api-design", + content: "https://example.com/api-design.tar.gz", + author: "APIGuild", + }, +] + +const EMPTY_METADATA: MarketplaceInstalledMetadata = { project: {}, global: {} } + +const PARTIAL_INSTALLED: MarketplaceInstalledMetadata = { + project: { "nextjs-developer": { type: "skill" } }, + global: { "python-data-science": { type: "skill" } }, +} + +const noop = () => {} + +// --------------------------------------------------------------------------- +// Stories +// --------------------------------------------------------------------------- + +export const SkillsTabWithItems: Story = { + name: "Skills tab — with items", + render: () => ( + +
+ +
+ + ), +} + +export const SkillsTabWithInstalled: Story = { + name: "Skills tab — some installed", + render: () => ( + +
+ +
+ + ), +} + +export const SkillsTabEmpty: Story = { + name: "Skills tab — empty state", + render: () => ( + +
+ +
+ + ), +} + +export const SkillsTabLoading: Story = { + name: "Skills tab — loading", + render: () => ( + +
+ +
+ + ), +} + +export const SingleSkillCard: Story = { + name: "ItemCard — single skill not installed", + render: () => ( + +
+ +
+ + ), +} + +export const InstalledSkillCard: Story = { + name: "ItemCard — installed skill", + render: () => ( + +
+ +
+ + ), +} From 0bf7ae1ffc69dbc0b5a6c4700703cc2fb84b6574 Mon Sep 17 00:00:00 2001 From: Mark IJbema Date: Mon, 16 Mar 2026 20:56:05 +0100 Subject: [PATCH 2/4] chore: remove storybook debug log --- packages/kilo-vscode/debug-storybook.log | 20 -------------------- 1 file changed, 20 deletions(-) delete mode 100644 packages/kilo-vscode/debug-storybook.log diff --git a/packages/kilo-vscode/debug-storybook.log b/packages/kilo-vscode/debug-storybook.log deleted file mode 100644 index 7cdfd66f4b2..00000000000 --- a/packages/kilo-vscode/debug-storybook.log +++ /dev/null @@ -1,20 +0,0 @@ -[20:55:00.557] [INFO] storybook v10.2.10 -[20:55:01.689] [DEBUG] Getting package.json info for /Users/mark/dev/kilo/kilocode-3/packages/kilo-vscode/package.json... -[20:55:01.810] [INFO] Storybook collects completely anonymous usage telemetry. We use it to shape Storybook's roadmap and prioritize features. You can learn more, including how to opt out, at https://storybook.js.org/telemetry -[20:55:01.844] [DEBUG] Serving static files from packages/kilo-vscode/assets/icons at /icons -[20:55:01.846] [INFO] Starting... -[20:55:01.853] [WARN] unable to find package.json for @anthropic-ai/sdk -[20:55:01.853] [WARN] unable to find package.json for @kilocode/kilo-i18n -[20:55:01.855] [WARN] unable to find package.json for openai -[20:55:01.985] [DEBUG] Starting preview.. -[20:55:03.009] [ERROR] SB_BUILDER-VITE_0001 (NoStatsForViteDevError): Unable to write preview stats as the Vite builder does not support stats in dev mode. - -Please remove the `--stats-json` flag when running in dev mode. - at Object.toJson (file:///Users/mark/dev/kilo/kilocode-3/node_modules/.bun/@storybook+builder-vite@10.2.18+b653ea5c071f4641/node_modules/@storybook/builder-vite/dist/index.js:1916:13) - at buildDevStandalone (file:///Users/mark/dev/kilo/kilocode-3/node_modules/.bun/storybook@10.2.10+fb0deef8c1f94819/node_modules/storybook/dist/core-server/index.js:7622:38) - at process.processTicksAndRejections (node:internal/process/task_queues:105:5) - at async withTelemetry (file:///Users/mark/dev/kilo/kilocode-3/node_modules/.bun/storybook@10.2.10+fb0deef8c1f94819/node_modules/storybook/dist/_node-chunks/chunk-S3MWHNYJ.js:218:12) - at async dev (file:///Users/mark/dev/kilo/kilocode-3/node_modules/.bun/storybook@10.2.10+fb0deef8c1f94819/node_modules/storybook/dist/bin/core.js:2734:3) - at async _Command. (file:///Users/mark/dev/kilo/kilocode-3/node_modules/.bun/storybook@10.2.10+fb0deef8c1f94819/node_modules/storybook/dist/bin/core.js:2803:92) -[20:55:03.010] [WARN] Broken build, fix the error above. -You may need to refresh the browser. \ No newline at end of file From b18598113531561430b3e7b700c6b6744eb28315 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 16 Mar 2026 19:58:32 +0000 Subject: [PATCH 3/4] chore: update kilo-vscode visual regression baselines --- .../marketplace/installed-skill-card-chromium-linux.png | 3 +++ .../marketplace/single-skill-card-chromium-linux.png | 3 +++ .../marketplace/skills-tab-empty-chromium-linux.png | 3 +++ .../marketplace/skills-tab-loading-chromium-linux.png | 3 +++ .../marketplace/skills-tab-with-installed-chromium-linux.png | 3 +++ .../marketplace/skills-tab-with-items-chromium-linux.png | 3 +++ 6 files changed, 18 insertions(+) create mode 100644 packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/installed-skill-card-chromium-linux.png create mode 100644 packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/single-skill-card-chromium-linux.png create mode 100644 packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-empty-chromium-linux.png create mode 100644 packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-loading-chromium-linux.png create mode 100644 packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-with-installed-chromium-linux.png create mode 100644 packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-with-items-chromium-linux.png diff --git a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/installed-skill-card-chromium-linux.png b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/installed-skill-card-chromium-linux.png new file mode 100644 index 00000000000..2822662560f --- /dev/null +++ b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/installed-skill-card-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7bc9274e748f94e0ae979f688a87c52b9a3d579ac015a2a49f327f8c96d002db +size 11116 diff --git a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/single-skill-card-chromium-linux.png b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/single-skill-card-chromium-linux.png new file mode 100644 index 00000000000..754e3f2927a --- /dev/null +++ b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/single-skill-card-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7bc6061e131b91cd0ce7f40c5e2e4d1d1ef458511ea221a205d5538392805294 +size 9735 diff --git a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-empty-chromium-linux.png b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-empty-chromium-linux.png new file mode 100644 index 00000000000..9903c56a8c5 --- /dev/null +++ b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-empty-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9f722d2782f69170a3efca6ed64ab02d9140f845bb47059ba193e238c768d0a5 +size 4852 diff --git a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-loading-chromium-linux.png b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-loading-chromium-linux.png new file mode 100644 index 00000000000..cfe32b03965 --- /dev/null +++ b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-loading-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bb215d953faf98923f93ac246f36bbc4ff33c7c8dd614bda5724a6d577a779ae +size 4009 diff --git a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-with-installed-chromium-linux.png b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-with-installed-chromium-linux.png new file mode 100644 index 00000000000..204b46b36ef --- /dev/null +++ b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-with-installed-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:be90b297cbdef33fa1c3c67be7a42e4c00a5f3d68147a5fbf54a04ab7b261d04 +size 52330 diff --git a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-with-items-chromium-linux.png b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-with-items-chromium-linux.png new file mode 100644 index 00000000000..1bda64ef203 --- /dev/null +++ b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-with-items-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d27dc2c85a377f7daab0b7de444a7d883a4503ab45c92c0c0a9155de89e2a221 +size 49775 From 99b0790095caf8e9569e24afa74d2c1b01e0d327 Mon Sep 17 00:00:00 2001 From: Mark IJbema Date: Tue, 17 Mar 2026 09:10:21 +0100 Subject: [PATCH 4/4] test(marketplace): remove loading spinner story Non-deterministic spinner rotation can cause flaky screenshots. --- .../marketplace/skills-tab-loading-chromium-linux.png | 3 --- .../webview-ui/src/stories/marketplace.stories.tsx | 11 ----------- 2 files changed, 14 deletions(-) delete mode 100644 packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-loading-chromium-linux.png diff --git a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-loading-chromium-linux.png b/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-loading-chromium-linux.png deleted file mode 100644 index cfe32b03965..00000000000 --- a/packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/marketplace/skills-tab-loading-chromium-linux.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:bb215d953faf98923f93ac246f36bbc4ff33c7c8dd614bda5724a6d577a779ae -size 4009 diff --git a/packages/kilo-vscode/webview-ui/src/stories/marketplace.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/marketplace.stories.tsx index 6ad7245cc11..253d7b99018 100644 --- a/packages/kilo-vscode/webview-ui/src/stories/marketplace.stories.tsx +++ b/packages/kilo-vscode/webview-ui/src/stories/marketplace.stories.tsx @@ -156,17 +156,6 @@ export const SkillsTabEmpty: Story = { ), } -export const SkillsTabLoading: Story = { - name: "Skills tab — loading", - render: () => ( - -
- -
- - ), -} - export const SingleSkillCard: Story = { name: "ItemCard — single skill not installed", render: () => (