@flamingo-stack/openframe-frontend-core 0.0.390 → 0.0.391-snapshot.20260709132828

package/src/stories/ApprovalBatchMessageClient.stories.tsx

@@ -4,34 +4,31 @@ import type React from "react";
 import { ApprovalBatchMessage } from "../components/chat/approval-batch-message";
 import type {
 	ApprovalBatchData,
-	ApprovalBatchExecutionState,
 	PendingToolCallData,
 } from "../components/chat/types";
 
 /**
- * CLIENT (Fae) variant of the Command Block — Figma node 1092-2807.
+ * CLIENT (end-user Fae desktop app) variant of the approval block — Figma
+ * node 203-11947 ("fae-approval-block").
  *
- * Same component and props as the Admin card, driven by `assistantType="fae"`.
- * Differences vs Admin: no tool icon next to the command, no footer divider,
- * and a single full-text status pill ("Approved by Michael Johnson") instead
- * of a compact tag + separate "by {name}".
+ * Same component and props as the Admin card, driven by `variant="client"`.
+ * The end client sees ONLY the BE-generated title plus the Approve/Reject
+ * buttons, or the full-text resolved pill ("Approved by Michael Johnson").
+ * Commands, scripts, expandable args/results and execution icons are never
+ * rendered in this variant.
  */
 
 const LONG_COMMAND = `Get-CimInstance Win32_Process |
   Select-Object ProcessId, Name, Path, CommandLine |
   Where-Object { $_.Path -like 'C:\\Users\\Public\\*' }`;
 
-const RESULT = `pid  | name           | path                          | cmdline
-4821 | suspicious.exe | C:\\Users\\Public\\suspicious.exe | suspicious.exe --hidden --connect 185.220.101.45`;
-
 const REQUEST_ID = "req-1";
 
 const toolCall: PendingToolCallData = {
 	toolExecutionRequestId: REQUEST_ID,
 	toolName: "run_script",
 	toolTitle: "Run Script",
-	// Human-readable description shown as the collapsed row header (CLIENT);
-	// the raw command moves into the expanded body (Figma 1972-6100).
+	// BE-generated human-readable title — the ONLY content the client sees.
 	toolExplanation:
 		"Collects today's system, application, and security event logs and exports them to a CSV file.",
 	toolType: "OPENFRAME_RMM",
@@ -44,39 +41,12 @@ const toolCall: PendingToolCallData = {
 	},
 };
 
-const makeData = (
-	executions?: Record<string, ApprovalBatchExecutionState>,
-): ApprovalBatchData => ({
+const makeData = (): ApprovalBatchData => ({
 	approvalRequestId: "batch-1",
 	approvalType: "CLIENT",
 	toolCalls: [toolCall],
-	executions,
-});
-
-const executingData = makeData({ [REQUEST_ID]: { status: "executing" } });
-const doneData = makeData({
-	[REQUEST_ID]: { status: "done", result: RESULT, success: true },
 });
 
-/**
- * The assistant's message text that precedes the command block in the real
- * chat (Figma "Command description text."). It is NOT part of the component —
- * shown here only so the story matches the Figma frame.
- */
-const CommandHeading = () => (
-	<p className="text-h4 text-ods-text-primary mb-[var(--spacing-system-xxs)]">
-		Command description text.
-	</p>
-);
-
-const constrainedDecorator =
-	(width?: number) => (Story: React.ComponentType) => (
-		<div style={{ maxWidth: width ?? 400, background: "var(--color-bg)" }}>
-			<CommandHeading />
-			<Story />
-		</div>
-	);
-
 const plainDecorator =
 	(width?: number) => (Story: React.ComponentType) => (
 		<div style={{ maxWidth: width ?? 400, background: "var(--color-bg)" }}>
@@ -88,22 +58,22 @@ const meta = {
 	title: "Chat/Client/ApprovalBatchMessage",
 	component: ApprovalBatchMessage,
 	tags: ["autodocs"],
-	args: { assistantType: "fae" },
+	args: { variant: "client" },
 	parameters: {
 		docs: {
 			description: {
 				component:
-					"CLIENT (Fae) Command Block — no tool icon, no divider, full-text status pill. Same component/props as Admin, gated by assistantType='fae' (Figma 1092-2807).",
+					"CLIENT (Fae end-user) approval block — title-only card with Approve/Reject or a full-text status pill. Commands/scripts are never shown. Gated by variant='client' (Figma 203-11947).",
 			},
 		},
 	},
-	decorators: [constrainedDecorator()],
+	decorators: [plainDecorator()],
 } satisfies Meta<typeof ApprovalBatchMessage>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/** Pending — Approve / Reject buttons. Click the row to expand args. */
+/** Pending — title + Approve / Reject buttons. No expandable command. */
 export const Pending: Story = {
 	args: {
 		data: makeData(),
@@ -113,19 +83,10 @@ export const Pending: Story = {
 	},
 };
 
-/** Approved and still executing — grey loader on the row, no result yet. */
-export const ApprovedExecuting: Story = {
+/** Approved — full-text green status pill. */
+export const Approved: Story = {
 	args: {
-		data: executingData,
-		status: "approved",
-		resolvedByName: "Michael Johnson",
-	},
-};
-
-/** Approved and finished — green check + expandable Result block. */
-export const ApprovedDone: Story = {
-	args: {
-		data: doneData,
+		data: makeData(),
 		status: "approved",
 		resolvedByName: "Michael Johnson",
 	},
@@ -150,25 +111,22 @@ export const Cancelled: Story = {
 };
 
 /**
- * All states side by side — mirrors the Figma CLIENT "Command Blocks" board.
+ * All states side by side — mirrors the Figma CLIENT approval-block frames
+ * (1-6575 / 1-6621 / 1-6637 / 1-6653).
  */
 export const AllStates: Story = {
 	decorators: [plainDecorator(420)],
 	render: () => {
 		const states = [
 			{ data: makeData(), status: "pending" as const, onApprove: () => {}, onReject: () => {} },
-			{ data: executingData, status: "approved" as const, resolvedByName: "Michael Johnson" },
-			{ data: doneData, status: "approved" as const, resolvedByName: "Michael Johnson" },
+			{ data: makeData(), status: "approved" as const, resolvedByName: "Michael Johnson" },
 			{ data: makeData(), status: "rejected" as const, resolvedByName: "Michael Johnson" },
 			{ data: makeData(), status: "cancelled" as const, resolvedByName: "Michael Johnson" },
 		];
 		return (
 			<div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
 				{states.map((s, i) => (
-					<div key={i}>
-						<CommandHeading />
-						<ApprovalBatchMessage assistantType="fae" {...s} />
-					</div>
+					<ApprovalBatchMessage key={i} variant="client" {...s} />
 				))}
 			</div>
 		);

package/src/stories/auth/CompleteAccount.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { useState } from 'react'
+import {
+  type AuthSsoProvider,
+  AuthShell,
+  BackToLoginLink,
+  CompleteAccountForm,
+} from '../../components/features/auth'
+import { TabSelector } from '../../components/ui/tab-selector'
+
+const meta = {
+  title: 'Auth/Complete Account',
+  component: CompleteAccountForm,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Account details form shared by Sign Up ("Complete your Account") and Accept Invitation: Continue with Google/Microsoft on top, then name + password fields. Presentational + controlled.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CompleteAccountForm>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const SSO_PROVIDERS: AuthSsoProvider[] = ['google', 'microsoft']
+
+function useAccountFields(filled: boolean) {
+  const [firstName, setFirstName] = useState(filled ? 'Ada' : '')
+  const [lastName, setLastName] = useState(filled ? 'Lovelace' : '')
+  const [password, setPassword] = useState(filled ? 'SuperSecretPassphrase2024!' : '')
+  const [confirmPassword, setConfirmPassword] = useState(filled ? 'SuperSecretPassphrase2024!' : '')
+
+  const isValid =
+    !!firstName.trim() && !!lastName.trim() && password.length >= 8 && password === confirmPassword
+
+  return {
+    firstName,
+    lastName,
+    password,
+    confirmPassword,
+    onFirstNameChange: setFirstName,
+    onLastNameChange: setLastName,
+    onPasswordChange: setPassword,
+    onConfirmPasswordChange: setConfirmPassword,
+    submitDisabled: !isValid,
+  }
+}
+
+/** Sign Up step: tabs + Back to Organization secondary action. */
+function SignUpPage({ filled = false }: { filled?: boolean }) {
+  const fields = useAccountFields(filled)
+
+  const tabs = (
+    <TabSelector
+      value="signup"
+      onValueChange={() => {}}
+      variant="primary"
+      items={[
+        { id: 'signup', label: 'Sign Up' },
+        { id: 'login', label: 'Login' },
+      ]}
+    />
+  )
+
+  return (
+    <AuthShell tabs={tabs}>
+      <CompleteAccountForm
+        {...fields}
+        onSubmit={() => {}}
+        onBack={() => {}}
+        ssoProviders={SSO_PROVIDERS}
+        onSsoClick={() => {}}
+      />
+    </AuthShell>
+  )
+}
+
+/** Accept Invitation: no tabs, no back action; "Back to Login" in the shell footer. */
+function InvitationPage({ filled = false }: { filled?: boolean }) {
+  const fields = useAccountFields(filled)
+
+  return (
+    <AuthShell footer={<BackToLoginLink onClick={() => {}} />}>
+      <CompleteAccountForm
+        {...fields}
+        onSubmit={() => {}}
+        ssoProviders={SSO_PROVIDERS}
+        onSsoClick={() => {}}
+        title="Accept Invitation"
+        subtitle="Complete your registration to join the organization"
+      />
+    </AuthShell>
+  )
+}
+
+export const SignUpEmpty: Story = { render: () => <SignUpPage /> }
+export const SignUpFilled: Story = { render: () => <SignUpPage filled /> }
+export const InvitationEmpty: Story = { render: () => <InvitationPage /> }
+export const InvitationFilled: Story = { render: () => <InvitationPage filled /> }

package/src/stories/auth/CreateOrganization.stories.tsx

@@ -51,12 +51,6 @@ function CreateOrganizationPage(initial: Partial<CreateOrganizationFormProps>) {
   return (
     <AuthShell
       tabs={tabs}
-      mobileTagline={
-        <>
-          <p>All your MSP ops in one place.</p>
-          <p>Open-source, AI-ready, no vendor tax.</p>
-        </>
-      }
     >
       {tab === 'signup' ? (
         <CreateOrganizationForm

package/src/stories/auth/Login.stories.tsx

@@ -43,12 +43,6 @@ function LoginPage(initial: Partial<LoginFormProps>) {
   return (
     <AuthShell
       tabs={tabs}
-      mobileTagline={
-        <>
-          <p>All your MSP ops in one place.</p>
-          <p>Open-source, AI-ready, no vendor tax.</p>
-        </>
-      }
     >
       {tab === 'login' ? (
         <LoginForm

package/src/stories/auth/PasswordReset.stories.tsx

@@ -29,12 +29,6 @@ function PasswordResetPage({ initialPassword = '', initialConfirm = '' }: { init
 
   return (
     <AuthShell
-      mobileTagline={
-        <>
-          <p>All your MSP ops in one place.</p>
-          <p>Open-source, AI-ready, no vendor tax.</p>
-        </>
-      }
       footer={<BackToLoginLink onClick={() => {}} />}
     >
       <PasswordResetForm

package/src/styles/app-globals.css

@@ -1,14 +1,39 @@
 /* Global resets */
 * {
   @apply border-border;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
 }
 
+/* Elevator scrollbar, Firefox fallback. Scoped via @supports because
+   scrollbar-width/color would disable ::-webkit-scrollbar styling in Chrome */
+@supports not selector(::-webkit-scrollbar) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--ods-system-greys-grey) var(--ods-system-greys-soft-grey);
+  }
+}
+
+/* Elevator scrollbar (ODS): 8px track + draggable rounded thumb */
 *::-webkit-scrollbar {
-  width: 0px !important;
-  height: 0px !important;
-  display: none !important;
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background-color: var(--ods-system-greys-soft-grey);
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--ods-system-greys-grey);
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--ods-system-greys-grey-hover);
+}
+
+*::-webkit-scrollbar-corner {
+  background-color: transparent;
 }
 
 body {
@@ -134,18 +159,6 @@ body {
   }
 }
 
-/* Global scrollbar suppression */
-*::-webkit-scrollbar-thumb {
-  background-color: transparent;
-}
-*::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-* {
-  scrollbar-color: transparent transparent;
-}
-
 /* Shadcn/ui HSL CSS variables for Tailwind compatibility */
 :root {
     --background: 0 0% 8.6%;