spine-framework 0.1.0

package/.framework/src/components/layout/AppShell.tsx

@@ -0,0 +1,91 @@
+/**
+ * @module src/components/layout/AppShell
+ * @audience installer
+ * @layer frontend-component
+ * @stability stable
+ *
+ * Application shell with Sidebar-05 layout for professional SaaS look.
+ * Wraps page content with collapsible sidebar navigation.
+ */
+
+import * as React from "react"
+import { Link } from 'react-router-dom'
+import { SidebarProvider, SidebarInset, SidebarTrigger } from "../ui/sidebar"
+import { Separator } from "../ui/separator"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../ui/breadcrumb"
+
+interface AppShellProps {
+  sidebar: React.ReactNode
+  children: React.ReactNode
+  breadcrumbs?: { title: string; url?: string }[]
+  headerActions?: React.ReactNode
+}
+
+export function AppShell({
+  sidebar,
+  children,
+  breadcrumbs,
+  headerActions,
+}: AppShellProps) {
+  return (
+    <SidebarProvider>
+      {sidebar}
+      <SidebarInset>
+        {/* Header */}
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            {breadcrumbs && (
+              <Breadcrumb>
+                <BreadcrumbList>
+                  {breadcrumbs.map((crumb, index) => (
+                    <React.Fragment key={crumb.title}>
+                      <BreadcrumbItem
+                        className={
+                          index === breadcrumbs.length - 1
+                            ? "hidden md:block"
+                            : ""
+                        }
+                      >
+                        {index === breadcrumbs.length - 1 ? (
+                          <BreadcrumbPage>{crumb.title}</BreadcrumbPage>
+                        ) : (
+                          <BreadcrumbLink asChild>
+                            <Link to={crumb.url || "#"}>
+                              {crumb.title}
+                            </Link>
+                          </BreadcrumbLink>
+                        )}
+                      </BreadcrumbItem>
+                      {index < breadcrumbs.length - 1 && (
+                        <BreadcrumbSeparator className="hidden md:block" />
+                      )}
+                    </React.Fragment>
+                  ))}
+                </BreadcrumbList>
+              </Breadcrumb>
+            )}
+          </div>
+          {headerActions && (
+            <div className="ml-auto flex items-center gap-2 px-4">
+              {headerActions}
+            </div>
+          )}
+        </header>
+
+        {/* Main Content */}
+        <main className="flex-1 overflow-auto p-4 md:p-6 lg:p-8">
+          {children}
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

package/.framework/src/components/layout/Header.tsx

@@ -0,0 +1,88 @@
+/**
+ * @module src/components/layout/Header
+ * @audience installer
+ * @layer frontend-component
+ * @stability stable
+ *
+ * Sticky top bar rendered inside the main content area. Contains:
+ * - **Mobile hamburger** (`Bars3Icon`) — visible below `lg` breakpoint;
+ *   calls `onMenuClick` to open the slide-over sidebar
+ * - **Search input** — hidden on small screens (placeholder only; not wired)
+ * - **Notification bell** — placeholder; not yet wired to a backend
+ * - **User avatar + name** — derived from `user.full_name` / `user.email`
+ *
+ * @seeAlso src/components/layout/Layout.tsx (mounts this component)
+ * @seeAlso src/types/auth.ts (User)
+ */
+
+import { Menu, Bell, Search, User } from 'lucide-react';
+import { User } from '../../types/auth'
+
+/**
+ * Props for `Header`.
+ *
+ * @prop onMenuClick - Callback to open the mobile sidebar
+ * @prop user - Currently logged-in user (null while loading)
+ */
+interface HeaderProps {
+  onMenuClick: () => void
+  user: User | null
+}
+
+/**
+ * Sticky top bar.
+ *
+ * @param props - `HeaderProps`
+ * @returns Header element with menu toggle, search, notifications, and avatar
+ * @sideEffects none (delegates menu open to `onMenuClick`)
+ */
+export function Header({ onMenuClick, user }: HeaderProps) {
+  return (
+    <header className="sticky top-0 z-20 flex h-14 shrink-0 items-center gap-4 border-b border-slate-200 bg-white/80 backdrop-blur-md px-4 sm:px-6 lg:pl-72 lg:pr-8">
+      {/* Logo + Mobile hamburger — only visible below lg */}
+      <div className="flex items-center gap-3">
+        <button
+          onClick={onMenuClick}
+          className="rounded-md p-1.5 text-slate-500 hover:bg-slate-100 hover:text-slate-700 transition-colors lg:hidden"
+          aria-label="Open menu"
+        >
+          <Menu className="h-5 w-5" />
+        </button>
+              </div>
+
+      {/* Spacer */}
+      <div className="flex-1" />
+
+      {/* Right actions */}
+      <div className="flex items-center gap-3">
+        {/* Search */}
+        <div className="relative hidden sm:block">
+          <MagnifyingGlassIcon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+          <input
+            type="text"
+            placeholder="Search..."
+            className="h-9 w-48 rounded-lg border border-slate-200 bg-slate-50 pl-9 pr-3 text-sm text-slate-900 placeholder:text-slate-400 focus:border-accent-blue focus:bg-white focus:outline-none focus:ring-1 focus:ring-accent-blue transition-colors"
+          />
+        </div>
+
+        {/* Notifications */}
+        <button
+          className="relative rounded-lg p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors"
+          aria-label="Notifications"
+        >
+          <Bell className="h-5 w-5" />
+        </button>
+
+        {/* User avatar */}
+        <div className="flex items-center gap-2 pl-2 border-l border-slate-200">
+          <div className="flex h-7 w-7 items-center justify-center rounded-full bg-navy text-xs font-medium text-white">
+            {user?.full_name?.charAt(0) || user?.email?.charAt(0) || '?'}
+          </div>
+          <span className="hidden sm:block text-sm font-medium text-slate-700">
+            {user?.full_name}
+          </span>
+        </div>
+      </div>
+    </header>
+  )
+}

package/.framework/src/components/layout/Layout.tsx

@@ -0,0 +1,95 @@
+/**
+ * @module src/components/layout/Layout
+ * @audience installer
+ * @layer frontend-component
+ * @stability stable
+ *
+ * Root app shell providing the two-pane admin layout:
+ * - **Desktop (`lg+`):** fixed 60-wide `<Sidebar>` on the left, scrollable
+ *   main content area padded with `lg:pl-60`.
+ * - **Mobile (`< lg`):** top bar with hamburger button that opens a
+ *   slide-over `<Sidebar>` with a backdrop overlay.
+ *
+ * `isActive` is computed from the current `location.pathname` and passed
+ * to `SidebarContent` for active-link highlighting.
+ *
+ * @seeAlso src/components/layout/Sidebar.tsx
+ * @seeAlso src/contexts/AuthContext.tsx (provides `user` and `logout`)
+ */
+
+import React, { useState } from 'react'
+import { Sidebar, SidebarContent } from './Sidebar'
+import { useAuth } from '../../contexts/AuthContext'
+import { useLocation } from 'react-router-dom'
+
+/** Props for `Layout`. */
+interface LayoutProps {
+  children: React.ReactNode
+}
+
+/**
+ * Root two-pane admin shell.
+ *
+ * @param props - `LayoutProps`
+ * @returns Full-page layout with sidebar + main content area
+ * @sideEffects none (sidebar open state is local)
+ */
+export function Layout({ children }: LayoutProps) {
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+  const { user, logout } = useAuth()
+  const location = useLocation()
+
+  const isActive = (href: string) =>
+    location.pathname === href || location.pathname.startsWith(href + '/')
+
+  return (
+    <div className="min-h-screen bg-[#F2F3F8] flex lg:top-0">
+      {/* Mobile overlay */}
+      {sidebarOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40 bg-slate-900/30 backdrop-blur-sm lg:hidden"
+            onClick={() => setSidebarOpen(false)}
+          />
+          <Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+        </>
+      )}
+
+      {/* Desktop sidebar — visible at lg+ */}
+      <aside className="hidden lg:flex lg:fixed lg:inset-y-0 lg:left-0 lg:z-30 lg:w-60 lg:flex-col lg:shrink-0 bg-white border-r border-slate-200 lg:top-0">
+        <SidebarContent
+          isActive={isActive}
+          user={user}
+          logout={logout}
+          onClose={() => {}}
+        />
+      </aside>
+
+      {/* Mobile sidebar with menu button */}
+      <div className="lg:hidden flex items-center justify-between p-4 bg-white border-b border-slate-200">
+        <button
+          onClick={() => setSidebarOpen(true)}
+          className="rounded-md p-2 text-slate-500 hover:bg-slate-100 hover:text-slate-700"
+          aria-label="Open menu"
+        >
+          <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </button>
+        <div className="flex items-center gap-3">
+          <img src="/spine-logo.jpg" alt="Spine Framework" className="h-8 w-auto" />
+          <span className="text-lg font-semibold tracking-tight text-slate-900">Spine Framework</span>
+        </div>
+      </div>
+
+      {/* Main content area */}
+      <div className="flex-1 flex flex-col min-w-0 lg:pl-60">
+        <main className="flex-1 py-6 px-4 sm:px-6 lg:px-8 xl:px-12">
+          <div className="max-w-6xl mx-auto">
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}

package/.framework/src/components/layout/Sidebar.tsx

@@ -0,0 +1,329 @@
+import { useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { useAuth } from '../../contexts/AuthContext'
+import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover'
+import { 
+  Home, 
+  Box, 
+  Users, 
+  Settings, 
+  FileText, 
+  Sparkles, 
+  LogOut, 
+  Building2, 
+  RefreshCw, 
+  Zap, 
+  Clock, 
+  ChevronDown, 
+  ChevronRight, 
+  X, 
+  Link as LinkIcon, 
+  User, 
+  MoreVertical, 
+  ShieldCheck, 
+  Key, 
+  FlaskConical, 
+  BarChart3, 
+  Bell
+} from 'lucide-react'
+
+interface SidebarProps {
+  open: boolean
+  onClose: () => void
+}
+
+const navigation = [
+  { name: 'Dashboard', href: '/spine-framework/admin/configs/types', icon: Home },
+]
+
+const configsNavigation = [
+  { name: 'Item Types', href: '/spine-framework/admin/configs/types', icon: Box },
+  { divider: true },
+  { name: 'Apps', href: '/spine-framework/admin/configs/apps', icon: Settings },
+  { name: 'Roles', href: '/spine-framework/admin/configs/roles', icon: ShieldCheck },
+  { divider: true },
+  { name: 'AI Agents', href: '/spine-framework/admin/configs/ai-agents', icon: Sparkles },
+  { name: 'Prompt Configs', href: '/spine-framework/admin/configs/prompts', icon: FileText },
+  { name: 'Embeddings', href: '/spine-framework/admin/configs/embeddings', icon: FileText },
+  { divider: true },
+  { name: 'Pipelines', href: '/spine-framework/admin/configs/pipelines', icon: RefreshCw },
+  { name: 'Triggers', href: '/spine-framework/admin/configs/triggers', icon: Zap },
+  { name: 'Timers', href: '/spine-framework/admin/configs/timers', icon: Clock },
+  { divider: true },
+  { name: 'Integrations', href: '/spine-framework/admin/configs/integrations', icon: LinkIcon },
+  { name: 'API Keys', href: '/spine-framework/admin/configs/api-keys', icon: Key },
+] as const
+
+const observabilityNavigation = [
+  { name: 'Dashboard', href: '/spine-framework/admin/observability', icon: BarChart3 },
+  { name: 'Alerts', href: '/spine-framework/admin/observability/alerts', icon: Bell },
+  { name: 'Executions', href: '/spine-framework/admin/observability/executions', icon: FlaskConical },
+  { name: 'Logs', href: '/spine-framework/admin/observability/logs', icon: FileText },
+]
+
+// Database entities that should be shown in runtime navigation
+const runtimeEntities = [
+  { name: 'Items', href: '/spine-framework/admin/runtime/items', icon: Box },
+  { name: 'Accounts', href: '/spine-framework/admin/runtime/accounts', icon: Building2 },
+  { name: 'People', href: '/spine-framework/admin/runtime/people', icon: User },
+  { name: 'Person Types', href: '/spine-framework/admin/runtime/person-types', icon: Users },
+]
+
+function classNames(...classes: (string | false | undefined)[]) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export function Sidebar({ open, onClose }: SidebarProps) {
+  return (
+    <>
+      {/* Mobile sidebar */}
+      <div className={classNames(open && 'fixed inset-0 z-40 flex')}> 
+        {open && (
+          <div className="fixed inset-0 z-40 flex">
+            <div 
+              className="fixed inset-0 bg-black/50 transition-opacity" 
+              onClick={onClose}
+            />
+            <div className="relative flex w-full max-w-xs flex-1 flex-col bg-sidebar pb-4">
+              <div className="absolute right-0 top-0 -mr-12 pt-2">
+                <button
+                  type="button"
+                  className="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+                  onClick={onClose}
+                >
+                  <span className="sr-only">Close sidebar</span>
+                  <X className="h-6 w-6 text-white" aria-hidden="true" />
+                </button>
+              </div>
+              <div className="h-0 flex-1 overflow-y-auto pt-5">
+                <div className="flex flex-shrink-0 items-center px-4">
+                  <span className="text-xl font-bold text-sidebar-foreground">Spine</span>
+                </div>
+                <SidebarContent onNavClick={onClose} />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
+
+interface SidebarContentProps {
+  onNavClick?: () => void
+}
+
+export function SidebarContent({ onNavClick }: SidebarContentProps) {
+  const location = useLocation()
+  const { user, logout } = useAuth()
+  const isSystemAdmin = user?.roles?.includes('system_admin')
+
+  // Collapsible sections state
+  const [configsOpen, setConfigsOpen] = useState(() => 
+    location.pathname.includes('/admin/configs')
+  )
+  const [runtimeOpen, setRuntimeOpen] = useState(() => 
+    location.pathname.includes('/admin/runtime')
+  )
+  const [observabilityOpen, setObservabilityOpen] = useState(() =>
+    location.pathname.includes('/admin/observability')
+  )
+
+  const isActive = (href: string) => {
+    return location.pathname === href || location.pathname.startsWith(href + '/')
+  }
+
+  return (
+    <nav className="mt-5 flex flex-1 flex-col px-2">
+      {/* Main nav */}
+      <div className="space-y-1">
+        {navigation.map((item) => (
+          <Link
+            key={item.name}
+            to={item.href}
+            onClick={onNavClick}
+            className={classNames(
+              isActive(item.href)
+                ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+              'group flex items-center rounded-md px-2 py-2 text-sm font-medium'
+            )}
+          >
+            <item.icon
+              className={classNames(
+                isActive(item.href) ? 'text-sidebar-accent-foreground' : 'text-sidebar-foreground',
+                'mr-3 h-5 w-5 flex-shrink-0'
+              )}
+              aria-hidden="true"
+            />
+            {item.name}
+          </Link>
+        ))}
+      </div>
+
+      {/* Configs Section */}
+      {isSystemAdmin && (
+        <>
+          <div className="mt-6">
+            <button
+              onClick={() => setConfigsOpen(!configsOpen)}
+              className="flex w-full items-center justify-between px-2 py-2 text-sm font-medium text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground rounded-md"
+            >
+              <span>Configuration</span>
+              {configsOpen ? (
+                <ChevronDown className="h-4 w-4" />
+              ) : (
+                <ChevronRight className="h-4 w-4" />
+              )}
+            </button>
+            
+            {configsOpen && (
+              <div className="mt-1 space-y-1">
+                {configsNavigation.map((item, index) => (
+                  'divider' in item ? (
+                    <div key={`divider-${index}`} className="my-2 border-t border-sidebar-border" />
+                  ) : (
+                    <Link
+                      key={item.name}
+                      to={item.href}
+                      onClick={onNavClick}
+                      className={classNames(
+                        isActive(item.href)
+                          ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                          : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                        'group flex items-center rounded-md px-2 py-2 text-sm font-medium pl-4'
+                      )}
+                    >
+                      <item.icon
+                        className={classNames(
+                          isActive(item.href) ? 'text-sidebar-accent-foreground' : 'text-sidebar-foreground',
+                          'mr-3 h-4 w-4 flex-shrink-0'
+                        )}
+                        aria-hidden="true"
+                      />
+                      {item.name}
+                    </Link>
+                  )
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Runtime Section */}
+          <div className="mt-4">
+            <button
+              onClick={() => setRuntimeOpen(!runtimeOpen)}
+              className="flex w-full items-center justify-between px-2 py-2 text-sm font-medium text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground rounded-md"
+            >
+              <span>Data</span>
+              {runtimeOpen ? (
+                <ChevronDown className="h-4 w-4" />
+              ) : (
+                <ChevronRight className="h-4 w-4" />
+              )}
+            </button>
+            
+            {runtimeOpen && (
+              <div className="mt-1 space-y-1">
+                {runtimeEntities.map((item) => (
+                  <Link
+                    key={item.name}
+                    to={item.href}
+                    onClick={onNavClick}
+                    className={classNames(
+                      isActive(item.href)
+                        ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                        : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                      'group flex items-center rounded-md px-2 py-2 text-sm font-medium pl-4'
+                    )}
+                  >
+                    <item.icon
+                      className={classNames(
+                        isActive(item.href) ? 'text-sidebar-accent-foreground' : 'text-sidebar-foreground',
+                        'mr-3 h-4 w-4 flex-shrink-0'
+                      )}
+                      aria-hidden="true"
+                    />
+                    {item.name}
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Observability Section */}
+          <div className="mt-4">
+            <button
+              onClick={() => setObservabilityOpen(!observabilityOpen)}
+              className="flex w-full items-center justify-between px-2 py-2 text-sm font-medium text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground rounded-md"
+            >
+              <span>Observability</span>
+              {observabilityOpen ? (
+                <ChevronDown className="h-4 w-4" />
+              ) : (
+                <ChevronRight className="h-4 w-4" />
+              )}
+            </button>
+            
+            {observabilityOpen && (
+              <div className="mt-1 space-y-1">
+                {observabilityNavigation.map((item) => (
+                  <Link
+                    key={item.name}
+                    to={item.href}
+                    onClick={onNavClick}
+                    className={classNames(
+                      isActive(item.href)
+                        ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                        : 'text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                      'group flex items-center rounded-md px-2 py-2 text-sm font-medium pl-4'
+                    )}
+                  >
+                    <item.icon
+                      className={classNames(
+                        isActive(item.href) ? 'text-sidebar-accent-foreground' : 'text-sidebar-foreground',
+                        'mr-3 h-4 w-4 flex-shrink-0'
+                      )}
+                      aria-hidden="true"
+                    />
+                    {item.name}
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+
+      {/* User section */}
+      <div className="mt-auto border-t border-sidebar-border pt-4">
+        <Popover>
+          <PopoverTrigger asChild>
+            <button className="flex w-full items-center gap-3 rounded-md px-2 py-2 text-sm font-medium text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-sidebar-primary text-sidebar-primary-foreground">
+                <User className="h-4 w-4" />
+              </div>
+              <div className="flex-1 text-left">
+                <p className="truncate text-sm font-medium">{user?.email || 'User'}</p>
+              </div>
+              <MoreVertical className="h-4 w-4" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-56">
+            <div className="space-y-1">
+              <button
+                onClick={() => {
+                  logout()
+                }}
+                className="flex w-full items-center rounded-md px-2 py-2 text-sm font-medium text-destructive hover:bg-destructive/10"
+              >
+                <LogOut className="mr-2 h-4 w-4" />
+                Sign out
+              </button>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </nav>
+  )
+}

package/.framework/src/components/runtime/DataDetailHeader.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { Button } from '../ui/button'
+import * as Icons from 'lucide-react'
+
+interface DataDetailHeaderProps {
+  entity: string
+  icon: string
+  title: string
+  isEditing: boolean
+  isCreating: boolean
+  onEdit: () => void
+  onSave: () => void
+  onCancel: () => void
+  onDelete?: () => void
+  saving?: boolean
+  deleting?: boolean
+}
+
+export function DataDetailHeader({
+  entity,
+  icon,
+  title,
+  isEditing,
+  isCreating,
+  onEdit,
+  onSave,
+  onCancel,
+  onDelete,
+  saving,
+  deleting
+}: DataDetailHeaderProps) {
+  const IconComponent = (Icons as Record<string, React.ComponentType<{ className?: string }>>)[icon] || Icons.Box
+  
+  return (
+    <div className="flex justify-between items-start">
+      <div className="flex items-center gap-3">
+        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+          <IconComponent className="h-6 w-6 text-primary" />
+        </div>
+        <div>
+          <h1 className="text-xl font-semibold text-foreground">
+            {title}
+          </h1>
+          <p className="mt-0.5 text-sm text-muted-foreground capitalize">
+            {isCreating ? `Create new ${entity.slice(0, -1)}` : entity}
+          </p>
+        </div>
+      </div>
+      
+      <div className="flex items-center gap-2">
+        {isEditing ? (
+          <>
+            <Button variant="secondary" onClick={onCancel}>
+              Cancel
+            </Button>
+            <Button onClick={onSave} disabled={saving}>
+              {saving ? 'Saving...' : isCreating ? 'Create' : 'Save'}
+            </Button>
+          </>
+        ) : (
+          <>
+            <Button variant="secondary" onClick={onEdit}>
+              <Icons.Pencil className="h-4 w-4 mr-1" />
+              Edit
+            </Button>
+            {onDelete && (
+              <Button variant="destructive" onClick={onDelete} disabled={deleting}>
+                <Icons.Trash2 className="h-4 w-4 mr-1" />
+                Delete
+              </Button>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}