@env-hopper/frontend-core 2.0.1-alpha

package/src/ui/components/leftPanel/LeftPanel.tsx

@@ -0,0 +1,194 @@
+import { useState } from 'react'
+import {
+  FileText,
+  FolderOpen,
+  Package,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Server,
+} from 'lucide-react'
+import { Button } from '~/components/ui/button'
+import { ScrollArea } from '~/components/ui/scroll-area'
+import { cn } from '~/lib/utils'
+import { useBootstrapConfig } from '~/modules/config/BootstrapConfigContext'
+
+interface HierarchyNode {
+  id: string
+  label: string
+  type: 'env' | 'app' | 'group' | 'page'
+  children?: Array<HierarchyNode>
+}
+
+interface LeftPanelProps {
+  className?: string
+}
+
+// Function to build hierarchy data from real context data (most visited)
+function buildHierarchyFromContext(indexData: any): Array<HierarchyNode> {
+  const hierarchyData: Array<HierarchyNode> = []
+
+  // Take a subset of environments representing most visited
+  const envs = Object.values(indexData.envs).slice(0, 3) // Take first 3 environments
+
+  envs.forEach((env: any) => {
+    const envNode: HierarchyNode = {
+      id: `env-${env.slug}`,
+      label: env.displayName || env.slug,
+      type: 'env',
+      children: [],
+    }
+
+    // Take a subset of apps for each environment (most visited)
+    const apps = Object.values(indexData.apps).slice(0, 3) // Take first 3 apps per env
+
+    apps.forEach((app: any) => {
+      const appNode: HierarchyNode = {
+        id: `env-${env.slug}-app-${app.slug}`,
+        label: app.displayName || app.slug,
+        type: 'app',
+        children: [],
+      }
+
+      // Add a few top pages if the app has UI structure
+      if (app.ui && app.ui.groups && app.ui.groups.length > 0) {
+        // Take the first group and show some pages directly under the app
+        const firstGroup = app.ui.groups[0]
+        if (firstGroup.pages && firstGroup.pages.length > 0) {
+          firstGroup.pages.slice(0, 2).forEach((page: any) => {
+            // Limit to 2 pages per app
+            appNode.children!.push({
+              id: `env-${env.slug}-app-${app.slug}-page-${page.slug}`,
+              label: page.title || page.slug,
+              type: 'page',
+            })
+          })
+        }
+      } else {
+        // If no groups, create a main page
+        appNode.children!.push({
+          id: `env-${env.slug}-app-${app.slug}-page-main`,
+          label: 'Dashboard',
+          type: 'page',
+        })
+      }
+
+      envNode.children!.push(appNode)
+    })
+
+    hierarchyData.push(envNode)
+  })
+
+  return hierarchyData
+}
+
+function getIconForType(type: HierarchyNode['type']) {
+  switch (type) {
+    case 'env':
+      return <Server className="w-4 h-4" />
+    case 'app':
+      return <Package className="w-4 h-4" />
+    case 'group':
+      return <FolderOpen className="w-4 h-4" />
+    case 'page':
+      return <FileText className="w-4 h-4" />
+    default:
+      return null
+  }
+}
+
+interface HierarchyItemProps {
+  node: HierarchyNode
+  level: number
+}
+
+function HierarchyItem({ node, level }: HierarchyItemProps) {
+  const hasChildren = node.children && node.children.length > 0
+  const indent = level * 20 // 20px per level for better visual hierarchy
+
+  return (
+    <div>
+      <div
+        className={cn(
+          'flex items-center gap-3 py-1.5 px-2 rounded-md hover:bg-accent/50 hover:text-accent-foreground transition-colors',
+          level === 0 && 'font-semibold text-sm',
+          level === 1 && 'font-medium text-sm',
+          level === 2 && 'text-sm text-muted-foreground',
+        )}
+        style={{ paddingLeft: `${8 + indent}px` }}
+      >
+        <div className="flex items-center gap-2">
+          <div className="text-muted-foreground">
+            {getIconForType(node.type)}
+          </div>
+          <span className="truncate">{node.label}</span>
+        </div>
+      </div>
+
+      {hasChildren && (
+        <div>
+          {node.children!.map((child) => (
+            <HierarchyItem key={child.id} node={child} level={level + 1} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function LeftPanel({ className }: LeftPanelProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const indexData = useBootstrapConfig()
+
+  // Build hierarchy data from real context data
+  const hierarchyData = buildHierarchyFromContext(indexData)
+
+  return (
+    <div className={cn('flex', className)}>
+      {/* Collapse/Expand Button */}
+      {isCollapsed && (
+        <div className="flex items-center justify-center w-8 bg-background border-r">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setIsCollapsed(false)}
+            className="h-6 w-6 p-0"
+          >
+            <PanelLeftOpen className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+
+      {/* Panel */}
+      <div
+        className={cn(
+          'bg-background border-r transition-all duration-300 ease-in-out',
+          isCollapsed ? 'w-0 overflow-hidden' : 'w-80',
+        )}
+      >
+        <div className="h-full flex flex-col">
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 border-b">
+            <h2 className="text-sm font-semibold">Most Visited</h2>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsCollapsed(true)}
+              className="h-6 w-6 p-0"
+            >
+              <PanelLeftClose className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {/* Hierarchy Content */}
+          <ScrollArea className="flex-1 p-3">
+            <div className="space-y-0.5">
+              {hierarchyData.map((node) => (
+                <HierarchyItem key={node.id} node={node} level={0} />
+              ))}
+            </div>
+          </ScrollArea>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/ui/components/quickBar/EnvQuickJumpBar.tsx

@@ -0,0 +1,65 @@
+import { Globe, Package, Server } from 'lucide-react'
+import { Button } from '~/components/ui/button'
+import { useBootstrapConfig } from '~/modules/config/BootstrapConfigContext'
+import { useEnvironmentContext } from '~/modules/environment/EnvironmentContext'
+
+interface EnvQuickJumpBarProps {
+  className?: string
+}
+
+// Environment color mapping
+const getEnvironmentColor = (envSlug: string) => {
+  if (envSlug.includes('cross')) return 'text-blue-600'
+  if (envSlug.includes('preprod')) return 'text-orange-600'
+  if (envSlug.includes('g64')) return 'text-violet-600'
+  return 'text-gray-600'
+}
+
+// Environment icon mapping
+const getEnvironmentIcon = (envSlug: string) => {
+  if (envSlug.includes('cross')) return Package
+  if (envSlug.includes('prod')) return Globe
+  return Server
+}
+
+export function EnvQuickJumpBar({ className }: EnvQuickJumpBarProps) {
+  const indexData = useBootstrapConfig()
+  const { setCurrentEnv, currentEnv } = useEnvironmentContext()
+
+  // Get first 3-4 real environments from context data
+  const environments = Object.values(indexData.envs)
+    .slice(0, 4)
+    .map((env) => ({
+      slug: env.slug,
+      label: env.displayName || env.slug,
+      icon: getEnvironmentIcon(env.slug),
+      color: getEnvironmentColor(env.slug),
+    }))
+
+  const onClick = (environment: string) => {
+    setCurrentEnv(environment)
+  }
+
+  return (
+    <div className={`flex flex-col gap-1 ${className}`}>
+      {environments.map((env) => {
+        const Icon = env.icon
+        const isActive = env.slug === currentEnv?.slug
+
+        return (
+          <Button
+            key={env.slug}
+            variant={'ghost'}
+            onClick={() => onClick(env.slug)}
+            className={`justify-start
+                ${isActive ? 'bg-accent text-accent-foreground font-medium' : ''}
+              `}
+          >
+            <Icon className={`w-4 h-4 ${env.color} flex-shrink-0`} />
+            {env.label}
+          </Button>
+        )
+      })}
+    </div>
+  )
+}

package/src/ui/components/quickBar/QuickJumpBar.tsx

@@ -0,0 +1,101 @@
+interface QuickJumpBarProps {
+  className?: string
+}
+
+export function QuickJumpBar(_: QuickJumpBarProps) {
+  return null
+  // const indexData = useBootstrapConfig()
+
+  // const { setCurrentResourceJumpSlug } = useResourceJumpContext();
+  // const { setCurrentEnv, currentEnv } = useEnvironmentContext();
+
+  // // Get first 6 pages from real data
+  // const getFirstSixPages = () => {
+  //   const allPages = []
+  //   for (const app of Object.values(indexData.apps)) {
+  //     if (app.ui?.pages) {
+  //         for (const page of app.ui?.pages) {
+  //           allPages.push({ app, page })
+  //           if (allPages.length >= 6) break
+  //         }
+  //         if (allPages.length >= 6) break
+  //     }
+  //     if (allPages.length >= 6) break
+  //   }
+  //   return allPages
+  // }
+
+  // const firstSixPages = getFirstSixPages()
+
+  // // Get first 3-4 real environments from context data
+  // const environments = Object.values(indexData.envs)
+  //   .slice(0, 4)
+  //   .map((env) => ({
+  //     id: env.slug,
+  //     label: env.displayName || env.slug,
+  //     icon: getEnvironmentIcon(env.slug),
+  //     color: getEnvironmentColor(env.slug),
+  //   }))
+
+  // const handleEnvironmentChange = (environment: string) => {
+  //   setCurrentEnv(environment)
+  // }
+
+  // const handlePageSelect = (
+  //   app: EhAppIndexed,
+  //   page: { slug: string; title?: string; url: string },
+  // ) => {
+  //   setCurrentResourceJumpSlug(app.slug)
+  //   // Could navigate to page here in the future
+  //   console.log(`Navigate to ${app.slug}/${page.slug}`)
+  // }
+
+  // return (
+  //   <div className={`flex mb-6 gap-3 ${className}`}>
+  //     {/* Left Column - Simplified Environment Switcher */}
+  //     <div className="flex flex-col gap-1">
+  //       {environments.map((env) => {
+  //         const Icon = env.icon
+  //         const isActive = env.id === currentEnv?.slug
+
+  //         return (
+  //           <Button
+  //             key={env.id}
+  //             variant={'ghost'}
+  //             onClick={() => handleEnvironmentChange(env.id)}
+  //             className={`justify-start
+  //               ${isActive ? 'bg-accent text-accent-foreground font-medium' : ''}
+  //             `}
+  //           >
+  //             <Icon className={`w-4 h-4 ${env.color} flex-shrink-0`} />
+  //             {env.label}
+  //           </Button>
+  //         )
+  //       })}
+
+  //       <div className="mt-2">
+  //         <Button className="w-full">Environment...</Button>
+  //       </div>
+  //     </div>
+
+  //     {/* Vertical Divider with padding */}
+  //     <div>
+  //       <Separator orientation="vertical" />
+  //     </div>
+
+  //     {/* Right Column - 2x3 Grid of Pages */}
+  //     <div className="flex-1 p-4">
+  //       <div className="grid grid-cols-2 gap-3">
+  //         {firstSixPages.map(({ app, page}, index) => (
+  //           <ActionCard
+  //             key={`${app.slug}-${page.slug}-${index}`}
+  //             app={app}
+  //             actionName={getShortPageName(app, page)}
+  //             onClick={() => handlePageSelect(app, page)}
+  //           />
+  //         ))}
+  //       </div>
+  //     </div>
+  //   </div>
+  // )
+}

package/src/ui/components/widgetPanel/AddWidgetCard.tsx

@@ -0,0 +1,17 @@
+import { Plus } from 'lucide-react'
+
+interface AddWidgetCardProps {
+  onClick?: () => void
+}
+
+export function AddWidgetCard({ onClick }: AddWidgetCardProps) {
+  return (
+    <div
+      className="border-2 border-dashed border-muted h-32 rounded-md flex flex-col items-center justify-center cursor-pointer text-muted-foreground hover:text-foreground"
+      onClick={onClick}
+    >
+      <Plus className="h-5 w-5 mb-1" />
+      <span className="text-xs">Add widget…</span>
+    </div>
+  )
+}

package/src/ui/components/widgetPanel/WidgetGrid.tsx

@@ -0,0 +1,18 @@
+import { CredentialsWidget } from '../widgets/CredentialsWidget'
+import { VersionWidget } from '../widgets/VersionWidget'
+import { AddWidgetCard } from './AddWidgetCard'
+
+interface WidgetGridProps {
+  widgets: ReadonlyArray<string>
+  onAddWidget?: () => void
+}
+
+export function WidgetGrid({ widgets, onAddWidget }: WidgetGridProps) {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6 gap-4">
+      {widgets.includes('creds') && <CredentialsWidget />}
+      {widgets.includes('version') && <VersionWidget />}
+      <AddWidgetCard onClick={onAddWidget} />
+    </div>
+  )
+}

package/src/ui/components/widgets/CredentialsWidget.tsx

@@ -0,0 +1,55 @@
+import { Copy, KeyRound } from 'lucide-react'
+import { Button } from '~/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '~/components/ui/card'
+import { Badge } from '~/components/ui/badge'
+
+interface Credential {
+  slug: string
+  desc: string
+  user: string
+  pwd: string
+}
+
+interface CredentialsWidgetProps {
+  credentials?: Array<Credential>
+}
+
+const defaultCredentials: Array<Credential> = [
+  { slug: 'SC', desc: 'San‑Carlos', user: 'test@company.com', pwd: 'password' },
+  { slug: 'AU', desc: 'Austin', user: 'austin@company.com', pwd: 'password' },
+]
+
+export function CredentialsWidget({
+  credentials = defaultCredentials,
+}: CredentialsWidgetProps) {
+  const copy = (text: string) => navigator.clipboard.writeText(text)
+
+  return (
+    <Card className="h-32">
+      <CardHeader className="py-2">
+        <CardTitle className="text-sm">Credentials</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-1 px-3 pb-3">
+        {credentials.map((cred) => (
+          <div
+            key={cred.slug}
+            className="flex items-center justify-between text-xs"
+          >
+            <Badge variant="secondary" className="mr-1 px-1.5 py-0.5">
+              {cred.slug}
+            </Badge>
+            <span className="truncate flex-1" title={cred.desc}>
+              {cred.desc}
+            </span>
+            <Button variant="ghost" size="icon" onClick={() => copy(cred.user)}>
+              <Copy className="h-3 w-3" />
+            </Button>
+            <Button variant="ghost" size="icon" onClick={() => copy(cred.pwd)}>
+              <KeyRound className="h-3 w-3" />
+            </Button>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}

package/src/ui/components/widgets/VersionWidget.tsx

@@ -0,0 +1,29 @@
+import { ArrowUpRight } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '~/components/ui/card'
+
+interface VersionWidgetProps {
+  version?: string
+  diffCommits?: number
+  diffDays?: number
+}
+
+export function VersionWidget({
+  version = 'v1.13.0',
+  diffCommits = 2,
+  diffDays = 5,
+}: VersionWidgetProps) {
+  return (
+    <Card className="h-32">
+      <CardHeader className="py-2">
+        <CardTitle className="text-sm">Version</CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col justify-between h-full px-3 pb-3">
+        <p className="text-lg font-semibold">{version}</p>
+        <p className="text-xs flex items-center text-muted-foreground">
+          <ArrowUpRight className="h-4 w-4 mr-1 text-green-600" />+{diffCommits}{' '}
+          commits • {diffDays}d ahead
+        </p>
+      </CardContent>
+    </Card>
+  )
+}

package/src/ui/error/NotFoundError.tsx

@@ -0,0 +1,13 @@
+import { Link } from '@tanstack/react-router'
+
+export function NotFoundError() {
+  return (
+    <main className={'mt-8 text-center'}>
+      <h1>404 Not Found</h1>
+      <p>Sorry, I don't recognize this URL. Probably this was old link?</p>
+      <p>
+        Navigate to <Link to={'/'}>Home page</Link>
+      </p>
+    </main>
+  )
+}

package/src/ui/layout/Footer.tsx

@@ -0,0 +1,16 @@
+export function Footer() {
+  return (
+    <footer className="footer items-center p-4 bg-base-200 text-base-content mt-8">
+      <div className="items-center grid-flow-col">
+        <a
+          href="https://github.com/lislon/env-hopper"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="link link-hover"
+        >
+          GitHub: lislon/env-hopper
+        </a>
+      </div>
+    </footer>
+  )
+}

package/src/ui/layout/Header.tsx

@@ -0,0 +1,14 @@
+import { Button } from '~/components/ui/button'
+
+export function Header() {
+  return (
+    <header className="flex items-center justify-between bg-background shadow border-b px-4 py-2 mb-4">
+      <div className="flex-1">
+        <a className="text-xl font-semibold text-foreground">EnvHopper</a>
+      </div>
+      <div className="flex-none">
+        <Button variant={'outline'}>Login</Button>
+      </div>
+    </header>
+  )
+}

package/src/ui/layout/LoadingScreen.tsx

@@ -0,0 +1,17 @@
+export interface LoadingFallbackProps {
+  failureCount?: number
+}
+
+export function LoadingScreen({ failureCount }: LoadingFallbackProps) {
+  return (
+    <>
+      <div className="flex flex-col items-center w-full h-full">
+        {/* <span className="loading loading-bars loading-lg"></span> */}
+        <div>Loading...</div>
+        {failureCount && failureCount > 1 ? (
+          <div className={'mt-2 text-xs'}>Attempt {failureCount}</div>
+        ) : null}
+      </div>
+    </>
+  )
+}

package/src/ui/layout/MainLayout.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { PlaygroundHeader } from '../components/header/PlaygroundHeader'
+
+import ContextDebug from '../components/contextDebug'
+import { Footer } from '../components/footer/Footer'
+
+export interface MainLayoutProps {
+  children: React.ReactNode
+}
+
+export function MainLayout({ children }: MainLayoutProps) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <div className="flex-1 flex">
+        {/* <LeftPanel className="h-screen" /> */}
+        <main className="flex-1 w-full flex justify-center font-sans p-6">
+          <div className="w-full max-w-4xl lg:max-w-5xl xl:max-w-6xl 2xl:max-w-7xl space-y-6">
+            <PlaygroundHeader />
+            {children}
+          </div>
+        </main>
+      </div>
+      <ContextDebug />
+      <Footer />
+    </div>
+  )
+}

package/src/ui/layout/SideColumn.tsx

@@ -0,0 +1,3 @@
+export function SideColumn() {
+  return <div className="h-full">SideColumn</div>
+}

package/src/ui/layout/TopLevelProviders.tsx

@@ -0,0 +1,52 @@
+import React, { Suspense, useMemo, useState } from 'react'
+
+import { LoadingScreen } from './LoadingScreen'
+import { useQueryBootstrapConfig } from '~/api/data/useQueryBootstrapConfig'
+import { ThemeProvider } from '~/components/theme-provider'
+import { PluginManagerContextProvider } from '~/modules/pluginCore/PluginManagerContext'
+import { PageUrlPluginContextProvider } from '~/plugins/builtin/pageUrl/PageUrlPluginContext'
+import { PageUrlJumpPlugin } from '~/plugins/builtin/pageUrl/pageUrlJumpPlugin'
+import { BootstrapConfigProvider } from '~/modules/config/BootstrapConfigContext'
+import { GlobalConfigProvider } from '~/modules/config/GlobalConfigContext'
+import { makePluginInterfaceForCore } from '~/modules/pluginCore/makePluginManagerContext'
+
+export interface MainLayoutProps {
+  children: React.ReactNode
+}
+
+export function TopLevelProviders({ children }: MainLayoutProps) {
+  const { data, isPending } = useQueryBootstrapConfig()
+  const [plugins] = useState(() => [new PageUrlJumpPlugin()])
+
+  const pluginInterfaceForCore = useMemo(() => {
+    return data ? makePluginInterfaceForCore(plugins) : null
+  }, [plugins, data])
+
+  if (isPending || !data || !pluginInterfaceForCore) {
+    return <LoadingScreen />
+  }
+
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      <Suspense fallback={<LoadingScreen />}>
+        <BootstrapConfigProvider bootstrapConfig={data}>
+          <GlobalConfigProvider>
+            <PluginManagerContextProvider
+              plugins={plugins}
+              pluginInterfaceForCore={pluginInterfaceForCore}
+            >
+              <PageUrlPluginContextProvider>
+                {children}
+              </PageUrlPluginContextProvider>
+            </PluginManagerContextProvider>
+          </GlobalConfigProvider>
+        </BootstrapConfigProvider>
+      </Suspense>
+    </ThemeProvider>
+  )
+}

package/src/ui/main/JumpTabContent.tsx

@@ -0,0 +1,12 @@
+import { Button } from '~/components/ui/button'
+
+export function JumpTabContent() {
+  return (
+    <Button
+      size="lg"
+      className="w-full bg-green-600 hover:bg-green-700 text-white"
+    >
+      JUMP
+    </Button>
+  )
+}

package/src/ui/main/Tabs.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+const tabList = [
+  { label: 'Jump', value: 'jump' },
+  { label: 'Logs', value: 'logs' },
+]
+
+export function Tabs({ children }: { children: Array<React.ReactNode> }) {
+  const [active, setActive] = React.useState('jump')
+  return (
+    <div className="mb-4">
+      <div role="tablist" className="tabs tabs-boxed">
+        {tabList.map((tab) => (
+          <a
+            key={tab.value}
+            role="tab"
+            className={`tab${active === tab.value ? ' tab-active' : ''}`}
+            onClick={() => setActive(tab.value)}
+          >
+            {tab.label}
+          </a>
+        ))}
+      </div>
+      <div className="mt-4">
+        {active === 'jump' ? children[0] : children[1]}
+      </div>
+    </div>
+  )
+}