@fayz-ai/saas 0.8.0 → 0.8.2

package/src/shell/components/chat/ChatPanel.tsx

@@ -1,16 +1,24 @@
 import * as React from 'react'
-import { ArrowUp, Settings2 } from 'lucide-react'
+import { ArrowUp, ArrowUpRight, ChevronDown, History, Loader2, SquarePen, Settings2, Wrench } from 'lucide-react'
 import { cn } from '../../lib/cn'
 import { useTranslation } from '../../hooks/useTranslation'
-import { useChatStore, type ChatMessage } from '../../stores/chat.store'
+import { useChatStore, type ChatMessage, type ChatToolCall, type ChatRecordLink } from '../../stores/chat.store'
 import { useChat } from '../../hooks/useChat'
 import { useAITools } from '../../hooks/useAITools'
 import { ChatSuggestions, ChatToolsPanel } from './ChatSuggestions'
+import { ConfirmActionCard } from './ConfirmActionCard'
+import { ChatMarkdown } from './markdown'
+import type { FayzAgentConnectionConfig } from '../../lib/fayz-agent'
+// NOTE: src/lib copy — the one AdminShell's setEntityRouteMap fills. The
+// shell/lib duplicate is a legacy shim nobody populates ('two of everything').
+import { resolveEntityRoute, resolveEntityHref } from '../../../lib/entity-routes'
+import { useRouter } from '../../lib/router'
 
 interface ChatPanelProps {
   title?: string
   apiEndpoint?: string
   systemPrompt?: string
+  agent?: FayzAgentConnectionConfig | false
   className?: string
 }
 
@@ -18,14 +26,19 @@ export function ChatPanel({
   title = 'Assistant',
   apiEndpoint,
   systemPrompt,
+  agent,
   className,
 }: ChatPanelProps) {
   const { isOpen, messages, isStreaming } = useChatStore()
-  const { sendMessage } = useChat({ apiEndpoint, systemPrompt })
+  const {
+    sendMessage, isConfigured, pendingAction, resolvePendingAction,
+    activeTools, conversations, loadConversations, resumeConversation, startNewConversation,
+  } = useChat({ apiEndpoint, systemPrompt, agent })
   const { t } = useTranslation()
   const { suggestions, toolGroups } = useAITools()
   const [input, setInput] = React.useState('')
   const [showTools, setShowTools] = React.useState(false)
+  const [showHistory, setShowHistory] = React.useState(false)
   const scrollRef = React.useRef<HTMLDivElement>(null)
   const inputRef = React.useRef<HTMLInputElement>(null)
 
@@ -38,18 +51,20 @@ export function ChatPanel({
 
   React.useEffect(() => {
     if (isOpen) {
+      loadConversations()
       const timer = setTimeout(() => inputRef.current?.focus(), 100)
       return () => clearTimeout(timer)
     }
     setShowTools(false)
-  }, [isOpen])
+    setShowHistory(false)
+  }, [isOpen, loadConversations])
 
   if (!isOpen) return null
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     const text = input.trim()
-    if (!text || isStreaming) return
+    if (!text || isStreaming || !isConfigured) return
     setInput('')
     setShowTools(false)
     sendMessage(text)
@@ -73,9 +88,31 @@ export function ChatPanel({
           <div className="h-1.5 w-1.5 rounded-full bg-success" />
           <span className="text-xs font-semibold text-foreground">{title}</span>
         </div>
+        <div className="flex items-center gap-0.5">
+        {hasMessages && (
+          <button
+            onClick={startNewConversation}
+            className="inline-flex items-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
+            title={t('chat.newConversation')}
+          >
+            <SquarePen className="h-3 w-3" />
+          </button>
+        )}
+        {conversations.length > 0 && (
+          <button
+            onClick={() => { setShowHistory(!showHistory); setShowTools(false) }}
+            className={cn(
+              'inline-flex items-center rounded-md p-1.5 transition-colors',
+              showHistory ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
+            )}
+            title={t('chat.history')}
+          >
+            <History className="h-3 w-3" />
+          </button>
+        )}
         {totalTools > 0 && (
           <button
-            onClick={() => setShowTools(!showTools)}
+            onClick={() => { setShowTools(!showTools); setShowHistory(false) }}
             className={cn(
               'inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[10px] transition-colors',
               showTools
@@ -88,10 +125,31 @@ export function ChatPanel({
             <span className="font-medium">{totalTools}</span>
           </button>
         )}
+        </div>
       </div>
 
-      {/* Tools panel overlay */}
-      {showTools ? (
+      {/* History drawer */}
+      {showHistory ? (
+        <div className="min-h-0 flex-1 overflow-y-auto py-1">
+          {conversations.map((c) => (
+            <button
+              key={c.id}
+              onClick={() => {
+                setShowHistory(false)
+                resumeConversation(c.id)
+              }}
+              className="flex w-full flex-col items-start gap-0.5 px-4 py-2 text-left transition-colors hover:bg-muted/50"
+            >
+              <span className="line-clamp-1 text-[13px] text-foreground">
+                {c.title ?? t('chat.newConversation')}
+              </span>
+              <span className="text-[10px] text-muted-foreground">
+                {new Date(c.updatedAt).toLocaleString()}
+              </span>
+            </button>
+          ))}
+        </div>
+      ) : showTools ? (
         <ChatToolsPanel toolGroups={toolGroups} onClose={() => setShowTools(false)} />
       ) : (
         /* Messages / suggestions area */
@@ -103,18 +161,41 @@ export function ChatPanel({
           )}
         >
           {!hasMessages && (
-            <ChatSuggestions
-              suggestions={suggestions}
-              onSelect={(suggestion) => {
-                setInput('')
-                sendMessage(suggestion.prompt ?? suggestion.label)
-              }}
-            />
+            <>
+              {!isConfigured && (
+                <div className="mx-3 mt-3 rounded-lg border border-border/60 bg-muted/40 px-3 py-2 text-[11px] leading-relaxed text-muted-foreground">
+                  {t('chat.notConfigured')}
+                </div>
+              )}
+              <ChatSuggestions
+                suggestions={suggestions}
+                onSelect={(suggestion) => {
+                  setInput('')
+                  sendMessage(suggestion.prompt ?? suggestion.label)
+                }}
+              />
+            </>
           )}
           {messages.map((msg) => (
             <MessageBubble key={msg.id} message={msg} />
           ))}
-          {isStreaming && messages[messages.length - 1]?.content === '' && (
+          {pendingAction && (
+            <ConfirmActionCard action={pendingAction} onResolve={resolvePendingAction} />
+          )}
+          {activeTools.length > 0 && (
+            <div className="flex flex-wrap items-center gap-1 px-2 py-1">
+              {activeTools.map((name) => (
+                <span
+                  key={name}
+                  className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 font-mono text-[10px] text-muted-foreground"
+                >
+                  <Loader2 className="h-2.5 w-2.5 animate-spin" />
+                  {name}
+                </span>
+              ))}
+            </div>
+          )}
+          {isStreaming && !pendingAction && activeTools.length === 0 && messages[messages.length - 1]?.content === '' && (
             <div className="flex items-center gap-1 px-2 py-1.5">
               <span className="h-1 w-1 rounded-full bg-muted-foreground/50 animate-pulse" />
               <span className="h-1 w-1 rounded-full bg-muted-foreground/50 animate-pulse [animation-delay:150ms]" />
@@ -124,7 +205,7 @@ export function ChatPanel({
         </div>
       )}
 
-      {/* Input */}
+      {/* Input — disabled until a real chat.apiEndpoint is configured. */}
       <form onSubmit={handleSubmit} className="border-t border-border/40 p-2">
         <div className="flex items-center gap-1.5 rounded-full border border-border bg-background py-1 pl-3.5 pr-1 transition-colors focus-within:border-foreground/20">
           <input
@@ -132,13 +213,19 @@ export function ChatPanel({
             type="text"
             value={input}
             onChange={(e) => setInput(e.target.value)}
-            placeholder={t('chat.messagePlaceholder')}
-            className="min-w-0 flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none"
-            disabled={isStreaming}
+            placeholder={
+              pendingAction
+                ? t('chat.confirmAction.blocked')
+                : isConfigured
+                  ? t('chat.messagePlaceholder')
+                  : t('chat.notConfigured')
+            }
+            className="min-w-0 flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground/50 focus:outline-none disabled:cursor-not-allowed"
+            disabled={isStreaming || !isConfigured || !!pendingAction}
           />
           <button
             type="submit"
-            disabled={!input.trim() || isStreaming}
+            disabled={!input.trim() || isStreaming || !isConfigured || !!pendingAction}
             className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-foreground text-background transition-opacity hover:opacity-80 disabled:opacity-20"
             aria-label="Send message"
           >
@@ -150,11 +237,68 @@ export function ChatPanel({
   )
 }
 
+/**
+ * Goto button for a record the reply concerns. The ref is semantic — the
+ * button only renders when THIS app's route map resolves the archetype (a
+ * missing link is correct; an invented one is a dead end — agents.md).
+ */
+function RecordLinkButton({ link }: { link: ChatRecordLink }) {
+  const router = useRouter()
+  if (!resolveEntityRoute(link.archetype, link.kind)) return null
+  const href = resolveEntityHref(link.id, link.archetype, link.kind)
+  return (
+    <button
+      type="button"
+      onClick={() => router.navigate(href)}
+      className="inline-flex items-center gap-1 rounded-full border border-border bg-background px-2.5 py-1 text-[11px] font-medium text-foreground transition-colors hover:bg-muted"
+    >
+      {link.label}
+      <ArrowUpRight className="h-3 w-3" />
+    </button>
+  )
+}
+
+function ToolCallRow({ call }: { call: ChatToolCall }) {
+  const [open, setOpen] = React.useState(false)
+  return (
+    <div className="rounded-md border border-border/60">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex w-full items-center gap-1.5 px-2 py-1 text-left font-mono text-[10px] text-muted-foreground transition-colors hover:text-foreground"
+      >
+        <Wrench className="h-2.5 w-2.5 shrink-0" />
+        <span className="truncate">{call.name}</span>
+        <ChevronDown className={cn('ml-auto h-2.5 w-2.5 shrink-0 transition-transform', open && 'rotate-180')} />
+      </button>
+      {open && (
+        <div className="space-y-1 border-t border-border/60 px-2 py-1.5">
+          {call.args && (
+            <pre className="max-h-24 overflow-auto whitespace-pre-wrap break-all font-mono text-[9px] leading-snug text-muted-foreground">{call.args}</pre>
+          )}
+          {call.result && (
+            <pre className="max-h-40 overflow-auto whitespace-pre-wrap break-all rounded bg-muted/50 p-1.5 font-mono text-[9px] leading-snug text-foreground/80">{call.result}</pre>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
 function MessageBubble({ message }: { message: ChatMessage }) {
   const isUser = message.role === 'user'
 
   return (
-    <div className={cn('flex', isUser ? 'justify-end' : 'justify-start')}>
+    <div className={cn('flex flex-col gap-1', isUser ? 'items-end' : 'items-start')}>
+      {/* Chronological order: the work happened BEFORE the reply — trace on
+          top, answer below, goto buttons (the next step) underneath. */}
+      {!isUser && (message.toolCalls?.length ?? 0) > 0 && (
+        <div className="flex max-w-[85%] flex-col gap-0.5 px-1">
+          {message.toolCalls!.map((call, i) => (
+            <ToolCallRow key={`${call.name}-${i}`} call={call} />
+          ))}
+        </div>
+      )}
       <div
         className={cn(
           'max-w-[85%] rounded-2xl px-3 py-1.5 text-[13px] leading-relaxed',
@@ -163,8 +307,15 @@ function MessageBubble({ message }: { message: ChatMessage }) {
             : 'rounded-bl-sm bg-muted text-foreground'
         )}
       >
-        {message.content}
+        {isUser ? message.content : <ChatMarkdown content={message.content} />}
       </div>
+      {!isUser && (message.links?.length ?? 0) > 0 && (
+        <div className="flex max-w-[85%] flex-wrap gap-1 px-1">
+          {message.links!.map((link) => (
+            <RecordLinkButton key={link.id} link={link} />
+          ))}
+        </div>
+      )}
     </div>
   )
 }

package/src/shell/components/chat/ConfirmActionCard.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { ShieldCheck } from 'lucide-react'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { PendingAgentAction } from '../../stores/chat.store'
+
+/**
+ * The human gate in front of an agent write: shows what the agent wants to do
+ * (tool + arguments) and blocks the conversation until the user decides —
+ * the FAB's native rendering of the confirmation step every channel has
+ * (WhatsApp asks "responda SIM", MCP uses elicitation).
+ */
+export function ConfirmActionCard({
+  action,
+  onResolve,
+}: {
+  action: PendingAgentAction
+  onResolve: (approved: boolean) => void
+}) {
+  const { t } = useTranslation()
+  const entries = Object.entries(action.params).filter(([, v]) => v !== undefined && v !== null)
+
+  return (
+    <div className="mx-3 my-2 rounded-lg border border-border bg-muted/40 p-3 text-sm">
+      <div className="mb-1 flex items-center gap-2 font-medium text-foreground">
+        <ShieldCheck className="h-4 w-4 shrink-0" />
+        {t('chat.confirmAction.title')}
+      </div>
+      <div className="mb-2 text-xs text-muted-foreground">{action.title}</div>
+      {entries.length > 0 && (
+        <dl className="mb-3 space-y-0.5">
+          {entries.map(([key, value]) => (
+            <div key={key} className="flex gap-2 text-xs">
+              <dt className="shrink-0 font-mono text-muted-foreground">{key}</dt>
+              <dd className="truncate text-foreground">{String(value)}</dd>
+            </div>
+          ))}
+        </dl>
+      )}
+      <div className="flex gap-2">
+        <button
+          type="button"
+          onClick={() => onResolve(true)}
+          className="inline-flex h-7 items-center rounded-md bg-foreground px-3 text-xs font-medium text-background transition-opacity hover:opacity-80"
+        >
+          {t('chat.confirmAction.confirm')}
+        </button>
+        <button
+          type="button"
+          onClick={() => onResolve(false)}
+          className="inline-flex h-7 items-center rounded-md border border-border px-3 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted"
+        >
+          {t('chat.confirmAction.cancel')}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/shell/components/chat/markdown.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react'
+
+// Minimal markdown for chat bubbles — the subset agents actually emit:
+// **bold**, *italic*, `code`, [links](url), - / 1. lists, ### headings and
+// paragraphs. Built as React nodes (never innerHTML), so model output can't
+// inject markup. Deliberately dependency-free: the saas package ships in every
+// generated app and a full markdown library is ~30kb for four constructs.
+
+function renderInline(text: string, keyBase: string): React.ReactNode[] {
+  const out: React.ReactNode[] = []
+  // Tokenize: code first (protects its content), then bold, italic, links.
+  const pattern = /(`[^`]+`)|(\*\*[^*]+\*\*)|(\*[^*]+\*)|(\[[^\]]+\]\([^)\s]+\))/g
+  let last = 0
+  let match: RegExpExecArray | null
+  let i = 0
+  while ((match = pattern.exec(text)) !== null) {
+    if (match.index > last) out.push(text.slice(last, match.index))
+    const token = match[0]
+    const key = `${keyBase}-${i++}`
+    if (token.startsWith('`')) {
+      out.push(
+        <code key={key} className="rounded bg-black/10 px-1 font-mono text-[0.85em] dark:bg-white/10">
+          {token.slice(1, -1)}
+        </code>,
+      )
+    } else if (token.startsWith('**')) {
+      out.push(<strong key={key}>{renderInline(token.slice(2, -2), key)}</strong>)
+    } else if (token.startsWith('*')) {
+      out.push(<em key={key}>{renderInline(token.slice(1, -1), key)}</em>)
+    } else {
+      const link = /^\[([^\]]+)\]\(([^)\s]+)\)$/.exec(token)
+      if (link && /^(https?:\/\/|\/|#)/.test(link[2])) {
+        out.push(
+          <a key={key} href={link[2]} target="_blank" rel="noreferrer" className="underline underline-offset-2">
+            {renderInline(link[1], key)}
+          </a>,
+        )
+      } else {
+        out.push(token)
+      }
+    }
+    last = match.index + token.length
+  }
+  if (last < text.length) out.push(text.slice(last))
+  return out
+}
+
+export function ChatMarkdown({ content }: { content: string }) {
+  const blocks: React.ReactNode[] = []
+  const lines = content.split('\n')
+  let i = 0
+  let key = 0
+
+  while (i < lines.length) {
+    const line = lines[i]
+    if (!line.trim()) {
+      i++
+      continue
+    }
+    const heading = /^(#{1,4})\s+(.*)$/.exec(line)
+    if (heading) {
+      blocks.push(
+        <p key={key++} className="mt-1.5 font-semibold first:mt-0">
+          {renderInline(heading[2], `h${key}`)}
+        </p>,
+      )
+      i++
+      continue
+    }
+    if (/^\s*([-*]|\d+[.)])\s+/.test(line)) {
+      const items: React.ReactNode[] = []
+      const ordered = /^\s*\d+[.)]\s+/.test(line)
+      while (i < lines.length && /^\s*([-*]|\d+[.)])\s+/.test(lines[i])) {
+        const item = lines[i].replace(/^\s*([-*]|\d+[.)])\s+/, '')
+        items.push(<li key={items.length}>{renderInline(item, `li${key}-${items.length}`)}</li>)
+        i++
+      }
+      const listClass = 'my-1 space-y-0.5 pl-4 first:mt-0 last:mb-0'
+      blocks.push(
+        ordered ? (
+          <ol key={key++} className={`${listClass} list-decimal`}>{items}</ol>
+        ) : (
+          <ul key={key++} className={`${listClass} list-disc`}>{items}</ul>
+        ),
+      )
+      continue
+    }
+    // Paragraph: swallow consecutive plain lines with soft breaks.
+    const para: React.ReactNode[] = []
+    while (i < lines.length && lines[i].trim() && !/^\s*([-*]|\d+[.)])\s+/.test(lines[i]) && !/^#{1,4}\s+/.test(lines[i])) {
+      if (para.length) para.push(<br key={`br${key}-${para.length}`} />)
+      para.push(...renderInline(lines[i], `p${key}-${para.length}`))
+      i++
+    }
+    blocks.push(
+      <p key={key++} className="my-1 first:mt-0 last:mb-0">
+        {para}
+      </p>,
+    )
+  }
+  return <>{blocks}</>
+}

package/src/shell/components/organization/TeamTab.tsx

@@ -23,9 +23,10 @@ import { useOrgAdapterOptional as useNativeOrgAdapter } from '../../../org'
 import type { OrgAdapter } from '../../types/org-adapter'
 const useOrgAdapterOptional = () => useNativeOrgAdapter() as unknown as OrgAdapter | null
 import { useAuthStore } from '@fayz-ai/auth'
-import { usePermission } from '../../hooks/usePermission'
+import { useSystemPermission } from '../../hooks/useSystemPermission'
 import { useTranslation } from '../../hooks/useTranslation'
 import { dedup } from '../../lib/dedup'
+import { useLimitGuard, invalidateLimit } from '../../../access'
 
 export function TeamTab() {
   const adapter = useOrgAdapterOptional()
@@ -36,9 +37,17 @@ export function TeamTab() {
   const invites = useInviteStore((s) => s.invites)
   const setInvites = useInviteStore((s) => s.setInvites)
   const { user } = useAuthStore()
-  const { hasSystemPermission } = usePermission()
+  const hasSystemPermission = useSystemPermission()
 
   const [inviteOpen, setInviteOpen] = React.useState(false)
+  // Seat cap ('users' limit → tenant_members count). Guarded before opening the
+  // invite dialog; the guard opens the global UpgradeModal when at the cap.
+  const guardSeats = useLimitGuard('users')
+
+  const handleOpenInvite = async () => {
+    if ((await guardSeats(1)) === 'blocked') return
+    setInviteOpen(true)
+  }
 
   // Load invites on mount (deduped to avoid strict mode double-fetch)
   React.useEffect(() => {
@@ -107,7 +116,7 @@ export function TeamTab() {
             <p className="text-sm text-muted-foreground">{t('organization.team.memberCount', { count: String(members.length), plural: members.length !== 1 ? 's' : '' })}</p>
           </div>
           {canManageTeam && (
-            <Button size="sm" onClick={() => setInviteOpen(true)}>
+            <Button size="sm" onClick={() => { void handleOpenInvite() }}>
               <UserPlus className="h-4 w-4 mr-1" />
               {t('organization.team.invite')}
             </Button>
@@ -264,7 +273,15 @@ export function TeamTab() {
         </div>
       )}
 
-      <InviteMemberDialog open={inviteOpen} onOpenChange={setInviteOpen} />
+      <InviteMemberDialog
+        open={inviteOpen}
+        onOpenChange={(open) => {
+          setInviteOpen(open)
+          // On close (after a successful invite the dialog closes itself),
+          // refresh the seat count so the guard/banner reflect the new member.
+          if (!open) invalidateLimit('users')
+        }}
+      />
     </div>
   )
 }

package/src/shell/components/organization/TenantOnboarding.tsx

@@ -11,7 +11,9 @@ import {
 } from '@fayz-ai/ui'
 import { cn } from '../../lib/cn'
 import { useTranslation } from '../../hooks/useTranslation'
-import { useOrgAdapter } from '../../lib/org-context'
+// Native org adapter — the shell lib/org-context provider is never mounted, so
+// the shell useOrgAdapter() threw here. The native <OrgProvider> is the mounted one.
+import { useOrgAdapter } from '../../../org'
 import { useAuthStore } from '../../stores/auth.store'
 import { useOrganizationStore } from '../../stores/organization.store'
 import { usePermissionsStore } from '../../stores/permissions.store'

package/src/shell/components/organization/index.ts

@@ -1,6 +1,5 @@
 export { OrgSwitcher } from './OrgSwitcher'
 export { OrgInitializer } from './OrgInitializer'
-export { PermissionGate } from './PermissionGate'
 export { PermissionMatrixEditor } from './PermissionMatrixEditor'
 export { PermissionProfilesTab } from './PermissionProfilesTab'
 export { TeamTab } from './TeamTab'

package/src/shell/components/settings/ConnectedCompanySettings.tsx

@@ -1,6 +1,9 @@
 import { CompanySettings } from './CompanySettings'
 import { useOrganizationStore } from '../../stores/organization.store'
-import { useOrgAdapterOptional } from '../../lib/org-context'
+// Native org adapter — the shell's lib/org-context provider is never mounted,
+// so importing from there returned a null adapter and every save was a no-op.
+// The native <OrgProvider> (packages/saas/src/org) is the one actually mounted.
+import { useOrgAdapterOptional } from '../../../org'
 import { toast } from '../notifications/ToastProvider'
 import type { Tenant, TenantSettings } from '../../types'
 

package/src/shell/components/settings/ConnectedFieldRulesSettings.tsx

@@ -1,6 +1,8 @@
 import { FieldRulesSettings } from './FieldRulesSettings'
 import { useOrganizationStore } from '../../stores/organization.store'
-import { useOrgAdapterOptional } from '../../lib/org-context'
+// Native org adapter — see ConnectedCompanySettings. The shell org-context
+// provider is never mounted, so the old import yielded a null adapter (no-op save).
+import { useOrgAdapterOptional } from '../../../org'
 import { getRegisteredEntities } from '../../lib/entity-registry'
 import { toast } from '../notifications/ToastProvider'
 import { useTranslation } from '../../hooks/useTranslation'

package/src/shell/components/settings/ConnectedSecuritySettings.tsx

@@ -3,7 +3,9 @@ import type { TenantSecuritySettings } from './SecuritySettings'
 import { useAuthStore } from '../../stores/auth.store'
 import { useOrganizationStore } from '../../stores/organization.store'
 import { useAuthAdapterOptional } from '../../lib/auth-context'
-import { useOrgAdapterOptional } from '../../lib/org-context'
+// Native org adapter — see ConnectedCompanySettings. The shell org-context
+// provider is never mounted, so the old import yielded a null adapter (no-op save).
+import { useOrgAdapterOptional } from '../../../org'
 import { toast } from '../notifications/ToastProvider'
 
 export function ConnectedSecuritySettings() {

package/src/shell/components/settings/LocationsCrudPage.ts

@@ -1,5 +1,7 @@
 import { createCrudPage } from '../../../crud/createCrudPage'
-import type { EntityDef } from '../../types/crud'
+// Core's EntityDef (the type createCrudPage consumes) carries `limitKey` for
+// plan quantity gating; the shell alias does not.
+import type { EntityDef } from '@fayz-ai/core'
 
 export const locationEntityDef: EntityDef = {
   name: 'Location',
@@ -9,6 +11,9 @@ export const locationEntityDef: EntityDef = {
   displayField: 'name',
   subtitleField: 'city',
   defaultSort: 'name',
+  // Plan quantity cap — the generic CRUD (CrudFormPage/CrudPage/CrudListView)
+  // guards create/import and dims "+ Add" at the cap. Core declares 'locations'.
+  limitKey: 'locations',
   fields: [
     { key: 'name', label: 'Name', type: 'text', required: true, showInTable: true, searchable: true },
     { key: 'phone', label: 'Phone', type: 'phone', showInTable: true },