Merge pull request #6840 from Kilo-Org/mark/profile-view-visual-regression

test: add visual regression stories for ProfileView

packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/profile/logged-in-chromium-linux.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6485e2033c7eb88acf5347c392a1a789e471975ea086211c478d7229cc3c3dfd
+size 14652

packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/profile/logged-in-personal-chromium-linux.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f3cf6345efab3cefbc8d1ec2ae3b81103deb017bc930ede91fccb6efef59a65c
+size 10738

packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/profile/not-logged-in-chromium-linux.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b70dcaf2b3f89e0644fb47273881076cbb84cf5d36ce506685689968edb021dc
+size 5527

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>
+  ),
+}