From 51462ae8bea44b8adb140a1da34e891f96f578f7 Mon Sep 17 00:00:00 2001
From: "kiloconnect[bot]" <240665456+kiloconnect[bot]@users.noreply.github.com>
Date: Tue, 10 Mar 2026 09:19:56 +0000
Subject: [PATCH] test: add visual regression stories for ProfileView component

---
 .../src/stories/profile.stories.tsx           | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 packages/kilo-vscode/webview-ui/src/stories/profile.stories.tsx

diff --git a/packages/kilo-vscode/webview-ui/src/stories/profile.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/profile.stories.tsx
new file mode 100644
index 00000000000..0039b58c759
--- /dev/null
+++ b/packages/kilo-vscode/webview-ui/src/stories/profile.stories.tsx
@@ -0,0 +1,75 @@
+/** @jsxImportSource solid-js */
+/**
+ * Stories for ProfileView component.
+ */
+
+import type { Meta, StoryObj } from "storybook-solidjs-vite"
+import { StoryProviders } from "./StoryProviders"
+import ProfileView from "../components/profile/ProfileView"
+import type { ProfileData, DeviceAuthState } from "../types/messages"
+
+const meta: Meta = {
+  title: "Profile",
+  parameters: { layout: "fullscreen" },
+}
+export default meta
+type Story = StoryObj
+
+const loggedInProfile: ProfileData = {
+  profile: {
+    email: "user@example.com",
+    name: "Jane Developer",
+    organizations: [
+      { id: "org-1", name: "Acme Corp", role: "admin" },
+      { id: "org-2", name: "Side Project Inc", role: "member" },
+    ],
+  },
+  balance: { balance: 42.5 },
+  currentOrgId: null,
+}
+
+const personalProfile: ProfileData = {
+  profile: {
+    email: "solo@example.com",
+    name: "Solo Dev",
+  },
+  balance: { balance: 7.25 },
+  currentOrgId: null,
+}
+
+const idleAuth: DeviceAuthState = { status: "idle" }
+
+const noop = () => {}
+
+export const LoggedIn: Story = {
+  name: "ProfileView — logged in with orgs",
+  render: () => (
+    <StoryProviders noPadding>
+      <div style={{ width: "420px", height: "500px" }}>
+        <ProfileView profileData={loggedInProfile} deviceAuth={idleAuth} onLogin={noop} onBack={noop} />
+      </div>
+    </StoryProviders>
+  ),
+}
+
+export const LoggedInPersonal: Story = {
+  name: "ProfileView — personal account",
+  render: () => (
+    <StoryProviders noPadding>
+      <div style={{ width: "420px", height: "400px" }}>
+        <ProfileView profileData={personalProfile} deviceAuth={idleAuth} onLogin={noop} onBack={noop} />
+      </div>
+    </StoryProviders>
+  ),
+}
+
+export const NotLoggedIn: Story = {
+  name: "ProfileView — not logged in",
+  render: () => (
+    <StoryProviders noPadding>
+      <div style={{ width: "420px", height: "300px" }}>
+        <ProfileView profileData={null} deviceAuth={idleAuth} onLogin={noop} onBack={noop} />
+      </div>
+    </StoryProviders>
+  ),
+}