update

Dockerfile

@@ -9,6 +9,7 @@ RUN mkdir -p /data
 
 COPY package.json package-lock.json ./
 RUN npm ci --omit=dev
+RUN node -e "require('@huggingface/hub')"
 
 COPY server.js ./
 COPY src ./src

package.json

@@ -5,7 +5,7 @@
   "description": "Secure Node server with a Hugging Face-style homepage and cookie-backed auth.",
   "scripts": {
     "start": "node server.js",
-    "test": "node test/session-store.test.js && node test/server-smoke.test.js && node test/auth-flow.test.js"
+    "test": "node test/session-store.test.js && node test/server-smoke.test.js && node test/auth-flow.test.js && node test/resource-mutations.test.js"
   },
   "engines": {
     "node": ">=18.17"

public/app.js

@@ -79,6 +79,37 @@
     return `${current.toFixed(current >= 10 || index === 0 ? 0 : 1)} ${units[index]}`;
   }
 
+  function truncateText(value, maxLength = 120) {
+    const text = String(value || "").trim();
+    if (!text || text.length <= maxLength) {
+      return text || "Not set";
+    }
+
+    return `${text.slice(0, Math.max(0, maxLength - 1)).trimEnd()}...`;
+  }
+
+  function titleCase(value) {
+    const text = String(value || "").trim();
+    if (!text) {
+      return "Unknown";
+    }
+
+    return text
+      .split(/[\s_-]+/)
+      .filter(Boolean)
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+      .join(" ");
+  }
+
+  function formatVisibility(value, fallbackPrivate = false) {
+    const normalized = String(value || "").trim().toLowerCase();
+    if (normalized === "private" || normalized === "public" || normalized === "protected") {
+      return titleCase(normalized);
+    }
+
+    return fallbackPrivate ? "Private" : "Public";
+  }
+
   function showFlash(message, tone = "info") {
     if (!flashStack) {
       return;
@@ -95,6 +126,10 @@
     }, 4200);
   }
 
+  function showPermissionDenied(action) {
+    showFlash(`You do not have permission to ${action} with this access token.`, "warning");
+  }
+
   function setLoading() {
     root.setAttribute("aria-busy", "true");
     root.innerHTML = `
@@ -218,6 +253,30 @@
       .join("");
   }
 
+  function renderInlineNotice(message, tone = "neutral") {
+    return `<div class="inline-notice tone-${escapeHtml(tone)}">${escapeHtml(message)}</div>`;
+  }
+
+  function renderPermissionBanner(page, actionLabel = "make changes") {
+    if (page.permissions?.canAttemptWrite) {
+      return "";
+    }
+
+    return renderInlineNotice(
+      `This access token can inspect this ${resourceLabel(page.resourceType).toLowerCase()}, but it does not have permission to ${actionLabel} in @${page.owner}.`,
+      "warning",
+    );
+  }
+
+  function renderExternalLink(href, label) {
+    return `
+      <a class="settings-link-row" href="${escapeHtml(href)}" target="_blank" rel="noreferrer">
+        <span>${escapeHtml(label)}</span>
+        <span class="settings-link-arrow">Open</span>
+      </a>
+    `;
+  }
+
   function renderResourceRow(item) {
     const primary = item.title && item.title !== item.name ? item.title : `${item.owner}/${item.name}`;
     const secondaryBits = [];
@@ -284,6 +343,13 @@
           <div class="meta-badge-row">
             ${renderTokenBadge(state.viewer.tokenRole)}
             ${state.viewer.type === "user" ? `<span class="meta-badge">${state.viewer.orgs.length} orgs</span>` : ""}
+            <span class="meta-badge">@${escapeHtml(state.viewer.username)}</span>
+          </div>
+          <div class="button-row">
+            <a class="primary-button link-button" href="/settings" data-nav>Manage account</a>
+            <a class="secondary-button link-button" href="${escapeHtml(state.viewer.profileUrl)}" target="_blank" rel="noreferrer">
+              View profile on Hugging Face
+            </a>
           </div>
         </div>
         <div class="stats-grid">
@@ -376,6 +442,18 @@
     `;
   }
 
+  function renderScopeList(namespaces) {
+    if (!Array.isArray(namespaces) || !namespaces.length) {
+      return `<div class="empty-state">No namespaces were returned for this access token.</div>`;
+    }
+
+    return `
+      <div class="badge-grid">
+        ${namespaces.map((namespace) => `<span class="meta-badge">${escapeHtml(namespace)}</span>`).join("")}
+      </div>
+    `;
+  }
+
   function renderSettings(page) {
     const viewer = page.account;
     return `
@@ -402,6 +480,22 @@
             <div><dt>Token created</dt><dd>${escapeHtml(formatDate(viewer.tokenCreatedAt))}</dd></div>
           </dl>
         </article>
+        <article class="panel">
+          <div class="panel-head">
+            <div>
+              <div class="eyebrow">Workspace</div>
+              <h2>Account links</h2>
+            </div>
+          </div>
+          <div class="settings-link-list">
+            ${renderExternalLink(page.links.profileUrl, "Open profile")}
+            ${renderExternalLink(page.links.repositoriesUrl, "Repository settings")}
+            ${renderExternalLink(page.links.webhooksUrl, "Webhooks")}
+            ${renderExternalLink(page.links.tokensUrl, "Access tokens")}
+          </div>
+        </article>
+      </section>
+      <section class="content-grid two-up">
         <article class="panel">
           <div class="panel-head">
             <div>
@@ -415,12 +509,22 @@
             <li>All writes in this interface require a CSRF token derived from the authenticated session.</li>
           </ul>
         </article>
+        <article class="panel">
+          <div class="panel-head">
+            <div>
+              <div class="eyebrow">Namespaces</div>
+              <h2>Token scopes</h2>
+            </div>
+          </div>
+          <p class="page-subtitle">Writes only succeed where this token is both writable and scoped to the owner namespace.</p>
+          ${renderScopeList(viewer.namespaces || [])}
+        </article>
       </section>
       <section class="content-section">
         <div class="section-head">
           <div>
-            <div class="eyebrow">Namespaces</div>
-            <h2>Organizations and user scopes</h2>
+            <div class="eyebrow">Organizations</div>
+            <h2>Connected orgs</h2>
           </div>
         </div>
         ${renderOrgList(viewer.orgs || [])}
@@ -565,6 +669,7 @@
   function renderSpaceApp(page) {
     const canWrite = Boolean(page.permissions.canAttemptWrite);
     return `
+      ${renderPermissionBanner(page, "change this Space runtime")}
       <section class="content-grid two-up">
         <article class="panel">
           <div class="panel-head between">
@@ -601,7 +706,7 @@
           </div>
           ${
             !canWrite
-              ? `<div class="inline-notice">This token can view runtime details, but mutating Space actions may be rejected.</div>`
+              ? renderInlineNotice("This token can view runtime details, but runtime actions will be rejected.", "warning")
               : ""
           }
         </article>
@@ -716,6 +821,11 @@
           <div>${escapeHtml(file.path)}</div>
           <div>${escapeHtml(formatBytes(file.size))}${file.truncated ? " · preview truncated" : ""}</div>
         </div>
+        ${
+          canAttemptWrite
+            ? ""
+            : renderInlineNotice("This token can read this file, but save and delete actions will be rejected.", "warning")
+        }
         ${
           file.editable
             ? `<textarea class="file-editor" id="file-editor-textarea">${escapeHtml(file.content)}</textarea>`
@@ -737,7 +847,7 @@
   function renderFilesPanel(page, sideContentTitle = "Recent updates") {
     const branchSelector =
       page.resourceType === "bucket"
-        ? `<div class="inline-notice">Buckets are mutable object storage, so branches are not available.</div>`
+        ? renderInlineNotice("Buckets are mutable object storage, so branches are not available.")
         : `
           <label class="field-label">
             <span>Branch</span>
@@ -756,6 +866,7 @@
         `;
 
     return `
+      ${renderPermissionBanner(page, "edit or delete files")}
       <section class="content-grid files-grid">
         <article class="panel">
           <div class="panel-head between">
@@ -850,60 +961,467 @@
     `;
   }
 
-  function renderResourceSettings(page) {
-    const repoActions =
-      page.resourceType === "space"
-        ? `
-          <div class="button-row">
-            <button class="ghost-button" type="button" data-space-action="${escapeHtml(
-              page.owner,
-            )}/${escapeHtml(page.name)}:pause" data-can-write="${page.permissions.canAttemptWrite}">Pause</button>
-            <button class="ghost-button" type="button" data-space-action="${escapeHtml(
-              page.owner,
-            )}/${escapeHtml(page.name)}:restart" data-can-write="${page.permissions.canAttemptWrite}">Restart</button>
+  function renderSettingsSummaryPanel(page) {
+    return `
+      <article class="panel">
+        <div class="panel-head">
+          <div>
+            <div class="eyebrow">Repository</div>
+            <h2>Settings summary</h2>
           </div>
-        `
-        : "";
-
-    const bucketNotice =
-      page.resourceType === "bucket"
-        ? `<div class="inline-notice">Buckets do not expose git branches, Community tabs, or an app runtime. This page sticks to the storage features that actually exist on the Hub.</div>`
-        : "";
+        </div>
+        <dl class="detail-list">
+          <div><dt>Repo</dt><dd>${escapeHtml(page.owner)}/${escapeHtml(page.name)}</dd></div>
+          <div><dt>Visibility</dt><dd>${escapeHtml(formatVisibility(page.settings?.visibility, page.private))}</dd></div>
+          <div><dt>Token role</dt><dd>${escapeHtml(page.permissions.tokenRole)}</dd></div>
+          <div><dt>Writable here</dt><dd>${page.permissions.canAttemptWrite ? "Yes" : "No"}</dd></div>
+          ${
+            typeof page.settings?.usedStorage === "number"
+              ? `<div><dt>Storage used</dt><dd>${escapeHtml(formatBytes(page.settings.usedStorage))}</dd></div>`
+              : ""
+          }
+          ${page.settings?.resourceGroup ? `<div><dt>Resource group</dt><dd>${escapeHtml(page.settings.resourceGroup)}</dd></div>` : ""}
+          ${page.sha ? `<div><dt>Current SHA</dt><dd class="mono">${escapeHtml(page.sha)}</dd></div>` : ""}
+        </dl>
+      </article>
+    `;
+  }
 
+  function renderNativeLinksPanel(page) {
     return `
-      <section class="content-grid two-up">
+      <article class="panel">
+        <div class="panel-head">
+          <div>
+            <div class="eyebrow">Hub</div>
+            <h2>Native links</h2>
+          </div>
+        </div>
+        <div class="settings-link-list">
+          ${renderExternalLink(page.settings?.repoUrl || page.hubUrl, "Open repository")}
+          ${renderExternalLink(page.settings?.settingsUrl || page.hubUrl, "Open native settings")}
+          ${
+            page.settings?.communityUrl
+              ? renderExternalLink(page.settings.communityUrl, "Open community")
+              : ""
+          }
+          ${
+            page.appUrl
+              ? renderExternalLink(page.appUrl, "Open app")
+              : ""
+          }
+        </div>
+      </article>
+    `;
+  }
+
+  function renderVisibilityPanel(page) {
+    if (!page.settings?.supportsVisibility) {
+      return `
         <article class="panel">
           <div class="panel-head">
             <div>
-              <div class="eyebrow">Repository</div>
-              <h2>Settings summary</h2>
+              <div class="eyebrow">Visibility</div>
+              <h2>Visibility controls</h2>
             </div>
           </div>
-          <dl class="detail-list">
-            <div><dt>Repo</dt><dd>${escapeHtml(page.owner)}/${escapeHtml(page.name)}</dd></div>
-            <div><dt>Visibility</dt><dd>${escapeHtml(page.private ? "Private" : "Public")}</dd></div>
-            <div><dt>Token role</dt><dd>${escapeHtml(page.permissions.tokenRole)}</dd></div>
-            ${page.sha ? `<div><dt>Current SHA</dt><dd class="mono">${escapeHtml(page.sha)}</dd></div>` : ""}
-          </dl>
-          ${bucketNotice}
-          ${repoActions}
+          ${renderInlineNotice("This resource type does not expose visibility changes in this interface.")}
         </article>
+      `;
+    }
+
+    return `
+      <article class="panel">
+        <div class="panel-head">
+          <div>
+            <div class="eyebrow">Visibility</div>
+            <h2>Change access level</h2>
+          </div>
+        </div>
+        <form class="action-form" data-visibility-form data-type="${escapeHtml(page.resourceType)}" data-repo-id="${escapeHtml(
+          page.id,
+        )}" data-can-write="${page.permissions.canAttemptWrite}">
+          <label class="field-label">
+            <span>Visibility</span>
+            <select class="branch-select" name="visibility">
+              ${["public", "private", "protected"]
+                .map(
+                  (option) => `
+                    <option value="${option}" ${page.settings.visibility === option ? "selected" : ""}>
+                      ${escapeHtml(titleCase(option))}
+                    </option>
+                  `,
+                )
+                .join("")}
+            </select>
+          </label>
+          <p class="form-help">Protected stays available for resource types and plans that support it on the Hub.</p>
+          <div class="button-row">
+            <button class="primary-button" type="submit">Save visibility</button>
+          </div>
+        </form>
+      </article>
+    `;
+  }
+
+  function renderMovePanel(page) {
+    if (!page.settings?.supportsMove) {
+      return `
         <article class="panel">
           <div class="panel-head">
             <div>
-              <div class="eyebrow">Hub</div>
-              <h2>Native links</h2>
+              <div class="eyebrow">Transfer</div>
+              <h2>Rename or move</h2>
             </div>
           </div>
+          ${renderInlineNotice("This resource type does not expose rename or transfer controls here.")}
+        </article>
+      `;
+    }
+
+    return `
+      <article class="panel">
+        <div class="panel-head">
+          <div>
+            <div class="eyebrow">Transfer</div>
+            <h2>Rename or move</h2>
+          </div>
+        </div>
+        <form class="action-form" data-move-form data-type="${escapeHtml(page.resourceType)}" data-from-id="${escapeHtml(
+          page.id,
+        )}" data-can-write="${page.permissions.canAttemptWrite}">
+          <div class="field-grid two-col">
+            <label class="field-label">
+              <span>Namespace</span>
+              <input class="text-input" type="text" name="namespace" value="${escapeHtml(page.owner)}" required>
+            </label>
+            <label class="field-label">
+              <span>Name</span>
+              <input class="text-input" type="text" name="name" value="${escapeHtml(page.name)}" required>
+            </label>
+          </div>
+          <p class="form-help">Use this to rename the repo or transfer it into another namespace you can write to.</p>
           <div class="button-row">
-            <a class="secondary-button link-button" href="${escapeHtml(page.hubUrl)}" target="_blank" rel="noreferrer">Open repo</a>
-            ${
-              page.appUrl
-                ? `<a class="secondary-button link-button" href="${escapeHtml(page.appUrl)}" target="_blank" rel="noreferrer">Open app</a>`
-                : ""
-            }
+            <button class="secondary-button" type="submit">Save repo path</button>
           </div>
-        </article>
+        </form>
+      </article>
+    `;
+  }
+
+  function renderDangerZonePanel(page) {
+    if (!page.settings?.supportsDelete) {
+      return "";
+    }
+
+    return `
+      <article class="panel danger-panel">
+        <div class="panel-head">
+          <div>
+            <div class="eyebrow">Danger zone</div>
+            <h2>Delete resource</h2>
+          </div>
+        </div>
+        <p class="body-copy">Deleting this resource removes it from the authenticated workspace and from the Hub.</p>
+        <div class="button-row">
+          <button class="danger-button" type="button" data-delete-resource data-type="${escapeHtml(
+            page.resourceType,
+          )}" data-repo-id="${escapeHtml(page.id)}" data-can-write="${page.permissions.canAttemptWrite}">
+            Delete ${escapeHtml(resourceLabel(page.resourceType))}
+          </button>
+        </div>
+      </article>
+    `;
+  }
+
+  function renderSpaceConfigEntries(entries, kind) {
+    if (!entries.length) {
+      return `<div class="empty-state">No ${escapeHtml(kind)}s are configured for this Space.</div>`;
+    }
+
+    return `
+      <div class="settings-item-list">
+        ${entries
+          .map(
+            (entry) => `
+              <article class="settings-item-card">
+                <div class="settings-item-top">
+                  <div class="settings-item-title">${escapeHtml(entry.key)}</div>
+                  <div class="settings-item-meta">${escapeHtml(formatDate(entry.updatedAt))}</div>
+                </div>
+                <div class="settings-item-body">
+                  ${
+                    entry.description
+                      ? `<p class="body-copy compact">${escapeHtml(entry.description)}</p>`
+                      : `<p class="body-copy compact">No description was provided.</p>`
+                  }
+                  <div class="settings-item-value mono">${
+                    kind === "secret" ? "Secret value hidden" : escapeHtml(truncateText(entry.value))
+                  }</div>
+                </div>
+              </article>
+            `,
+          )
+          .join("")}
+      </div>
+    `;
+  }
+
+  function renderSpaceConfigPanel(page, kind) {
+    const label = kind === "secret" ? "Secrets" : "Variables";
+    const endpoint = kind === "secret" ? "secrets" : "variables";
+    const entries = Array.isArray(page.settings?.[endpoint]) ? page.settings[endpoint] : [];
+
+    return `
+      <article class="panel">
+        <div class="panel-head">
+          <div>
+            <div class="eyebrow">Space config</div>
+            <h2>${escapeHtml(label)}</h2>
+          </div>
+        </div>
+        ${renderSpaceConfigEntries(entries, kind)}
+        <form class="action-form" data-space-config-form data-kind="${escapeHtml(kind)}" data-owner="${escapeHtml(
+          page.owner,
+        )}" data-name="${escapeHtml(page.name)}" data-can-write="${page.permissions.canAttemptWrite}">
+          <div class="field-grid two-col">
+            <label class="field-label">
+              <span>Key</span>
+              <input class="text-input" type="text" name="key" placeholder="${kind === "secret" ? "API_KEY" : "MODEL_REPO"}" required>
+            </label>
+            <label class="field-label">
+              <span>Description</span>
+              <input class="text-input" type="text" name="description" placeholder="Optional note">
+            </label>
+          </div>
+          <label class="field-label">
+            <span>Value</span>
+            <textarea class="form-textarea" name="value" rows="4" placeholder="${kind === "secret" ? "Secret value" : "Variable value"}" required></textarea>
+          </label>
+          <div class="button-row">
+            <button class="secondary-button" type="submit">Save ${escapeHtml(kind)}</button>
+          </div>
+        </form>
+      </article>
+    `;
+  }
+
+  function renderAttachedBuckets(page) {
+    const attachedBuckets = Array.isArray(page.settings?.attachedBuckets) ? page.settings.attachedBuckets : [];
+    const availableBuckets = Array.isArray(page.settings?.buckets) ? page.settings.buckets : [];
+
+    return `
+      <article class="panel">
+        <div class="panel-head">
+          <div>
+            <div class="eyebrow">Storage</div>
+            <h2>Bucket mounts</h2>
+          </div>
+        </div>
+        ${
+          attachedBuckets.length
+            ? `
+              <div class="settings-item-list">
+                ${attachedBuckets
+                  .map(
+                    (entry) => `
+                      <article class="settings-item-card">
+                        <div class="settings-item-top">
+                          <div class="settings-item-title">${escapeHtml(entry.bucketId || "Attached bucket")}</div>
+                          <div class="settings-item-meta">${escapeHtml(entry.mode || "mounted")}</div>
+                        </div>
+                        <div class="settings-item-value mono">${escapeHtml(entry.mountPath || "/data")}</div>
+                      </article>
+                    `,
+                  )
+                  .join("")}
+              </div>
+            `
+            : renderInlineNotice("No mounted buckets were returned for this Space.")
+        }
+        <div class="panel-subsection">
+          <div class="panel-subtitle">Owned buckets</div>
+          ${
+            availableBuckets.length
+              ? `
+                <div class="settings-item-list">
+                  ${availableBuckets
+                    .map(
+                      (bucket) => `
+                        <a class="settings-link-row" href="${escapeHtml(bucket.url)}" data-nav>
+                          <span>${escapeHtml(bucket.owner)}/${escapeHtml(bucket.name)}</span>
+                          <span>${escapeHtml(formatBytes(bucket.size))}</span>
+                        </a>
+                      `,
+                    )
+                    .join("")}
+                </div>
+              `
+              : `<div class="empty-state">No owned buckets were returned for this namespace.</div>`
+          }
+        </div>
+      </article>
+    `;
+  }
+
+  function renderSpaceWebhookPanel(page) {
+    const webhooks = Array.isArray(page.settings?.webhooks) ? page.settings.webhooks : [];
+    return `
+      <article class="panel">
+        <div class="panel-head">
+          <div>
+            <div class="eyebrow">Automation</div>
+            <h2>Webhooks</h2>
+          </div>
+        </div>
+        ${
+          webhooks.length
+            ? `
+              <div class="settings-item-list">
+                ${webhooks
+                  .map(
+                    (webhook) => `
+                      <article class="settings-item-card">
+                        <div class="settings-item-top">
+                          <div class="settings-item-title">${escapeHtml(webhook.url)}</div>
+                          <div class="settings-item-meta">${webhook.disabled ? "Disabled" : "Active"}</div>
+                        </div>
+                        <div class="settings-item-value">${escapeHtml(
+                          webhook.watched.map((item) => `${item.type}:${item.name}`).join(" · ") || "No watched scopes",
+                        )}</div>
+                      </article>
+                    `,
+                  )
+                  .join("")}
+              </div>
+            `
+            : `<div class="empty-state">No matching webhooks were returned for this Space.</div>`
+        }
+      </article>
+    `;
+  }
+
+  function renderBucketStoragePanel(page) {
+    return `
+      <article class="panel">
+        <div class="panel-head">
+          <div>
+            <div class="eyebrow">Storage</div>
+            <h2>Bucket details</h2>
+          </div>
+        </div>
+        <dl class="detail-list">
+          <div><dt>Type</dt><dd>${escapeHtml(page.settings?.storageType || "Mutable storage bucket")}</dd></div>
+          <div><dt>Region</dt><dd>${escapeHtml(page.region || "Unknown")}</dd></div>
+          <div><dt>Total size</dt><dd>${escapeHtml(formatBytes(page.size))}</dd></div>
+          <div><dt>Files</dt><dd>${escapeHtml(compactNumber(page.fileCount))}</dd></div>
+        </dl>
+        ${renderInlineNotice("Buckets intentionally stay focused on files and storage operations. App and community tabs are not surfaced because they are not native bucket views.")}
+      </article>
+    `;
+  }
+
+  function renderResourceSettings(page) {
+    const spacePanels =
+      page.resourceType === "space"
+        ? `
+          <section class="content-grid two-up">
+            <article class="panel">
+              <div class="panel-head">
+                <div>
+                  <div class="eyebrow">Runtime</div>
+                  <h2>Space runtime</h2>
+                </div>
+              </div>
+              <dl class="detail-list">
+                <div><dt>Stage</dt><dd>${escapeHtml(page.runtime?.stage || "Unknown")}</dd></div>
+                <div><dt>SDK</dt><dd>${escapeHtml(page.settings?.sdk || page.sdk || "Unknown")}</dd></div>
+                <div><dt>Current hardware</dt><dd>${escapeHtml(page.runtime?.hardware?.current || "Unknown")}</dd></div>
+                <div><dt>Requested hardware</dt><dd>${escapeHtml(page.runtime?.hardware?.requested || "Unknown")}</dd></div>
+              </dl>
+              <div class="button-row">
+                <button class="ghost-button" type="button" data-space-action="${escapeHtml(
+                  page.owner,
+                )}/${escapeHtml(page.name)}:pause" data-can-write="${page.permissions.canAttemptWrite}">Pause</button>
+                <button class="ghost-button" type="button" data-space-action="${escapeHtml(
+                  page.owner,
+                )}/${escapeHtml(page.name)}:restart" data-can-write="${page.permissions.canAttemptWrite}">Restart</button>
+              </div>
+            </article>
+            ${renderAttachedBuckets(page)}
+          </section>
+          <section class="content-grid two-up">
+            ${renderSpaceConfigPanel(page, "variable")}
+            ${renderSpaceConfigPanel(page, "secret")}
+          </section>
+          <section class="content-grid two-up">
+            ${renderSpaceWebhookPanel(page)}
+            <article class="panel">
+              <div class="panel-head">
+                <div>
+                  <div class="eyebrow">Links</div>
+                  <h2>Space destinations</h2>
+                </div>
+              </div>
+              <div class="settings-link-list">
+                ${page.appUrl ? renderExternalLink(page.appUrl, "Open app") : ""}
+                ${page.settings?.analyticsUrl ? renderExternalLink(page.settings.analyticsUrl, "Analytics and runtime settings") : ""}
+                ${page.settings?.storageOverviewUrl ? renderExternalLink(page.settings.storageOverviewUrl, "Storage overview") : ""}
+                ${page.settings?.webhooksUrl ? renderExternalLink(page.settings.webhooksUrl, "Account webhooks") : ""}
+              </div>
+            </article>
+          </section>
+        `
+        : "";
+
+    const bucketPanels =
+      page.resourceType === "bucket"
+        ? `
+          <section class="content-grid two-up">
+            ${renderBucketStoragePanel(page)}
+            <article class="panel">
+              <div class="panel-head">
+                <div>
+                  <div class="eyebrow">Activity</div>
+                  <h2>Recent uploads</h2>
+                </div>
+              </div>
+              ${
+                Array.isArray(page.activity) && page.activity.length
+                  ? `
+                    <div class="activity-list">
+                      ${page.activity
+                        .map(
+                          (entry) => `
+                            <article class="activity-item">
+                              <div class="activity-item-title">${escapeHtml(entry.path)}</div>
+                              <div class="activity-item-meta">${escapeHtml(formatDate(entry.uploadedAt))}</div>
+                            </article>
+                          `,
+                        )
+                        .join("")}
+                    </div>
+                  `
+                  : `<div class="empty-state">No recent bucket uploads were returned.</div>`
+              }
+            </article>
+          </section>
+        `
+        : "";
+
+    return `
+      ${renderPermissionBanner(page, "change settings")}
+      <section class="content-grid two-up">
+        ${renderSettingsSummaryPanel(page)}
+        ${renderNativeLinksPanel(page)}
+      </section>
+      ${spacePanels}
+      ${bucketPanels}
+      <section class="content-grid two-up">
+        ${renderVisibilityPanel(page)}
+        ${renderMovePanel(page)}
+      </section>
+      <section class="content-grid two-up">
+        ${renderDangerZonePanel(page)}
       </section>
     `;
   }
@@ -992,6 +1510,10 @@
     return parts.join("/");
   }
 
+  function collectionUrlFor(resourceType) {
+    return `/${resourceType}s`;
+  }
+
   function bindFileActions(page) {
     root.querySelectorAll("[data-file-editor]").forEach((editor) => {
       const canWrite = editor.dataset.canWrite === "true";
@@ -1009,7 +1531,7 @@
       if (saveButton) {
         saveButton.addEventListener("click", async () => {
           if (!canWrite) {
-            showFlash("This access token does not have permission to update that file.", "warning");
+            showPermissionDenied("update that file");
             return;
           }
 
@@ -1045,7 +1567,7 @@
       if (deleteButton) {
         deleteButton.addEventListener("click", async () => {
           if (!canWrite) {
-            showFlash("This access token does not have permission to delete that file.", "warning");
+            showPermissionDenied("delete that file");
             return;
           }
 
@@ -1089,7 +1611,7 @@
         const canWrite = button.dataset.canWrite === "true";
         const [repoId, action] = String(button.dataset.spaceAction || "").split(":");
         if (!canWrite) {
-          showFlash("This access token does not have permission to change that Space runtime.", "warning");
+          showPermissionDenied("change that Space runtime");
           return;
         }
 
@@ -1110,6 +1632,183 @@
     });
   }
 
+  function bindVisibilityForms() {
+    root.querySelectorAll("[data-visibility-form]").forEach((form) => {
+      form.addEventListener("submit", async (event) => {
+        event.preventDefault();
+
+        const canWrite = form.dataset.canWrite === "true";
+        if (!canWrite) {
+          showPermissionDenied("change this resource's visibility");
+          return;
+        }
+
+        const submitButton = form.querySelector('button[type="submit"]');
+        const visibility = form.elements.visibility?.value || "private";
+
+        try {
+          if (submitButton) {
+            submitButton.disabled = true;
+          }
+
+          await apiJson("/api/resources/visibility", {
+            method: "POST",
+            body: JSON.stringify({
+              type: form.dataset.type,
+              repoId: form.dataset.repoId,
+              visibility,
+            }),
+          });
+
+          showFlash("Visibility updated.", "success");
+          navigate(state.currentUrl, { replace: true });
+        } catch (error) {
+          showFlash(error.message, "danger");
+        } finally {
+          if (submitButton) {
+            submitButton.disabled = false;
+          }
+        }
+      });
+    });
+  }
+
+  function bindMoveForms() {
+    root.querySelectorAll("[data-move-form]").forEach((form) => {
+      form.addEventListener("submit", async (event) => {
+        event.preventDefault();
+
+        const canWrite = form.dataset.canWrite === "true";
+        if (!canWrite) {
+          showPermissionDenied("rename or transfer this resource");
+          return;
+        }
+
+        const submitButton = form.querySelector('button[type="submit"]');
+        const namespace = String(form.elements.namespace?.value || "").trim();
+        const name = String(form.elements.name?.value || "").trim();
+
+        try {
+          if (submitButton) {
+            submitButton.disabled = true;
+          }
+
+          const payload = await apiJson("/api/resources/move", {
+            method: "POST",
+            body: JSON.stringify({
+              type: form.dataset.type,
+              fromId: form.dataset.fromId,
+              toId: `${namespace}/${name}`,
+            }),
+          });
+
+          showFlash("Resource path updated.", "success");
+          navigate(payload.url || state.currentUrl, { replace: true });
+        } catch (error) {
+          showFlash(error.message, "danger");
+        } finally {
+          if (submitButton) {
+            submitButton.disabled = false;
+          }
+        }
+      });
+    });
+  }
+
+  function bindResourceDeleteButtons() {
+    root.querySelectorAll("[data-delete-resource]").forEach((button) => {
+      button.addEventListener("click", async () => {
+        const canWrite = button.dataset.canWrite === "true";
+        if (!canWrite) {
+          showPermissionDenied("delete this resource");
+          return;
+        }
+
+        const type = button.dataset.type;
+        const repoId = button.dataset.repoId;
+        const confirmed = window.confirm(`Delete ${repoId}? This cannot be undone.`);
+        if (!confirmed) {
+          return;
+        }
+
+        try {
+          button.disabled = true;
+          await apiJson("/api/resources/delete", {
+            method: "POST",
+            body: JSON.stringify({
+              type,
+              repoId,
+            }),
+          });
+
+          showFlash("Resource deleted.", "success");
+          navigate(collectionUrlFor(type), { replace: true });
+        } catch (error) {
+          showFlash(error.message, "danger");
+        } finally {
+          button.disabled = false;
+        }
+      });
+    });
+  }
+
+  function bindSpaceConfigForms() {
+    root.querySelectorAll("[data-space-config-form]").forEach((form) => {
+      form.addEventListener("submit", async (event) => {
+        event.preventDefault();
+
+        const canWrite = form.dataset.canWrite === "true";
+        if (!canWrite) {
+          showPermissionDenied(`save Space ${form.dataset.kind || "config"}`);
+          return;
+        }
+
+        const submitButton = form.querySelector('button[type="submit"]');
+        const kind = form.dataset.kind === "secret" ? "secrets" : "variables";
+        const owner = form.dataset.owner;
+        const name = form.dataset.name;
+
+        try {
+          if (submitButton) {
+            submitButton.disabled = true;
+          }
+
+          await apiJson(`/api/spaces/${encodeURIComponent(owner)}/${encodeURIComponent(name)}/${kind}`, {
+            method: "POST",
+            body: JSON.stringify({
+              key: form.elements.key?.value || "",
+              description: form.elements.description?.value || "",
+              value: form.elements.value?.value || "",
+            }),
+          });
+
+          showFlash(`Space ${kind === "secrets" ? "secret" : "variable"} saved.`, "success");
+          navigate(buildResourceHref("space", owner, name, "settings"), { replace: true });
+        } catch (error) {
+          showFlash(error.message, "danger");
+        } finally {
+          if (submitButton) {
+            submitButton.disabled = false;
+          }
+        }
+      });
+    });
+  }
+
+  function bindSettingsActions(page) {
+    if (page.tab !== "settings") {
+      return;
+    }
+
+    bindVisibilityForms();
+    bindMoveForms();
+    bindResourceDeleteButtons();
+
+    if (page.kind === "space") {
+      bindSpaceConfigForms();
+    }
+  }
+
   function renderLiveUpdates(target, snapshot) {
     if (!target) {
       return;
@@ -1240,6 +1939,10 @@
         bindFileActions(page);
         connectUpdateStream(page.live.updatesUrl);
       }
+
+      if (page.tab === "settings") {
+        bindSettingsActions(page);
+      }
     }
 
     if (page.kind === "bucket" && page.tab === "files") {
@@ -1247,11 +1950,19 @@
       connectUpdateStream(page.live.updatesUrl);
     }
 
+    if (page.kind === "bucket" && page.tab === "settings") {
+      bindSettingsActions(page);
+    }
+
     if ((page.kind === "model" || page.kind === "dataset") && page.tab === "files") {
       bindBranchSelectors(page);
       bindFileActions(page);
       connectUpdateStream(page.live.updatesUrl);
     }
+
+    if ((page.kind === "model" || page.kind === "dataset") && page.tab === "settings") {
+      bindSettingsActions(page);
+    }
   }
 
   function renderPayload(payload) {
@@ -1318,7 +2029,7 @@
 
       const payload = await response.json();
       if (!payload.total) {
-        searchResults.innerHTML = `<div class="search-empty">No owned resources matched “${escapeHtml(trimmed)}”.</div>`;
+        searchResults.innerHTML = `<div class="search-empty">No owned resources matched "${escapeHtml(trimmed)}".</div>`;
         searchResults.classList.remove("is-hidden");
         return;
       }

public/styles.css

@@ -150,7 +150,9 @@ button {
 .login-form input,
 .search-input,
 .branch-select,
-.file-editor {
+.file-editor,
+.text-input,
+.form-textarea {
   width: 100%;
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
@@ -160,12 +162,14 @@ button {
 
 .login-form input,
 .search-input,
-.branch-select {
+.branch-select,
+.text-input {
   min-height: 46px;
   padding: 0 14px;
 }
 
-.file-editor {
+.file-editor,
+.form-textarea {
   min-height: 360px;
   padding: 16px;
   resize: vertical;
@@ -174,6 +178,7 @@ button {
 
 .primary-button,
 .secondary-button,
+.danger-button,
 .ghost-button,
 .menu-button,
 .menu-link,
@@ -203,6 +208,7 @@ button {
 }
 
 .secondary-button,
+.danger-button,
 .ghost-button,
 .menu-button,
 .menu-link,
@@ -213,6 +219,7 @@ button {
 }
 
 .secondary-button:hover,
+.danger-button:hover,
 .ghost-button:hover,
 .menu-button:hover,
 .menu-link:hover {
@@ -220,6 +227,17 @@ button {
   border-color: #bcc7d2;
 }
 
+.danger-button {
+  background: #fff1f2;
+  border-color: #fecdd3;
+  color: #be123c;
+}
+
+.danger-button:hover {
+  background: #ffe4e6;
+  border-color: #fda4af;
+}
+
 .ghost-button {
   color: var(--muted);
 }
@@ -669,6 +687,16 @@ button {
   color: var(--muted);
 }
 
+.inline-notice.tone-warning {
+  background: #fff7ed;
+  border-color: #fed7aa;
+  color: #9a3412;
+}
+
+.inline-notice.tone-neutral {
+  background: var(--surface-muted);
+}
+
 .error-banner {
   margin-top: 18px;
   background: #fef2f2;
@@ -717,11 +745,110 @@ button {
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
+.badge-grid,
+.settings-link-list,
+.settings-item-list {
+  display: grid;
+  gap: 12px;
+}
+
 .mini-card {
   display: block;
   min-height: 110px;
 }
 
+.settings-link-row,
+.settings-item-card {
+  display: block;
+  padding: 16px;
+  border-radius: 16px;
+  border: 1px solid var(--line);
+  background: var(--surface-soft);
+}
+
+.settings-link-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 68px;
+}
+
+.settings-link-row:hover {
+  background: #fff;
+  border-color: #bcc7d2;
+}
+
+.settings-link-arrow,
+.settings-item-meta,
+.form-help,
+.panel-subtitle {
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.settings-item-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.settings-item-title {
+  font-weight: 700;
+}
+
+.settings-item-body {
+  margin-top: 10px;
+}
+
+.settings-item-value {
+  margin-top: 10px;
+  word-break: break-word;
+}
+
+.body-copy.compact {
+  margin-top: 0;
+}
+
+.field-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.field-grid.two-col {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.action-form {
+  display: grid;
+  gap: 14px;
+  margin-top: 18px;
+}
+
+.form-textarea {
+  min-height: 120px;
+}
+
+.form-help {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.panel-subsection {
+  margin-top: 18px;
+}
+
+.panel-subtitle {
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.danger-panel {
+  border-color: #fecdd3;
+  background: linear-gradient(180deg, rgba(255, 241, 242, 0.92), rgba(255, 255, 255, 0.95));
+}
+
 .files-layout {
   margin-top: 18px;
   align-items: stretch;
@@ -875,6 +1002,12 @@ button {
     display: block;
   }
 
+  .field-grid.two-col,
+  .settings-item-top,
+  .settings-link-row {
+    display: block;
+  }
+
   .button-row,
   .meta-badge-row {
     margin-top: 14px;

server.js

@@ -6,14 +6,20 @@ const { SessionStore } = require("./src/session-store");
 const {
   HfApiError,
   buildSpaceStreamUrl,
+  createResource,
+  deleteResource,
   getDownloadBlob,
   getPageData,
   getResourceUpdates,
   getSearchResults,
   getViewer,
+  moveResource,
   performSpaceAction,
   removeFile,
+  saveSpaceSecret,
+  saveSpaceVariable,
   updateTextFile,
+  updateResourceVisibility,
 } = require("./src/hf-api");
 const { renderAppShell, renderLoginPage } = require("./src/templates");
 
@@ -515,6 +521,120 @@ async function handleFileDelete(req, res) {
   }
 }
 
+async function handleResourceCreate(req, res) {
+  const auth = await requireMutationSession(req, res);
+  if (!auth) {
+    return;
+  }
+
+  try {
+    const body = parseJsonBody(await readBody(req));
+    const payload = await createResource(auth.accessToken, {
+      type: body.type,
+      namespace: body.namespace,
+      name: body.name,
+      visibility: body.visibility,
+      sdk: body.sdk,
+    });
+    sendJson(res, 200, payload);
+  } catch (error) {
+    const safeError = sanitizeError(error);
+    sendJson(res, safeError.statusCode, { error: safeError.message });
+  }
+}
+
+async function handleResourceMove(req, res) {
+  const auth = await requireMutationSession(req, res);
+  if (!auth) {
+    return;
+  }
+
+  try {
+    const body = parseJsonBody(await readBody(req));
+    const payload = await moveResource(auth.accessToken, {
+      type: body.type,
+      fromId: body.fromId,
+      toId: body.toId,
+    });
+    sendJson(res, 200, payload);
+  } catch (error) {
+    const safeError = sanitizeError(error);
+    sendJson(res, safeError.statusCode, { error: safeError.message });
+  }
+}
+
+async function handleResourceVisibility(req, res) {
+  const auth = await requireMutationSession(req, res);
+  if (!auth) {
+    return;
+  }
+
+  try {
+    const body = parseJsonBody(await readBody(req));
+    const payload = await updateResourceVisibility(auth.accessToken, {
+      type: body.type,
+      repoId: body.repoId,
+      visibility: body.visibility,
+      private: body.private,
+    });
+    sendJson(res, 200, payload);
+  } catch (error) {
+    const safeError = sanitizeError(error);
+    sendJson(res, safeError.statusCode, { error: safeError.message });
+  }
+}
+
+async function handleResourceDelete(req, res) {
+  const auth = await requireMutationSession(req, res);
+  if (!auth) {
+    return;
+  }
+
+  try {
+    const body = parseJsonBody(await readBody(req));
+    const payload = await deleteResource(auth.accessToken, {
+      type: body.type,
+      repoId: body.repoId,
+    });
+    sendJson(res, 200, payload);
+  } catch (error) {
+    const safeError = sanitizeError(error);
+    sendJson(res, safeError.statusCode, { error: safeError.message });
+  }
+}
+
+async function handleSpaceSecretSave(req, res, owner, name) {
+  const auth = await requireMutationSession(req, res);
+  if (!auth) {
+    return;
+  }
+
+  try {
+    const body = parseJsonBody(await readBody(req));
+    const payload = await saveSpaceSecret(auth.accessToken, `${owner}/${name}`, body);
+    sendJson(res, 200, payload);
+  } catch (error) {
+    const safeError = sanitizeError(error);
+    sendJson(res, safeError.statusCode, { error: safeError.message });
+  }
+}
+
+async function handleSpaceVariableSave(req, res, owner, name) {
+  const auth = await requireMutationSession(req, res);
+  if (!auth) {
+    return;
+  }
+
+  try {
+    const body = parseJsonBody(await readBody(req));
+    const payload = await saveSpaceVariable(auth.accessToken, `${owner}/${name}`, body);
+    sendJson(res, 200, payload);
+  } catch (error) {
+    const safeError = sanitizeError(error);
+    sendJson(res, safeError.statusCode, { error: safeError.message });
+  }
+}
+
 async function handleSpaceAction(req, res, owner, name) {
   const auth = await requireMutationSession(req, res);
   if (!auth) {
@@ -693,6 +813,40 @@ async function handleRequest(req, res) {
     return;
   }
 
+  if (req.method === "POST" && pathname === "/api/resources/create") {
+    await handleResourceCreate(req, res);
+    return;
+  }
+
+  if (req.method === "POST" && pathname === "/api/resources/move") {
+    await handleResourceMove(req, res);
+    return;
+  }
+
+  if (req.method === "POST" && pathname === "/api/resources/visibility") {
+    await handleResourceVisibility(req, res);
+    return;
+  }
+
+  if (req.method === "POST" && pathname === "/api/resources/delete") {
+    await handleResourceDelete(req, res);
+    return;
+  }
+
+  const spaceSecretMatch =
+    req.method === "POST" ? pathname.match(/^\/api\/spaces\/([^/]+)\/([^/]+)\/secrets$/) : null;
+  if (spaceSecretMatch) {
+    await handleSpaceSecretSave(req, res, decodeURIComponent(spaceSecretMatch[1]), decodeURIComponent(spaceSecretMatch[2]));
+    return;
+  }
+
+  const spaceVariableMatch =
+    req.method === "POST" ? pathname.match(/^\/api\/spaces\/([^/]+)\/([^/]+)\/variables$/) : null;
+  if (spaceVariableMatch) {
+    await handleSpaceVariableSave(req, res, decodeURIComponent(spaceVariableMatch[1]), decodeURIComponent(spaceVariableMatch[2]));
+    return;
+  }
+
   const spaceActionMatch =
     req.method === "POST" ? pathname.match(/^\/api\/spaces\/([^/]+)\/([^/]+)\/action$/) : null;
   if (spaceActionMatch) {

src/hf-api.js

@@ -3,7 +3,9 @@ const { Blob } = require("node:buffer");
 const { TextDecoder } = require("node:util");
 const {
   HubApiError,
+  createRepo,
   deleteFile,
+  deleteRepo,
   downloadFile,
   listCommits,
   listDatasets,
@@ -42,6 +44,18 @@ function repoRef(type, repoId) {
   return { type, name: repoId };
 }
 
+function defaultTabFor(type) {
+  if (type === "space") {
+    return "app";
+  }
+
+  if (type === "bucket") {
+    return "files";
+  }
+
+  return "overview";
+}
+
 function hubRepoUrl(type, repoId) {
   if (type === "model") {
     return `${HUB_URL}/${repoId}`;
@@ -79,6 +93,28 @@ function splitRepoId(repoId) {
   };
 }
 
+function normalizeRepoSegment(value, label) {
+  const trimmed = String(value || "").trim();
+  if (!trimmed) {
+    throw new HfApiError(400, `That ${label} is required.`);
+  }
+
+  if (!/^[A-Za-z0-9][A-Za-z0-9._-]*$/.test(trimmed)) {
+    throw new HfApiError(400, `That ${label} is invalid.`);
+  }
+
+  return trimmed;
+}
+
+function normalizeRepoIdInput(namespace, name) {
+  return `${normalizeRepoSegment(namespace, "namespace")}/${normalizeRepoSegment(name, "name")}`;
+}
+
+function workspaceResourceUrl(type, repoId) {
+  const { owner, name } = splitRepoId(repoId);
+  return `/${pluralFor(type)}/${owner}/${name}/${defaultTabFor(type)}`;
+}
+
 function normalizeRemotePath(rawPath) {
   const value = String(rawPath || "")
     .trim()
@@ -143,6 +179,23 @@ function makeHubFetch(accessToken) {
   };
 }
 
+async function parseJsonResponse(response) {
+  if (!response) {
+    return null;
+  }
+
+  const text = await response.text();
+  if (!text) {
+    return null;
+  }
+
+  try {
+    return JSON.parse(text);
+  } catch (error) {
+    return text;
+  }
+}
+
 function toPermissionSummary(viewer, repoOwner) {
   const namespaces = new Set(viewer.namespaces || []);
   return {
@@ -242,21 +295,31 @@ function normalizeDatasetEntry(entry) {
 }
 
 function normalizeBucketEntry(entry) {
-  const id = entry.id || entry.name || entry.bucket || "";
-  const { owner, name } = splitRepoId(id);
+  const rawName = String(entry.name || entry.bucket || entry.slug || "");
+  const rawId = String(entry.id || (rawName.includes("/") ? rawName : ""));
+  const namespace = String(entry.namespace || entry.owner || "");
+  const bucketName = rawId
+    ? splitRepoId(rawId).name
+    : rawName.includes("/")
+      ? splitRepoId(rawName).name
+      : rawName;
+  const id = rawId || (namespace && bucketName ? `${namespace}/${bucketName}` : rawName);
+  const parsedId = splitRepoId(id);
+  const owner = parsedId.name ? parsedId.owner : namespace || parsedId.owner;
+  const name = parsedId.name || bucketName || entry.slug || "";
 
   return {
     kind: "bucket",
     id,
-    owner: owner || entry.namespace || entry.owner || "",
-    name: name || entry.slug || "",
+    owner,
+    name,
     private: Boolean(entry.private),
-    size: Number(entry.size || entry.totalSize || 0),
-    fileCount: Number(entry.fileCount || entry.totalFiles || 0),
-    updatedAt: toIsoString(entry.updatedAt || entry.lastModified || entry.modifiedAt),
-    createdAt: toIsoString(entry.createdAt),
-    region: entry.region || null,
-    url: `/buckets/${owner || entry.namespace || entry.owner}/${name || entry.slug}/files`,
+    size: Number(entry.size || entry.totalSize || entry.total_size || 0),
+    fileCount: Number(entry.fileCount || entry.totalFiles || entry.total_files || 0),
+    updatedAt: toIsoString(entry.updatedAt || entry.updated_at || entry.lastModified || entry.modifiedAt || entry.modified_at),
+    createdAt: toIsoString(entry.createdAt || entry.created_at),
+    region: entry.region || entry.location || null,
+    url: `/buckets/${owner}/${name}/files`,
     hubUrl: hubRepoUrl("bucket", id),
   };
 }
@@ -351,6 +414,226 @@ async function fetchJsonWithFallback(urls, accessToken) {
   throw new HfApiError(404, "Not found.");
 }
 
+async function hubJson(accessToken, url, init = {}, fallbackMessage = "Hugging Face request failed.") {
+  const response = await makeHubFetch(accessToken)(url, init).catch((error) => {
+    throw wrapHubError(error, fallbackMessage);
+  });
+  const payload = await parseJsonResponse(response);
+
+  if (!response.ok) {
+    const detail =
+      payload && typeof payload === "object"
+        ? payload.error || payload.message || payload.detail || JSON.stringify(payload)
+        : payload || response.statusText;
+    throw wrapHubError(new HfApiError(response.status, fallbackMessage, detail), fallbackMessage);
+  }
+
+  return payload;
+}
+
+async function optionalHubJson(accessToken, url, init = {}, fallbackMessage = "Hugging Face request failed.") {
+  try {
+    return await hubJson(accessToken, url, init, fallbackMessage);
+  } catch (error) {
+    const wrapped = wrapHubError(error, fallbackMessage);
+    if (wrapped.statusCode === 403 || wrapped.statusCode === 404) {
+      return null;
+    }
+    throw wrapped;
+  }
+}
+
+function extractRows(payload, keys = []) {
+  if (Array.isArray(payload)) {
+    return payload;
+  }
+
+  for (const key of keys) {
+    if (Array.isArray(payload?.[key])) {
+      return payload[key];
+    }
+  }
+
+  return [];
+}
+
+function normalizeVisibility(value, isPrivate = false) {
+  const normalized = String(value || "").trim().toLowerCase();
+  if (normalized === "public" || normalized === "private" || normalized === "protected") {
+    return normalized;
+  }
+  return isPrivate ? "private" : "public";
+}
+
+function buildNativeLinks(type, repoId) {
+  const repoUrl = hubRepoUrl(type, repoId);
+  const settingsUrl = `${repoUrl}/settings`;
+
+  return {
+    repoUrl,
+    settingsUrl,
+    analyticsUrl: settingsUrl,
+    communityUrl: type === "bucket" ? repoUrl : `${repoUrl}/discussions`,
+    storageUrl: settingsUrl,
+    storageOverviewUrl: `${HUB_URL}/settings/repositories`,
+    webhooksUrl: `${HUB_URL}/settings/webhooks`,
+    xetUrl: settingsUrl,
+    contributionsUrl: type === "bucket" ? repoUrl : `${repoUrl}/discussions`,
+  };
+}
+
+function normalizeSpaceConfigEntry(entry, kind) {
+  const key = String(entry?.key || entry?.name || entry?.id || "");
+  return {
+    key,
+    description: entry?.description || entry?.helper || entry?.help || "",
+    value:
+      kind === "variable"
+        ? entry?.value ?? entry?.content ?? entry?.rawValue ?? null
+        : null,
+    updatedAt: toIsoString(entry?.updatedAt || entry?.updated_at || entry?.lastModified),
+    hidden: kind === "secret" || entry?.value === undefined,
+  };
+}
+
+function normalizeWebhookEntry(entry) {
+  const watched = Array.isArray(entry?.watched)
+    ? entry.watched
+    : Array.isArray(entry?.watchedItems)
+      ? entry.watchedItems
+      : [];
+
+  return {
+    id: String(entry?.id || entry?._id || ""),
+    url: entry?.url || entry?.endpoint || "",
+    domains: Array.isArray(entry?.domains) ? entry.domains : [],
+    disabled: Boolean(entry?.disabled),
+    watched: watched
+      .map((item) => ({
+        type: String(item?.type || ""),
+        name: String(item?.name || item?.id || ""),
+      }))
+      .filter((item) => item.type && item.name),
+  };
+}
+
+function filterWebhooksForResource(webhooks, type, repoId, owner) {
+  return webhooks.filter((webhook) =>
+    webhook.watched.some(
+      (item) =>
+        (item.type === type && item.name === repoId) ||
+        (item.type === "user" && item.name === owner) ||
+        (item.type === "org" && item.name === owner),
+    ),
+  );
+}
+
+function normalizeAttachedBucket(entry) {
+  const bucketId = String(
+    entry?.bucket ||
+      entry?.bucketId ||
+      entry?.id ||
+      entry?.repoId ||
+      entry?.storageBucket ||
+      "",
+  );
+
+  return {
+    bucketId,
+    mountPath: entry?.mountPath || entry?.mount_path || entry?.path || entry?.targetPath || "",
+    mode: entry?.mode || entry?.type || "",
+  };
+}
+
+async function listSpaceVariables(accessToken, repoId) {
+  const payload = await optionalHubJson(
+    accessToken,
+    `${HUB_URL}/api/spaces/${repoId}/variables`,
+    {
+      headers: {
+        Accept: "application/json",
+      },
+    },
+    "Couldn't load that Space's variables.",
+  );
+
+  return extractRows(payload, ["variables", "items"]).map((entry) => normalizeSpaceConfigEntry(entry, "variable"));
+}
+
+async function listSpaceSecrets(accessToken, repoId) {
+  const payload = await optionalHubJson(
+    accessToken,
+    `${HUB_URL}/api/spaces/${repoId}/secrets`,
+    {
+      headers: {
+        Accept: "application/json",
+      },
+    },
+    "Couldn't load that Space's secrets.",
+  );
+
+  return extractRows(payload, ["secrets", "items"]).map((entry) => normalizeSpaceConfigEntry(entry, "secret"));
+}
+
+async function getSpaceRuntimeDetails(accessToken, repoId) {
+  return optionalHubJson(
+    accessToken,
+    `${HUB_URL}/api/spaces/${repoId}/runtime`,
+    {
+      headers: {
+        Accept: "application/json",
+      },
+    },
+    "Couldn't load that Space runtime.",
+  );
+}
+
+async function listAccountWebhooks(accessToken) {
+  const payload = await optionalHubJson(
+    accessToken,
+    `${HUB_URL}/api/settings/webhooks`,
+    {
+      headers: {
+        Accept: "application/json",
+      },
+    },
+    "Couldn't load your Hugging Face webhooks.",
+  );
+
+  return extractRows(payload, ["webhooks", "items"]).map(normalizeWebhookEntry);
+}
+
+async function upsertSpaceConfigEntry(accessToken, repoId, kind, params) {
+  const key = normalizeRepoSegment(params.key, `${kind} key`).toUpperCase();
+  const value = String(params.value || "");
+  const description = String(params.description || "");
+
+  if (!value) {
+    throw new HfApiError(400, `That ${kind} value is required.`);
+  }
+
+  await hubJson(
+    accessToken,
+    `${HUB_URL}/api/spaces/${repoId}/${kind === "secret" ? "secrets" : "variables"}`,
+    {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        key,
+        name: key,
+        value,
+        description,
+      }),
+    },
+    `Couldn't save that Space ${kind}.`,
+  );
+
+  return { ok: true, key };
+}
+
 async function getViewer(accessToken) {
   try {
     const identity = await whoAmI({
@@ -435,11 +718,17 @@ async function listOwnedDatasets(accessToken, namespaces, query = "") {
   return uniqueById(results.flat().map(normalizeDatasetEntry)).sort(compareByUpdatedDesc);
 }
 
-async function listBucketsForNamespace(accessToken, namespace) {
-  const urls = [
-    `${HUB_URL}/api/buckets?namespace=${encodeURIComponent(namespace)}`,
-    `${HUB_URL}/api/buckets?author=${encodeURIComponent(namespace)}`,
-  ];
+async function listBucketsForNamespace(accessToken, namespace, includeViewerFallback = false) {
+  const urls = [];
+
+  if (namespace) {
+    urls.push(`${HUB_URL}/api/buckets?namespace=${encodeURIComponent(namespace)}`);
+    urls.push(`${HUB_URL}/api/buckets?author=${encodeURIComponent(namespace)}`);
+  }
+
+  if (includeViewerFallback || !namespace) {
+    urls.push(`${HUB_URL}/api/buckets`);
+  }
 
   const payload = await fetchJsonWithFallback(urls, accessToken);
   const rows = Array.isArray(payload)
@@ -453,11 +742,11 @@ async function listBucketsForNamespace(accessToken, namespace) {
   return rows.map(normalizeBucketEntry);
 }
 
-async function listOwnedBuckets(accessToken, namespaces, query = "") {
+async function listOwnedBuckets(accessToken, viewer, query = "") {
   const trimmedQuery = String(query || "").trim().toLowerCase();
   const bucketGroups = await Promise.all(
-    namespaces.map((namespace) =>
-      safeList(async () => listBucketsForNamespace(accessToken, namespace)),
+    (viewer.namespaces || []).map((namespace) =>
+      safeList(async () => listBucketsForNamespace(accessToken, namespace, namespace === viewer.username)),
     ),
   );
 
@@ -478,7 +767,7 @@ async function getOwnedResourceIndex(accessToken, viewer, query = "") {
     listOwnedSpaces(accessToken, viewer.namespaces, query),
     listOwnedModels(accessToken, viewer.namespaces, query),
     listOwnedDatasets(accessToken, viewer.namespaces, query),
-    listOwnedBuckets(accessToken, viewer.namespaces, query),
+    listOwnedBuckets(accessToken, viewer, query),
   ]);
 
   return { spaces, models, datasets, buckets };
@@ -871,7 +1160,19 @@ async function getSpaceDetail(accessToken, viewer, owner, name, tab, branch, req
     accessToken,
     hubUrl: HUB_URL,
     name: repoId,
-    additionalFields: ["author", "cardData", "createdAt", "datasets", "models", "runtime", "sha", "subdomain", "tags"],
+    additionalFields: [
+      "author",
+      "cardData",
+      "createdAt",
+      "datasets",
+      "models",
+      "resourceGroup",
+      "runtime",
+      "sha",
+      "subdomain",
+      "tags",
+      "usedStorage",
+    ],
   }).catch((error) => {
     throw wrapHubError(error, "Couldn't load that Space.");
   });
@@ -881,6 +1182,51 @@ async function getSpaceDetail(accessToken, viewer, owner, name, tab, branch, req
   const files = activeTab === "files" ? await buildFilesView(accessToken, "space", owner, name, branch, requestedPath, refs.branches) : null;
   const commits = await getRecentCommits(accessToken, "space", repoId, files?.branch || refs.branches[0]?.name || "main");
   const discussions = activeTab === "community" ? await getRepoDiscussions(accessToken, "space", repoId) : [];
+  const runtime = activeTab === "settings" ? (await getSpaceRuntimeDetails(accessToken, repoId)) || info.runtime || null : info.runtime || null;
+  const nativeLinks = buildNativeLinks("space", repoId);
+  const settings =
+    activeTab === "settings"
+      ? await (async () => {
+          const [variables, secrets, webhooks, buckets] = await Promise.all([
+            safeList(async () => listSpaceVariables(accessToken, repoId)),
+            safeList(async () => listSpaceSecrets(accessToken, repoId)),
+            safeList(async () => listAccountWebhooks(accessToken)),
+            safeList(async () => listBucketsForNamespace(accessToken, owner, owner === viewer.username)),
+          ]);
+
+          const attachedBuckets = Array.isArray(runtime?.volumes)
+            ? runtime.volumes.map(normalizeAttachedBucket).filter((entry) => entry.bucketId || entry.mountPath)
+            : [];
+
+          return {
+            ...nativeLinks,
+            visibility: normalizeVisibility(info.visibility, info.private),
+            usedStorage: Number(info.usedStorage || runtime?.usedStorage || 0) || 0,
+            resourceGroup: info.resourceGroup || null,
+            variables,
+            secrets,
+            webhooks: filterWebhooksForResource(webhooks, "space", repoId, owner),
+            buckets,
+            attachedBuckets,
+            supportsVisibility: true,
+            supportsMove: true,
+            supportsDelete: true,
+          };
+        })()
+      : {
+          ...nativeLinks,
+          visibility: normalizeVisibility(info.visibility, info.private),
+          usedStorage: Number(info.usedStorage || 0) || 0,
+          resourceGroup: info.resourceGroup || null,
+          variables: [],
+          secrets: [],
+          webhooks: [],
+          buckets: [],
+          attachedBuckets: [],
+          supportsVisibility: true,
+          supportsMove: true,
+          supportsDelete: true,
+        };
 
   return {
     kind: "space",
@@ -893,7 +1239,7 @@ async function getSpaceDetail(accessToken, viewer, owner, name, tab, branch, req
     private: Boolean(info.private),
     likes: info.likes || 0,
     sdk: info.sdk || info.cardData?.sdk || null,
-    runtime: info.runtime || null,
+    runtime,
     createdAt: toIsoString(info.createdAt),
     updatedAt: toIsoString(info.updatedAt || info.lastModified),
     sha: info.sha || null,
@@ -921,9 +1267,9 @@ async function getSpaceDetail(accessToken, viewer, owner, name, tab, branch, req
         (files?.branch ? `?branch=${encodeURIComponent(files.branch)}` : ""),
     },
     settings: {
+      ...settings,
       sdk: info.sdk || info.cardData?.sdk || null,
-      runtime: info.runtime || null,
-      repoUrl: hubRepoUrl("space", repoId),
+      runtime,
       appUrl: spaceAppUrl(info),
     },
   };
@@ -935,7 +1281,16 @@ async function getModelDetail(accessToken, viewer, owner, name, tab, branch, req
     accessToken,
     hubUrl: HUB_URL,
     name: repoId,
-    additionalFields: ["author", "cardData", "createdAt", "library_name", "pipeline_tag", "sha", "spaces", "tags"],
+    additionalFields: [
+      "author",
+      "cardData",
+      "createdAt",
+      "library_name",
+      "pipeline_tag",
+      "sha",
+      "spaces",
+      "tags",
+    ],
   }).catch((error) => {
     throw wrapHubError(error, "Couldn't load that model.");
   });
@@ -986,7 +1341,13 @@ async function getModelDetail(accessToken, viewer, owner, name, tab, branch, req
         (files?.branch ? `?branch=${encodeURIComponent(files.branch)}` : ""),
     },
     settings: {
-      repoUrl: hubRepoUrl("model", repoId),
+      ...buildNativeLinks("model", repoId),
+      visibility: normalizeVisibility(info.visibility, info.private),
+      resourceGroup: info.resourceGroup || null,
+      usedStorage: Number(info.usedStorage || 0) || 0,
+      supportsVisibility: true,
+      supportsMove: true,
+      supportsDelete: true,
     },
   };
 }
@@ -1044,7 +1405,13 @@ async function getDatasetDetail(accessToken, viewer, owner, name, tab, branch, r
         (files?.branch ? `?branch=${encodeURIComponent(files.branch)}` : ""),
     },
     settings: {
-      repoUrl: hubRepoUrl("dataset", repoId),
+      ...buildNativeLinks("dataset", repoId),
+      visibility: normalizeVisibility(info.visibility, info.private),
+      resourceGroup: info.resourceGroup || null,
+      usedStorage: Number(info.usedStorage || 0) || 0,
+      supportsVisibility: true,
+      supportsMove: true,
+      supportsDelete: true,
     },
   };
 }
@@ -1108,9 +1475,14 @@ async function getBucketDetail(accessToken, viewer, owner, name, tab, requestedP
         (files?.currentPath ? `?path=${encodeURIComponent(files.currentPath)}` : ""),
     },
     settings: {
-      repoUrl: hubRepoUrl("bucket", repoId),
+      ...buildNativeLinks("bucket", repoId),
+      visibility: normalizeVisibility(info.visibility, info.private),
       storageType: "Mutable storage bucket",
       branchUnavailable: true,
+      usedStorage: Number(info.size || 0) || 0,
+      supportsVisibility: false,
+      supportsMove: false,
+      supportsDelete: true,
     },
   };
 }
@@ -1170,6 +1542,12 @@ async function getSettingsDetail(viewer) {
     kind: "settings",
     title: "Account settings",
     account: viewer,
+    links: {
+      profileUrl: viewer.profileUrl,
+      webhooksUrl: `${HUB_URL}/settings/webhooks`,
+      repositoriesUrl: `${HUB_URL}/settings/repositories`,
+      tokensUrl: `${HUB_URL}/settings/tokens`,
+    },
   };
 }
 
@@ -1372,6 +1750,138 @@ async function performSpaceAction(accessToken, repoId, action) {
   }
 }
 
+async function createResource(accessToken, params) {
+  const type = String(params.type || "").trim();
+  if (!["space", "model", "dataset", "bucket"].includes(type)) {
+    throw new HfApiError(400, "That resource type is not supported.");
+  }
+
+  const repoId = normalizeRepoIdInput(params.namespace, params.name);
+  const visibility = String(params.visibility || "").trim().toLowerCase();
+  const isPrivate = visibility === "private";
+
+  try {
+    const created = await createRepo({
+      accessToken,
+      hubUrl: HUB_URL,
+      repo: repoRef(type, repoId),
+      private: isPrivate,
+      ...(type === "space" ? { sdk: String(params.sdk || "gradio").trim() || "gradio" } : {}),
+    });
+
+    const createdRepoId = created?.id || repoId;
+    return {
+      ok: true,
+      repoId: createdRepoId,
+      url: workspaceResourceUrl(type, createdRepoId),
+    };
+  } catch (error) {
+    throw wrapHubError(error, "Couldn't create that resource.");
+  }
+}
+
+async function moveResource(accessToken, params) {
+  const type = String(params.type || "").trim();
+  if (!["space", "model", "dataset", "bucket"].includes(type)) {
+    throw new HfApiError(400, "That resource type is not supported.");
+  }
+
+  const fromId = normalizeRepoIdInput(...Object.values(splitRepoId(params.fromId || "")));
+  const toId = normalizeRepoIdInput(...Object.values(splitRepoId(params.toId || "")));
+  const targetUrl = type === "bucket" ? `${HUB_URL}/api/buckets/move` : `${HUB_URL}/api/repos/move`;
+
+  await hubJson(
+    accessToken,
+    targetUrl,
+    {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        type,
+        repoType: type,
+        repo_type: type,
+        fromId,
+        from_id: fromId,
+        fromRepo: fromId,
+        toId,
+        to_id: toId,
+        toRepo: toId,
+      }),
+    },
+    "Couldn't rename or transfer that resource.",
+  );
+
+  return {
+    ok: true,
+    repoId: toId,
+    url: workspaceResourceUrl(type, toId),
+  };
+}
+
+async function updateResourceVisibility(accessToken, params) {
+  const type = String(params.type || "").trim();
+  if (!["space", "model", "dataset"].includes(type)) {
+    throw new HfApiError(400, "Visibility changes are only supported for Spaces, models, and datasets.");
+  }
+
+  const repoId = normalizeRepoIdInput(...Object.values(splitRepoId(params.repoId || "")));
+  const visibility = normalizeVisibility(params.visibility, params.private);
+  const payload = {
+    private: visibility === "private",
+    visibility,
+  };
+
+  await hubJson(
+    accessToken,
+    `${HUB_URL}/api/${pluralFor(type)}/${repoId}/settings`,
+    {
+      method: "PUT",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+    },
+    "Couldn't update that resource's visibility.",
+  );
+
+  return {
+    ok: true,
+    visibility,
+  };
+}
+
+async function deleteResource(accessToken, params) {
+  const type = String(params.type || "").trim();
+  if (!["space", "model", "dataset", "bucket"].includes(type)) {
+    throw new HfApiError(400, "That resource type is not supported.");
+  }
+
+  const repoId = normalizeRepoIdInput(...Object.values(splitRepoId(params.repoId || "")));
+
+  try {
+    await deleteRepo({
+      accessToken,
+      hubUrl: HUB_URL,
+      repo: repoRef(type, repoId),
+    });
+    return { ok: true };
+  } catch (error) {
+    throw wrapHubError(error, "Couldn't delete that resource.");
+  }
+}
+
+async function saveSpaceSecret(accessToken, repoId, params) {
+  return upsertSpaceConfigEntry(accessToken, repoId, "secret", params);
+}
+
+async function saveSpaceVariable(accessToken, repoId, params) {
+  return upsertSpaceConfigEntry(accessToken, repoId, "variable", params);
+}
+
 function buildSpaceStreamUrl(repoId, kind) {
   if (kind === "events") {
     return `${HUB_URL}/api/spaces/${repoId}/events`;
@@ -1392,15 +1902,21 @@ module.exports = {
   HUB_URL,
   HfApiError,
   buildSpaceStreamUrl,
+  createResource,
+  deleteResource,
   getDownloadBlob,
   getPageData,
   getResourceUpdates,
   getSearchResults,
   getViewer,
+  moveResource,
   normalizeBranchName,
   normalizeRemotePath,
   performSpaceAction,
   removeFile,
+  saveSpaceSecret,
+  saveSpaceVariable,
   updateTextFile,
+  updateResourceVisibility,
   wrapHubError,
 };

test/resource-mutations.test.js

@@ -0,0 +1,232 @@
+const assert = require("node:assert/strict");
+const fs = require("node:fs/promises");
+const http = require("node:http");
+const path = require("node:path");
+
+process.env.ENCRYPTION_KEY = process.env.ENCRYPTION_KEY || "resource-mutations-encryption-key";
+
+async function makeTempDir() {
+  return fs.mkdtemp(path.join(process.cwd(), "tmp-resource-mutations-"));
+}
+
+async function readJsonBody(req) {
+  const chunks = [];
+
+  for await (const chunk of req) {
+    chunks.push(chunk);
+  }
+
+  const text = Buffer.concat(chunks).toString("utf8");
+  return text ? JSON.parse(text) : {};
+}
+
+function startMockHubServer(calls) {
+  const server = http.createServer(async (req, res) => {
+    const url = new URL(req.url, "http://127.0.0.1");
+
+    if (url.pathname === "/api/whoami-v2") {
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(
+        JSON.stringify({
+          id: "user-max",
+          type: "user",
+          email: "max@example.com",
+          emailVerified: true,
+          isPro: false,
+          orgs: [],
+          name: "max",
+          fullname: "Max Example",
+          canPay: true,
+          avatarUrl: "",
+          periodEnd: null,
+          billingMode: "prepaid",
+          auth: {
+            type: "access_token",
+            accessToken: {
+              displayName: "Workspace Token",
+              role: "write",
+              createdAt: "2026-01-01T00:00:00.000Z",
+            },
+          },
+        }),
+      );
+      return;
+    }
+
+    if (req.method === "PUT" && url.pathname === "/api/spaces/max/demo-space/settings") {
+      calls.visibility = await readJsonBody(req);
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ ok: true }));
+      return;
+    }
+
+    if (req.method === "POST" && url.pathname === "/api/repos/move") {
+      calls.move = await readJsonBody(req);
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ ok: true }));
+      return;
+    }
+
+    if (req.method === "POST" && url.pathname === "/api/spaces/max/demo-space/variables") {
+      calls.variable = await readJsonBody(req);
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ ok: true }));
+      return;
+    }
+
+    if (req.method === "POST" && url.pathname === "/api/spaces/max/demo-space/secrets") {
+      calls.secret = await readJsonBody(req);
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ ok: true }));
+      return;
+    }
+
+    res.writeHead(404, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ error: "Not found" }));
+  });
+
+  return new Promise((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(0, "127.0.0.1", () => resolve(server));
+  });
+}
+
+function extractCsrfToken(html) {
+  const match = html.match(/meta name="csrf-token" content="([^"]+)"/);
+  return match ? match[1] : "";
+}
+
+async function loginAndGetSession(baseUrl) {
+  const loginResponse = await fetch(`${baseUrl}/auth/login`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: new URLSearchParams({
+      accessToken: "hf_test_token",
+    }),
+    redirect: "manual",
+  });
+
+  assert.equal(loginResponse.status, 302);
+  const setCookie = loginResponse.headers.get("set-cookie");
+  assert.match(setCookie || "", /hf_auth=/);
+  const cookie = String(setCookie || "").split(";")[0];
+
+  const shellResponse = await fetch(`${baseUrl}/`, {
+    headers: {
+      Cookie: cookie,
+    },
+  });
+
+  assert.equal(shellResponse.status, 200);
+  const shellHtml = await shellResponse.text();
+  const csrfToken = extractCsrfToken(shellHtml);
+  assert.ok(csrfToken);
+
+  return { cookie, csrfToken };
+}
+
+async function postJson(baseUrl, pathName, cookie, csrfToken, body) {
+  const response = await fetch(`${baseUrl}${pathName}`, {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      Cookie: cookie,
+      "X-CSRF-Token": csrfToken,
+    },
+    body: JSON.stringify(body),
+  });
+
+  const payload = await response.json();
+  return { response, payload };
+}
+
+async function run() {
+  const storageDir = await makeTempDir();
+  const calls = {};
+  const mockHubServer = await startMockHubServer(calls);
+  const mockHubAddress = mockHubServer.address();
+
+  process.env.SESSION_STORE_DIR = storageDir;
+  process.env.HF_API_BASE = `http://127.0.0.1:${mockHubAddress.port}`;
+
+  const { startServer } = require("../server");
+  const appServer = await startServer({ port: 0, host: "127.0.0.1" });
+
+  try {
+    const appAddress = appServer.address();
+    const baseUrl = `http://127.0.0.1:${appAddress.port}`;
+    const { cookie, csrfToken } = await loginAndGetSession(baseUrl);
+
+    const visibilityResult = await postJson(baseUrl, "/api/resources/visibility", cookie, csrfToken, {
+      type: "space",
+      repoId: "max/demo-space",
+      visibility: "private",
+    });
+    assert.equal(visibilityResult.response.status, 200);
+    assert.equal(visibilityResult.payload.visibility, "private");
+    assert.deepEqual(calls.visibility, { private: true, visibility: "private" });
+
+    const moveResult = await postJson(baseUrl, "/api/resources/move", cookie, csrfToken, {
+      type: "space",
+      fromId: "max/demo-space",
+      toId: "max/renamed-space",
+    });
+    assert.equal(moveResult.response.status, 200);
+    assert.equal(moveResult.payload.repoId, "max/renamed-space");
+    assert.equal(moveResult.payload.url, "/spaces/max/renamed-space/app");
+    assert.equal(calls.move.fromId, "max/demo-space");
+    assert.equal(calls.move.toId, "max/renamed-space");
+
+    const variableResult = await postJson(baseUrl, "/api/spaces/max/demo-space/variables", cookie, csrfToken, {
+      key: "model_repo",
+      description: "Primary model",
+      value: "max/demo-model",
+    });
+    assert.equal(variableResult.response.status, 200);
+    assert.equal(variableResult.payload.key, "MODEL_REPO");
+    assert.equal(calls.variable.key, "MODEL_REPO");
+    assert.equal(calls.variable.value, "max/demo-model");
+
+    const secretResult = await postJson(baseUrl, "/api/spaces/max/demo-space/secrets", cookie, csrfToken, {
+      key: "api_key",
+      description: "Secret value",
+      value: "super-secret",
+    });
+    assert.equal(secretResult.response.status, 200);
+    assert.equal(secretResult.payload.key, "API_KEY");
+    assert.equal(calls.secret.key, "API_KEY");
+    assert.equal(calls.secret.value, "super-secret");
+
+    console.log("resource mutation smoke test passed");
+  } finally {
+    await new Promise((resolve, reject) => {
+      appServer.close((error) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        resolve();
+      });
+    });
+
+    await new Promise((resolve, reject) => {
+      mockHubServer.close((error) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        resolve();
+      });
+    });
+
+    await fs.rm(storageDir, { recursive: true, force: true });
+  }
+}
+
+run().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});