@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha.4

package/src/components/IconPickerDialog.tsx

@@ -0,0 +1,136 @@
+import { useQuery } from '@tanstack/react-query'
+import { Search } from 'lucide-react'
+import { useState } from 'react'
+import { useTRPC } from '~/api/infra/trpc'
+import { Button } from '~/ui/button'
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from '~/ui/dialog'
+import { Input } from '~/ui/input'
+import { ScrollArea } from '~/ui/scroll-area'
+
+interface IconPickerDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSelect: (iconName: string) => void
+  selectedIconName?: string
+}
+
+export function IconPickerDialog({
+  open,
+  onOpenChange,
+  onSelect,
+  selectedIconName,
+}: IconPickerDialogProps) {
+  const [search, setSearch] = useState('')
+  const trpc = useTRPC()
+
+  const queryOptions = trpc.icon.list.queryOptions()
+  const { data: icons = [], isLoading } = useQuery({
+    ...queryOptions,
+    enabled: open,
+  })
+
+  type IconData = (typeof icons)[number]
+
+  const filteredIcons = icons.filter((icon: IconData) =>
+    icon.name.toLowerCase().includes(search.toLowerCase()),
+  )
+
+  const handleSelect = (iconName: string) => {
+    onSelect(iconName)
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Select Icon</DialogTitle>
+          <DialogDescription>
+            Search and select an icon from the available icons
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search icons by name..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-10"
+          />
+        </div>
+
+        <ScrollArea className="flex-1 pr-4">
+          {isLoading ? (
+            <div className="text-center py-8 text-muted-foreground">Loading icons...</div>
+          ) : filteredIcons.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              {search ? `No icons found matching "${search}"` : 'No icons available'}
+            </div>
+          ) : (
+            <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-3 pb-4">
+              {filteredIcons.map((icon: IconData) => {
+                const isSelected = icon.name === selectedIconName
+                return (
+                  <button
+                    key={icon.id}
+                    type="button"
+                    onClick={() => handleSelect(icon.name)}
+                    className={`group relative flex flex-col items-center gap-2 p-3 rounded-lg border-2 transition-all hover:border-primary hover:shadow-md ${
+                      isSelected
+                        ? 'border-primary bg-primary/5'
+                        : 'border-border bg-background'
+                    }`}
+                    title={icon.name}
+                  >
+                    <div className="w-12 h-12 flex items-center justify-center">
+                      <img
+                        src={`/api/assets/${icon.id}?w=64`}
+                        alt={icon.name}
+                        className="max-w-full max-h-full object-contain"
+                      />
+                    </div>
+                    <span className="text-xs text-center line-clamp-2 w-full wrap-break-word">
+                      {icon.name}
+                    </span>
+                    {isSelected && (
+                      <div className="absolute top-1 right-1 bg-primary text-primary-foreground rounded-full p-0.5">
+                        <svg
+                          className="w-3 h-3"
+                          fill="none"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path d="M5 13l4 4L19 7" />
+                        </svg>
+                      </div>
+                    )}
+                  </button>
+                )
+              })}
+            </div>
+          )}
+        </ScrollArea>
+
+        <div className="flex justify-between items-center pt-2 border-t">
+          <span className="text-sm text-muted-foreground">
+            {filteredIcons.length} icon{filteredIcons.length !== 1 ? 's' : ''}
+            {search && ` matching "${search}"`}
+          </span>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/IconPickerField.tsx

@@ -0,0 +1,88 @@
+import { Image, X } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from '~/ui/button'
+import { Label } from '~/ui/label'
+import { IconPickerDialog } from './IconPickerDialog'
+
+interface IconPickerFieldProps {
+  label?: string
+  value?: string
+  onChange: (iconName: string | undefined) => void
+  placeholder?: string
+  required?: boolean
+}
+
+export function IconPickerField({
+  label = 'Icon',
+  value,
+  onChange,
+  placeholder = 'No icon selected',
+  required = false,
+}: IconPickerFieldProps) {
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  const handleClear = () => {
+    onChange(undefined)
+  }
+
+  return (
+    <div className="space-y-2">
+      {label && (
+        <Label>
+          {label}
+          {required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+      )}
+
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => setDialogOpen(true)}
+          className="flex-1 justify-start"
+        >
+          {value ? (
+            <div className="flex items-center gap-2">
+              <div className="w-6 h-6 flex items-center justify-center">
+                <img
+                  src={`/api/icons/${value}`}
+                  alt={value}
+                  className="max-w-full max-h-full object-contain"
+                  onError={(e) => {
+                    // Fallback if icon not found
+                    e.currentTarget.style.display = 'none'
+                  }}
+                />
+              </div>
+              <span className="truncate">{value}</span>
+            </div>
+          ) : (
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Image className="h-4 w-4" />
+              <span>{placeholder}</span>
+            </div>
+          )}
+        </Button>
+
+        {value && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={handleClear}
+            title="Clear icon"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      <IconPickerDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        onSelect={onChange}
+        selectedIconName={value}
+      />
+    </div>
+  )
+}

package/src/components/ThemeSwitcher.tsx

@@ -3,7 +3,7 @@
 import { Moon, Sun } from 'lucide-react'
 import { useTheme } from 'next-themes'
 
-import { Button } from '~/components/ui/button'
+import { Button } from '~/ui/button'
 
 export function ThemeSwitcher() {
   const { setTheme, theme } = useTheme()

package/src/index.css

@@ -1,5 +1,7 @@
 /* @import url(./modules/resourceJump/ui/JumpMainButton.css); */
 @import 'tailwindcss';
+/* Other module imports this css, and we need to tell tailwind to scan our tsx files */
+@source ".";
 
 /* @import 'tw-animate-css'; */
 
@@ -63,6 +65,12 @@
     --hopper: oklch(0.7488 0.149 130.38);
     --animation-btn: 0.25s;
     --btn-focus-scale: 0.95;
+    --eh-app-foreground: var(--foreground);
+    --eh-app-border: #26ff67;
+    --eh-env-foreground: var(--color-chart-1);
+    --eh-env-border: #2684ff;
+    --eh-context-foreground: #ff7926;
+    --eh-context-border: #ff7926;
   }
 
   /* https://tweakcn.com/editor/theme */
@@ -181,6 +189,12 @@
 
   --color-highlight: var(--highlight);
   --color-hopper: var(--hopper);
+  --color-eh-env-foreground: var(--eh-env-foreground);
+  --color-eh-env-border: var(--eh-env-border);
+  --color-eh-app-foreground: var(--eh-app-foreground);
+  --color-eh-app-border: var(--eh-app-border);
+  --color-eh-context-foreground: var(--eh-context-foreground);
+  --color-eh-context-border: var(--eh-context-border);
 
   --animate-button-pop: button-pop var(--animation-btn, 0.25s) ease-out;
 }

package/src/lib/getAppMode.ts

@@ -0,0 +1,5 @@
+import type { EhMode } from '@env-hopper/shared-core'
+
+export function getAppMode(): EhMode {
+  return import.meta.env.VITE_EH_MODE ?? 'catalog'
+}

package/src/main.tsx

@@ -1,16 +1,15 @@
 import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 // import { registerSW } from 'virtual:pwa-register';
-import './index.css'
 import { createBrowserHistory } from '@tanstack/react-router'
 import { createTRPCClient, httpBatchLink } from '@trpc/client'
 import { EhDb as DbClass } from './userDb/EhDb'
-import { PageUrlJumpPlugin } from './plugins/builtin/pageUrl/pageUrlJumpPlugin'
 import type { TRPCRouter } from '@env-hopper/backend-core'
 import type { EhPlugin } from './modules/pluginCore/types'
-import { createEhRouter } from '~/util/createEhRouter'
 import { createQueryClient } from '~/api/infra/createQueryClient'
 import { App } from '~/App'
+import { createEhRouter } from '~/util/createEhRouter'
+import './index.css'
 
 // registerSW();
 
@@ -23,8 +22,10 @@ const trpcClient = createTRPCClient<TRPCRouter>({
 })
 
 const db = new DbClass()
-const queryClient = createQueryClient({ trpcClient })
-const plugins: Array<EhPlugin> = [new PageUrlJumpPlugin()]
+const queryClient = createQueryClient({ trpcClient, db })
+const plugins: Array<EhPlugin> = [
+  // Future plugins can be added here
+]
 const router = createEhRouter({
   history: createBrowserHistory(),
   context: {
@@ -32,6 +33,9 @@ const router = createEhRouter({
     trpcClient,
     db,
     plugins,
+    boostrapHealth: {
+      bootstrapApiError: undefined,
+    },
   },
 })
 

package/src/modules/admin-base/components/AdminChat.tsx

@@ -0,0 +1,122 @@
+import { useChat } from '@ai-sdk/react'
+import { DefaultChatTransport } from 'ai'
+import { Send } from 'lucide-react'
+import type { FormEvent } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import { Button } from '~/ui/button'
+import { Input } from '~/ui/input'
+
+import { useAdminConfig } from '../context/AdminConfigContext'
+import { AdminWelcome } from './AdminWelcome'
+
+export function AdminChat() {
+  const config = useAdminConfig()
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const [input, setInput] = useState('')
+
+  // Use DefaultChatTransport which handles UI message stream format (tool calls, etc.)
+  const transport = useMemo(
+    () => new DefaultChatTransport({ api: config.chatApiUrl }),
+    [config.chatApiUrl],
+  )
+
+  const { messages, sendMessage, status, error } = useChat({
+    transport,
+  })
+
+  const isLoading = status === 'streaming' || status === 'submitted'
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages])
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    if (!input.trim() || isLoading) {
+      return
+    }
+    sendMessage({ text: input })
+    setInput('')
+  }
+
+  // Extract text content from message parts
+  const getMessageContent = (message: (typeof messages)[0]): string => {
+    return message.parts
+      .filter((part) => part.type === 'text')
+      .map((part) => part.text)
+      .join('')
+  }
+
+  return (
+    <div className="flex flex-col flex-1">
+      {/* Messages area */}
+      <div className="flex-1 overflow-y-auto">
+        {messages.length === 0 ? (
+          <AdminWelcome />
+        ) : (
+          <div className="max-w-3xl mx-auto space-y-4 py-4">
+            {messages.map((message) => (
+              <div
+                key={message.id}
+                className={`flex ${
+                  message.role === 'user' ? 'justify-end' : 'justify-start'
+                }`}
+              >
+                <div
+                  className={`max-w-[80%] rounded-lg px-4 py-2 ${
+                    message.role === 'user'
+                      ? 'bg-primary text-primary-foreground'
+                      : 'bg-muted text-foreground'
+                  }`}
+                >
+                  <pre className="whitespace-pre-wrap font-sans text-sm">
+                    {getMessageContent(message)}
+                  </pre>
+                </div>
+              </div>
+            ))}
+            {isLoading && (
+              <div className="flex justify-start">
+                <div className="bg-muted rounded-lg px-4 py-2">
+                  <span className="text-muted-foreground text-sm">
+                    Thinking...
+                  </span>
+                </div>
+              </div>
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+        )}
+      </div>
+
+      {/* Error display */}
+      {error && (
+        <div className="px-4 py-2 bg-destructive/10 border-t border-destructive/20">
+          <p className="text-destructive text-sm">Error: {error.message}</p>
+        </div>
+      )}
+
+      {/* Input area */}
+      <div className="border-t border-border p-4">
+        <form onSubmit={handleSubmit} className="max-w-3xl mx-auto">
+          <div className="flex gap-2">
+            <Input
+              type="text"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder="Type your message..."
+              disabled={isLoading}
+              className="flex-1"
+            />
+            <Button type="submit" disabled={isLoading || !input.trim()}>
+              <Send className="h-4 w-4" />
+              <span className="sr-only">Send</span>
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

package/src/modules/admin-base/components/AdminLayout.tsx

@@ -0,0 +1,105 @@
+import { Link } from '@tanstack/react-router'
+import {
+  ChevronLeft,
+  ChevronRight,
+  ImageIcon,
+  LayoutDashboard,
+  MessageSquare,
+} from 'lucide-react'
+import type { ReactNode } from 'react'
+import { useState } from 'react'
+import { cn } from '~/lib/utils'
+import { Button } from '~/ui/button'
+import { Breadcrumbs } from '~/ui/components/Breadcrumbs'
+import { MainLayout } from '~/ui/layout/MainLayout'
+
+export interface AdminLayoutProps {
+  children: ReactNode
+}
+
+interface NavItem {
+  name: string
+  path: string
+  icon: typeof MessageSquare
+}
+
+const navItems: Array<NavItem> = [
+  {
+    name: 'Chat',
+    path: '/admin/chat',
+    icon: MessageSquare,
+  },
+  {
+    name: 'Icons',
+    path: '/admin/icons',
+    icon: ImageIcon,
+  },
+  {
+    name: 'App For Catalog',
+    path: '/admin/app-for-catalog',
+    icon: LayoutDashboard,
+  },
+]
+
+export function AdminLayout({ children }: AdminLayoutProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+
+  return (
+    <MainLayout breadcrumbs={<Breadcrumbs />}>
+      <div className="flex gap-6 -mx-6 -my-6 flex-1">
+        {/* Left sidebar */}
+        <aside
+          className={cn(
+            'flex flex-col transition-all duration-300',
+            isCollapsed ? 'w-16' : 'w-64',
+          )}
+        >
+          <div className="p-4 flex items-center justify-between">
+            {!isCollapsed && <h1 className="text-2xl font-bold">Admin</h1>}
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsCollapsed(!isCollapsed)}
+              className={cn('h-8 w-8', isCollapsed && 'mx-auto')}
+            >
+              {isCollapsed ? (
+                <ChevronRight className="h-4 w-4" />
+              ) : (
+                <ChevronLeft className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
+          <nav className="flex-1 p-4 space-y-2">
+            {navItems.map((item) => {
+              const Icon = item.icon
+              return (
+                <Link key={item.path} to={item.path} className="block">
+                  {({ isActive }) => (
+                    <Button
+                      variant="ghost"
+                      className={cn(
+                        'w-full',
+                        isCollapsed ? 'justify-center px-2' : 'justify-start',
+                        isActive &&
+                          'bg-primary text-primary-foreground hover:bg-primary/90',
+                      )}
+                      title={isCollapsed ? item.name : undefined}
+                    >
+                      <Icon className={cn('w-4 h-4', !isCollapsed && 'mr-2')} />
+                      {!isCollapsed && <span>{item.name}</span>}
+                    </Button>
+                  )}
+                </Link>
+              )
+            })}
+          </nav>
+        </aside>
+
+        {/* Main content */}
+        <main className="flex-1 flex flex-col overflow-hidden min-w-0">
+          {children}
+        </main>
+      </div>
+    </MainLayout>
+  )
+}

package/src/modules/admin-base/components/AdminWelcome.tsx

@@ -0,0 +1,52 @@
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '~/ui/card'
+
+export function AdminWelcome() {
+  return (
+    <div className="p-6 max-w-2xl mx-auto">
+      <h1 className="text-2xl font-bold mb-4">Admin Assistant</h1>
+      <p className="text-muted-foreground mb-6">
+        Welcome to the AI-powered admin interface. You can use natural language
+        to manage your application.
+      </p>
+
+      <Card className="mb-6">
+        <CardHeader>
+          <CardTitle>What you can do</CardTitle>
+          <CardDescription>
+            Try these example commands to get started
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ul className="space-y-2 text-sm">
+            <li className="flex items-start gap-2">
+              <span className="text-primary">•</span>
+              <span>Show me contents of the Apps table in DB</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-primary">•</span>
+              <span>Add a new app called "Portal" with icon "portal"</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-primary">•</span>
+              <span>List all configured data sources</span>
+            </li>
+            <li className="flex items-start gap-2">
+              <span className="text-primary">•</span>
+              <span>Configure a new MCP server</span>
+            </li>
+          </ul>
+        </CardContent>
+      </Card>
+
+      <p className="text-sm text-muted-foreground">
+        Type your request in the chat below to get started.
+      </p>
+    </div>
+  )
+}

package/src/modules/admin-base/context/AdminConfigContext.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react'
+import { createContext, use, useMemo } from 'react'
+
+import type { AdminConfig } from '../types/adminTypes'
+
+const defaultConfig: AdminConfig = {
+  chatApiUrl: '/api/admin/chat',
+}
+
+const AdminConfigContext = createContext<AdminConfig>(defaultConfig)
+
+export interface AdminConfigProviderProps {
+  config?: Partial<AdminConfig>
+  children: ReactNode
+}
+
+export function AdminConfigProvider({
+  config,
+  children,
+}: AdminConfigProviderProps) {
+  const mergedConfig: AdminConfig = useMemo(
+    () => ({
+      ...defaultConfig,
+      ...config,
+    }),
+    [config],
+  )
+
+  return (
+    <AdminConfigContext value={mergedConfig}>{children}</AdminConfigContext>
+  )
+}
+
+export function useAdminConfig(): AdminConfig {
+  return use(AdminConfigContext)
+}

package/src/modules/admin-base/index.ts

@@ -0,0 +1,16 @@
+// Components
+export { AdminChat } from './components/AdminChat'
+export { AdminLayout } from './components/AdminLayout'
+export { AdminWelcome } from './components/AdminWelcome'
+
+// Context
+export {
+    AdminConfigProvider,
+    useAdminConfig,
+    type AdminConfigProviderProps
+} from './context/AdminConfigContext'
+
+// Types
+export type { AdminChatMessage, AdminConfig } from './types/adminTypes'
+
+

package/src/modules/admin-base/types/adminTypes.ts

@@ -0,0 +1,11 @@
+export interface AdminConfig {
+  /** API endpoint for chat - defaults to /api/admin/chat */
+  chatApiUrl?: string
+}
+
+export interface AdminChatMessage {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+  createdAt?: Date
+}