@startsimpli/ui 0.4.14 → 0.4.16

package/src/components/team/pages/types.ts

@@ -0,0 +1,135 @@
+/**
+ * Narrow API-surface interfaces for the shared TeamSettingsPage /
+ * DomainsSettingsPage composers.
+ *
+ * Apps pass in the @startsimpli/api `api` instance and these interfaces
+ * structurally describe the slice the pages actually use. Keeping the slice
+ * shape inline here means @startsimpli/ui does NOT depend on @startsimpli/api
+ * directly. startsim-o7s.
+ */
+
+import type {
+  InvitationLite,
+  MemberRow,
+  TeamRole,
+  DomainClaimLite,
+} from '../types'
+
+/** A page-level `member` row hits the API as-is — keep the shape thin. */
+export interface ApiMember {
+  id: string
+  userId: string
+  teamId: string
+  role: TeamRole
+  joinedAt: string
+  user?: MemberRow['user']
+}
+
+/** Paginated wrapper used by @startsimpli/api list endpoints. */
+export interface ApiPaginated<T> {
+  count?: number
+  next?: string | null
+  previous?: string | null
+  results: T[]
+}
+
+/** A team membership row from /team-members/my-teams/. */
+export interface ApiMyTeamMembership {
+  id: string
+  userId: string
+  teamId: string
+  role: TeamRole
+  joinedAt: string
+  team?: {
+    id: string
+    slug: string
+    name: string
+    companyId: string
+  }
+}
+
+/** A team row from /teams/{idOrSlug}/. */
+export interface ApiTeam {
+  id: string
+  slug: string
+  name: string
+  companyId: string
+}
+
+/** A company row from /companies/{idOrSlug}/. */
+export interface ApiCompany {
+  id: string
+  slug: string
+  name: string
+}
+
+/** An invitation row from /team-invitations/. */
+export interface ApiInvitation extends InvitationLite {
+  createdAt: string
+}
+
+/** A domain-claim row from /team-domain-claims/. */
+export interface ApiDomainClaim extends DomainClaimLite {}
+
+/**
+ * Minimum API surface the TeamSettingsPage composer needs. The real
+ * @startsimpli/api `api` instance satisfies this structurally.
+ */
+export interface TeamSettingsApi {
+  teams: {
+    myTeams: () => Promise<ApiMyTeamMembership[]>
+    retrieve: (idOrSlug: string) => Promise<ApiTeam>
+    members: (idOrSlug: string) => Promise<ApiMember[]>
+    updateRole: (
+      idOrSlug: string,
+      userId: string,
+      role: TeamRole,
+    ) => Promise<unknown>
+    removeMember: (idOrSlug: string, userId: string) => Promise<unknown>
+    bulkInvite: (
+      idOrSlug: string,
+      invitations: Array<{ email: string; role: TeamRole }>,
+    ) => Promise<{
+      invited: ApiInvitation[]
+      skipped?: Array<{ email: string; reason: string }>
+    }>
+  }
+  teamInvitations: {
+    list: (params: { teamId: string }) => Promise<ApiPaginated<ApiInvitation>>
+    create: (input: {
+      email: string
+      teamId: string
+      role: TeamRole
+    }) => Promise<ApiInvitation>
+    revoke: (id: string) => Promise<void>
+  }
+  companies: {
+    retrieve: (idOrSlug: string) => Promise<ApiCompany>
+  }
+}
+
+/**
+ * Minimum API surface the DomainsSettingsPage composer needs. The real
+ * @startsimpli/api `api` instance satisfies this structurally.
+ */
+export interface DomainsSettingsApi {
+  domainClaims: {
+    list: (params: { companyId: string }) => Promise<ApiPaginated<ApiDomainClaim>>
+    create: (input: {
+      companyId: string
+      domain: string
+    }) => Promise<ApiDomainClaim>
+    verifyDns: (id: string) => Promise<ApiDomainClaim>
+    verifyEmailInitiate: (id: string) => Promise<{ detail: string }>
+    verifyEmailCode: (id: string, code: string) => Promise<ApiDomainClaim>
+    revoke: (id: string) => Promise<void>
+  }
+  /** Used to pick the default companyId when the prop is omitted. */
+  teams: {
+    myTeams: () => Promise<ApiMyTeamMembership[]>
+    retrieve: (idOrSlug: string) => Promise<ApiTeam>
+  }
+  companies: {
+    retrieve: (idOrSlug: string) => Promise<ApiCompany>
+  }
+}

package/src/components/team/pending-invitation-callout-default-class-names.ts

@@ -0,0 +1,22 @@
+/** Default Tailwind classes for {@link PendingInvitationCallout}. startsim-o7s. */
+export interface PendingInvitationCalloutClassNames {
+  root?: string
+  message?: string
+  emphasized?: string
+  actions?: string
+  acceptButton?: string
+  declineButton?: string
+  errorText?: string
+}
+
+export const PENDING_INVITE_DEFAULTS: Required<PendingInvitationCalloutClassNames> = {
+  root: 'flex items-center gap-3 rounded-lg border border-blue-200 bg-blue-50 px-4 py-3',
+  message: 'flex-1 text-sm text-blue-900',
+  emphasized: 'font-semibold',
+  actions: 'flex items-center gap-2',
+  acceptButton:
+    'rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50',
+  declineButton:
+    'rounded-md border border-blue-300 px-3 py-1.5 text-sm font-medium text-blue-700 hover:bg-blue-100',
+  errorText: 'mt-2 text-sm text-red-600',
+}

package/src/components/team/role-selector-default-class-names.ts

@@ -0,0 +1,11 @@
+/** Default Tailwind classes for {@link RoleSelector}. startsim-o7s. */
+export interface RoleSelectorClassNames {
+  root?: string
+  select?: string
+}
+
+export const ROLE_SELECTOR_DEFAULTS: Required<RoleSelectorClassNames> = {
+  root: 'inline-block',
+  select:
+    'rounded-md border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50',
+}

package/src/components/team/types.ts

@@ -0,0 +1,97 @@
+/**
+ * Shared types for the team-management components.
+ *
+ * Mirrors the @startsimpli/api shapes, but redeclared here so the UI
+ * package doesn't pull @startsimpli/api as a peer. Each component accepts
+ * the data it actually renders — apps pass through whatever @startsimpli/api
+ * gave them. startsim-o7s.
+ */
+
+import type * as React from 'react'
+
+export type TeamRole = 'owner' | 'admin' | 'member' | 'viewer'
+
+export interface TeamLite {
+  id: string
+  slug: string
+  name: string
+  companyId: string
+}
+
+export interface CompanyLite {
+  id: string
+  slug: string
+  name: string
+}
+
+/** User shape rendered next to each row. Optional fields stay optional. */
+export interface MemberUserLite {
+  id: string
+  email: string
+  firstName?: string
+  lastName?: string
+  fullName?: string
+  /** Optional URL to an avatar image. */
+  avatarUrl?: string
+}
+
+export interface MemberRow {
+  id: string
+  userId: string
+  teamId: string
+  role: TeamRole
+  joinedAt: string
+  /** Optionally embedded; when absent, the email + role-only render path is used. */
+  user?: MemberUserLite
+}
+
+export interface InvitationLite {
+  id: string
+  email: string
+  teamId: string
+  role: TeamRole
+  /** Only present on the create-response; otherwise the backend redacts. */
+  token?: string
+  expiresAt: string
+  acceptedAt?: string | null
+  revokedAt?: string | null
+  isExpired: boolean
+  isAccepted: boolean
+}
+
+export type DomainVerificationMethod = 'dns_txt' | 'email_attestation'
+
+export interface DomainClaimLite {
+  id: string
+  companyId: string
+  domain: string
+  verified: boolean
+  verificationMethod?: DomainVerificationMethod | null
+  verificationToken?: string | null
+  verifiedAt?: string | null
+  createdAt: string
+}
+
+/**
+ * Helper: render a human-friendly label for a user — fullName wins, then
+ * firstName + lastName, then email.
+ */
+export function userDisplayName(user: MemberUserLite | undefined): string {
+  if (!user) return ''
+  if (user.fullName) return user.fullName
+  const fl = [user.firstName, user.lastName].filter(Boolean).join(' ').trim()
+  return fl || user.email
+}
+
+/** Helper: render initials for the avatar fallback. */
+export function userInitials(user: MemberUserLite | undefined): string {
+  if (!user) return '?'
+  const name = userDisplayName(user)
+  const parts = name.split(/\s+/).filter(Boolean)
+  if (parts.length === 0) return '?'
+  if (parts.length === 1) return parts[0][0].toUpperCase()
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+}
+
+/** Common React-prop alias used by every team component. */
+export type ChildrenProps = { children?: React.ReactNode }

package/src/components/workflows/ExecNodeDetails.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { StatusBadge } from '../badge/StatusBadge';
+import { EmptyState } from '../states/EmptyState';
+import type { NodeExecView } from './types';
+import { NODE_STATUS_BADGE, formatDuration } from './exec-status';
+
+export interface ExecNodeDetailsProps {
+  /** The selected node execution, or null when nothing is selected. */
+  node: NodeExecView | null | undefined;
+  className?: string;
+}
+
+function JsonBlock({
+  label,
+  value,
+}: {
+  label: string;
+  value: Record<string, unknown> | null | undefined;
+}) {
+  const isEmpty = value == null || Object.keys(value).length === 0;
+  return (
+    <div className="flex min-h-0 flex-col">
+      <h4 className="mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        {label}
+      </h4>
+      {isEmpty ? (
+        <p className="text-xs italic text-muted-foreground">No {label.toLowerCase()}.</p>
+      ) : (
+        <pre className="overflow-auto rounded-md border border-border bg-muted/40 p-2 text-xs leading-relaxed">
+          {JSON.stringify(value, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Read-only detail panel for a single node execution: name, type, status
+ * badge, duration, error, and pretty-printed input/output JSON. Purpose-built
+ * for the execution monitor — deliberately NOT the editor's NodeInspector.
+ */
+export function ExecNodeDetails({ node, className }: ExecNodeDetailsProps) {
+  if (!node) {
+    return (
+      <EmptyState
+        title="No node selected"
+        description="Select a node in the timeline to inspect its input and output."
+        className={className}
+      />
+    );
+  }
+
+  const duration = formatDuration(node.executionTimeMs);
+
+  return (
+    <div className={cn('flex h-full min-h-0 flex-col gap-4 overflow-auto p-4', className)}>
+      <header className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <h3 className="truncate text-base font-semibold text-foreground">
+            {node.name ?? node.nodeId}
+          </h3>
+          <StatusBadge status={node.status} config={NODE_STATUS_BADGE} size="sm" />
+        </div>
+        <div className="flex items-center gap-3 text-xs text-muted-foreground">
+          {node.type && <span>{node.type}</span>}
+          {duration && <span className="tabular-nums">{duration}</span>}
+        </div>
+      </header>
+
+      {node.status === 'error' && node.error && (
+        <p className="break-words rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
+          {node.error}
+        </p>
+      )}
+
+      <JsonBlock label="Input" value={node.inputData} />
+      <JsonBlock label="Output" value={node.outputData} />
+    </div>
+  );
+}

package/src/components/workflows/ExecutionTimeline.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { StatusBadge } from '../badge/StatusBadge';
+import { EmptyState } from '../states/EmptyState';
+import type { NodeExecView } from './types';
+import { NODE_STATUS_BADGE, formatDuration, isLiveStatus } from './exec-status';
+
+export interface ExecutionTimelineProps {
+  /** Per-node execution overlays; rendered sorted by `executionOrder`. */
+  nodeExecutions: NodeExecView[];
+  /** Currently selected node id (row highlighted as active). */
+  activeNodeId?: string;
+  /** Called with a node id when its row is activated. */
+  onSelectNode?: (nodeId: string) => void;
+  className?: string;
+}
+
+function byExecutionOrder(a: NodeExecView, b: NodeExecView): number {
+  const ao = a.executionOrder ?? 0;
+  const bo = b.executionOrder ?? 0;
+  return ao - bo;
+}
+
+/**
+ * Vertical execution timeline: one row per node execution (ordered by
+ * `executionOrder`), each showing the node name, a status badge, the run
+ * duration, and inline error text for failed nodes. Running nodes show a
+ * pulsing live indicator; terminal nodes render statically.
+ *
+ * Read-only and app-agnostic — selection is surfaced via `onSelectNode`.
+ */
+export function ExecutionTimeline({
+  nodeExecutions,
+  activeNodeId,
+  onSelectNode,
+  className,
+}: ExecutionTimelineProps) {
+  const ordered = React.useMemo(
+    () => [...nodeExecutions].sort(byExecutionOrder),
+    [nodeExecutions]
+  );
+
+  if (ordered.length === 0) {
+    return (
+      <EmptyState
+        title="No node executions"
+        description="This run has not produced any node activity yet."
+        className={className}
+      />
+    );
+  }
+
+  return (
+    <ol className={cn('flex flex-col', className)} aria-label="Execution timeline">
+      {ordered.map((node) => {
+        const live = isLiveStatus(node.status);
+        const isActive = activeNodeId != null && node.nodeId === activeNodeId;
+        const duration = formatDuration(node.executionTimeMs);
+        const selectable = onSelectNode != null;
+
+        return (
+          <li
+            key={node.nodeId}
+            aria-current={isActive ? 'true' : undefined}
+            data-node-id={node.nodeId}
+            data-status={node.status}
+            className={cn(
+              'group flex items-start gap-3 border-b border-border px-3 py-2.5 text-sm last:border-b-0',
+              selectable && 'cursor-pointer hover:bg-accent/50',
+              isActive && 'bg-accent'
+            )}
+            onClick={selectable ? () => onSelectNode!(node.nodeId) : undefined}
+            onKeyDown={
+              selectable
+                ? (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      onSelectNode!(node.nodeId);
+                    }
+                  }
+                : undefined
+            }
+            tabIndex={selectable ? 0 : undefined}
+          >
+            {/* Status rail dot */}
+            <span className="relative mt-1 flex h-2.5 w-2.5 shrink-0 items-center justify-center">
+              {live ? (
+                <>
+                  <span
+                    data-live="true"
+                    aria-hidden="true"
+                    className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75"
+                  />
+                  <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-blue-500" />
+                </>
+              ) : (
+                <span
+                  className={cn(
+                    'inline-flex h-2.5 w-2.5 rounded-full',
+                    node.status === 'success' && 'bg-green-500',
+                    node.status === 'error' && 'bg-red-500',
+                    node.status === 'skipped' && 'bg-gray-300',
+                    node.status === 'pending' && 'bg-amber-400',
+                    node.status === 'idle' && 'bg-gray-300'
+                  )}
+                />
+              )}
+            </span>
+
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2">
+                <span className="truncate font-medium text-foreground">
+                  {node.name ?? node.nodeId}
+                </span>
+                {duration && (
+                  <span className="ml-auto shrink-0 tabular-nums text-xs text-muted-foreground">
+                    {duration}
+                  </span>
+                )}
+              </div>
+              <div className="mt-1 flex items-center gap-2">
+                <StatusBadge
+                  status={node.status}
+                  config={NODE_STATUS_BADGE}
+                  size="sm"
+                />
+                {node.type && (
+                  <span className="truncate text-xs text-muted-foreground">
+                    {node.type}
+                  </span>
+                )}
+              </div>
+              {node.status === 'error' && node.error && (
+                <p className="mt-1.5 break-words text-xs text-red-600">
+                  {node.error}
+                </p>
+              )}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}