fix: MI bar z-index, SW force-update, rtime mobile layout

- MI bar z-index lowered to 1 so dropdowns render above it; panel
  gets z-index 10001 only when open
- SW registration URL bumped to v=8 to match cache version
- rtime: pool and weaving are now two separate scrollable sections
  on mobile (50vh/60vh min-heights) with a "Commitment Weaving"
  section header visible on constrained screens

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

docker-compose.yml

@@ -1,9 +1,10 @@
 services:
   rspace:
-    build:
+    image: rspace-online-rspace:latest
-      context: .
+    # build:
-      additional_contexts:
+    #   context: .
-        encryptid-sdk: ../encryptid-sdk
+    #   additional_contexts:
+    #     encryptid-sdk: ../encryptid-sdk
     container_name: rspace-online
     restart: unless-stopped
     volumes:

modules/rtime/components/folk-timebank-app.ts

@@ -545,6 +545,10 @@ class FolkTimebankApp extends HTMLElement {
 		<div class="panel-divider" id="panelDivider"><div class="divider-pip"></div></div>
 		<!-- SVG infinite canvas -->
 		<div class="canvas-wrap" id="canvasWrap">
+			<div class="canvas-wrap-header">
+				<span>Commitment Weaving</span>
+				<span class="canvas-wrap-hint">connect commitments to projects</span>
+			</div>
 			<svg id="weave-svg" xmlns="http://www.w3.org/2000/svg">
 				<defs>
 					<pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
@@ -3642,8 +3646,21 @@ const CSS_TEXT = `
 }
 
 /* SVG canvas area */
-.canvas-wrap { flex: 1; position: relative; overflow: hidden; background: #0f172a; touch-action: none; }
+.canvas-wrap { flex: 1; position: relative; overflow: hidden; background: #0f172a; touch-action: none; display: flex; flex-direction: column; }
-#weave-svg { width: 100%; height: 100%; display: block; touch-action: none; }
+.canvas-wrap-header {
+	display: none;
+	justify-content: space-between; align-items: center;
+	padding: 0.5rem 0.75rem;
+	font-size: 0.82rem; font-weight: 600; color: #94a3b8;
+	text-transform: uppercase; letter-spacing: 0.04em;
+	border-bottom: 1px solid #334155; flex-shrink: 0;
+	background: #1e293b;
+}
+.canvas-wrap-hint {
+	font-size: 0.68rem; font-weight: 400; color: #64748b; font-style: italic;
+	text-transform: none; letter-spacing: normal;
+}
+#weave-svg { width: 100%; flex: 1; min-height: 0; display: block; touch-action: none; }
 
 /* Zoom controls */
 .zoom-controls {
@@ -4164,6 +4181,8 @@ const CSS_TEXT = `
 :host([data-theme="light"]) .pool-panel { background: #fff; border-right-color: #e2e8f0; }
 :host([data-theme="light"]) .pool-panel-header { color: #64748b; border-bottom-color: #e2e8f0; }
 :host([data-theme="light"]) .pool-panel-header button { border-color: #e2e8f0; color: #64748b; }
+:host([data-theme="light"]) .canvas-wrap-header { background: #fff; color: #64748b; border-bottom-color: #e2e8f0; }
+:host([data-theme="light"]) .canvas-wrap-hint { color: #94a3b8; }
 :host([data-theme="light"]) .sidebar-task:hover { background: #f1f5f9; }
 :host([data-theme="light"]) .sidebar-item-name { color: #1e293b; }
 :host([data-theme="light"]) .canvas-wrap { background: #f8fafc; }
@@ -4239,16 +4258,28 @@ const CSS_TEXT = `
 .exec-step-checklist input[type="checkbox"] { accent-color: #8b5cf6; }
 
 @media (max-width: 768px) {
-	#canvas-view { flex-direction: column; }
+	.main { overflow: visible; }
-	.pool-panel { width: 100% !important; max-height: 220px; min-width: unset; border-right: none; border-bottom: 1px solid #334155; }
+	#canvas-view { flex-direction: column; overflow-y: auto; position: relative; height: auto; min-height: 100%; }
+	.pool-panel {
+		width: 100% !important; min-width: unset;
+		border-right: none; border-bottom: 1px solid #334155;
+		min-height: 50vh; max-height: none; flex-shrink: 0;
+	}
+	.pool-panel.collapsed { min-height: 36px; max-height: 36px; }
+	.canvas-wrap {
+		min-height: 60vh; flex-shrink: 0;
+		border-top: 1px solid #334155;
+	}
+	.canvas-wrap-header { display: flex; }
 	.panel-divider { display: none !important; }
 	.pool-hint { display: none; }
 	.exec-panel { width: 95vw; }
 	.task-edit-panel { width: 95vw; }
 }
 @media (max-width: 640px) {
-	.pool-panel { max-height: 180px; }
+	.pool-panel { min-height: 45vh; }
-	.pool-panel.collapsed { width: 100% !important; max-height: 36px; }
+	.pool-panel.collapsed { width: 100% !important; min-height: 36px; max-height: 36px; }
+	.canvas-wrap { min-height: 55vh; }
 }
 `;
 

server/shell.ts

@@ -361,7 +361,7 @@ export function renderShell(opts: ShellOptions): string {
 
     // Service worker registration + update detection
     if ("serviceWorker" in navigator && location.hostname !== "localhost") {
-      navigator.serviceWorker.register("/sw.js?v=5").then((reg) => {
+      navigator.serviceWorker.register("/sw.js?v=8").then((reg) => {
         function showUpdateBanner() {
           if (!isStandalone) return; // Only show update prompt in installed PWA
           if (sessionStorage.getItem('rspace_update_dismissed')) return; // dismissed this session
@@ -2521,7 +2521,7 @@ export function renderModuleLanding(opts: ModuleLandingOptions): string {
   <script type="module">
     import '/shell.js';
     if ("serviceWorker" in navigator && location.hostname !== "localhost") {
-      navigator.serviceWorker.register("/sw.js?v=5").catch(() => {});
+      navigator.serviceWorker.register("/sw.js?v=8").catch(() => {});
     }
     document.querySelector('rstack-app-switcher')?.setModules(${moduleListJSON});
     try {
@@ -2861,7 +2861,7 @@ export function renderSubPageInfo(opts: SubPageInfoOptions): string {
   <script type="module">
     import '/shell.js';
     if ("serviceWorker" in navigator && location.hostname !== "localhost") {
-      navigator.serviceWorker.register("/sw.js?v=5").catch(() => {});
+      navigator.serviceWorker.register("/sw.js?v=8").catch(() => {});
     }
     document.querySelector('rstack-app-switcher')?.setModules(${moduleListJSON});
     try {

shared/components/rstack-mi.ts

@@ -1039,7 +1039,7 @@ export class RStackMi extends HTMLElement {
 const STYLES = `
 :host { display: contents; }
 
-.mi { position: relative; flex: 1; max-width: 480px; min-width: 0; z-index: 10001; }
+.mi { position: relative; flex: 1; max-width: 480px; min-width: 0; z-index: 1; }
 
 /* ── Search bar in header ── */
 .mi-bar {
@@ -1091,7 +1091,7 @@ const STYLES = `
   background: var(--rs-bg-surface); border: 1px solid var(--rs-border);
   resize: vertical;
 }
-.mi-panel.open { display: flex; flex-direction: column; }
+.mi-panel.open { display: flex; flex-direction: column; z-index: 10001; }
 .mi-panel.hidden { display: none; }
 
 /* ── Panel header ── */