@orsetra/shared-ui 1.5.10 → 1.5.12

package/components/layout/sidebar/main-sidebar.tsx

@@ -56,11 +56,12 @@ export function MainSidebar({
       onSecondarySidebarOpen()
     }
 
-    const rawUrl = item.href ?? `${main_base_url}/${menuId}`
-    const path = rawUrl.startsWith('http://') || rawUrl.startsWith('https://')
-      ? new URL(rawUrl).pathname
-      : rawUrl
-    window.location.href = path
+    if (item.href) {
+      const path = item.href.startsWith('http://') || item.href.startsWith('https://')
+        ? new URL(item.href).pathname
+        : item.href
+      window.location.href = path
+    }
 
     if (!isMinimized) {
       onToggle()
@@ -126,34 +127,58 @@ export function MainSidebar({
             const isActive = currentMenu === item.id
             const isExpanded = expandedMenu === item.id
 
+            const itemHref = !hasSubMenu && item.href
+              ? (item.href.startsWith('http://') || item.href.startsWith('https://')
+                  ? new URL(item.href).pathname
+                  : item.href)
+              : undefined
+
+            const itemClassName = cn(
+              "w-full flex items-center text-left transition-all duration-150 font-medium",
+              isMinimized ? "justify-center p-3" : "gap-3 px-3 py-2",
+              isActive
+                ? "bg-interactive/10 text-interactive border-l-4 border-interactive"
+                : "text-text-primary hover:bg-ui-background border-l-4 border-transparent"
+            )
+
+            const itemContent = (
+              <>
+                <Icon className={cn(
+                  "h-5 w-5 flex-shrink-0",
+                  isActive ? "text-interactive" : "text-text-secondary"
+                )} />
+                {!isMinimized && (
+                  <>
+                    <span className="text-base flex-1">{item.label}</span>
+                    {hasSubMenu && (
+                      isExpanded
+                        ? <ChevronDown className="h-4 w-4 text-text-secondary flex-shrink-0" />
+                        : <ChevronRight className="h-4 w-4 text-text-secondary flex-shrink-0" />
+                    )}
+                  </>
+                )}
+              </>
+            )
+
             return (
               <div key={item.id}>
-                <button
-                  onClick={() => handleMenuClick(item)}
-                  className={cn(
-                    "w-full flex items-center text-left transition-all duration-150 font-medium",
-                    isMinimized ? "justify-center p-3" : "gap-3 px-3 py-2",
-                    isActive
-                      ? "bg-interactive/10 text-interactive border-l-4 border-interactive"
-                      : "text-text-primary hover:bg-ui-background border-l-4 border-transparent"
-                  )}
-                  title={isMinimized ? item.label : undefined}
-                >
-                  <Icon className={cn(
-                    "h-5 w-5 flex-shrink-0",
-                    isActive ? "text-interactive" : "text-text-secondary"
-                  )} />
-                  {!isMinimized && (
-                    <>
-                      <span className="text-base flex-1">{item.label}</span>
-                      {hasSubMenu && (
-                        isExpanded
-                          ? <ChevronDown className="h-4 w-4 text-text-secondary flex-shrink-0" />
-                          : <ChevronRight className="h-4 w-4 text-text-secondary flex-shrink-0" />
-                      )}
-                    </>
-                  )}
-                </button>
+                {itemHref ? (
+                  <a
+                    href={itemHref}
+                    className={itemClassName}
+                    title={isMinimized ? item.label : undefined}
+                  >
+                    {itemContent}
+                  </a>
+                ) : (
+                  <button
+                    onClick={() => handleMenuClick(item)}
+                    className={itemClassName}
+                    title={isMinimized ? item.label : undefined}
+                  >
+                    {itemContent}
+                  </button>
+                )}
 
                 {/* Inline accordion sub-items */}
                 {!isMinimized && isExpanded && hasSubMenu && (

package/components/layout/sidebar/sidebar.tsx

@@ -197,9 +197,9 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
 
   const filteredMainItems = React.useMemo(() => {
     if (!isCollapsed || mainMenuItems.length === 0) return []
-    // Exclude items that match the current menu context OR appear in the secondary nav
+    // Exclude items that match the current menu context OR appear in the secondary nav OR have no href
     const navIds = new Set(currentNavigation.map((n) => n.id))
-    return mainMenuItems.filter((item) => item.id !== currentMenu && !navIds.has(item.id))
+    return mainMenuItems.filter((item) => item.id !== currentMenu && !navIds.has(item.id) && !!item.href)
   }, [isCollapsed, mainMenuItems, currentNavigation, currentMenu])
 
   return (
@@ -300,8 +300,9 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
           <>
             <div className="border-t border-ui-border mx-1 my-2" />
             {filteredMainItems.map((item) => {
-              const rawHref = item.href || `${main_base_url}/${item.id}`
-              const href = rawHref.startsWith('http') ? new URL(rawHref).pathname : rawHref
+              const href = item.href!.startsWith('http://') || item.href!.startsWith('https://')
+                ? new URL(item.href!).pathname
+                : item.href!
               const linkEl = (
                 <Link
                   key={item.id}

package/components/ui/file-chip.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { FileCode, X } from "lucide-react"
+
+export interface FileChipProps {
+  file: { name: string; id?: string }
+  isActive: boolean
+  isEditing: boolean
+  disabled?: boolean
+  onSelect: () => void
+  onDelete: (e: React.MouseEvent) => void
+  onNameChange: (name: string) => void
+  onEditStart: () => void
+  onEditEnd: () => void
+}
+
+export function FileChip({ file, isActive, isEditing, disabled, onSelect, onDelete, onNameChange, onEditStart, onEditEnd }: FileChipProps) {
+  const showInput = isEditing || file.name === ""
+
+  return (
+    <div
+      onClick={onSelect}
+      className={`flex items-center gap-1 px-2 py-0.5 text-xs cursor-pointer border transition-colors shrink-0 ${
+        isActive
+          ? "border-ibm-blue-60 bg-white text-ibm-blue-60"
+          : "border-ibm-gray-20 bg-white text-ibm-gray-70 hover:border-ibm-gray-40"
+      }`}
+    >
+      <FileCode className="w-3 h-3 shrink-0 flex-none" />
+
+      {showInput ? (
+        <input
+          autoFocus
+          type="text"
+          value={file.name}
+          onChange={(e) => onNameChange(e.target.value)}
+          onBlur={onEditEnd}
+          onClick={(e) => e.stopPropagation()}
+          placeholder="filename.yaml"
+          className="w-24 text-xs outline-none border-b border-ibm-blue-40 bg-transparent placeholder:text-ibm-gray-40 text-ibm-gray-100"
+        />
+      ) : (
+        <span
+          className="truncate max-w-[120px]"
+          onDoubleClick={(e) => { e.stopPropagation(); if (isActive) onEditStart() }}
+        >
+          {file.name}
+        </span>
+      )}
+
+      {!disabled && (
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onDelete(e) }}
+          className="ml-0.5 hover:text-red-500 transition-colors flex-none"
+        >
+          <X className="w-3 h-3" />
+        </button>
+      )}
+    </div>
+  )
+}

package/components/ui/index.ts

@@ -64,6 +64,7 @@ export { ToggleGroup, ToggleGroupItem } from './toggle-group'
 export { Toggle } from './toggle'
 export { StringsInput } from './strings-input'
 export { KVInput } from './kv-input'
+export { ResourcesInput } from './resources-input'
 export { NumbersInput } from './numbers-input'
 export { KVDynamicInput } from './kv-dynamic-input'
 export { SelectInput } from './select-input'
@@ -73,4 +74,5 @@ export { SecretsInput } from './secrets-input'
 export { StructsInput } from './structs-input'
 export { CodeEditor } from './code-editor'
 export { K8sObjectsCode } from './k8s-objects-code'
+export { FileChip } from './file-chip'
 export { EnvironmentPickerDialog, type EnvironmentPickerDialogProps } from './environment-picker-dialog'

package/components/ui/resources-input.tsx

@@ -0,0 +1,170 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import { Button } from "./button"
+import { Plus, X, FileCode } from "lucide-react"
+import { SecretInput } from "./secret-input"
+
+interface ResourcesInputProps {
+  id?: string
+  value?: string[]
+  onChange?: (value: string[]) => void
+  disabled?: boolean
+  [key: string]: any
+}
+
+const SECRET_PREFIX = "secret:"
+const BASE_PATH = "/etc"
+
+function parseItem(item: string): { name: string; path: string } {
+  const raw = item.startsWith(SECRET_PREFIX) ? item.slice(SECRET_PREFIX.length) : item
+  const at = raw.indexOf("@")
+  if (at === -1) return { name: raw, path: BASE_PATH }
+  return { name: raw.slice(0, at), path: raw.slice(at + 1) }
+}
+
+function buildItem(name: string, path: string): string {
+  return `${SECRET_PREFIX}${name}@${path}`
+}
+
+function pathSuffix(path: string): string {
+  const after = path.startsWith(BASE_PATH) ? path.slice(BASE_PATH.length) : path
+  return after.startsWith("/") ? after.slice(1) : after
+}
+
+export function ResourcesInput({ id, value, onChange, disabled = false, ...rest }: ResourcesInputProps) {
+  const normalize = (v: any): string[] =>
+    Array.isArray(v) ? v.filter(Boolean).map((item) => item.startsWith(SECRET_PREFIX) ? item : buildItem(parseItem(item).name, parseItem(item).path)) : []
+  const [items, setItems] = useState<string[]>(normalize(value))
+  const [draft, setDraft] = useState("")
+  const [editingPathIndex, setEditingPathIndex] = useState<number | null>(null)
+  const [editingPathSuffix, setEditingPathSuffix] = useState("")
+  const mounted = useRef(false)
+
+  useEffect(() => {
+    const filtered = normalize(value)
+    if (!mounted.current) {
+      mounted.current = true
+      const raw = Array.isArray(value) ? value.filter(Boolean) : []
+      if (JSON.stringify(filtered) !== JSON.stringify(raw)) {
+        onChange?.(filtered)
+      }
+      return
+    }
+    if (JSON.stringify(filtered) !== JSON.stringify(items)) {
+      setItems(filtered)
+    }
+  }, [value])
+
+  const handleAdd = () => {
+    if (!draft || items.includes(draft)) return
+    const next = [...items, draft]
+    setItems(next)
+    onChange?.(next)
+    setDraft("")
+  }
+
+  const handleRemove = (index: number) => {
+    const next = items.filter((_, i) => i !== index)
+    setItems(next)
+    onChange?.(next)
+  }
+
+  const startPathEditing = (index: number, path: string) => {
+    if (disabled) return
+    setEditingPathIndex(index)
+    setEditingPathSuffix(pathSuffix(path))
+  }
+
+  const confirmPathEdit = (index: number) => {
+    const { name } = parseItem(items[index])
+    const fullPath = `${BASE_PATH}/${editingPathSuffix}`
+    const next = items.map((item, i) => i === index ? buildItem(name, fullPath) : item)
+    setItems(next)
+    onChange?.(next)
+    setEditingPathIndex(null)
+  }
+
+  return (
+    <div className="space-y-2">
+      {items.map((item, index) => {
+        const { name, path } = parseItem(item)
+        const suffix = pathSuffix(path)
+        const isEditingPath = editingPathIndex === index
+
+        return (
+          <div
+            key={index}
+            className={`flex items-center h-10 bg-white transition-colors ${
+              isEditingPath ? "" : "border border-ibm-gray-20 hover:border-ibm-gray-40"
+            }`}
+          >
+            {/* Name */}
+            <div className="flex items-center gap-1.5 px-3 shrink-0 border-r border-ibm-gray-20">
+              <FileCode className="w-3 h-3 text-ibm-gray-50 shrink-0" />
+              <span className="text-xs font-mono text-ibm-gray-100">{name}</span>
+            </div>
+
+            {/* Path */}
+            {isEditingPath ? (
+              <div className="flex flex-1 items-center px-3 min-w-0">
+                <span className="text-sm font-mono text-ibm-gray-40 shrink-0 select-none">{BASE_PATH}/</span>
+                <input
+                  autoFocus
+                  value={editingPathSuffix}
+                  onChange={(e) => setEditingPathSuffix(e.target.value)}
+                  onBlur={() => confirmPathEdit(index)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") confirmPathEdit(index)
+                    if (e.key === "Escape") setEditingPathIndex(null)
+                  }}
+                  className="flex-1 text-sm font-mono text-ibm-gray-100 bg-transparent focus:outline-none min-w-0"
+                  placeholder="/myapp"
+                />
+              </div>
+            ) : (
+              <span
+                onDoubleClick={() => startPathEditing(index, path)}
+                title={disabled ? undefined : "Double-click to edit path"}
+                className={`flex flex-1 items-center px-3 min-w-0 text-sm font-mono ${
+                  disabled ? "cursor-default" : "cursor-text"
+                }`}
+              >
+                <span className="text-ibm-gray-40 shrink-0">{BASE_PATH}/</span>
+                <span className={`truncate ${suffix ? "text-ibm-gray-70" : "text-ibm-gray-40 italic"}`}>
+                  {suffix || "…"}
+                </span>
+              </span>
+            )}
+
+            {/* Delete */}
+            {!disabled && (
+              <button
+                type="button"
+                onClick={() => handleRemove(index)}
+                className="px-2 h-full flex items-center text-ibm-gray-40 hover:text-red-500 transition-colors shrink-0 border-l border-ibm-gray-20"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+        )
+      })}
+
+      <div className="flex gap-2">
+        <div className="flex-1">
+          <SecretInput value={draft} onChange={setDraft} disabled={disabled} type={id} />
+        </div>
+        <Button
+          type="button"
+          variant="secondary"
+          onClick={handleAdd}
+          disabled={disabled || !draft}
+          className="rounded-none h-10 w-10 p-0 shrink-0"
+        >
+          <Plus className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  )
+}

package/components/ui/secret-context.tsx

@@ -6,23 +6,28 @@ import type { ReactNode } from "react"
 export interface SecretEntry {
   name: string
   description?: string
+  labels?: string[]
+  template?: string
 }
 
 interface SecretContextValue {
   secretsMap: Map<string, SecretEntry[]>
+  loading: boolean
 }
 
 const SecretContext = createContext<SecretContextValue | null>(null)
 
 export function SecretContextProvider({
   children,
+  loading = false,
   secretsMap,
 }: {
   children: ReactNode
+  loading?: boolean
   secretsMap: Map<string, SecretEntry[]>
 }) {
   return (
-    <SecretContext.Provider value={{ secretsMap }}>
+    <SecretContext.Provider value={{ secretsMap, loading }}>
       {children}
     </SecretContext.Provider>
   )

package/components/ui/secret-input.tsx

@@ -2,6 +2,7 @@
 
 import { SelectInput } from "./select-input"
 import { useSecretContext } from "./secret-context"
+import { Loader2 } from "lucide-react"
 
 interface SecretInputProps {
   id?: string
@@ -31,16 +32,20 @@ export function SecretInput({
       </div>
     )
   }
+ console.log(type)
   const secrets = ctx.secretsMap.get(type || 'configs') || []
   return (
-    <SelectInput
-      id={id}
-      value={value}
-      onChange={onChange}
-      disabled={disabled}
-      className={className}
-      placeholder={placeholder}
-      options={secrets.map((s) => ({ label: s.description || s.name, value: `secret:${s.name}` }))}
-    />
+    <div className="flex items-center gap-2">
+      <SelectInput
+        id={id}
+        value={value}
+        onChange={onChange}
+        disabled={disabled || ctx.loading}
+        className={className}
+        placeholder={ctx.loading ? "Loading…" : placeholder}
+        options={secrets.map((s) => ({ label: s.description || s.name, value: s.name }))}
+      />
+      {ctx.loading && <Loader2 className="h-4 w-4 animate-spin text-ibm-blue-60 flex-shrink-0" />}
+    </div>
   )
 }

package/components/ui/secrets-input.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import { Button } from "./button"
-import { X, Plus } from "lucide-react"
+import { X, Plus, FileCode } from "lucide-react"
 import { SecretInput } from "./secret-input"
 
 interface SecretsInputProps {
@@ -13,20 +13,43 @@ interface SecretsInputProps {
   [key: string]: any
 }
 
-export function SecretsInput({ id, value = [], onChange, disabled = false, ...rest }: SecretsInputProps) {
-  const [items, setItems] = useState<string[]>(value.filter(Boolean))
+const SECRET_PREFIX = "secret:"
+
+function parseName(item: string): string {
+  return item.startsWith(SECRET_PREFIX) ? item.slice(SECRET_PREFIX.length) : item
+}
+
+function buildItem(name: string): string {
+  return `${SECRET_PREFIX}${name}`
+}
+
+export function SecretsInput({ id, value, onChange, disabled = false, ...rest }: SecretsInputProps) {
+  const normalize = (v: any): string[] =>
+    Array.isArray(v) ? v.filter(Boolean).map((item) => item.startsWith(SECRET_PREFIX) ? item : buildItem(item)) : []
+  const [items, setItems] = useState<string[]>(normalize(value))
   const [draft, setDraft] = useState("")
+  const mounted = useRef(false)
 
   useEffect(() => {
-    const filtered = value.filter(Boolean)
+    const filtered = normalize(value)
+    if (!mounted.current) {
+      mounted.current = true
+      const raw = Array.isArray(value) ? value.filter(Boolean) : []
+      if (JSON.stringify(filtered) !== JSON.stringify(raw)) {
+        onChange?.(filtered)
+      }
+      return
+    }
     if (JSON.stringify(filtered) !== JSON.stringify(items)) {
       setItems(filtered)
     }
   }, [value])
 
   const handleAdd = () => {
-    if (!draft || items.includes(draft)) return
-    const next = [...items, draft]
+    if (!draft) return
+    const built = buildItem(draft)
+    if (items.includes(built)) return
+    const next = [...items, built]
     setItems(next)
     onChange?.(next)
     setDraft("")
@@ -41,19 +64,26 @@ export function SecretsInput({ id, value = [], onChange, disabled = false, ...re
   return (
     <div className="space-y-2">
       {items.map((item, index) => (
-        <div key={index} className="flex items-center gap-2">
-          <span className="flex-1 text-sm px-3 h-10 flex items-center border border-ibm-gray-20 bg-ibm-gray-10 text-ibm-gray-100 truncate font-mono">
-            {item}
-          </span>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => handleRemove(index)}
-            disabled={disabled}
-            className="rounded-none h-10 w-10 p-0 shrink-0"
-          >
-            <X className="h-3.5 w-3.5" />
-          </Button>
+        <div
+          key={index}
+          className="flex items-center h-10 border border-ibm-gray-20 bg-white hover:border-ibm-gray-40 transition-colors"
+        >
+          <div className="flex items-center gap-1.5 px-3 flex-1 min-w-0">
+            <FileCode className="w-3 h-3 text-ibm-gray-50 shrink-0" />
+            <span className="text-xs font-mono text-ibm-gray-100 truncate">
+              {parseName(item)}
+            </span>
+          </div>
+
+          {!disabled && (
+            <button
+              type="button"
+              onClick={() => handleRemove(index)}
+              className="px-2 h-full flex items-center text-ibm-gray-40 hover:text-red-500 transition-colors shrink-0 border-l border-ibm-gray-20"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          )}
         </div>
       ))}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.5.10",
+  "version": "1.5.12",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",

package/components/ui/secret-explorer.tsx

@@ -1,274 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import { Button } from "./button"
-import { Card, CardContent, CardHeader, CardTitle } from "./card"
-import { Key, Plus, Trash2, Folder, File, ChevronRight } from "lucide-react"
-import { useToast } from "../../hooks/use-toast"
-
-import type { Secrets } from "@/app/secrets/models"
-
-interface SecretExplorerProps {
-  currentPath: string
-  onPathChange: (path: string) => void
-  getSecrets: (path: string) => Promise<Secrets>
-  deleteSecret: (path: string) => Promise<boolean>
-  selectedSecret: string | null
-  onSecretSelect: (secret: string | null) => void
-  onCreateClick: () => void
-  onRefresh?: () => void
-}
-
-export function SecretExplorer({
-  currentPath,
-  onPathChange,
-  getSecrets,
-  deleteSecret,
-  selectedSecret,
-  onSecretSelect,
-  onCreateClick,
-  onRefresh
-}: SecretExplorerProps) {
-  const { toast } = useToast()
-  const [secretPaths, setSecretPaths] = useState<string[]>([])
-  const [loading, setLoading] = useState(true)
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
-  const [selectedSecretForAction, setSelectedSecretForAction] = useState<string | null>(null)
-
-  useEffect(() => {
-    loadSecrets()
-  }, [currentPath])
-
-  const loadSecrets = async () => {
-    try {
-      const secretsResponse: Secrets = await getSecrets(currentPath || "/")
-      const paths = secretsResponse.data?.keys || []
-      setSecretPaths(paths)
-    } catch (error) {
-      // Navigate up if current path is invalid
-      if (currentPath) {
-        const pathParts = currentPath.split('/').filter(Boolean)
-        pathParts.pop()
-        const newPath = pathParts.length > 0 ? pathParts.join('/') + '/' : ""
-        onPathChange(newPath)
-      }
-      toast({
-        variant: "destructive",
-        title: "Error loading secrets",
-        description: "Failed to fetch configuration secrets."
-      })
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleItemClick = async (path: string) => {
-    if (path.endsWith('/')) {
-      // It's a folder, navigate into it
-      const newPath = currentPath ? `${currentPath}${path}` : path
-      onPathChange(newPath)
-      onSecretSelect(null)
-    } else {
-      // It's a secret, show details
-      onSecretSelect(path)
-    }
-  }
-
-  const getBreadcrumbs = () => {
-    if (!currentPath) return [{ name: "Root", path: "" }]
-    
-    const parts = currentPath.split('/').filter(Boolean)
-    const breadcrumbs = [{ name: "Root", path: "" }]
-    
-    let accumulatedPath = ""
-    parts.forEach((part, index) => {
-      accumulatedPath += part + "/"
-      breadcrumbs.push({
-        name: part,
-        path: accumulatedPath
-      })
-    })
-    
-    return breadcrumbs
-  }
-
-  const handleDeleteSecret = async () => {
-    if (!selectedSecretForAction) return
-
-    try {
-      const fullPath = currentPath ? `${currentPath}${selectedSecretForAction}` : selectedSecretForAction
-      await deleteSecret(fullPath)
-      
-      toast({
-        variant: "success",
-        title: "Secret deleted successfully",
-        description: `Configuration "${selectedSecretForAction}" has been deleted.`
-      })
-
-      setShowDeleteDialog(false)
-      setSelectedSecretForAction(null)
-      loadSecrets()
-      
-      // Clear details if this was the selected secret
-      if (selectedSecret === selectedSecretForAction) {
-        onSecretSelect(null)
-      }
-    } catch (error) {
-      console.error("Error deleting secret:", error)
-      toast({
-        variant: "destructive",
-        title: "Error deleting secret",
-        description: "Failed to delete configuration secret."
-      })
-    }
-  }
-
-  if (loading) {
-    return (
-      <Card className="border border-ibm-gray-20">
-        <CardHeader className="pb-3">
-          <div className="animate-pulse">
-            <div className="h-6 bg-ibm-gray-20 mb-2"></div>
-            <div className="h-4 bg-ibm-gray-20"></div>
-          </div>
-        </CardHeader>
-        <CardContent className="p-0">
-          <div className="animate-pulse">
-            <div className="h-32 bg-ibm-gray-20"></div>
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  return (
-    <>
-      <Card className="border border-ibm-gray-20">
-        <CardHeader className="pb-3">
-          <div className="flex items-center justify-between">
-            <CardTitle className="text-lg font-medium">Secrets Explorer</CardTitle>
-            <Button variant="ghost" size="sm" onClick={onCreateClick}>
-              <Plus className="w-4 h-4" />
-            </Button>
-          </div>
-          
-          {/* Breadcrumbs */}
-          <div className="flex items-center gap-1 text-xs text-ibm-gray-70 mt-2">
-            {getBreadcrumbs().map((crumb, index) => (
-              <div key={crumb.path} className="flex items-center gap-1">
-                {index > 0 && <ChevronRight className="w-3 h-3" />}
-                <button
-                  onClick={() => {
-                    onPathChange(crumb.path)
-                    onSecretSelect(null)
-                  }}
-                  className={`hover:text-ibm-blue-60 ${
-                    crumb.path === currentPath ? "text-ibm-blue-60 font-medium" : ""
-                  }`}
-                >
-                  {crumb.name}
-                </button>
-              </div>
-            ))}
-          </div>
-        </CardHeader>
-
-        <CardContent className="p-0">
-          {/* File List */}
-          <div className="border-t border-ibm-gray-20">
-            {secretPaths.length === 0 ? (
-              <div className="p-8 text-center">
-                <Key className="w-8 h-8 text-ibm-gray-30 mx-auto mb-2" />
-                <p className="text-sm text-ibm-gray-70">
-                  Empty folder
-                </p>
-              </div>
-            ) : (
-              <div className="divide-y divide-ibm-gray-20">
-                {secretPaths.map((path) => {
-                  const isFolder = path.endsWith('/')
-                  const displayName = isFolder ? path.slice(0, -1) : path
-                  const isSelected = selectedSecret === path
-                  
-                  return (
-                    <div
-                      key={path}
-                      className={`group flex items-center gap-3 px-4 py-3 hover:bg-ibm-gray-10 cursor-pointer transition-colors ${
-                        isSelected ? "bg-ibm-blue-10 border-r-2 border-ibm-blue-60" : ""
-                      }`}
-                      onClick={() => handleItemClick(path)}
-                    >
-                      <div className="flex-shrink-0">
-                        {isFolder ? (
-                          <Folder className="w-4 h-4 text-ibm-yellow-60" />
-                        ) : (
-                          <File className="w-4 h-4 text-ibm-blue-60" />
-                        )}
-                      </div>
-                      <span className="text-sm text-ibm-gray-100 flex-1 truncate">
-                        {displayName}
-                      </span>
-                      
-                      {!isFolder && (
-                        <Button
-                          variant="ghost"
-                          size="xs"
-                          leftIcon={<Trash2 className="w-3 h-3" />}
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            setSelectedSecretForAction(path)
-                            setShowDeleteDialog(true)
-                          }}
-                          className="opacity-0 group-hover:opacity-100 transition-opacity text-ibm-red-60 hover:text-ibm-red-70 hover:bg-ibm-red-10"
-                        >
-                        </Button>
-                      )}
-                    </div>
-                  )
-                })}
-              </div>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Delete Confirmation Dialog */}
-      <div
-        className={`fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 ${
-          showDeleteDialog ? 'block' : 'hidden'
-        }`}
-        onClick={() => setShowDeleteDialog(false)}
-      >
-        <div
-          className="bg-white p-6 rounded-lg max-w-md w-full mx-4"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <h3 className="text-lg font-medium text-ibm-gray-100 mb-2">Delete Secret</h3>
-          <p className="text-sm text-ibm-gray-70 mb-6">
-            Are you sure you want to delete the secret "{selectedSecretForAction}"? 
-            This action cannot be undone and will permanently remove all secret data.
-          </p>
-          <div className="flex justify-end gap-3">
-            <Button
-              variant="secondary"
-              size="sm"
-              style={{ borderRadius: 0 }}
-              onClick={() => setShowDeleteDialog(false)}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="danger"
-              style={{ borderRadius: 0 }}
-              leftIcon={<Trash2 className="w-3 h-3" />}
-              size="sm"
-              onClick={handleDeleteSecret}
-            >
-              Delete Secret
-            </Button>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}