@tokenoftrust/storefront-runner 2.0.1 → 2.0.3

package/apps/storefront/src/components/admin/AdminFulfillmentTab.astro

@@ -1,465 +0,0 @@
----
-import { getFulfillmentViewModel, getSettingsViewModel } from "@/lib/admin/services/mock";
-
-const { envelope } = Astro.props;
-const fulfillment = getFulfillmentViewModel(envelope);
-const settings = getSettingsViewModel(envelope);
-
-const QUEUE_TONE: Record<string, string> = {
-  ready_to_ship: "green",
-  holds: "amber",
-  picked: "blue",
-  packed: "blue",
-  label_needed: "amber",
-  shipped: "teal",
-  exceptions: "red",
-};
-
-const readyToShipCount = fulfillment.queues.find((q) => q.key === "ready_to_ship")?.count ?? 0;
-const holdsCount = fulfillment.queues.find((q) => q.key === "holds")?.count ?? 0;
-const exceptionsCount = fulfillment.queues.find((q) => q.key === "exceptions")?.count ?? 0;
-const labelsLockedCount = fulfillment.shipments.filter((s) => s.labelLocked).length;
-const oldestSlaHours = fulfillment.shipments.reduce((max, s) => Math.max(max, s.slaAgeHours), 0);
-
-const selectedShipment = fulfillment.shipments.find((s) => s.labelLocked) ?? fulfillment.shipments[0] ?? null;
-const selectedAssistDraft = selectedShipment
-  ? fulfillment.assistDrafts.find((d) => d.orderId === selectedShipment.orderId) ?? null
-  : null;
-
-function queueLabel(key: string): string {
-  return fulfillment.queues.find((q) => q.key === key)?.label ?? key;
-}
----
-
-<!-- agent-hook:fulfillment-tab -->
-<section id="fulfillment" class="band fulfillment-tab" aria-labelledby="admin-tab-fulfillment fulfillment-title" data-admin-panel data-agent-scope="fulfillment" role="tabpanel">
-  <div class="section-title">
-    <div>
-      <h2 id="fulfillment-title">Fulfillment</h2>
-      <p>Ship paid orders, clear exceptions, print labels, and keep fulfillment moving.</p>
-    </div>
-    <div class="actions">
-      <button class="btn" type="button"><svg><use href="#i-export"></use></svg>Export queue</button>
-      <button class="btn primary" type="button"><svg><use href="#i-truck"></use></svg>Create batch</button>
-    </div>
-  </div>
-
-  {holdsCount + exceptionsCount > 0 && (
-    <div class="ship-gate amber fulfillment-gate" aria-labelledby="fulfillment-gate-title">
-      <div class="ship-gate-main">
-        <span class="seal"><svg><use href="#i-alert"></use></svg></span>
-        <div>
-          <b id="fulfillment-gate-title">Hold: Review Required</b>
-          <span>{holdsCount + exceptionsCount} shipment{holdsCount + exceptionsCount === 1 ? "" : "s"} need merchant action. Ready-to-ship orders stay visible and fast to label.</span>
-        </div>
-      </div>
-      <div class="actions">
-        <a class="btn" href="#fulfillment-blockers">Open blockers</a>
-        <a class="btn primary" href="#fulfillment-ready">Ship ready orders</a>
-      </div>
-    </div>
-  )}
-
-  <div class="grid cols-4">
-    <div class="metric">
-      <span>Ready to ship</span>
-      <strong>{readyToShipCount}</strong>
-      <small>Paid, allocated, and checked</small>
-    </div>
-    <div class="metric">
-      <span>Labels locked</span>
-      <strong>{labelsLockedCount}</strong>
-      <small>Blocked until the stated reason clears</small>
-    </div>
-    <div class="metric">
-      <span>Holds</span>
-      <strong>{holdsCount}</strong>
-      <small>Action required before label creation</small>
-    </div>
-    <div class="metric">
-      <span>Oldest SLA age</span>
-      <strong>{oldestSlaHours}h</strong>
-      <small>Since payment was captured</small>
-    </div>
-  </div>
-
-  <div class="panel fulfillment-assist-panel">
-    <div class="panel-head fulfillment-panel-head">
-      <h3><svg><use href="#i-ask"></use></svg>Fulfillment Assist</h3>
-      <span class="chip blue">Operator support, not autopilot — draft-only, evidence-linked</span>
-    </div>
-    <div class="panel-body grid">
-      {fulfillment.assistDrafts.length === 0 ? (
-        <p class="note">No exceptions or label locks right now — nothing for Assist to explain.</p>
-      ) : (
-        <div class="assist-signal-grid">
-          {fulfillment.assistDrafts.map((draft) => (
-            <div class="assist-signal">
-              <span class="chip amber">{draft.orderId}</span>
-              <p>{draft.summary}</p>
-            </div>
-          ))}
-        </div>
-      )}
-      <p class="note">Assist never automates a shipping decision — every output here is a draft or explanation an operator reviews before acting.</p>
-    </div>
-  </div>
-
-  <div class="fulfillment-workspace">
-    <div class="panel fulfillment-queue-panel">
-      <div class="panel-head fulfillment-panel-head">
-        <h3><svg><use href="#i-truck"></use></svg>Fulfillment Queue</h3>
-        <span class="chip teal">{fulfillment.shipments.length} shipments</span>
-      </div>
-      <div class="panel-body grid">
-        <div class="tabs" role="tablist" aria-label="Fulfillment queues">
-          {fulfillment.queues.map((queue, index) => (
-            <button class:list={["tab", { active: index === 0 }]} type="button">{queue.label} ({queue.count})</button>
-          ))}
-        </div>
-
-        <div class="table-wrap fulfillment-table-wrap" id="fulfillment-ready">
-          <table class="fulfillment-table">
-            <thead>
-              <tr>
-                <th>Order</th>
-                <th>Destination</th>
-                <th>Queue</th>
-                <th>SLA age</th>
-                <th>Carrier</th>
-                <th>Label</th>
-                <th class="action">Action</th>
-              </tr>
-            </thead>
-            <tbody>
-              {fulfillment.shipments.map((shipment) => (
-                <tr class:list={[{ selected: shipment.orderId === selectedShipment?.orderId }]}>
-                  <td><strong>{shipment.orderId}</strong></td>
-                  <td><strong>{shipment.destination}</strong><span class="subtle">{shipment.destinationReady ? "Serviceable" : "Needs review"}</span></td>
-                  <td><span class:list={["chip", QUEUE_TONE[shipment.queue] ?? ""]}>{queueLabel(shipment.queue)}</span></td>
-                  <td><strong>{shipment.slaAgeHours}h</strong></td>
-                  <td><span class:list={["chip", shipment.carrierReady ? "green" : "amber"]}>{shipment.carrier}</span></td>
-                  <td><span class:list={["chip", shipment.labelLocked ? "amber" : "green"]}>{shipment.labelLocked ? "Locked" : "Unlocked"}</span></td>
-                  <td class="action"><a class="btn" href={shipment.labelLocked ? "#fulfillment-blockers" : "#fulfillment-detail"}>{shipment.labelLocked ? "Resolve" : "Create label"}</a></td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-
-    <aside class="panel fulfillment-detail-panel" id="fulfillment-detail" aria-labelledby="fulfillment-detail-title">
-      {selectedShipment ? (
-        <>
-          <div class="panel-head fulfillment-panel-head">
-            <h3 id="fulfillment-detail-title"><svg><use href="#i-file"></use></svg>{selectedShipment.orderId}</h3>
-            <span class:list={["chip", selectedShipment.labelLocked ? "amber" : "green"]}>
-              {selectedShipment.labelLocked ? "Shipping Label Locked" : "Shipping Label Unlocked"}
-            </span>
-          </div>
-          <div class="panel-body grid">
-            <div class="detail-summary">
-              <div>
-                <span class="eyebrow">Destination</span>
-                <strong>{selectedShipment.destination}</strong>
-                <span class="subtle">{selectedShipment.destinationReady ? "Serviceable" : "Needs review"}</span>
-              </div>
-              <div>
-                <span class="eyebrow">Carrier</span>
-                <strong>{selectedShipment.carrier}</strong>
-                <span class="subtle">{selectedShipment.carrierReady ? "Eligible" : "Not eligible yet"}</span>
-              </div>
-              <div>
-                <span class="eyebrow">SLA age</span>
-                <strong>{selectedShipment.slaAgeHours}h</strong>
-                <span class="subtle">Since payment captured</span>
-              </div>
-            </div>
-
-            <div class:list={["label-card", selectedShipment.labelLocked ? "locked" : "unlocked"]}>
-              <div>
-                <span class="eyebrow">Shipping label</span>
-                <strong>{selectedShipment.labelLocked ? "Locked until the blocker clears" : "Ready to create"}</strong>
-                <p>
-                  {selectedShipment.labelLocked
-                    ? selectedShipment.labelLockReason ?? "Resolve the outstanding blocker to unlock this label."
-                    : "Carrier and destination checks are clear — create the label whenever you're ready."}
-                </p>
-              </div>
-              <button class="btn primary" type="button" disabled={selectedShipment.labelLocked}>
-                {selectedShipment.labelLocked ? "Label locked" : "Create label"}
-              </button>
-            </div>
-
-            {selectedShipment.labelLocked && (
-              <div class="action-strip" id="fulfillment-blockers">
-                <a class="btn primary" href="#fulfillment-readiness">Resolve blocker</a>
-                <button class="btn" type="button">Contact customer</button>
-              </div>
-            )}
-
-            <div class="detail-section" id="fulfillment-readiness">
-              <div class="detail-section-head">
-                <h4>Readiness Checks</h4>
-                <span class:list={["chip", selectedShipment.carrierReady && selectedShipment.destinationReady ? "green" : "amber"]}>
-                  {[!selectedShipment.carrierReady && "carrier", !selectedShipment.destinationReady && "destination"].filter(Boolean).length || "0"} blocker(s)
-                </span>
-              </div>
-              <div class:list={["check-row", { blocking: !selectedShipment.carrierReady }]}>
-                <div><b>Carrier eligibility</b><p>Carrier options unlock once the shipment's carrier check passes.</p></div>
-                <strong>{selectedShipment.carrier}</strong>
-                <span class:list={["chip", selectedShipment.carrierReady ? "green" : "amber"]}>{selectedShipment.carrierReady ? "OK" : "Waiting"}</span>
-              </div>
-              <div class:list={["check-row", { blocking: !selectedShipment.destinationReady }]}>
-                <div><b>Address and jurisdiction</b><p>Destination is serviceable once any jurisdiction or address concerns clear.</p></div>
-                <strong>{selectedShipment.destination}</strong>
-                <span class:list={["chip", selectedShipment.destinationReady ? "green" : "amber"]}>{selectedShipment.destinationReady ? "Ready" : "Review"}</span>
-              </div>
-            </div>
-
-            {selectedAssistDraft && (
-              <div class="detail-section">
-                <div class="detail-section-head">
-                  <h4>Fulfillment Assist</h4>
-                  <span class="chip blue">Draft</span>
-                </div>
-                <p class="note">{selectedAssistDraft.summary}</p>
-              </div>
-            )}
-          </div>
-        </>
-      ) : (
-        <div class="panel-body">
-          <p class="note">No shipments yet for this tenant.</p>
-        </div>
-      )}
-    </aside>
-  </div>
-
-  <div class="panel fulfillment-policy-panel">
-    <div class="panel-head fulfillment-panel-head">
-      <h3><svg><use href="#i-shield"></use></svg>Shipping Policy Context</h3>
-      <span class:list={["chip", settings.shippingRestrictions.length > 0 ? "amber" : "green"]}>
-        {settings.shippingRestrictions.length > 0 ? `${settings.shippingRestrictions.length} region(s) restricted` : "No active restrictions"}
-      </span>
-    </div>
-    <div class="panel-body grid">
-      <p class="note">Per-shipment destination readiness (above) reflects that shipment's own carrier/jurisdiction check. This panel surfaces the tenant's current shipping-restriction policy from Settings for context — see the Settings tab to manage it.</p>
-      {settings.shippingRestrictions.length > 0 && (
-        <div class="readiness-list" aria-label="Restricted regions">
-          {settings.shippingRestrictions.map((restriction) => (
-            <div class="check-row">
-              <div><b>{restriction.region}</b><p>{restriction.reason}</p></div>
-              <span class="chip amber">Restricted</span>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  </div>
-</section>
-
-<style>
-  .fulfillment-tab {
-    --fulfillment-split: minmax(0, 1.2fr) minmax(360px, 0.8fr);
-  }
-
-  .fulfillment-gate {
-    scroll-margin-top: 92px;
-  }
-
-  .fulfillment-assist-panel {
-    border-color: #b9c9ec;
-    background: #fbfcff;
-  }
-
-  .assist-signal-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 10px;
-  }
-
-  .assist-signal {
-    display: grid;
-    gap: 7px;
-    min-width: 0;
-    padding: 12px;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-  }
-
-  .assist-signal p {
-    margin: 0;
-    color: var(--admin-muted);
-    font-size: 12px;
-  }
-
-  .fulfillment-workspace {
-    display: grid;
-    grid-template-columns: var(--fulfillment-split);
-    gap: 14px;
-    align-items: start;
-    min-width: 0;
-  }
-
-  .fulfillment-queue-panel,
-  .fulfillment-detail-panel {
-    min-width: 0;
-  }
-
-  .fulfillment-detail-panel {
-    position: sticky;
-    top: 86px;
-    box-shadow: var(--admin-shadow);
-  }
-
-  .fulfillment-panel-head {
-    min-width: 0;
-  }
-
-  .fulfillment-panel-head h3 {
-    min-width: 0;
-    overflow-wrap: anywhere;
-  }
-
-  .fulfillment-table {
-    min-width: 900px;
-  }
-
-  .fulfillment-table td {
-    height: 58px;
-  }
-
-  .fulfillment-table tr.selected {
-    background: #fff8ec;
-    box-shadow: inset 3px 0 0 var(--admin-amber);
-  }
-
-  .detail-summary {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 10px;
-  }
-
-  .detail-summary > div {
-    min-width: 0;
-    padding-bottom: 10px;
-    border-bottom: 1px solid var(--admin-line);
-  }
-
-  .detail-summary strong {
-    display: block;
-    margin-top: 3px;
-    overflow-wrap: anywhere;
-  }
-
-  .eyebrow {
-    color: var(--admin-muted);
-    font-size: 11px;
-    font-weight: 760;
-    text-transform: uppercase;
-  }
-
-  .label-card {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 12px;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface-soft);
-  }
-
-  .label-card.locked {
-    border-color: #f1c883;
-    background: #fff8ec;
-  }
-
-  .label-card.unlocked {
-    border-color: #a6d8c0;
-    background: #eefaf3;
-  }
-
-  .label-card p {
-    margin: 4px 0 0;
-    color: var(--admin-muted);
-    font-size: 12px;
-  }
-
-  .label-card .btn[disabled] {
-    border-color: #d9b978;
-    background: #f5e7c8;
-    color: var(--admin-amber);
-    cursor: not-allowed;
-  }
-
-  .action-strip {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    scroll-margin-top: 92px;
-  }
-
-  .detail-section {
-    display: grid;
-    gap: 10px;
-    padding-top: 2px;
-    scroll-margin-top: 92px;
-  }
-
-  .detail-section + .detail-section {
-    padding-top: 12px;
-    border-top: 1px solid var(--admin-line);
-  }
-
-  .detail-section-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-  }
-
-  .detail-section-head h4 {
-    margin: 0;
-    font-size: 13px;
-  }
-
-  .fulfillment-policy-panel .readiness-list {
-    display: grid;
-    gap: 0;
-  }
-
-  @media (max-width: 1280px) {
-    .fulfillment-workspace {
-      grid-template-columns: minmax(0, 1fr);
-    }
-
-    .fulfillment-detail-panel {
-      position: static;
-    }
-  }
-
-  @media (max-width: 920px) {
-    .detail-summary {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .label-card {
-      align-items: flex-start;
-      flex-direction: column;
-    }
-  }
-
-  @media (max-width: 640px) {
-    .detail-summary {
-      grid-template-columns: 1fr;
-    }
-
-    .label-card .btn {
-      width: 100%;
-    }
-  }
-</style>

package/apps/storefront/src/components/admin/AdminIntegrationsTab.astro

@@ -1,105 +0,0 @@
----
-/** Managed rows use only the frozen ManagedAnalyticsApiV1 transport. */
-import { withBase } from "@/lib/basePath";
-const { envelope } = Astro.props;
-const { tenant, basePath } = Astro.locals;
-const viewerCapability = Astro.locals.viewer?.capability ?? "none";
-const canManage = viewerCapability === "owner" || viewerCapability === "admin";
-const managedEndpoint = withBase(basePath || "", "/api/integrations/v1");
-const localReadModelEndpoint = withBase(basePath || "", "/api/apps/admin/integrations");
-const gtmMigrationEndpoint = withBase(basePath || "", "/api/apps/admin/gtm-migration");
-const targetTenant = envelope.targetTenant ?? tenant.appDomain;
----
-
-<!-- agent-hook:integrations-tab -->
-<section id="integrations" class="band integrations-tab" aria-labelledby="admin-tab-integrations integrations-title" data-admin-panel data-agent-scope="integrations" role="tabpanel" data-integrations-panel data-managed-endpoint={managedEndpoint} data-local-readmodel-endpoint={localReadModelEndpoint} data-target-tenant={targetTenant} data-stage="staged" data-can-manage={canManage ? "true" : "false"}>
-  <div class="section-title">
-    <div><h2 id="integrations-title">Managed analytics</h2><p>Configure reviewed, native analytics adapters. New and revised configurations remain disabled until you explicitly publish them.</p></div>
-    <div class="actions"><button class="btn" type="button" data-integrations-refresh><svg><use href="#i-refresh"></use></svg>Refresh</button></div>
-  </div>
-  {!canManage && <div class="ship-gate amber"><div class="ship-gate-main"><span class="seal"><svg><use href="#i-shield"></use></svg></span><div><b>Read-only view</b><span>Only an owner or admin can change managed analytics.</span></div></div></div>}
-  <p class="chip" data-integrations-status role="status" aria-live="polite" tabindex="-1">Loading managed analytics…</p>
-
-  <div class="panel" id="managed-analytics-inventory">
-    <div class="panel-head"><h3><svg><use href="#i-workflows"></use></svg>Managed installs</h3><span class="chip teal">Native adapters</span></div>
-    <div class="panel-body"><div class="table-wrap"><table class="integrations-table"><thead><tr><th>Integration</th><th>Status</th><th>Revisions</th><th>Configuration</th><th class="action">Actions</th></tr></thead><tbody data-managed-integrations-body><tr><td colspan="5" class="subtle">Loading installs…</td></tr></tbody></table></div></div>
-  </div>
-
-  <div class="panel" id="integrations-catalog">
-    <div class="panel-head"><h3><svg><use href="#i-box"></use></svg>Add managed analytics</h3><span class="chip">Reviewed catalog</span></div>
-    <div class="panel-body"><p class="note">Collection origins, consent purposes, and manual event types are fixed by the reviewed adapter. Nothing is enabled until Publish.</p><div class="integrations-catalog-grid" data-managed-integrations-catalog><p class="subtle">Loading catalog…</p></div></div>
-  </div>
-
-  <!-- READ-ONLY diagnostic: the uploaded GTM export is parsed only as inert data;
-       analysis never publishes, activates, renders, or executes imported code. -->
-  <div class="panel" id="integrations-gtm-migration" data-gtm-migration-panel data-gtm-endpoint={gtmMigrationEndpoint} data-target-tenant={targetTenant}>
-    <div class="panel-head"><h3><svg><use href="#i-file"></use></svg>Migrate from GTM</h3><span class="chip teal">Read-only report</span></div>
-    <div class="panel-body grid">
-      <p class="note">Upload a Google Tag Manager container export. It is parsed as inert data to produce an inventory, dependency map, and migration dispositions. Nothing is published or activated; the file is never executed.</p>
-      <div class="gtm-upload">
-        <label class="gtm-upload-label" for="gtm-migration-file">GTM container export (JSON)</label>
-        <input id="gtm-migration-file" type="file" accept="application/json,.json" data-gtm-file />
-        <div class="actions">
-          <button class="btn primary" type="button" data-gtm-analyze><svg><use href="#i-file"></use></svg>Analyze</button>
-          <button class="btn" type="button" data-gtm-download disabled><svg><use href="#i-export"></use></svg>Download support bundle</button>
-        </div>
-        <p class="chip" data-gtm-status role="status" aria-live="polite">Choose a GTM export file to begin.</p>
-      </div>
-      <div class="gtm-results" data-gtm-results hidden>
-        <section class="gtm-section" aria-labelledby="gtm-inventory-title"><h4 id="gtm-inventory-title">Inventory</h4><div data-gtm-inventory></div></section>
-        <section class="gtm-section" aria-labelledby="gtm-dispositions-title"><h4 id="gtm-dispositions-title">Dispositions</h4><div data-gtm-dispositions></div></section>
-        <section class="gtm-section" aria-labelledby="gtm-graph-title"><h4 id="gtm-graph-title">Dependency map</h4><div data-gtm-graph></div></section>
-        <section class="gtm-section" aria-labelledby="gtm-findings-title"><h4 id="gtm-findings-title">Unresolved findings</h4><div data-gtm-findings></div></section>
-        <section class="gtm-section" aria-labelledby="gtm-recommendations-title"><h4 id="gtm-recommendations-title">Recommendations</h4><div data-gtm-recommendations></div></section>
-      </div>
-    </div>
-  </div>
-
-  <details class="panel" id="tenant-local-integrations">
-    <summary class="panel-head"><h3>Other tenant-local integrations</h3><span class="chip">Read only</span></summary>
-    <div class="panel-body"><div class="table-wrap"><table class="integrations-table local"><thead><tr><th>Integration</th><th>Status</th><th>Authority</th><th>State</th><th>Consent</th></tr></thead><tbody data-local-integrations-body><tr><td colspan="5" class="subtle">Loading tenant-local integrations…</td></tr></tbody></table></div></div>
-  </details>
-</section>
-
-<script>
-  import { initIntegrationsTab } from "@/lib/apps/integrationsTab";
-  import { initGtmMigrationTab } from "@/lib/apps/gtmMigrationTab";
-  initIntegrationsTab();
-  initGtmMigrationTab();
-</script>
-
-<style>
-  .integrations-table { min-width: 760px; width: 100%; border-collapse: collapse; }
-  .integrations-table th, .integrations-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--admin-line); }
-  .integrations-table td .subtle { display: block; color: var(--admin-muted); font-size: 12px; }
-  .integrations-actions, .integrations-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
-  .integrations-inline input, .integrations-inline select { min-width: 0; max-width: 210px; padding: 7px 9px; border: 1px solid var(--admin-line); border-radius: var(--admin-radius-sm); }
-  [data-integrations-status][data-tone="error"] { background: var(--admin-red); color: #fff; }
-  .integrations-catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; }
-  .integrations-adapter-card { display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--admin-line); border-radius: var(--admin-radius); background: var(--admin-surface); }
-  .integrations-adapter-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
-  .integrations-adapter-meta { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: 2px 10px; margin: 0; font-size: 12px; }
-  .integrations-adapter-meta dt { color: var(--admin-muted); }
-  .integrations-adapter-meta dd { margin: 0; overflow-wrap: anywhere; }
-  .integrations-adapter-config { display: flex; flex-wrap: wrap; gap: 8px; }
-  .integrations-adapter-config input { flex: 1 1 160px; min-width: 0; padding: 8px 10px; border: 1px solid var(--admin-line); border-radius: var(--admin-radius-sm); }
-  .integrations-adapter-result[data-tone="error"] { color: var(--admin-red); }
-  .gtm-upload { display: grid; gap: 8px; }
-  .gtm-upload-label { font-size: 12px; color: var(--admin-muted); }
-  .gtm-upload input[type="file"] { max-width: 100%; }
-  [data-gtm-status][data-tone="error"] { background: var(--admin-red); color: #fff; }
-  .gtm-results { display: grid; gap: 16px; margin-top: 8px; }
-  .gtm-section h4 { margin: 0 0 6px; }
-  .gtm-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
-  .gtm-stat { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--admin-line); border-radius: var(--admin-radius-sm); background: var(--admin-surface); }
-  .gtm-stat strong { font-size: 18px; }
-  .gtm-stat span { font-size: 12px; color: var(--admin-muted); overflow-wrap: anywhere; }
-  .gtm-disposition-group { margin-bottom: 12px; }
-  .gtm-disposition-group h4 { display: flex; align-items: center; gap: 8px; }
-  .gtm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
-  .gtm-list li { padding: 6px 8px; border-bottom: 1px solid var(--admin-line); overflow-wrap: anywhere; }
-  .gtm-list li .note { margin: 2px 0 0; color: var(--admin-muted); font-size: 12px; }
-  details.panel > summary { cursor: pointer; list-style-position: inside; }
-  details.panel > summary h3 { display: inline-flex; }
-  @media (max-width: 760px) { .integrations-adapter-config, .integrations-inline { flex-direction: column; align-items: stretch; } .integrations-inline input, .integrations-inline select { max-width: none; } .table-wrap { max-width: 100%; overflow-x: auto; } }
-</style>