@hed-hog/core 0.0.349 → 0.0.351

package/hedhog/frontend/app/account/components/mcp-tokens.tsx.ejs

@@ -0,0 +1,285 @@
+'use client';
+
+import { PaginationFooter } from '@/components/entity-list/pagination-footer';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { usePagination } from '@/hooks/use-pagination';
+import { formatDateTime } from '@/lib/format-date';
+import { useApp } from '@hed-hog/next-app-provider';
+import { Check, Copy, KeyRound, Plus, Trash2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+type McpApiKey = {
+  id: number;
+  name: string;
+  token_prefix: string;
+  last_used_at: string | null;
+  expires_at: string | null;
+  created_at: string;
+};
+
+export function McpTokens() {
+  const { request, getSettingValue } = useApp();
+  const t = useTranslations('core.McpTokens');
+
+  const [keyToRevoke, setKeyToRevoke] = useState<number | null>(null);
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [newKeyName, setNewKeyName] = useState('');
+  const [createdToken, setCreatedToken] = useState<string | null>(null);
+  const [isCopied, setIsCopied] = useState(false);
+  const [isCopiedUrl, setIsCopiedUrl] = useState(false);
+  const {
+    items: keys,
+    refetch,
+    page,
+    setPage,
+    totalItems,
+    pageSize,
+    setPageSize,
+  } = usePagination({ url: '/mcp/api-keys' });
+
+  const apiUrl = getSettingValue('api-url') as string | null;
+  const mcpUrl = apiUrl ? `${apiUrl.replace(/\/$/, '')}/mcp` : '/mcp';
+
+  const handleCreate = async () => {
+    if (!newKeyName.trim()) return;
+    try {
+      const res = await request<McpApiKey & { rawToken: string }>({
+        url: '/mcp/api-keys',
+        method: 'POST',
+        data: { name: newKeyName.trim() },
+      });
+      setCreatedToken(res.data.rawToken);
+      setNewKeyName('');
+      refetch();
+    } catch {
+      toast.error(t('createFailure'));
+    }
+  };
+
+  const handleRevoke = async (id: number) => {
+    try {
+      await request({ url: `/mcp/api-keys/${id}`, method: 'DELETE' });
+      setKeyToRevoke(null);
+      refetch();
+      toast.success(t('revokeSuccess'));
+    } catch {
+      toast.error(t('revokeFailure'));
+    }
+  };
+
+  const handleCopyToken = () => {
+    if (!createdToken) return;
+    navigator.clipboard.writeText(createdToken);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2000);
+  };
+
+  const handleCopyUrl = () => {
+    navigator.clipboard.writeText(mcpUrl);
+    setIsCopiedUrl(true);
+    setTimeout(() => setIsCopiedUrl(false), 2000);
+  };
+
+  const handleCloseCreateDialog = () => {
+    setIsCreateDialogOpen(false);
+    setCreatedToken(null);
+    setNewKeyName('');
+    setIsCopied(false);
+  };
+
+  return (
+    <>
+      <Card>
+        <CardHeader className="flex flex-row items-start justify-between">
+          <div>
+            <CardTitle>{t('title')}</CardTitle>
+            <CardDescription className="mt-1">{t('description')}</CardDescription>
+          </div>
+          <Button size="sm" onClick={() => setIsCreateDialogOpen(true)}>
+            <Plus className="size-4 mr-2" />
+            {t('createToken')}
+          </Button>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center gap-2 rounded-md border bg-muted/40 px-3 py-2">
+            <span className="text-sm text-muted-foreground shrink-0">{t('mcpUrlLabel')}:</span>
+            <code className="flex-1 text-sm break-all">{mcpUrl}</code>
+            <Button variant="ghost" size="icon" className="size-7 shrink-0" onClick={handleCopyUrl}>
+              {isCopiedUrl ? <Check className="size-3.5 text-green-500" /> : <Copy className="size-3.5" />}
+            </Button>
+          </div>
+
+          {(keys as McpApiKey[]).length === 0 ? (
+            <div className="flex flex-col items-center gap-2 py-8 text-muted-foreground">
+              <KeyRound className="size-8 opacity-40" />
+              <p className="text-sm">{t('noTokens')}</p>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('name')}</TableHead>
+                  <TableHead>{t('tokenPrefix')}</TableHead>
+                  <TableHead>{t('lastUsed')}</TableHead>
+                  <TableHead>{t('createdAt')}</TableHead>
+                  <TableHead className="w-15" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {(keys as McpApiKey[]).map((key) => (
+                  <TableRow key={key.id}>
+                    <TableCell className="font-medium">{key.name}</TableCell>
+                    <TableCell>
+                      <code className="rounded bg-muted px-1.5 py-0.5 text-xs">
+                        {key.token_prefix}…
+                      </code>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground text-sm">
+                      {key.last_used_at ? formatDateTime(key.last_used_at, getSettingValue) : t('never')}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground text-sm">
+                      {formatDateTime(key.created_at, getSettingValue)}
+                    </TableCell>
+                    <TableCell>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="size-8 text-destructive hover:text-destructive"
+                        onClick={() => setKeyToRevoke(key.id)}
+                      >
+                        <Trash2 className="size-4" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+
+          <PaginationFooter
+            currentPage={page}
+            pageSize={pageSize}
+            totalItems={totalItems}
+            onPageChange={setPage}
+            onPageSizeChange={(newSize) => {
+              setPageSize(newSize);
+              setPage(1);
+            }}
+            pageSizeOptions={[10]}
+          />
+        </CardContent>
+      </Card>
+
+      {/* Revoke confirmation */}
+      <AlertDialog open={keyToRevoke !== null} onOpenChange={(open) => !open && setKeyToRevoke(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('revokeTokenTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>{t('revokeTokenDescription')}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() => keyToRevoke !== null && handleRevoke(keyToRevoke)}
+            >
+              {t('revokeConfirm')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Create token dialog */}
+      <Dialog open={isCreateDialogOpen} onOpenChange={(open) => !open && handleCloseCreateDialog()}>
+        <DialogContent className="sm:max-w-md">
+          {createdToken === null ? (
+            <>
+              <DialogHeader>
+                <DialogTitle>{t('createTokenTitle')}</DialogTitle>
+                <DialogDescription>{t('createTokenDescription')}</DialogDescription>
+              </DialogHeader>
+              <div className="space-y-2 py-2">
+                <Label htmlFor="token-name">{t('tokenNameLabel')}</Label>
+                <Input
+                  id="token-name"
+                  placeholder={t('tokenNamePlaceholder')}
+                  value={newKeyName}
+                  onChange={(e) => setNewKeyName(e.target.value)}
+                  onKeyDown={(e) => e.key === 'Enter' && handleCreate()}
+                />
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={handleCloseCreateDialog}>{t('cancel')}</Button>
+                <Button onClick={handleCreate} disabled={!newKeyName.trim()}>
+                  {t('createToken')}
+                </Button>
+              </DialogFooter>
+            </>
+          ) : (
+            <>
+              <DialogHeader>
+                <DialogTitle>{t('tokenCreatedTitle')}</DialogTitle>
+              </DialogHeader>
+              <div className="space-y-3 py-2">
+                <div className="rounded-md border border-yellow-300 bg-yellow-50 px-3 py-2 text-sm text-yellow-800 dark:border-yellow-700 dark:bg-yellow-950 dark:text-yellow-300">
+                  {t('tokenCreatedWarning')}
+                </div>
+                <div className="space-y-1">
+                  <Label>{t('tokenCreatedLabel')}</Label>
+                  <div className="flex items-center gap-2">
+                    <code className="flex-1 rounded border bg-muted px-3 py-2 text-xs break-all">
+                      {createdToken}
+                    </code>
+                    <Button variant="outline" size="icon" onClick={handleCopyToken} className="shrink-0">
+                      {isCopied ? <Check className="size-4 text-green-500" /> : <Copy className="size-4" />}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <DialogFooter>
+                <Button onClick={handleCloseCreateDialog}>{t('closeDialog')}</Button>
+              </DialogFooter>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/hedhog/frontend/app/account/layout.tsx.ejs

@@ -1,14 +1,10 @@
 'use client';
 
 import { PageHeader } from '@/components/entity-list';
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { cn } from '@/lib/utils';
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip';
-import {
-  Link,
+  KeyRound,
+  Link as LinkIcon,
   Lock,
   LucideIcon,
   Mail,
@@ -17,7 +13,8 @@ import {
   User,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { usePathname, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import { ReactNode } from 'react';
 
 type LayoutProps = {
@@ -32,7 +29,6 @@ type TabConfig = {
 
 export default function AccountLayout({ children }: LayoutProps) {
   const pathname = usePathname();
-  const router = useRouter();
   const t = useTranslations('core.Profile');
 
   const tabs: TabConfig[] = [
@@ -40,26 +36,13 @@ export default function AccountLayout({ children }: LayoutProps) {
     { value: 'password', label: t('tabPassword'), icon: Lock },
     { value: 'email', label: t('tabEmail'), icon: Mail },
     { value: '2fa', label: t('tab2fa'), icon: Shield },
-    { value: 'accounts', label: t('tabAccounts'), icon: Link },
+    { value: 'accounts', label: t('tabAccounts'), icon: LinkIcon },
     { value: 'sessions', label: t('tabSessions'), icon: Smartphone },
+    { value: 'mcp-tokens', label: t('tabMcpTokens'), icon: KeyRound },
   ];
 
-  const getCurrentTab = () => {
-    if (pathname.includes('/profile')) return 'profile';
-    if (pathname.includes('/password')) return 'password';
-    if (pathname.includes('/email')) return 'email';
-    if (pathname.includes('/2fa')) return '2fa';
-    if (pathname.includes('/accounts')) return 'accounts';
-    if (pathname.includes('/sessions')) return 'sessions';
-    return 'profile';
-  };
-
-  const handleTabChange = (value: string) => {
-    router.push(`/core/account/${value}`);
-  };
-
   return (
-    <div className="flex flex-col pl-4 h-screen">
+    <div className="flex min-w-0 flex-col overflow-x-hidden px-4">
       <PageHeader
         breadcrumbs={[
           { label: t('home'), href: '/' },
@@ -68,38 +51,32 @@ export default function AccountLayout({ children }: LayoutProps) {
         title={t('title')}
         description={t('description')}
       />
-      <div className="py-2">
-        <Tabs value={getCurrentTab()} onValueChange={handleTabChange}>
-          <TabsList className="grid w-full grid-cols-6 lg:w-fit gap-1 rounded-sm">
-            {tabs.map((tab) => {
-              const Icon = tab.icon;
-              const isActive = getCurrentTab() === tab.value;
 
-              return (
-                <Tooltip key={tab.value}>
-                  <TooltipTrigger asChild>
-                    <TabsTrigger
-                      value={tab.value}
-                      className={`gap-2 cursor-pointer hover:bg-primary/10 active:bg-primary/20 rounded-sm ${isActive ? 'text-primary' : 'text-primary/50'}`}
-                    >
-                      <Icon className="size-4" />
-                      <span
-                        className={`hidden sm:inline ${isActive ? 'text-primary' : 'text-primary/50'}`}
-                      >
-                        {tab.label}
-                      </span>
-                    </TabsTrigger>
-                  </TooltipTrigger>
-                  <TooltipContent side="bottom" className="block sm:hidden">
-                    {tab.label}
-                  </TooltipContent>
-                </Tooltip>
-              );
-            })}
-          </TabsList>
-          <div className="mt-2">{children}</div>
-        </Tabs>
+      <div className="sticky top-0 z-20 -mx-4 mb-6 border-b border-border bg-background/95 px-4 backdrop-blur supports-backdrop-filter:bg-background/80">
+        <nav className="flex items-end gap-1 overflow-x-auto" aria-label="Account tabs">
+          {tabs.map((tab) => {
+            const Icon = tab.icon;
+            const isActive = pathname.includes(`/${tab.value}`);
+            return (
+              <Link
+                key={tab.value}
+                href={`/core/account/${tab.value}`}
+                className={cn(
+                  'flex shrink-0 items-center gap-2 border-b-2 px-3 py-3 text-sm font-medium whitespace-nowrap transition-colors',
+                  isActive
+                    ? 'border-primary text-primary'
+                    : 'border-transparent text-muted-foreground hover:border-muted-foreground hover:text-foreground'
+                )}
+              >
+                <Icon className="size-4" />
+                <span className="hidden sm:inline">{tab.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
       </div>
+
+      <div className="min-w-0 pb-25">{children}</div>
     </div>
   );
 }

package/hedhog/frontend/app/account/mcp-tokens/page.tsx.ejs

@@ -0,0 +1,5 @@
+import { McpTokens } from '../components/mcp-tokens';
+
+export default function McpTokensPage() {
+  return <McpTokens />;
+}

package/hedhog/frontend/app/ai_agent/page.tsx.ejs

@@ -35,9 +35,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetFooter,
   SheetHeader,
@@ -451,7 +451,14 @@ export default function AiAgentPage() {
           }
         }}
       >
-        <SheetContent side="right" className="sm:max-w-xl overflow-y-auto">
+        <ResizableSheetContent
+          sheetId="core-ai-agent-form-sheet"
+          defaultWidth={640}
+          minWidth={460}
+          maxWidth={980}
+          side="right"
+          className="sm:max-w-xl overflow-y-auto"
+        >
           <SheetHeader>
             <SheetTitle>
               {editingAgent ? t('editTitle') : t('createTitle')}
@@ -562,7 +569,7 @@ export default function AiAgentPage() {
               </SheetFooter>
             </form>
           </Form>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       <AlertDialog

package/hedhog/frontend/app/dashboard/dashboard-home-tabs.tsx.ejs

@@ -32,11 +32,11 @@ import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useDebounce } from '@/hooks/use-debounce';
@@ -1009,9 +1009,9 @@ export function DashboardHomeTabs() {
                             className="h-7 w-40"
                           />
                         ) : (
-                          <span className="block min-w-0 max-w-45 truncate">
-                            {getDashboardName(dashboard)}
-                          </span>
+                          <span className="block min-w-0 max-w-45 truncate">
+                            {getDashboardName(dashboard)}
+                          </span>
                         )}
                       </>
                     );
@@ -1025,7 +1025,7 @@ export function DashboardHomeTabs() {
                               onDrop={(event) =>
                                 void handleTabDrop(event, dashboard.slug)
                               }
-                              className="-mb-px flex min-h-9 shrink-0 items-center gap-2 rounded-b-none rounded-t-lg border border-b-0 border-border bg-background px-3 py-2 text-foreground shadow-none"
+                              className="-mb-px flex min-h-9 shrink-0 items-center gap-2 rounded-b-none rounded-t-lg border border-b-0 border-border bg-background px-3 py-2 text-foreground shadow-none"
                             >
                               {tabContent}
                             </div>
@@ -1042,7 +1042,7 @@ export function DashboardHomeTabs() {
                               }
                               onDragEnd={handleTabDragEnd}
                               className={cn(
-                                'dashboard-tab-trigger -mb-px mt-1 inline-flex h-9 shrink-0 cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-b-none rounded-t-lg border-none px-3 py-2 shadow-none data-[state=active]:shadow-none',
+                                'dashboard-tab-trigger -mb-px mt-1 inline-flex h-9 shrink-0 cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-b-none rounded-t-lg border-none px-3 py-2 shadow-none data-[state=active]:shadow-none',
                                 draggingDashboardSlug === dashboard.slug &&
                                   'opacity-70'
                               )}
@@ -1178,7 +1178,14 @@ export function DashboardHomeTabs() {
           }
         }}
       >
-        <SheetContent side="right" className="w-full sm:max-w-xl">
+        <ResizableSheetContent
+          sheetId="core-dashboard-home-create-sheet"
+          defaultWidth={640}
+          minWidth={460}
+          maxWidth={980}
+          side="right"
+          className="w-full sm:max-w-xl"
+        >
           <div className="flex h-full flex-col">
             <SheetHeader className="px-6 py-5 text-left">
               <SheetTitle>{t('newDashboardTitle')}</SheetTitle>
@@ -1378,7 +1385,7 @@ export function DashboardHomeTabs() {
               </Button>
             </div>
           </div>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       <Sheet
@@ -1391,7 +1398,14 @@ export function DashboardHomeTabs() {
           }
         }}
       >
-        <SheetContent side="right" className="w-full sm:max-w-xl">
+        <ResizableSheetContent
+          sheetId="core-dashboard-home-icon-sheet"
+          defaultWidth={640}
+          minWidth={460}
+          maxWidth={980}
+          side="right"
+          className="w-full sm:max-w-xl"
+        >
           <div className="flex h-full flex-col">
             <SheetHeader className="px-6 py-5 text-left">
               <SheetTitle>{t('changeDashboardIconTitle')}</SheetTitle>
@@ -1488,7 +1502,7 @@ export function DashboardHomeTabs() {
               </Button>
             </div>
           </div>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       <Sheet
@@ -1502,7 +1516,13 @@ export function DashboardHomeTabs() {
           }
         }}
       >
-        <SheetContent className="w-full sm:max-w-4xl">
+        <ResizableSheetContent
+          sheetId="core-dashboard-home-share-sheet"
+          defaultWidth={960}
+          minWidth={700}
+          maxWidth={1400}
+          className="w-full sm:max-w-4xl"
+        >
           <SheetHeader>
             <SheetTitle>
               {t('shareDashboardTitle', {
@@ -1519,7 +1539,7 @@ export function DashboardHomeTabs() {
               {t('shareRoleNotice')}
             </div>
 
-            <div className="grid flex-1 gap-4 overflow-hidden lg:grid-cols-2">
+            <div className="grid min-h-0 flex-1 gap-4 lg:grid-cols-2">
               <div className="flex min-h-0 flex-col rounded-lg border">
                 <div className="flex items-center justify-between border-b px-3 py-2">
                   <div>
@@ -1783,7 +1803,7 @@ export function DashboardHomeTabs() {
               </div>
             </div>
           </div>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>

package/hedhog/frontend/app/dashboard/management/tabs/components-tab.tsx.ejs

@@ -33,12 +33,12 @@ import {
 } from '@/components/ui/select';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Table,
   TableBody,
@@ -464,7 +464,7 @@ export function ComponentsTab() {
                       value={selectedLocale}
                       onValueChange={setSelectedLocale}
                     >
-                      <SelectTrigger className="w-[200px]">
+                      <SelectTrigger style={{ width: 200 }}>
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
@@ -725,7 +725,7 @@ export function ComponentsTab() {
               <TableHead>{t('size')}</TableHead>
               <TableHead>{t('resizable')}</TableHead>
               <TableHead>{t('role')}</TableHead>
-              <TableHead className="w-[100px]">{t('actions')}</TableHead>
+              <TableHead style={{ width: 100 }}>{t('actions')}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -1019,7 +1019,14 @@ export function ComponentsTab() {
           }
         }}
       >
-        <SheetContent side="right" className="sm:max-w-lg overflow-y-auto">
+        <ResizableSheetContent
+          sheetId="core-dashboard-components-role-sheet"
+          defaultWidth={560}
+          minWidth={420}
+          maxWidth={920}
+          side="right"
+          className="sm:max-w-lg overflow-y-auto"
+        >
           <SheetHeader>
             <SheetTitle>{t('addRole')}</SheetTitle>
             <SheetDescription>
@@ -1090,7 +1097,7 @@ export function ComponentsTab() {
             </Button>
             <Button onClick={handleAddRolesToComponent}>{t('save')}</Button>
           </SheetFooter>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
     </div>
   );