storage-explorer 0.1.0

package/dist/chunk-vtsn1g38.js

@@ -0,0 +1,1022 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __jsonParse = (a) => JSON.parse(a);
+var __require = import.meta.require;
+
+// src/frontend.tsx
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+// src/App.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/features/buckets/BucketPanel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function BucketPanel(props) {
+  const {
+    profileValid,
+    loadingBuckets,
+    loadingObjects,
+    buckets,
+    selectedBucket,
+    manualBucketName,
+    onManualBucketNameChange,
+    onLoadBuckets,
+    onOpenBucket,
+    onOpenManualBucket
+  } = props;
+  return /* @__PURE__ */ jsxs("section", {
+    className: "panel explorer-panel",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "panel-step",
+        children: "Step 2"
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "explorer-header",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            children: [
+              /* @__PURE__ */ jsx("h2", {
+                children: "Buckets"
+              }),
+              /* @__PURE__ */ jsx("p", {
+                children: "Load visible buckets or open one directly by name."
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: "primary-button",
+            onClick: onLoadBuckets,
+            disabled: loadingBuckets || !profileValid,
+            children: loadingBuckets ? "Loading..." : "Load Buckets"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("form", {
+        className: "manual-bucket-form",
+        onSubmit: onOpenManualBucket,
+        children: [
+          /* @__PURE__ */ jsx("label", {
+            htmlFor: "manual-bucket-input",
+            children: "Known bucket name"
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "manual-bucket-row",
+            children: [
+              /* @__PURE__ */ jsx("input", {
+                id: "manual-bucket-input",
+                type: "text",
+                value: manualBucketName,
+                onChange: (event) => onManualBucketNameChange(event.target.value),
+                placeholder: "my-private-bucket",
+                autoComplete: "off"
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "submit",
+                className: "secondary-button",
+                disabled: loadingObjects || !profileValid,
+                children: "Open Bucket"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("p", {
+            className: "helper-copy",
+            children: "Useful when your key can access a bucket but cannot list all buckets."
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "buckets-grid",
+        children: buckets.length === 0 ? /* @__PURE__ */ jsx("p", {
+          className: "empty-copy",
+          children: "No buckets loaded yet."
+        }) : buckets.map((bucket) => /* @__PURE__ */ jsxs("button", {
+          type: "button",
+          className: `bucket-item ${bucket.name === selectedBucket ? "active" : ""}`,
+          onClick: () => onOpenBucket(bucket.name),
+          disabled: loadingObjects,
+          children: [
+            /* @__PURE__ */ jsx("span", {
+              children: bucket.name
+            }),
+            bucket.creationDate && /* @__PURE__ */ jsx("small", {
+              children: new Date(bucket.creationDate).toLocaleString()
+            })
+          ]
+        }, bucket.name))
+      })
+    ]
+  });
+}
+
+// src/features/objects/PathBreadcrumb.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PathBreadcrumb(props) {
+  const { bucket, prefix, loading, onNavigatePrefix } = props;
+  if (!bucket) {
+    return /* @__PURE__ */ jsx2("div", {
+      className: "path-breadcrumb muted",
+      children: /* @__PURE__ */ jsx2("span", {
+        children: "Bucket path will appear here."
+      })
+    });
+  }
+  const segments = prefix.split("/").filter(Boolean);
+  return /* @__PURE__ */ jsxs2("div", {
+    className: "path-breadcrumb",
+    children: [
+      /* @__PURE__ */ jsx2("button", {
+        type: "button",
+        className: "breadcrumb-link",
+        onClick: () => onNavigatePrefix(""),
+        disabled: loading,
+        children: bucket
+      }),
+      segments.map((segment, index) => {
+        const targetPrefix = `${segments.slice(0, index + 1).join("/")}/`;
+        return /* @__PURE__ */ jsxs2("span", {
+          className: "breadcrumb-segment",
+          children: [
+            /* @__PURE__ */ jsx2("span", {
+              className: "breadcrumb-separator",
+              children: "/"
+            }),
+            /* @__PURE__ */ jsx2("button", {
+              type: "button",
+              className: "breadcrumb-link",
+              onClick: () => onNavigatePrefix(targetPrefix),
+              disabled: loading,
+              children: segment
+            })
+          ]
+        }, targetPrefix);
+      })
+    ]
+  });
+}
+
+// src/features/objects/ObjectExplorer.tsx
+import { jsx as jsx3, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+function formatObjectName(key, prefix) {
+  if (!prefix) {
+    return key;
+  }
+  return key.startsWith(prefix) ? key.slice(prefix.length) : key;
+}
+function formatFolderName(prefixValue, currentPrefix) {
+  const clean = prefixValue.replace(/\/$/, "");
+  const withoutCurrent = currentPrefix && clean.startsWith(currentPrefix) ? clean.slice(currentPrefix.length) : clean;
+  const parts = withoutCurrent.split("/").filter(Boolean);
+  return parts.at(-1) ?? clean;
+}
+function ObjectExplorer(props) {
+  const {
+    selectedBucket,
+    prefix,
+    objects,
+    loadingObjects,
+    isNextPage,
+    nextToken,
+    onUpOneLevel,
+    onLoadFirstPage,
+    onLoadNextPage,
+    onOpenFolder,
+    onNavigatePrefix
+  } = props;
+  return /* @__PURE__ */ jsxs3("section", {
+    className: "panel object-panel",
+    children: [
+      /* @__PURE__ */ jsx3("div", {
+        className: "panel-step",
+        children: "Step 3"
+      }),
+      /* @__PURE__ */ jsxs3("div", {
+        className: "objects-header",
+        children: [
+          /* @__PURE__ */ jsxs3("div", {
+            children: [
+              /* @__PURE__ */ jsx3("h3", {
+                children: "Objects"
+              }),
+              /* @__PURE__ */ jsx3("p", {
+                children: "Read-only view of folders and files."
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs3("div", {
+            className: "objects-actions",
+            children: [
+              /* @__PURE__ */ jsx3("button", {
+                type: "button",
+                className: "secondary-button",
+                onClick: onUpOneLevel,
+                disabled: !selectedBucket || loadingObjects,
+                children: "Up One Level"
+              }),
+              /* @__PURE__ */ jsx3("button", {
+                type: "button",
+                className: "secondary-button",
+                onClick: onLoadFirstPage,
+                disabled: !selectedBucket || loadingObjects || !isNextPage,
+                children: "First Page"
+              }),
+              /* @__PURE__ */ jsx3("button", {
+                type: "button",
+                className: "secondary-button",
+                onClick: onLoadNextPage,
+                disabled: !nextToken || loadingObjects,
+                children: loadingObjects ? "Loading..." : "Next Page"
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx3(PathBreadcrumb, {
+        bucket: selectedBucket,
+        prefix,
+        loading: loadingObjects,
+        onNavigatePrefix
+      }),
+      /* @__PURE__ */ jsxs3("div", {
+        className: "objects-list",
+        children: [
+          !objects && /* @__PURE__ */ jsx3("p", {
+            className: "empty-copy",
+            children: "Open a bucket to browse objects."
+          }),
+          objects && /* @__PURE__ */ jsxs3(Fragment, {
+            children: [
+              objects.folders.length === 0 && objects.files.length === 0 && /* @__PURE__ */ jsx3("p", {
+                className: "empty-copy",
+                children: "This path is empty."
+              }),
+              objects.folders.map((folder) => /* @__PURE__ */ jsxs3("button", {
+                type: "button",
+                className: "object-row folder",
+                onClick: () => onOpenFolder(folder),
+                disabled: loadingObjects,
+                children: [
+                  /* @__PURE__ */ jsxs3("span", {
+                    className: "object-name",
+                    children: [
+                      formatFolderName(folder, prefix),
+                      "/"
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx3("span", {
+                    className: "object-meta",
+                    children: "folder"
+                  }),
+                  /* @__PURE__ */ jsx3("span", {
+                    className: "object-meta",
+                    children: "-"
+                  })
+                ]
+              }, folder)),
+              objects.files.map((file) => /* @__PURE__ */ jsxs3("div", {
+                className: "object-row",
+                children: [
+                  /* @__PURE__ */ jsx3("span", {
+                    className: "object-name",
+                    children: formatObjectName(file.key, prefix)
+                  }),
+                  /* @__PURE__ */ jsxs3("span", {
+                    className: "object-meta",
+                    children: [
+                      file.size.toLocaleString(),
+                      " bytes"
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx3("span", {
+                    className: "object-meta",
+                    children: file.lastModified ? new Date(file.lastModified).toLocaleString() : "-"
+                  })
+                ]
+              }, file.key))
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/features/profiles/ProfileSidebar.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ProfileSidebar(props) {
+  const {
+    profiles,
+    selectedProfileId,
+    isEditingExisting,
+    form,
+    showSecret,
+    statusMessage,
+    statusError,
+    testingConnection,
+    onCreateNewProfile,
+    onSelectProfile,
+    onDeleteProfile,
+    onSaveProfile,
+    onTestConnection,
+    onToggleSecret,
+    onFormChange
+  } = props;
+  return /* @__PURE__ */ jsxs4("aside", {
+    className: "panel profile-panel",
+    children: [
+      /* @__PURE__ */ jsx4("div", {
+        className: "panel-step",
+        children: "Step 1"
+      }),
+      /* @__PURE__ */ jsxs4("div", {
+        className: "panel-header",
+        children: [
+          /* @__PURE__ */ jsx4("h1", {
+            children: "Connection Profile"
+          }),
+          /* @__PURE__ */ jsx4("p", {
+            children: "Save and reuse credentials in your browser."
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs4("div", {
+        className: "profiles-toolbar",
+        children: [
+          /* @__PURE__ */ jsx4("strong", {
+            children: "Saved Profiles"
+          }),
+          /* @__PURE__ */ jsx4("button", {
+            type: "button",
+            className: "ghost-button",
+            onClick: onCreateNewProfile,
+            children: "New"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs4("div", {
+        className: "profiles-list",
+        role: "list",
+        "aria-label": "Saved profiles",
+        children: [
+          profiles.length === 0 && /* @__PURE__ */ jsx4("p", {
+            className: "empty-copy",
+            children: "No saved profiles yet."
+          }),
+          profiles.map((profile) => /* @__PURE__ */ jsxs4("div", {
+            className: `profile-card ${profile.id === selectedProfileId ? "active" : ""}`,
+            role: "listitem",
+            children: [
+              /* @__PURE__ */ jsxs4("button", {
+                type: "button",
+                className: "profile-select",
+                onClick: () => onSelectProfile(profile),
+                children: [
+                  /* @__PURE__ */ jsx4("span", {
+                    className: "profile-name",
+                    children: profile.name || "Unnamed profile"
+                  }),
+                  /* @__PURE__ */ jsx4("span", {
+                    className: "profile-endpoint",
+                    children: profile.endpoint
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx4("button", {
+                type: "button",
+                className: "delete-button",
+                onClick: () => onDeleteProfile(profile.id),
+                "aria-label": `Delete ${profile.name || "profile"}`,
+                children: "Delete"
+              })
+            ]
+          }, profile.id))
+        ]
+      }),
+      /* @__PURE__ */ jsxs4("form", {
+        className: "profile-form",
+        onSubmit: onSaveProfile,
+        children: [
+          /* @__PURE__ */ jsxs4("label", {
+            children: [
+              "Profile Name",
+              /* @__PURE__ */ jsx4("input", {
+                type: "text",
+                value: form.name,
+                onChange: (event) => onFormChange("name", event.target.value),
+                placeholder: "MinIO dev, staging S3"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs4("label", {
+            children: [
+              "Endpoint URL *",
+              /* @__PURE__ */ jsx4("input", {
+                type: "url",
+                value: form.endpoint,
+                onChange: (event) => onFormChange("endpoint", event.target.value),
+                placeholder: "https://s3.amazonaws.com",
+                required: true
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs4("label", {
+            children: [
+              "Region",
+              /* @__PURE__ */ jsx4("input", {
+                type: "text",
+                value: form.region,
+                onChange: (event) => onFormChange("region", event.target.value),
+                placeholder: "us-east-1"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs4("label", {
+            children: [
+              "Access Key ID *",
+              /* @__PURE__ */ jsx4("input", {
+                type: "text",
+                value: form.accessKeyId,
+                onChange: (event) => onFormChange("accessKeyId", event.target.value),
+                autoComplete: "off",
+                required: true
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs4("label", {
+            children: [
+              "Secret Access Key *",
+              /* @__PURE__ */ jsxs4("div", {
+                className: "secret-row",
+                children: [
+                  /* @__PURE__ */ jsx4("input", {
+                    type: showSecret ? "text" : "password",
+                    value: form.secretAccessKey,
+                    onChange: (event) => onFormChange("secretAccessKey", event.target.value),
+                    autoComplete: "off",
+                    required: true
+                  }),
+                  /* @__PURE__ */ jsx4("button", {
+                    type: "button",
+                    className: "ghost-button",
+                    onClick: onToggleSecret,
+                    children: showSecret ? "Hide" : "Show"
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs4("label", {
+            className: "checkbox-row",
+            children: [
+              /* @__PURE__ */ jsx4("input", {
+                type: "checkbox",
+                checked: form.forcePathStyle,
+                onChange: (event) => onFormChange("forcePathStyle", event.target.checked)
+              }),
+              "Force path style"
+            ]
+          }),
+          /* @__PURE__ */ jsxs4("div", {
+            className: "form-actions",
+            children: [
+              /* @__PURE__ */ jsx4("button", {
+                type: "submit",
+                className: "primary-button",
+                children: isEditingExisting ? "Update Profile" : "Save Profile"
+              }),
+              /* @__PURE__ */ jsx4("button", {
+                type: "button",
+                className: "secondary-button",
+                onClick: onTestConnection,
+                disabled: testingConnection,
+                children: testingConnection ? "Testing..." : "Test Connection"
+              })
+            ]
+          })
+        ]
+      }),
+      statusMessage && /* @__PURE__ */ jsx4("p", {
+        className: "status-ok",
+        children: statusMessage
+      }),
+      statusError && /* @__PURE__ */ jsx4("p", {
+        className: "status-error",
+        children: statusError
+      })
+    ]
+  });
+}
+
+// src/shared/api/s3Api.ts
+async function postJson(url, body) {
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(body)
+  });
+  const payload = await response.json();
+  if (!response.ok || payload.ok === false) {
+    const message = payload.ok === false ? payload.error?.message : "Request failed.";
+    throw new Error(message || "Request failed.");
+  }
+  return payload.data;
+}
+function testConnection(profile) {
+  return postJson("/api/s3/test-connection", { profile });
+}
+function listBuckets(profile) {
+  return postJson("/api/s3/list-buckets", { profile });
+}
+function listObjects(input) {
+  return postJson("/api/s3/list-objects", input);
+}
+
+// src/shared/hooks/useProfilesStorage.ts
+import { useCallback, useEffect, useMemo, useState } from "react";
+var PROFILES_KEY = "s3-explorer:profiles:v1";
+var LAST_PROFILE_KEY = "s3-explorer:last-profile:v1";
+var PROFILE_VIEW_KEY = "s3-explorer:profile-view:v1";
+var emptyView = {
+  bucket: "",
+  prefix: "",
+  manualBucketName: ""
+};
+function parseStoredProfiles(raw) {
+  if (!raw) {
+    return [];
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) {
+      return [];
+    }
+    return parsed.filter((item) => typeof item === "object" && item !== null).map((item) => {
+      const record = item;
+      return {
+        id: String(record.id ?? crypto.randomUUID()),
+        name: String(record.name ?? ""),
+        endpoint: String(record.endpoint ?? ""),
+        region: String(record.region ?? "us-east-1"),
+        accessKeyId: String(record.accessKeyId ?? ""),
+        secretAccessKey: String(record.secretAccessKey ?? ""),
+        forcePathStyle: record.forcePathStyle !== false
+      };
+    }).filter((profile) => profile.endpoint && profile.accessKeyId && profile.secretAccessKey);
+  } catch {
+    return [];
+  }
+}
+function parseStoredViews(raw) {
+  if (!raw) {
+    return {};
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    if (typeof parsed !== "object" || parsed === null) {
+      return {};
+    }
+    const record = parsed;
+    const next = {};
+    for (const [profileId, value] of Object.entries(record)) {
+      if (typeof value !== "object" || value === null) {
+        continue;
+      }
+      const view = value;
+      next[profileId] = {
+        bucket: typeof view.bucket === "string" ? view.bucket : "",
+        prefix: typeof view.prefix === "string" ? view.prefix : "",
+        manualBucketName: typeof view.manualBucketName === "string" ? view.manualBucketName : ""
+      };
+    }
+    return next;
+  } catch {
+    return {};
+  }
+}
+function useProfilesStorage() {
+  const [profiles, setProfiles] = useState(() => parseStoredProfiles(localStorage.getItem(PROFILES_KEY)));
+  const [profileViews, setProfileViews] = useState(() => parseStoredViews(localStorage.getItem(PROFILE_VIEW_KEY)));
+  const [selectedProfileId, setSelectedProfileId] = useState(() => {
+    const loadedProfiles = parseStoredProfiles(localStorage.getItem(PROFILES_KEY));
+    const storedProfileId = localStorage.getItem(LAST_PROFILE_KEY);
+    const fallbackProfile = loadedProfiles[0]?.id ?? null;
+    return loadedProfiles.some((profile) => profile.id === storedProfileId) ? storedProfileId : fallbackProfile;
+  });
+  useEffect(() => {
+    localStorage.setItem(PROFILES_KEY, JSON.stringify(profiles));
+  }, [profiles]);
+  useEffect(() => {
+    localStorage.setItem(PROFILE_VIEW_KEY, JSON.stringify(profileViews));
+  }, [profileViews]);
+  useEffect(() => {
+    if (selectedProfileId) {
+      localStorage.setItem(LAST_PROFILE_KEY, selectedProfileId);
+    } else {
+      localStorage.removeItem(LAST_PROFILE_KEY);
+    }
+  }, [selectedProfileId]);
+  const selectedProfile = useMemo(() => profiles.find((profile) => profile.id === selectedProfileId) ?? null, [profiles, selectedProfileId]);
+  const saveProfile = useCallback((profile) => {
+    setProfiles((prev) => {
+      const existing = prev.findIndex((entry) => entry.id === profile.id);
+      if (existing === -1) {
+        return [profile, ...prev];
+      }
+      const next = [...prev];
+      next[existing] = profile;
+      return next;
+    });
+  }, []);
+  const deleteProfile = useCallback((profileId) => {
+    setProfiles((prev) => prev.filter((profile) => profile.id !== profileId));
+    setProfileViews((prev) => {
+      const next = { ...prev };
+      delete next[profileId];
+      return next;
+    });
+    setSelectedProfileId((current) => current === profileId ? null : current);
+  }, []);
+  const updateProfileView = useCallback((profileId, patch) => {
+    setProfileViews((prev) => ({
+      ...prev,
+      [profileId]: {
+        ...prev[profileId] ?? emptyView,
+        ...patch
+      }
+    }));
+  }, []);
+  const getProfileView = useCallback((profileId) => {
+    if (!profileId) {
+      return emptyView;
+    }
+    return profileViews[profileId] ?? emptyView;
+  }, [profileViews]);
+  return {
+    profiles,
+    selectedProfileId,
+    selectedProfile,
+    setSelectedProfileId,
+    saveProfile,
+    deleteProfile,
+    updateProfileView,
+    getProfileView
+  };
+}
+
+// src/App.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var DEFAULT_MAX_KEYS = 200;
+var emptyProfile = {
+  name: "",
+  endpoint: "",
+  region: "us-east-1",
+  accessKeyId: "",
+  secretAccessKey: "",
+  forcePathStyle: true
+};
+function toEditable(profile) {
+  return {
+    name: profile.name,
+    endpoint: profile.endpoint,
+    region: profile.region,
+    accessKeyId: profile.accessKeyId,
+    secretAccessKey: profile.secretAccessKey,
+    forcePathStyle: profile.forcePathStyle
+  };
+}
+function deriveName(endpoint) {
+  try {
+    const normalized = endpoint.startsWith("http") ? endpoint : `https://${endpoint}`;
+    const host = new URL(normalized).host;
+    return host || endpoint;
+  } catch {
+    return endpoint;
+  }
+}
+function App() {
+  const {
+    profiles,
+    selectedProfileId,
+    selectedProfile,
+    setSelectedProfileId,
+    saveProfile,
+    deleteProfile,
+    updateProfileView,
+    getProfileView
+  } = useProfilesStorage();
+  const [form, setForm] = useState2(emptyProfile);
+  const [showSecret, setShowSecret] = useState2(false);
+  const [statusMessage, setStatusMessage] = useState2("");
+  const [statusError, setStatusError] = useState2("");
+  const [testingConnection, setTestingConnection] = useState2(false);
+  const [loadingBuckets, setLoadingBuckets] = useState2(false);
+  const [loadingObjects, setLoadingObjects] = useState2(false);
+  const [buckets, setBuckets] = useState2([]);
+  const [manualBucketName, setManualBucketName] = useState2("");
+  const [selectedBucket, setSelectedBucket] = useState2("");
+  const [prefix, setPrefix] = useState2("");
+  const [objects, setObjects] = useState2(null);
+  const [nextToken, setNextToken] = useState2(null);
+  const [isNextPage, setIsNextPage] = useState2(false);
+  useEffect2(() => {
+    if (!selectedProfile) {
+      setForm(emptyProfile);
+      setManualBucketName("");
+      setSelectedBucket("");
+      setPrefix("");
+      setObjects(null);
+      setNextToken(null);
+      setIsNextPage(false);
+      return;
+    }
+    const profileView = getProfileView(selectedProfile.id);
+    setForm(toEditable(selectedProfile));
+    setManualBucketName(profileView.manualBucketName || profileView.bucket);
+    setSelectedBucket(profileView.bucket);
+    setPrefix(profileView.prefix);
+    setObjects(null);
+    setNextToken(null);
+    setIsNextPage(false);
+  }, [selectedProfileId, selectedProfile]);
+  const profileValid = Boolean(form.endpoint.trim()) && Boolean(form.accessKeyId.trim()) && Boolean(form.secretAccessKey.trim());
+  const profilePayload = (value = form) => ({
+    endpoint: value.endpoint.trim(),
+    region: value.region.trim() || "us-east-1",
+    accessKeyId: value.accessKeyId.trim(),
+    secretAccessKey: value.secretAccessKey.trim(),
+    forcePathStyle: value.forcePathStyle
+  });
+  const onFormChange = (field, value) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  };
+  const onCreateNewProfile = () => {
+    setSelectedProfileId(null);
+    setForm(emptyProfile);
+    setShowSecret(false);
+    setStatusMessage("");
+    setStatusError("");
+    setBuckets([]);
+    setManualBucketName("");
+    setSelectedBucket("");
+    setPrefix("");
+    setObjects(null);
+    setNextToken(null);
+    setIsNextPage(false);
+  };
+  const onSelectProfile = (profile) => {
+    setSelectedProfileId(profile.id);
+    setStatusMessage("");
+    setStatusError("");
+  };
+  const onSaveProfile = (event) => {
+    event.preventDefault();
+    if (!profileValid) {
+      setStatusError("Endpoint, access key ID, and secret key are required.");
+      setStatusMessage("");
+      return;
+    }
+    const normalized = {
+      id: selectedProfile?.id ?? crypto.randomUUID(),
+      name: form.name.trim() || deriveName(form.endpoint.trim()),
+      ...profilePayload(form)
+    };
+    saveProfile(normalized);
+    setSelectedProfileId(normalized.id);
+    setStatusError("");
+    setStatusMessage(selectedProfile ? "Profile updated." : "Profile saved.");
+  };
+  const onDeleteProfile = (profileId) => {
+    deleteProfile(profileId);
+    if (selectedProfileId === profileId) {
+      setForm(emptyProfile);
+      setManualBucketName("");
+      setSelectedBucket("");
+      setPrefix("");
+      setObjects(null);
+      setNextToken(null);
+      setIsNextPage(false);
+    }
+    setStatusMessage("Profile deleted.");
+    setStatusError("");
+  };
+  const onTestConnection = async () => {
+    if (!profileValid) {
+      setStatusError("Fill in endpoint, access key ID, and secret key first.");
+      setStatusMessage("");
+      return;
+    }
+    setTestingConnection(true);
+    setStatusError("");
+    setStatusMessage("");
+    try {
+      const result = await testConnection(profilePayload());
+      setStatusMessage(result.message || "Connection successful.");
+    } catch (err) {
+      setStatusError(err instanceof Error ? err.message : "Connection failed.");
+    } finally {
+      setTestingConnection(false);
+    }
+  };
+  const onLoadBuckets = async () => {
+    if (!profileValid) {
+      setStatusError("Fill in endpoint, access key ID, and secret key first.");
+      setStatusMessage("");
+      return;
+    }
+    setLoadingBuckets(true);
+    setStatusError("");
+    try {
+      const result = await listBuckets(profilePayload());
+      setBuckets(result.buckets.filter((bucket) => Boolean(bucket.name)));
+      setStatusMessage(`Loaded ${result.buckets.length} bucket(s).`);
+    } catch (err) {
+      setStatusError(err instanceof Error ? err.message : "Failed to load buckets.");
+      setStatusMessage("");
+    } finally {
+      setLoadingBuckets(false);
+    }
+  };
+  const loadObjects = async (options) => {
+    const { bucket, targetPrefix = "", continuationToken = null, profileOverride } = options;
+    setLoadingObjects(true);
+    setStatusError("");
+    try {
+      const data = await listObjects({
+        profile: profilePayload(profileOverride ?? form),
+        bucket,
+        prefix: targetPrefix,
+        continuationToken,
+        maxKeys: DEFAULT_MAX_KEYS
+      });
+      setSelectedBucket(bucket);
+      setPrefix(targetPrefix);
+      setObjects(data);
+      setNextToken(data.nextContinuationToken);
+      setIsNextPage(Boolean(continuationToken));
+      setStatusMessage(`Loaded ${data.folders.length + data.files.length} item(s) from ${bucket}.`);
+      if (selectedProfileId) {
+        updateProfileView(selectedProfileId, {
+          bucket,
+          prefix: targetPrefix,
+          manualBucketName: manualBucketName.trim() || bucket
+        });
+      }
+    } catch (err) {
+      setStatusError(err instanceof Error ? err.message : "Failed to load objects.");
+      setStatusMessage("");
+    } finally {
+      setLoadingObjects(false);
+    }
+  };
+  const onOpenBucket = async (bucket) => {
+    setManualBucketName(bucket);
+    await loadObjects({ bucket, targetPrefix: "", continuationToken: null });
+  };
+  const onOpenManualBucket = async (event) => {
+    event.preventDefault();
+    if (!profileValid) {
+      setStatusError("Fill in endpoint, access key ID, and secret key first.");
+      setStatusMessage("");
+      return;
+    }
+    const bucket = manualBucketName.trim();
+    if (!bucket) {
+      setStatusError("Enter a bucket name to open.");
+      setStatusMessage("");
+      return;
+    }
+    await onOpenBucket(bucket);
+  };
+  const onOpenFolder = async (folderPrefix) => {
+    if (!selectedBucket) {
+      return;
+    }
+    await loadObjects({ bucket: selectedBucket, targetPrefix: folderPrefix, continuationToken: null });
+  };
+  const onUpOneLevel = async () => {
+    if (!selectedBucket) {
+      return;
+    }
+    if (!prefix) {
+      await loadObjects({ bucket: selectedBucket, targetPrefix: "", continuationToken: null });
+      return;
+    }
+    const trimmed = prefix.replace(/\/$/, "");
+    const segments = trimmed.split("/").filter(Boolean);
+    const parentPrefix = segments.length > 1 ? `${segments.slice(0, -1).join("/")}/` : "";
+    await loadObjects({ bucket: selectedBucket, targetPrefix: parentPrefix, continuationToken: null });
+  };
+  const onNavigatePrefix = async (targetPrefix) => {
+    if (!selectedBucket) {
+      return;
+    }
+    await loadObjects({ bucket: selectedBucket, targetPrefix, continuationToken: null });
+  };
+  const onLoadNextPage = async () => {
+    if (!selectedBucket || !nextToken) {
+      return;
+    }
+    await loadObjects({
+      bucket: selectedBucket,
+      targetPrefix: prefix,
+      continuationToken: nextToken
+    });
+  };
+  const onLoadFirstPage = async () => {
+    if (!selectedBucket) {
+      return;
+    }
+    await loadObjects({ bucket: selectedBucket, targetPrefix: prefix, continuationToken: null });
+  };
+  return /* @__PURE__ */ jsxs5("div", {
+    className: "app-shell",
+    children: [
+      /* @__PURE__ */ jsx5(ProfileSidebar, {
+        profiles,
+        selectedProfileId,
+        isEditingExisting: Boolean(selectedProfile),
+        form,
+        showSecret,
+        statusMessage,
+        statusError,
+        testingConnection,
+        onCreateNewProfile,
+        onSelectProfile,
+        onDeleteProfile,
+        onSaveProfile,
+        onTestConnection,
+        onToggleSecret: () => setShowSecret((prev) => !prev),
+        onFormChange
+      }),
+      /* @__PURE__ */ jsxs5("main", {
+        className: "main-column",
+        children: [
+          /* @__PURE__ */ jsx5(BucketPanel, {
+            profileValid,
+            loadingBuckets,
+            loadingObjects,
+            buckets,
+            selectedBucket,
+            manualBucketName,
+            onManualBucketNameChange: setManualBucketName,
+            onLoadBuckets,
+            onOpenBucket,
+            onOpenManualBucket
+          }),
+          /* @__PURE__ */ jsx5(ObjectExplorer, {
+            selectedBucket,
+            prefix,
+            objects,
+            loadingObjects,
+            isNextPage,
+            nextToken,
+            onUpOneLevel,
+            onLoadFirstPage,
+            onLoadNextPage,
+            onOpenFolder,
+            onNavigatePrefix
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/frontend.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var elem = document.getElementById("root");
+var app = /* @__PURE__ */ jsx6(StrictMode, {
+  children: /* @__PURE__ */ jsx6(App, {})
+});
+if (undefined) {} else {
+  createRoot(elem).render(app);
+}