storage-explorer 0.1.0 → 1.0.0

package/dist/chunk-veptbhs8.css

@@ -0,0 +1 @@
+:root{color:#152234;--bg-top:#f9f3ea;--bg-bottom:#e8eff8;--panel:#ffffffd8;--panel-border:#cdd9e8;--text:#152234;--muted:#5d6f84;--accent:#146c94;--accent-soft:#e1f0f8;--danger:#b9414f;--ok:#1f8b4c;--radius:14px;background:#f6f8fb;font-family:Segoe UI,Avenir Next,Helvetica Neue,sans-serif;font-weight:400;line-height:1.4}*{box-sizing:border-box}body{color:var(--text);background:linear-gradient(168deg,var(--bg-top),var(--bg-bottom));min-width:320px;min-height:100vh;margin:0}body:before{content:"";position:fixed;z-index:-1;pointer-events:none;background:radial-gradient(circle at 20% 18%,#fffa 0,#0000 36%),radial-gradient(circle at 85% 12%,#d9e9fa88 0,#0000 28%),radial-gradient(circle at 70% 80%,#f8e8d6aa 0,#0000 35%);inset:0}#root{width:100%;min-height:100vh}.app-shell{display:grid;grid-template-columns:360px minmax(0,1fr);gap:1rem;width:min(1320px,100% - 2rem);margin:1rem auto}.main-column{display:grid;align-content: start;gap:1rem}.panel{background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:0 10px 24px #12233712}.panel-step{display:inline-block;color:var(--accent);background:var(--accent-soft);border-radius:999px;margin-bottom:.6rem;padding:.2rem .55rem;font-size:.73rem;font-weight:600}.profile-panel{position:sticky;overflow:auto;max-height:calc(100vh - 2rem);padding:1rem;top:1rem}.explorer-panel,.object-panel{padding:1rem}.panel-header h1,.explorer-header h2,.objects-header h3{letter-spacing:.01em;margin:0}.panel-header p,.explorer-header p,.objects-header p{color:var(--muted);margin:.35rem 0 0;font-size:.92rem}.profiles-toolbar{display:flex;justify-content:space-between;align-items: center;margin-top:1rem}.profiles-list{display:grid;gap:.5rem;margin-top:.65rem}.profile-card{border:1px solid var(--panel-border);overflow:hidden;background:#fff;border-radius:10px}.profile-card.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.profile-select{text-align:left;display:grid;cursor:pointer;background:0 0;border:0;gap:.25rem;width:100%;padding:.65rem .75rem}.profile-name{font-weight:600}.profile-endpoint{color:var(--muted);overflow-wrap:anywhere;font-size:.84rem}.delete-button{border:0;border-top:1px solid var(--panel-border);color:var(--danger);cursor:pointer;background:#fff;width:100%;padding:.45rem .75rem}.profile-form{display:grid;gap:.7rem;margin-top:1rem}.profile-form label{display:grid;gap:.35rem;font-size:.9rem}input,button{font:inherit}.profile-form input,.manual-bucket-row input{border:1px solid var(--panel-border);color:var(--text);background:#fff;border-radius:9px;flex:1;padding:.55rem .65rem}.profile-form input:focus,.manual-bucket-row input:focus{outline:2px solid #0000;border-color:var(--accent);box-shadow:0 0 0 2px #146c9430}.secret-row{display:flex;gap:.5rem}.secret-row input{flex:1}.checkbox-row{grid-template-columns:auto 1fr;align-items: center}.checkbox-row input{width:1rem;height:1rem}.form-actions{display:flex;flex-wrap:wrap;gap:.55rem}.primary-button,.secondary-button,.ghost-button{cursor:pointer;border-radius:9px;padding:.55rem .85rem;transition:all .15s}.primary-button{border:1px solid var(--accent);background:var(--accent);color:#fff}.primary-button:hover{filter:brightness(1.05)}.secondary-button{border:1px solid var(--panel-border);color:var(--text);background:#fff}.ghost-button{border:1px solid var(--panel-border);color:var(--muted);background:#fff}.secondary-button:hover,.ghost-button:hover,.delete-button:hover,.bucket-item:hover,.object-row.folder:hover,.breadcrumb-link:hover{background:var(--accent-soft)}button:disabled{opacity:.58;cursor:not-allowed}.status-ok,.status-error,.empty-copy{margin:.75rem 0 0;font-size:.88rem}.status-ok{color:var(--ok)}.status-error{color:var(--danger)}.empty-copy,.muted,.helper-copy{color:var(--muted)}.explorer-header,.objects-header{display:flex;justify-content:space-between;align-items: flex-start;gap:1rem}.manual-bucket-form{display:grid;border:1px solid var(--panel-border);background:#fff;border-radius:10px;gap:.45rem;margin-top:.9rem;padding:.7rem}.manual-bucket-form label{color:var(--muted);font-size:.88rem}.manual-bucket-row{display:flex;align-items: center;gap:.5rem}.helper-copy{margin:0;font-size:.82rem}.buckets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem;margin-top:.8rem}.bucket-item{border:1px solid var(--panel-border);text-align:left;display:grid;cursor:pointer;background:#fff;border-radius:10px;gap:.2rem;padding:.7rem}.bucket-item.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.bucket-item small{color:var(--muted)}.objects-actions{display:flex;flex-wrap:wrap;gap:.5rem}.path-breadcrumb{border:1px solid var(--panel-border);display:flex;background:#fff;border-radius:10px;flex-wrap:wrap;align-items: center;gap:.1rem;margin-top:.8rem;padding:.55rem .7rem;font-size:.88rem}.path-breadcrumb.muted{color:var(--muted)}.breadcrumb-link{cursor:pointer;color:var(--text);background:0 0;border:0;border-radius:6px;padding:.2rem .4rem}.breadcrumb-segment{display:inline-flex;align-items: center}.breadcrumb-separator{color:var(--muted);margin:0 .05rem}.objects-list{border:1px solid var(--panel-border);overflow:auto;background:#fff;border-radius:10px;min-height:320px;margin-top:.8rem;padding:.5rem}.object-row{color:var(--text);display:grid;grid-template-columns:minmax(0,1fr)140px 210px;text-align:left;background:#fff;border:0;border-bottom:1px solid #e7edf6;align-items: center;gap:.8rem;width:100%;padding:.65rem}.object-row:last-child{border-bottom:0}.object-row.folder{cursor:pointer}.object-name{overflow-wrap:anywhere}.object-meta{color:var(--muted);text-align:right;white-space:nowrap;font-size:.82rem}@media (max-width:1020px){.app-shell{grid-template-columns:1fr}.profile-panel{position:static;max-height:none}.explorer-header,.objects-header{flex-direction:column}.manual-bucket-row{flex-direction:column;align-items:stretch}.object-row{grid-template-columns:1fr}.object-meta{text-align:left;white-space:normal}}

package/dist/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="./logo-kygw735p.svg" />
     <title>S3 Explorer</title>
-  <link rel="stylesheet" crossorigin href="./chunk-js4y3bna.css"><script type="module" crossorigin src="./chunk-vtsn1g38.js"></script></head>
+  <link rel="stylesheet" crossorigin href="./chunk-veptbhs8.css"><script type="module" crossorigin src="./chunk-fa0pf3pw.js"></script></head>
   <body>
     <div id="root"></div>
     

package/package.json

@@ -1,9 +1,20 @@
 {
   "name": "storage-explorer",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": false,
-  "bin": "dist/index.js",
+  "bin": {
+    "storage-explorer": "./cli.js"
+  },
   "type": "module",
+  "license": "MIT",
+  "author": {
+    "name": "Ion Korol",
+    "email": "ion@korol.dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/KorSoftwareSolutions/storage-explorer.git"
+  },
   "scripts": {
     "dev": "bun --hot src/index.ts",
     "build": "bun run build.ts",
@@ -20,7 +31,10 @@
     "@types/bun": "latest"
   },
   "files": [
+    "src",
     "dist",
+    "bin",
+    "bunfig.toml",
     "package.json"
   ]
 }

package/src/App.tsx

@@ -0,0 +1,390 @@
+import "./index.css";
+import { useEffect, useState, type FormEvent } from "react";
+import { BucketPanel } from "./features/buckets/BucketPanel";
+import { ObjectExplorer } from "./features/objects/ObjectExplorer";
+import { ProfileSidebar } from "./features/profiles/ProfileSidebar";
+import { listBuckets, listObjects, testConnection } from "./shared/api/s3Api";
+import { useProfilesStorage } from "./shared/hooks/useProfilesStorage";
+import type {
+  BucketItem,
+  EditableProfile,
+  ObjectsPayload,
+  S3ConnectionProfile,
+  SavedProfile,
+} from "./shared/types/s3";
+
+const DEFAULT_MAX_KEYS = 200;
+
+const emptyProfile: EditableProfile = {
+  name: "",
+  endpoint: "",
+  region: "us-east-1",
+  accessKeyId: "",
+  secretAccessKey: "",
+  forcePathStyle: true,
+};
+
+function toEditable(profile: SavedProfile): EditableProfile {
+  return {
+    name: profile.name,
+    endpoint: profile.endpoint,
+    region: profile.region,
+    accessKeyId: profile.accessKeyId,
+    secretAccessKey: profile.secretAccessKey,
+    forcePathStyle: profile.forcePathStyle,
+  };
+}
+
+function deriveName(endpoint: string): string {
+  try {
+    const normalized = endpoint.startsWith("http") ? endpoint : `https://${endpoint}`;
+    const host = new URL(normalized).host;
+    return host || endpoint;
+  } catch {
+    return endpoint;
+  }
+}
+
+export function App() {
+  const {
+    profiles,
+    selectedProfileId,
+    selectedProfile,
+    setSelectedProfileId,
+    saveProfile,
+    deleteProfile,
+    updateProfileView,
+    getProfileView,
+  } = useProfilesStorage();
+
+  const [form, setForm] = useState<EditableProfile>(emptyProfile);
+  const [showSecret, setShowSecret] = useState(false);
+
+  const [statusMessage, setStatusMessage] = useState("");
+  const [statusError, setStatusError] = useState("");
+
+  const [testingConnection, setTestingConnection] = useState(false);
+  const [loadingBuckets, setLoadingBuckets] = useState(false);
+  const [loadingObjects, setLoadingObjects] = useState(false);
+
+  const [buckets, setBuckets] = useState<BucketItem[]>([]);
+  const [manualBucketName, setManualBucketName] = useState("");
+  const [selectedBucket, setSelectedBucket] = useState("");
+  const [prefix, setPrefix] = useState("");
+  const [objects, setObjects] = useState<ObjectsPayload | null>(null);
+  const [nextToken, setNextToken] = useState<string | null>(null);
+  const [isNextPage, setIsNextPage] = useState(false);
+
+  useEffect(() => {
+    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: EditableProfile = form): S3ConnectionProfile => ({
+    endpoint: value.endpoint.trim(),
+    region: value.region.trim() || "us-east-1",
+    accessKeyId: value.accessKeyId.trim(),
+    secretAccessKey: value.secretAccessKey.trim(),
+    forcePathStyle: value.forcePathStyle,
+  });
+
+  const onFormChange = <K extends keyof EditableProfile>(field: K, value: EditableProfile[K]) => {
+    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: SavedProfile) => {
+    setSelectedProfileId(profile.id);
+    setStatusMessage("");
+    setStatusError("");
+  };
+
+  const onSaveProfile = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!profileValid) {
+      setStatusError("Endpoint, access key ID, and secret key are required.");
+      setStatusMessage("");
+      return;
+    }
+
+    const normalized: SavedProfile = {
+      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: string) => {
+    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: {
+    bucket: string;
+    targetPrefix?: string;
+    continuationToken?: string | null;
+    profileOverride?: EditableProfile;
+  }) => {
+    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: string) => {
+    setManualBucketName(bucket);
+    await loadObjects({ bucket, targetPrefix: "", continuationToken: null });
+  };
+
+  const onOpenManualBucket = async (event: FormEvent<HTMLFormElement>) => {
+    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: string) => {
+    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: string) => {
+    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 (
+    <div className="app-shell">
+      <ProfileSidebar
+        profiles={profiles}
+        selectedProfileId={selectedProfileId}
+        isEditingExisting={Boolean(selectedProfile)}
+        form={form}
+        showSecret={showSecret}
+        statusMessage={statusMessage}
+        statusError={statusError}
+        testingConnection={testingConnection}
+        onCreateNewProfile={onCreateNewProfile}
+        onSelectProfile={onSelectProfile}
+        onDeleteProfile={onDeleteProfile}
+        onSaveProfile={onSaveProfile}
+        onTestConnection={onTestConnection}
+        onToggleSecret={() => setShowSecret(prev => !prev)}
+        onFormChange={onFormChange}
+      />
+
+      <main className="main-column">
+        <BucketPanel
+          profileValid={profileValid}
+          loadingBuckets={loadingBuckets}
+          loadingObjects={loadingObjects}
+          buckets={buckets}
+          selectedBucket={selectedBucket}
+          manualBucketName={manualBucketName}
+          onManualBucketNameChange={setManualBucketName}
+          onLoadBuckets={onLoadBuckets}
+          onOpenBucket={onOpenBucket}
+          onOpenManualBucket={onOpenManualBucket}
+        />
+
+        <ObjectExplorer
+          selectedBucket={selectedBucket}
+          prefix={prefix}
+          objects={objects}
+          loadingObjects={loadingObjects}
+          isNextPage={isNextPage}
+          nextToken={nextToken}
+          onUpOneLevel={onUpOneLevel}
+          onLoadFirstPage={onLoadFirstPage}
+          onLoadNextPage={onLoadNextPage}
+          onOpenFolder={onOpenFolder}
+          onNavigatePrefix={onNavigatePrefix}
+        />
+      </main>
+    </div>
+  );
+}
+
+export default App;

package/src/features/buckets/BucketPanel.tsx

@@ -0,0 +1,93 @@
+import type { FormEvent } from "react";
+import type { BucketItem } from "../../shared/types/s3";
+
+type BucketPanelProps = {
+  profileValid: boolean;
+  loadingBuckets: boolean;
+  loadingObjects: boolean;
+  buckets: BucketItem[];
+  selectedBucket: string;
+  manualBucketName: string;
+  onManualBucketNameChange: (value: string) => void;
+  onLoadBuckets: () => void;
+  onOpenBucket: (bucket: string) => void;
+  onOpenManualBucket: (event: FormEvent<HTMLFormElement>) => void;
+};
+
+export function BucketPanel(props: BucketPanelProps) {
+  const {
+    profileValid,
+    loadingBuckets,
+    loadingObjects,
+    buckets,
+    selectedBucket,
+    manualBucketName,
+    onManualBucketNameChange,
+    onLoadBuckets,
+    onOpenBucket,
+    onOpenManualBucket,
+  } = props;
+
+  return (
+    <section className="panel explorer-panel">
+      <div className="panel-step">Step 2</div>
+      <div className="explorer-header">
+        <div>
+          <h2>Buckets</h2>
+          <p>Load visible buckets or open one directly by name.</p>
+        </div>
+        <button
+          type="button"
+          className="primary-button"
+          onClick={onLoadBuckets}
+          disabled={loadingBuckets || !profileValid}
+        >
+          {loadingBuckets ? "Loading..." : "Load Buckets"}
+        </button>
+      </div>
+
+      <form className="manual-bucket-form" onSubmit={onOpenManualBucket}>
+        <label htmlFor="manual-bucket-input">Known bucket name</label>
+        <div className="manual-bucket-row">
+          <input
+            id="manual-bucket-input"
+            type="text"
+            value={manualBucketName}
+            onChange={event => onManualBucketNameChange(event.target.value)}
+            placeholder="my-private-bucket"
+            autoComplete="off"
+          />
+          <button
+            type="submit"
+            className="secondary-button"
+            disabled={loadingObjects || !profileValid}
+          >
+            Open Bucket
+          </button>
+        </div>
+        <p className="helper-copy">
+          Useful when your key can access a bucket but cannot list all buckets.
+        </p>
+      </form>
+
+      <div className="buckets-grid">
+        {buckets.length === 0 ? (
+          <p className="empty-copy">No buckets loaded yet.</p>
+        ) : (
+          buckets.map(bucket => (
+            <button
+              key={bucket.name}
+              type="button"
+              className={`bucket-item ${bucket.name === selectedBucket ? "active" : ""}`}
+              onClick={() => onOpenBucket(bucket.name)}
+              disabled={loadingObjects}
+            >
+              <span>{bucket.name}</span>
+              {bucket.creationDate && <small>{new Date(bucket.creationDate).toLocaleString()}</small>}
+            </button>
+          ))
+        )}
+      </div>
+    </section>
+  );
+}

package/src/features/objects/ObjectExplorer.tsx

@@ -0,0 +1,129 @@
+import type { ObjectsPayload } from "../../shared/types/s3";
+import { PathBreadcrumb } from "./PathBreadcrumb";
+
+type ObjectExplorerProps = {
+  selectedBucket: string;
+  prefix: string;
+  objects: ObjectsPayload | null;
+  loadingObjects: boolean;
+  isNextPage: boolean;
+  nextToken: string | null;
+  onUpOneLevel: () => void;
+  onLoadFirstPage: () => void;
+  onLoadNextPage: () => void;
+  onOpenFolder: (folderPrefix: string) => void;
+  onNavigatePrefix: (prefix: string) => void;
+};
+
+function formatObjectName(key: string, prefix: string): string {
+  if (!prefix) {
+    return key;
+  }
+
+  return key.startsWith(prefix) ? key.slice(prefix.length) : key;
+}
+
+function formatFolderName(prefixValue: string, currentPrefix: string): string {
+  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;
+}
+
+export function ObjectExplorer(props: ObjectExplorerProps) {
+  const {
+    selectedBucket,
+    prefix,
+    objects,
+    loadingObjects,
+    isNextPage,
+    nextToken,
+    onUpOneLevel,
+    onLoadFirstPage,
+    onLoadNextPage,
+    onOpenFolder,
+    onNavigatePrefix,
+  } = props;
+
+  return (
+    <section className="panel object-panel">
+      <div className="panel-step">Step 3</div>
+      <div className="objects-header">
+        <div>
+          <h3>Objects</h3>
+          <p>Read-only view of folders and files.</p>
+        </div>
+        <div className="objects-actions">
+          <button
+            type="button"
+            className="secondary-button"
+            onClick={onUpOneLevel}
+            disabled={!selectedBucket || loadingObjects}
+          >
+            Up One Level
+          </button>
+          <button
+            type="button"
+            className="secondary-button"
+            onClick={onLoadFirstPage}
+            disabled={!selectedBucket || loadingObjects || !isNextPage}
+          >
+            First Page
+          </button>
+          <button
+            type="button"
+            className="secondary-button"
+            onClick={onLoadNextPage}
+            disabled={!nextToken || loadingObjects}
+          >
+            {loadingObjects ? "Loading..." : "Next Page"}
+          </button>
+        </div>
+      </div>
+
+      <PathBreadcrumb
+        bucket={selectedBucket}
+        prefix={prefix}
+        loading={loadingObjects}
+        onNavigatePrefix={onNavigatePrefix}
+      />
+
+      <div className="objects-list">
+        {!objects && <p className="empty-copy">Open a bucket to browse objects.</p>}
+
+        {objects && (
+          <>
+            {objects.folders.length === 0 && objects.files.length === 0 && (
+              <p className="empty-copy">This path is empty.</p>
+            )}
+
+            {objects.folders.map(folder => (
+              <button
+                key={folder}
+                type="button"
+                className="object-row folder"
+                onClick={() => onOpenFolder(folder)}
+                disabled={loadingObjects}
+              >
+                <span className="object-name">{formatFolderName(folder, prefix)}/</span>
+                <span className="object-meta">folder</span>
+                <span className="object-meta">-</span>
+              </button>
+            ))}
+
+            {objects.files.map(file => (
+              <div key={file.key} className="object-row">
+                <span className="object-name">{formatObjectName(file.key, prefix)}</span>
+                <span className="object-meta">{file.size.toLocaleString()} bytes</span>
+                <span className="object-meta">
+                  {file.lastModified ? new Date(file.lastModified).toLocaleString() : "-"}
+                </span>
+              </div>
+            ))}
+          </>
+        )}
+      </div>
+    </section>
+  );
+}