@startsimpli/ui 0.4.28 → 0.4.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.28",
+  "version": "0.4.30",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -32,7 +32,7 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/auth": "0.4.24"
+    "@startsimpli/auth": "0.4.25"
   },
   "peerDependenciesMeta": {
     "@startsimpli/auth": {

package/src/components/chat/ChatMessage.tsx

@@ -91,14 +91,14 @@ export function ChatMessage({ message, renderContent, className }: ChatMessagePr
         data-status={status}
         aria-busy={isStreaming || undefined}
         className={cn(
-          'mx-auto flex max-w-[90%] items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-1.5 text-xs text-muted-foreground',
+          'mx-auto flex max-w-[90%] items-start gap-2 rounded-md border border-border bg-muted/40 px-3 py-1.5 text-xs text-muted-foreground',
           isError && 'border-red-300 bg-red-50 text-red-700',
           className
         )}
       >
-        {kind === 'tool' && <Wrench className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />}
-        {toolName && <span className="font-medium text-foreground">{toolName}</span>}
-        <span className="truncate">{content}</span>
+        {kind === 'tool' && <Wrench className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden="true" />}
+        {toolName && <span className="shrink-0 font-medium text-foreground">{toolName}</span>}
+        <span className="min-w-0 whitespace-pre-wrap break-words">{content}</span>
         {isStreaming && <StreamingDots />}
       </div>
     )

package/src/components/index.ts

@@ -52,6 +52,7 @@ export * from './unified-table/utils'
 
 // Export Navigation
 export * from './navigation/sidebar'
+export * from './navigation/app-shell'
 
 // Workspace layout primitives (SplitPane, DualPaneWorkspace) — generic two-pane shell
 export * from './workspace'

package/src/components/navigation/app-shell.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { useEffect, type ReactNode } from 'react';
+import { useAuth, buildCentralAuthUrl } from '@startsimpli/auth';
+import { LogOut, User } from 'lucide-react';
+import { Sidebar, SidebarLayout, type SidebarSection } from './sidebar';
+import { Button } from '../ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
+
+/**
+ * The one shared authenticated app shell — Sidebar SaaS chrome for EVERY app.
+ *
+ * Previously each app hand-rolled the same assembly in its own layout: the
+ * central-auth gate (bounce to sign-in when there's no session), the loading
+ * state, the account menu (email + Log out), and composing
+ * <Sidebar> + <SidebarLayout>. That's the duplication — it now lives here once.
+ * An app supplies only its slug + brand + nav sections:
+ *
+ *   <AppShell app="market" appName="Market Simpli" sections={NAV}>{children}</AppShell>
+ *
+ * `useAuth` / `buildCentralAuthUrl` come from the @startsimpli/auth peer dep, so
+ * no app wires auth itself. The visual is the shared <Sidebar> (dark, collapsible),
+ * identical across apps.
+ */
+export interface AppShellProps {
+  /** App slug for the central-auth return flow, e.g. 'market' | 'foundry'. */
+  app: string;
+  /** Brand / product name shown at the top of the sidebar. */
+  appName: string;
+  /** Sidebar navigation sections (label + href + optional icon). */
+  sections: SidebarSection[];
+  /** Extra items rendered above "Log out" in the account menu (optional). */
+  accountMenuExtra?: ReactNode;
+  /** Loading label while the session bootstraps (default "Loading…"). */
+  loadingLabel?: string;
+  children: ReactNode;
+}
+
+export function AppShell({
+  app,
+  appName,
+  sections,
+  accountMenuExtra,
+  loadingLabel = 'Loading…',
+  children,
+}: AppShellProps) {
+  const { user, isLoading, logout } = useAuth();
+
+  const signin = (returnTo: string) => buildCentralAuthUrl('signin', { app, returnTo });
+
+  // Gate: no session once bootstrap settles -> bounce to central auth,
+  // preserving the current URL so the user returns here post-signin.
+  useEffect(() => {
+    if (isLoading || user) return;
+    if (typeof window === 'undefined') return;
+    window.location.href = signin(window.location.href);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user, isLoading, app]);
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+    } finally {
+      if (typeof window !== 'undefined') {
+        window.location.href = signin(`${window.location.origin}/`);
+      }
+    }
+  };
+
+  if (isLoading || !user) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background text-sm text-muted-foreground">
+        {loadingLabel}
+      </div>
+    );
+  }
+
+  const account = user.email || user.name || 'Account';
+
+  const userDropdown = (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-full justify-start gap-2 text-gray-300 hover:bg-gray-800 hover:text-white"
+        >
+          <User className="h-4 w-4 flex-shrink-0" />
+          <span className="truncate text-sm">{account}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel className="truncate">{account}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {accountMenuExtra}
+        <DropdownMenuItem
+          className="cursor-pointer text-red-600 focus:text-red-600"
+          onClick={handleLogout}
+        >
+          <LogOut className="mr-2 h-4 w-4" /> Log out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+
+  return (
+    <>
+      <Sidebar appName={appName} sections={sections} userDropdown={userDropdown} collapsible />
+      <SidebarLayout>{children}</SidebarLayout>
+    </>
+  );
+}