@fayz-ai/saas 0.1.6

package/src/shell/components/billing/SubscriptionCard.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react'
+import { Calendar, AlertCircle } from 'lucide-react'
+import { cn } from '../../lib/cn'
+import { Button } from '@fayz-ai/ui'
+import { Badge } from '@fayz-ai/ui'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@fayz-ai/ui'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { Subscription, Plan } from '../../types'
+
+interface SubscriptionCardProps {
+  subscription: Subscription
+  plan?: Plan
+  onCancel?: () => void
+  onResume?: () => void
+  loading?: boolean
+}
+
+const STATUS_KEYS: Record<string, { key: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' }> = {
+  active: { key: 'billing.status.active', variant: 'default' },
+  trialing: { key: 'billing.status.trialing', variant: 'secondary' },
+  past_due: { key: 'billing.status.pastDue', variant: 'destructive' },
+  canceled: { key: 'billing.status.canceled', variant: 'outline' },
+  paused: { key: 'billing.status.paused', variant: 'outline' },
+}
+
+function formatDate(dateString: string): string {
+  return new Date(dateString).toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+
+export function SubscriptionCard({
+  subscription,
+  plan,
+  onCancel,
+  onResume,
+  loading,
+}: SubscriptionCardProps) {
+  const { t } = useTranslation()
+  const statusInfo = STATUS_KEYS[subscription.status] ?? STATUS_KEYS.active
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg">
+            {plan?.name ?? t('billing.currentPlan')}
+          </CardTitle>
+          <Badge variant={statusInfo.variant}>{t(statusInfo.key)}</Badge>
+        </div>
+        {plan && <CardDescription>{plan.description}</CardDescription>}
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Calendar className="h-4 w-4" />
+          <span>
+            {subscription.cancelAtPeriodEnd
+              ? t('billing.cancelsOn', { date: formatDate(subscription.currentPeriodEnd) })
+              : t('billing.nextBilling', { date: formatDate(subscription.currentPeriodEnd) })}
+          </span>
+        </div>
+
+        {subscription.trialEnd && new Date(subscription.trialEnd) > new Date() && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <AlertCircle className="h-4 w-4" />
+            <span>{t('billing.trialEnds', { date: formatDate(subscription.trialEnd) })}</span>
+          </div>
+        )}
+
+        {plan && (
+          <div className="text-sm">
+            <span className="text-2xl font-bold">
+              ${subscription.interval === 'monthly' ? (plan.prices?.monthly ?? plan.priceMonthly) : (plan.prices?.yearly ?? plan.priceYearly)}
+            </span>
+            <span className="text-muted-foreground">
+              /{subscription.interval === 'monthly' ? 'mo' : 'yr'}
+            </span>
+          </div>
+        )}
+
+        {subscription.status === 'past_due' && (
+          <div className={cn(
+            'rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive'
+          )}>
+            {t('billing.pastDueWarning')}
+          </div>
+        )}
+      </CardContent>
+
+      <CardFooter className="gap-2">
+        {subscription.cancelAtPeriodEnd && onResume ? (
+          <Button variant="default" onClick={onResume} disabled={loading}>
+            {loading ? t('billing.resuming') : t('billing.resumeSubscription')}
+          </Button>
+        ) : (
+          onCancel && subscription.status === 'active' && (
+            <Button variant="outline" onClick={onCancel} disabled={loading}>
+              {loading ? t('billing.canceling') : t('billing.cancelSubscription')}
+            </Button>
+          )
+        )}
+      </CardFooter>
+    </Card>
+  )
+}

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

@@ -0,0 +1,5 @@
+export { BillingPage } from './BillingPage'
+export { PlanSelector } from './PlanSelector'
+export { SubscriptionCard } from './SubscriptionCard'
+export { InvoiceList } from './InvoiceList'
+export { PaywallGate } from './PaywallGate'

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

@@ -0,0 +1,195 @@
+import * as React from 'react'
+import { MessageCircle, X } from 'lucide-react'
+import { cn } from '../../lib/cn'
+import { useChatStore } from '../../stores/chat.store'
+import { useOrganizationStore } from '../../stores/organization.store'
+import { useAITools, type ResolvedSuggestion } from '../../hooks/useAITools'
+import { useChat } from '../../hooks/useChat'
+import { useTranslation } from '../../hooks/useTranslation'
+
+interface ChatFabProps {
+  className?: string
+  apiEndpoint?: string
+  systemPrompt?: string
+}
+
+function TypewriterText({ text, speed = 28, onDone }: { text: string; speed?: number; onDone?: () => void }) {
+  const [displayed, setDisplayed] = React.useState('')
+  const indexRef = React.useRef(0)
+
+  React.useEffect(() => {
+    setDisplayed('')
+    indexRef.current = 0
+    const interval = setInterval(() => {
+      indexRef.current++
+      if (indexRef.current > text.length) {
+        clearInterval(interval)
+        onDone?.()
+        return
+      }
+      setDisplayed(text.slice(0, indexRef.current))
+    }, speed)
+    return () => clearInterval(interval)
+  }, [text, speed])
+
+  return (
+    <span>
+      {displayed}
+      {displayed.length < text.length && (
+        <span className="inline-block w-[2px] h-3 bg-current/60 animate-pulse ml-0.5 -mb-px" />
+      )}
+    </span>
+  )
+}
+
+/** Injected once — keyframes for pill grow/shrink */
+const STYLE_ID = 'chat-fab-anims'
+function ensureStyles() {
+  if (typeof document === 'undefined') return
+  if (document.getElementById(STYLE_ID)) return
+  const style = document.createElement('style')
+  style.id = STYLE_ID
+  style.textContent = `
+    @keyframes fabPillGrow {
+      0%   { max-width: 2.75rem; opacity: 0.6; }
+      40%  { opacity: 1; }
+      100% { max-width: 22rem; opacity: 1; }
+    }
+    @keyframes fabPillShrink {
+      0%   { max-width: 22rem; opacity: 1; }
+      60%  { opacity: 0.6; }
+      100% { max-width: 2.75rem; opacity: 0; }
+    }
+  `
+  document.head.appendChild(style)
+}
+
+export function ChatFab({ className, apiEndpoint, systemPrompt }: ChatFabProps) {
+  const { isOpen, toggleOpen, setOpen } = useChatStore()
+  const currentOrg = useOrganizationStore((s) => s.currentOrg)
+  const { contextualSuggestions } = useAITools()
+  const { sendMessage } = useChat({ apiEndpoint, systemPrompt })
+  const { t } = useTranslation()
+
+  const [phase, setPhase] = React.useState<'idle' | 'expanding' | 'typing' | 'visible' | 'collapsing'>('idle')
+  const [activeSuggestion, setActiveSuggestion] = React.useState<ResolvedSuggestion | null>(null)
+  const timersRef = React.useRef<ReturnType<typeof setTimeout>[]>([])
+  const prevSuggestionRef = React.useRef<string | null>(null)
+
+  React.useEffect(ensureStyles, [])
+
+  const clearTimers = () => { timersRef.current.forEach(clearTimeout); timersRef.current = [] }
+  const addTimer = (fn: () => void, ms: number) => { timersRef.current.push(setTimeout(fn, ms)) }
+
+  const topSuggestion = contextualSuggestions[0] ?? null
+  const topLabel = topSuggestion?.label ?? null
+
+  React.useEffect(() => {
+    if (isOpen || !topSuggestion || !topLabel) {
+      if (phase !== 'idle') { clearTimers(); setPhase('collapsing'); addTimer(() => setPhase('idle'), 450) }
+      prevSuggestionRef.current = null
+      return
+    }
+    if (prevSuggestionRef.current === topLabel) return
+    prevSuggestionRef.current = topLabel
+    clearTimers()
+
+    const startExpand = () => {
+      setActiveSuggestion(topSuggestion)
+      setPhase('expanding')
+      // Start typing while pill is still growing
+      addTimer(() => setPhase('typing'), 350)
+    }
+
+    if (phase !== 'idle') {
+      setPhase('collapsing')
+      addTimer(startExpand, 500)
+    } else {
+      addTimer(startExpand, 800)
+    }
+
+    addTimer(() => {
+      setPhase('collapsing')
+      addTimer(() => setPhase('idle'), 450)
+    }, 9000)
+
+    return clearTimers
+  }, [topLabel, isOpen])
+
+  React.useEffect(() => {
+    if (isOpen && phase !== 'idle') { clearTimers(); setPhase('idle') }
+  }, [isOpen])
+
+  if (!currentOrg) return null
+
+  // Resolve translated label for a suggestion (same logic as ChatSuggestions)
+  const resolveLabel = (s: ResolvedSuggestion, index: number) => {
+    const key = `chat.suggestion.${s.toolId}.${index}`
+    const translated = t(key)
+    return translated === key ? s.label : translated
+  }
+
+  const activeLabel = activeSuggestion ? resolveLabel(activeSuggestion, 0) : ''
+
+  const handleSuggestionClick = () => {
+    if (!activeSuggestion) return
+    clearTimers()
+    setPhase('idle')
+    setOpen(true)
+    setTimeout(() => { sendMessage(activeSuggestion.prompt ?? activeLabel) }, 150)
+  }
+
+  const showPill = phase === 'expanding' || phase === 'typing' || phase === 'visible'
+
+  return (
+    <div className={cn('fixed bottom-4 right-4 z-50 hidden md:block', className)}>
+      {/* Pill — grows from FAB circle size outward */}
+      {(showPill || phase === 'collapsing') && !isOpen && (
+        <button
+          onClick={handleSuggestionClick}
+          className="absolute right-0 bottom-0 flex flex-col items-start justify-center rounded-full bg-foreground text-background shadow-lg hover:opacity-95 cursor-pointer pl-5 overflow-hidden"
+          style={{
+            paddingRight: '3.25rem',
+            height: '2.75rem',
+            animation: showPill
+              ? 'fabPillGrow 650ms cubic-bezier(0.22, 1, 0.36, 1) forwards'
+              : 'fabPillShrink 400ms cubic-bezier(0.55, 0, 1, 0.45) forwards',
+          }}
+        >
+          <span className="text-[7px] font-semibold uppercase tracking-widest opacity-40">
+            {t('chat.fab.tryIt')}
+          </span>
+          <span className={cn(
+            'text-[13px] font-medium whitespace-nowrap min-h-[1.15em] transition-opacity',
+            phase === 'expanding' ? 'opacity-0 duration-200' : 'opacity-100 duration-300',
+          )}>
+            {phase === 'typing' && activeSuggestion ? (
+              <TypewriterText
+                text={`"${activeLabel}"`}
+                onDone={() => setPhase('visible')}
+              />
+            ) : (phase === 'visible') && activeSuggestion ? (
+              `"${activeLabel}"`
+            ) : (
+              '\u00A0'
+            )}
+          </span>
+        </button>
+      )}
+
+      {/* FAB circle */}
+      <button
+        onClick={toggleOpen}
+        className={cn(
+          'relative z-10 h-11 w-11 flex items-center justify-center transition-all hover:opacity-90 focus:outline-none',
+          isOpen
+            ? 'rounded-tl-none rounded-tr-lg rounded-br-full rounded-bl-full bg-card text-muted-foreground border border-border/50 border-t-0 shadow-lg'
+            : 'rounded-full bg-foreground text-background shadow-lg',
+        )}
+        aria-label={isOpen ? 'Close chat' : 'Open chat'}
+      >
+        {isOpen ? <X className="h-4 w-4" /> : <MessageCircle className="h-4 w-4" />}
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,170 @@
+import * as React from 'react'
+import { ArrowUp, Settings2 } from 'lucide-react'
+import { cn } from '../../lib/cn'
+import { useTranslation } from '../../hooks/useTranslation'
+import { useChatStore, type ChatMessage } from '../../stores/chat.store'
+import { useChat } from '../../hooks/useChat'
+import { useAITools } from '../../hooks/useAITools'
+import { ChatSuggestions, ChatToolsPanel } from './ChatSuggestions'
+
+interface ChatPanelProps {
+  title?: string
+  apiEndpoint?: string
+  systemPrompt?: string
+  className?: string
+}
+
+export function ChatPanel({
+  title = 'Assistant',
+  apiEndpoint,
+  systemPrompt,
+  className,
+}: ChatPanelProps) {
+  const { isOpen, messages, isStreaming } = useChatStore()
+  const { sendMessage } = useChat({ apiEndpoint, systemPrompt })
+  const { t } = useTranslation()
+  const { suggestions, toolGroups } = useAITools()
+  const [input, setInput] = React.useState('')
+  const [showTools, setShowTools] = React.useState(false)
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const hasMessages = messages.length > 0
+  const totalTools = toolGroups.reduce((sum, g) => sum + g.tools.length, 0)
+
+  React.useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' })
+  }, [messages])
+
+  React.useEffect(() => {
+    if (isOpen) {
+      const timer = setTimeout(() => inputRef.current?.focus(), 100)
+      return () => clearTimeout(timer)
+    }
+    setShowTools(false)
+  }, [isOpen])
+
+  if (!isOpen) return null
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    const text = input.trim()
+    if (!text || isStreaming) return
+    setInput('')
+    setShowTools(false)
+    sendMessage(text)
+  }
+
+  return (
+    <div
+      className={cn(
+        'fixed z-40 flex flex-col overflow-hidden bg-card shadow-2xl',
+        // Mobile: below header, above bottom nav
+        'inset-x-0 top-12 bottom-16 rounded-none border-0',
+        // Desktop: floating card — sits just above the FAB, touching it
+        'md:inset-auto md:bottom-[3.75rem] md:right-4 md:w-[22rem] md:max-h-[min(70vh,520px)] md:rounded-2xl md:rounded-br-none md:border md:border-border/50',
+        'animate-in slide-in-from-bottom-2 fade-in-0 duration-150',
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-border/40 px-4 py-2.5">
+        <div className="flex items-center gap-2">
+          <div className="h-1.5 w-1.5 rounded-full bg-success" />
+          <span className="text-xs font-semibold text-foreground">{title}</span>
+        </div>
+        {totalTools > 0 && (
+          <button
+            onClick={() => setShowTools(!showTools)}
+            className={cn(
+              'inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[10px] transition-colors',
+              showTools
+                ? 'bg-muted text-foreground'
+                : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
+            )}
+            title="Available tools"
+          >
+            <Settings2 className="h-3 w-3" />
+            <span className="font-medium">{totalTools}</span>
+          </button>
+        )}
+      </div>
+
+      {/* Tools panel overlay */}
+      {showTools ? (
+        <ChatToolsPanel toolGroups={toolGroups} onClose={() => setShowTools(false)} />
+      ) : (
+        /* Messages / suggestions area */
+        <div
+          ref={scrollRef}
+          className={cn(
+            'min-h-0 flex-1 overflow-y-auto',
+            hasMessages && 'space-y-2 px-3 py-3'
+          )}
+        >
+          {!hasMessages && (
+            <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 === '' && (
+            <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]" />
+              <span className="h-1 w-1 rounded-full bg-muted-foreground/50 animate-pulse [animation-delay:300ms]" />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Input */}
+      <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
+            ref={inputRef}
+            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}
+          />
+          <button
+            type="submit"
+            disabled={!input.trim() || isStreaming}
+            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"
+          >
+            <ArrowUp className="h-3.5 w-3.5" strokeWidth={2.5} />
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+function MessageBubble({ message }: { message: ChatMessage }) {
+  const isUser = message.role === 'user'
+
+  return (
+    <div className={cn('flex', isUser ? 'justify-end' : 'justify-start')}>
+      <div
+        className={cn(
+          'max-w-[85%] rounded-2xl px-3 py-1.5 text-[13px] leading-relaxed',
+          isUser
+            ? 'rounded-br-sm bg-foreground text-background'
+            : 'rounded-bl-sm bg-muted text-foreground'
+        )}
+      >
+        {message.content}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,102 @@
+import * as React from 'react'
+import { Sparkles, BookOpen, Pencil } from 'lucide-react'
+import { cn } from '../../lib/cn'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { ResolvedSuggestion, ResolvedToolGroup } from '../../hooks/useAITools'
+
+interface ChatSuggestionsProps {
+  suggestions: ResolvedSuggestion[]
+  onSelect: (suggestion: ResolvedSuggestion) => void
+}
+
+const MAX_SUGGESTIONS = 5
+
+export function ChatSuggestions({ suggestions, onSelect }: ChatSuggestionsProps) {
+  const { t } = useTranslation()
+  const visible = suggestions.slice(0, MAX_SUGGESTIONS)
+
+  return (
+    <div className="flex flex-col gap-1 px-3 py-3">
+      <div className="flex items-center gap-1.5 px-1 pb-1">
+        <Sparkles className="h-3 w-3 text-muted-foreground/60" />
+        <span className="text-[11px] font-medium text-muted-foreground/70">{t('chat.tryAsking')}</span>
+      </div>
+      {visible.map((suggestion, i) => {
+        const labelKey = `chat.suggestion.${suggestion.toolId}.${i}`
+        const translated = t(labelKey)
+        const label = translated === labelKey ? suggestion.label : translated
+        return (
+          <button
+            key={`${suggestion.toolId}-${i}`}
+            onClick={() => onSelect(suggestion)}
+            className={cn(
+              'rounded-md px-2.5 py-1.5 text-left text-xs text-muted-foreground',
+              'transition-colors hover:bg-muted hover:text-foreground'
+            )}
+          >
+            &ldquo;{label}&rdquo;
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+// --- Tools panel (shown via config button) ---
+
+interface ChatToolsPanelProps {
+  toolGroups: ResolvedToolGroup[]
+  onClose: () => void
+}
+
+export function ChatToolsPanel({ toolGroups, onClose }: ChatToolsPanelProps) {
+  const { t } = useTranslation()
+  const totalTools = toolGroups.reduce((sum, g) => sum + g.tools.length, 0)
+
+  return (
+    <div className="min-h-0 flex-1 overflow-y-auto">
+      <div className="sticky top-0 z-10 flex items-center justify-between border-b border-border/40 bg-card px-4 py-2">
+        <span className="text-[11px] font-semibold text-foreground">
+          {t('chat.toolsAvailable', { count: totalTools })}
+        </span>
+        <button
+          onClick={onClose}
+          className="text-[11px] text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {t('common.done')}
+        </button>
+      </div>
+      <div className="flex flex-col gap-3 px-3 py-3">
+        {toolGroups.map((group) => (
+          <div key={group.category} className="flex flex-col gap-0.5">
+            <span className="px-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/50">
+              {group.category}
+            </span>
+            {group.tools.map(({ tool, signature }) => {
+              const ModeIcon = tool.mode === 'persist' ? Pencil : BookOpen
+              return (
+                <div
+                  key={tool.id}
+                  className="flex items-start gap-1.5 rounded-md px-2 py-1 transition-colors hover:bg-muted/50"
+                  title={tool.description}
+                >
+                  <ModeIcon className="mt-0.5 h-3 w-3 shrink-0 text-muted-foreground/40" />
+                  <div className="min-w-0">
+                    <code className="text-[11px] font-mono text-muted-foreground">
+                      {signature}
+                    </code>
+                    {tool.description && (
+                      <p className="text-[10px] leading-tight text-muted-foreground/40 truncate">
+                        {tool.description}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { ChatFab } from './ChatFab'
+export { ChatPanel } from './ChatPanel'