refactor(shell): split Workspace tool tiles by role and clean up spacing overrides

add Workspace-only tile sections with headings: Editors and Creators and Viewers
move viewer tools into dedicated lower section with divider between groups
add per-section nav grid wrappers and styles for full-width stacked layout
keep core spacing fix by using content-height nav grid rows (grid-auto-rows: auto, align-items: start)
remove temporary force/debug CSS overrides (!important compaction rules) after validation to reduce side effects

Author: DavidQ

tools/shared/platformShell.css

@@ -157,8 +157,8 @@ body.tools-platform-surface {
   background: linear-gradient(180deg, var(--panel, rgba(76, 29, 149, 0.88)) 0%, var(--panel2, rgba(49, 17, 102, 0.94)) 100%);
   box-shadow: var(--tools-shell-shadow);
   min-width: 220px;
-  min-height: 156px;
-  height: 100%;
+  min-height: 120px;
+  height: auto;
   align-self: stretch;
   justify-content: flex-start;
 }
@@ -175,18 +175,19 @@ body.tools-platform-surface {
 .tools-platform-frame__nav-bucket-links {
   display: flex;
   align-items: stretch;
-  gap: 10px;
+  gap: 6px;
   flex-wrap: nowrap;
   flex-direction: column;
 }
 
 .tools-platform-frame__nav-tool-row {
-  display: grid;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
   gap: 6px;
-  align-items: start;
-  padding-bottom: 10px;
-  margin-bottom: 10px;
-  border-bottom: 1px solid rgba(221, 214, 254, 0.18);
+  padding-bottom: 4px;
+  margin-bottom: 4px;
+  border-bottom: 0;
 }
 
 .tools-platform-frame__nav-tool-row:last-child {
@@ -196,9 +197,10 @@ body.tools-platform-surface {
 }
 
 .tools-platform-frame__binding-badges {
-  display: flex;
+  display: inline-flex;
   flex-wrap: wrap;
   gap: 6px;
+  margin: 0;
 }
 
 .tools-platform-frame__binding-badge {
@@ -230,14 +232,47 @@ body.tools-platform-surface {
 .tools-platform-frame__nav {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  grid-auto-rows: 1fr;
+  grid-auto-rows: auto;
   gap: 12px;
-  align-items: stretch;
+  align-items: start;
+  align-content: start;
+  justify-items: stretch;
+  width: 100%;
+}
+
+.tools-platform-frame__nav-section {
+  display: grid;
+  gap: 10px;
+}
+
+.tools-platform-frame__nav > .tools-platform-frame__nav-section,
+.tools-platform-frame__nav > .tools-platform-frame__divider--nav-split {
+  grid-column: 1 / -1;
+  width: 100%;
+}
+
+.tools-platform-frame__nav-section-title {
+  margin: 0;
+  font-size: 1.05rem;
+  line-height: 1.2;
+  color: var(--text, #f7f4ff);
+}
+
+.tools-platform-frame__nav-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-auto-rows: auto;
+  gap: 12px;
+  align-items: start;
   align-content: start;
   justify-items: stretch;
   width: 100%;
 }
 
+.tools-platform-frame__divider--nav-split {
+  margin: 14px 0;
+}
+
 .tools-platform-frame__actions,
 .tools-platform-frame__shared-status {
   display: flex;

tools/shared/platformShell.js

@@ -168,11 +168,70 @@ function renderToolBindingBadges(tool) {
 }
 
 function renderToolLinks(currentToolId) {
+  const viewerToolIds = new Set([
+    "3d-asset-viewer",
+    "state-inspector",
+    "replay-visualizer",
+    "performance-profiler"
+  ]);
   const tools = getToolRegistry()
     .filter((entry) => entry.active === true)
     .filter((entry) => entry.visibleInToolsList === true)
     .sort((left, right) => String(left.displayName || "").localeCompare(String(right.displayName || "")));
 
+  function renderBucketGrid(toolEntries) {
+    const bucketMap = new Map();
+    toolEntries.forEach((tool) => {
+      const bucket = String(tool.showcaseTag || "Other").trim() || "Other";
+      if (!bucketMap.has(bucket)) {
+        bucketMap.set(bucket, []);
+      }
+      bucketMap.get(bucket).push(tool);
+    });
+
+    return Array.from(bucketMap.entries())
+      .sort((left, right) => left[0].localeCompare(right[0]))
+      .map(([bucketName, bucketTools]) => `
+        <div class="tools-platform-frame__nav-bucket" aria-label="${escapeHtml(bucketName)} tools">
+          <h3 class="tools-platform-frame__nav-bucket-title">${escapeHtml(bucketName)}</h3>
+          <div class="tools-platform-frame__nav-bucket-links">
+            ${bucketTools
+      .map((tool) => {
+        const currentClass = tool.id === currentToolId ? " is-current" : "";
+        return `
+          <div class="tools-platform-frame__nav-tool-row">
+            <a class="tools-platform-frame__nav-link${currentClass}" href="${escapeHtml(getRegistryEntryHref(tool.entryPoint))}">${escapeHtml(tool.displayName)}</a>
+            ${renderToolBindingBadges(tool)}
+          </div>
+        `;
+      })
+      .join("")}
+          </div>
+        </div>
+      `)
+      .join("");
+  }
+
+  if (isWorkspaceManagerContext()) {
+    const creatorTools = tools.filter((tool) => !viewerToolIds.has(tool.id));
+    const viewerTools = tools.filter((tool) => viewerToolIds.has(tool.id));
+    return `
+      <section class="tools-platform-frame__nav-section" aria-label="Editor and creator tools">
+        <h1 class="tools-platform-frame__nav-section-title">Editors and Creators</h1>
+        <div class="tools-platform-frame__nav-grid">
+          ${renderBucketGrid(creatorTools)}
+        </div>
+      </section>
+      <hr class="tools-platform-frame__divider tools-platform-frame__divider--nav-split" />
+      <section class="tools-platform-frame__nav-section" aria-label="Viewer tools">
+        <h1 class="tools-platform-frame__nav-section-title">Viewers</h1>
+        <div class="tools-platform-frame__nav-grid">
+          ${renderBucketGrid(viewerTools)}
+        </div>
+      </section>
+    `;
+  }
+
   const bucketMap = new Map();
   tools.forEach((tool) => {
     const bucket = String(tool.showcaseTag || "Other").trim() || "Other";
@@ -368,6 +427,7 @@ function renderStatusMarkup(currentTool) {
 
 function applyDocumentMetadata(currentTool) {
   document.body.classList.add("tools-platform-surface");
+  document.body.classList.toggle("tools-platform-workspace-context", isWorkspaceManagerContext());
   const surfaceName = getDisplaySurfaceName(currentTool);
   if (currentTool || isWorkspaceManagerContext()) {
     document.title = `${surfaceName} | Tools Platform`;