@meddleware/dashboard-ui 0.0.0-stage → 0.1.89

package/CHANGELOG.md

@@ -0,0 +1,79 @@
+# Changelog
+
+All notable changes to `@meddleware/dashboard` are documented here.
+Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versioning follows
+[Semantic Versioning](https://semver.org/). Before 0.2.0, breaking changes ship as patch releases.
+Releases before 0.1.85 are recorded in the git history only.
+
+## [0.1.89] - 2026-10-24
+
+### Changed
+
+- Renamed from `dashboard` to `dashboard-ui` (workspace naming convention, `docs/architecture/ADR-0003-naming.md`). No code change beyond names, paths, hostnames and dependency names; the history below keeps the old names.
+
+## [0.1.88] - 2026-10-22
+
+### Changed
+
+- Embedded apps on their latest releases (access-gate-client 0.0.10 stale-indexer fallback, walrus-client 0.0.30 flow fix, nft-gate-client 0.0.18 rules); image base static-server 0.1.11 (Go 1.26.10 standard library, CVE-2026-111943)
+
+## [0.1.87] - 2026-10-19
+
+### Changed
+
+- Image rebuilt without the `VITE_UPLOAD_RELAY_MAX_TIP_MIST` repository variable (deleted; it still held the old 0.05 SUI ceiling and overrode the 0.005 SUI default introduced in the previous release)
+
+## [0.1.86] - 2026-10-19
+
+### Changed
+
+- Embedded apps on their re-priced releases (workspace cost model, D57): token-deployer-ui 0.0.37 (2 SUI deploy fee, 0.005 SUI tip ceiling), walrus-ui 0.1.59, seal-ui 0.0.39; ui ^0.1.32; dependency updates and the Node 26 baseline merged since 0.1.85
+
+## [0.1.85] - 2026-10-18
+
+### Changed
+
+- Embeds the 2026-10-18 builds of every tool: `@meddleware/walrus-ui` ^0.1.58 and
+  `@meddleware/token-deployer-ui` ^0.0.36 (both adopt `@meddleware/walrus-relay` 0.1.31: the access-gate
+  price is read from the chain and shown, with the payees and network, before the wallet opens),
+  `@meddleware/access-gate-ui` ^0.1.37, `@meddleware/seal-ui` ^0.0.38, `@meddleware/treasury-ui` ^0.0.18,
+  `@meddleware/dao-ui` ^0.1.34 (retained, not mounted) and `@meddleware/design-tokens` ^0.1.10; their
+  clients resolve to `walrus-client` 0.0.28, `access-gate-client` 0.0.9, `seal-client` 0.0.20 and
+  `sui-token-client` 0.0.11. `@mysten/sui` ^2.36.0, `vue` ^3.5.44, `vue-router` ^5.4.0 and merged tooling
+  updates. One copy of `@mysten/sui` and of each `@meddleware/*` package (`npm ls`).
+- Image base: `static-server` 0.1.8 (`sha256:e32cf42b…4000`).
+- `npm-publish.yml` `verify` calls `node-ci.yml` (audit gate, signatures, type-check, all linters, tests,
+  build, licences, browser smoke test), as the image release does (audit F15).
+- The four image builds pass the same build arguments (the registry-mirror builds lacked
+  `VITE_WALRUS_RELAY_MAINNET`).
+- `.env.example` lists every build input; `.env.production` names the current package;
+  `CLAUDE.md` and `SECURITY.md` are current.
+
+### Removed
+
+- `VITE_ACCESS_GATE_PRICE_MIST_TESTNET` (Dockerfile argument, release workflow, docs): walrus-ui and
+  token-deployer-ui no longer read it. A build that still sets it ignores it. The repository variable of the
+  same name can be deleted.
+
+### Added
+
+- Unit tests (`npm test`, vitest): route table and tool imports, the network selector's mainnet guard (I7),
+  design-token use (no `--warning` text colour, no undefined custom property), the build-input inventory,
+  and the inline-script guard.
+- Browser smoke test (`npm run test:e2e`, Playwright): `/`, every tool tab of `/blockchain` and the legacy
+  redirects mount in Chromium with no uncaught error and no network.
+- CI builds the image (not pushed) and probes the running container with `scripts/smoke.sh`: non-root user,
+  read-only root, the in-image health check, `/` and the SPA fallback with the security headers and the CSP
+  (no `'unsafe-inline'` for scripts), immutable `/assets/`, `/THIRD_PARTY_LICENSES`, dot-files refused, POST
+  405 (audit F14). A Trivy filesystem scan (vulnerabilities, Dockerfile misconfiguration, secrets; fixable
+  CRITICAL/HIGH fail) runs beside it.
+- `tests/workflows.test.ts` pins the release gate: both release workflows call `node-ci.yml`, CI runs every
+  check above, third-party actions are pinned by SHA, the Dockerfile runs `check:dist` and sets the user.
+- `npm run check:dist` (also run by the Dockerfile) fails the build when a built page has an inline script or event-handler attribute
+  that the CSP would refuse (audit F13).
+- `CHANGELOG.md` (listed in `files` but absent before).
+
+### Fixed
+
+- CI verifies registry signatures with npm 11.20.0: the npm bundled with Node 24.13 (11.6.2) reports
+  `EMISSINGSIGNATUREKEY` for the attestations of recently published packages.

package/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Meddleware</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,86 @@
 {
   "name": "@meddleware/dashboard-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.89",
+  "homepage": "https://docs.meddleware.co.uk/",
+  "description": "Meddleware tools hub — Vue 3 SPA listing hosted services (Walrus, Access Gate) with white-label deploy options.",
+  "author": "Meddleware <dev@meddleware.co.uk>",
+  "license": "0BSD",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/meddleware-org/dashboard-ui.git"
+  },
+  "type": "module",
+  "files": [
+    "src",
+    "index.html",
+    "vite.config.ts",
+    "tsconfig.json",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "lint:css": "stylelint \"src/**/*.{css,vue}\"",
+    "lint:js": "eslint .",
+    "lint": "npm run lint:css && npm run lint:js && npm run lint:html",
+    "lint:html": "html-validate \"src/**/*.vue\"",
+    "licenses": "node scripts/third-party-licenses.mjs",
+    "check:licenses": "node scripts/third-party-licenses.mjs --check",
+    "check:dist": "node scripts/check-inline-scripts.mjs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@meddleware/access-gate-ui": "^0.1.39",
+    "@meddleware/dao-ui": "^0.1.36",
+    "@meddleware/design-tokens": "^0.1.10",
+    "@meddleware/sealed-storage-ui": "^0.0.41",
+    "@meddleware/token-issuance-ui": "^0.0.39",
+    "@meddleware/treasury-ui": "^0.0.20",
+    "@meddleware/ui": "^0.1.32",
+    "@meddleware/wallet-adapter": "^0.0.17",
+    "@meddleware/walrus-storage-ui": "^0.1.62",
+    "@mysten/sui": "^2.36.0",
+    "vue": "^3.5.44",
+    "vue-router": "^5.4.0"
+  },
+  "devDependencies": {
+    "@meddleware/eslint-config": "^0.0.3",
+    "@playwright/test": "~1.64.1",
+    "@types/node": "~26.6.5",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "@vue/eslint-config-typescript": "^14.9.0",
+    "@vue/test-utils": "^2.5.1",
+    "autoprefixer": "^10.6.1",
+    "eslint": "^10.13.0",
+    "eslint-plugin-vue": "^10.11.1",
+    "eslint-plugin-vuejs-accessibility": "^2.6.2",
+    "html-validate": "^11.16.4",
+    "html-validate-vue": "^9.3.1",
+    "jiti": "^2.7.0",
+    "jsdom": "^30.1.3",
+    "postcss": "^8.5.30",
+    "postcss-html": "^2.0.0",
+    "stylelint": "^17.16.0",
+    "stylelint-config-standard": "^40.0.0",
+    "typescript": "~6.0.0",
+    "vite": "^8.3.4",
+    "vitest": "~5.0.2",
+    "vue-eslint-parser": "^10.4.1",
+    "vue-tsc": "~3.3.13"
+  },
+  "engines": {
+    "node": "^22.18.0 || >=24.12.0"
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/src/App.vue

@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter, RouterView, RouterLink } from 'vue-router'
+import {
+  AppHeader, AppSidebar, AppFooter,
+  ColorModeControl, SidebarItem, StatusWidget, CopyableAddress, ExplorerLink, CopyrightLine,
+  suiExplorerUrl, useColorMode,
+} from '@meddleware/ui'
+import { useWallet, useNetwork } from '@meddleware/wallet-adapter'
+import NetworkSelector from './components/NetworkSelector.vue'
+import ChainSelector from './components/ChainSelector.vue'
+
+const { mode } = useColorMode('dark')
+const route = useRoute()
+const router = useRouter()
+const { network } = useNetwork()
+
+// The sidebar has two modes. Top-level shows the organisation sections (Treasury, Blockchain).
+// Entering the Blockchain section swaps the sidebar to a chain selector with an up-one-level
+// control that returns to the top level without leaving the page.
+type SidebarView = 'top' | 'blockchain'
+// Derived from the route below (immediate watcher) so a direct load / reload of /blockchain
+// shows the chain selector, not the top-level menu.
+const sidebarView = ref<SidebarView>('top')
+const selectedChain = ref('sui')
+
+const isTreasury = computed(() => route.path === '/')
+const isBlockchain = computed(() => route.path === '/blockchain')
+
+function goTreasury(navigate?: () => void): void {
+  sidebarView.value = 'top'
+  if (navigate) navigate()
+  else router.push('/')
+}
+
+function enterBlockchain(): void {
+  // No-op navigation if already on /blockchain (vue-router won't reload the same route);
+  // either way the sidebar switches to the chain selector.
+  sidebarView.value = 'blockchain'
+  if (route.path !== '/blockchain') router.push('/blockchain')
+}
+
+function upOneLevel(): void {
+  // Return the sidebar to the top level without navigating away from the current page.
+  sidebarView.value = 'top'
+}
+
+// Derive the sidebar mode from the route so it's correct on direct load / reload / redirect /
+// back-forward — /blockchain always opens the chain selector. `upOneLevel()` sets 'top' without a
+// route change, so this watcher (which fires only on path changes) leaves that transient override
+// intact until the next navigation.
+watch(
+  () => route.path,
+  (p) => {
+    sidebarView.value = p === '/blockchain' ? 'blockchain' : 'top'
+  },
+  { immediate: true },
+)
+
+// The dashboard hosts the single shared wallet connection for every inline tool view. It
+// requests the superset of features the tools need so the connect control only offers wallets
+// capable of every operation; individual tools still feature-guard at call time.
+const { account, disconnect } = useWallet({
+  requiredFeatures: ['sui:signTransaction', 'sui:signPersonalMessage'],
+})
+
+const DOCS_URL = import.meta.env.VITE_DOCS_URL || 'https://docs.meddleware.co.uk/'
+const DEV_URL = import.meta.env.VITE_DEV_URL || 'https://dev.meddleware.co.uk/'
+
+// SuiVision has no localnet explorer, so only build a link for public networks; otherwise the
+// address is shown copy-only.
+const accountExplorerHref = computed(() =>
+  account.value && network.value !== 'localnet'
+    ? suiExplorerUrl('account', account.value.address, network.value as 'testnet' | 'mainnet' | 'devnet')
+    : null,
+)
+</script>
+
+<template>
+  <div class="app-shell">
+    <AppHeader class="app-shell__header" variant="dark">
+      <template #brand>
+        <RouterLink to="/" class="brand-link" @click="goTreasury()">
+          <span class="brand-mark" aria-hidden="true">◆</span>
+          <span>Meddleware</span>
+        </RouterLink>
+      </template>
+      <template #actions>
+        <ColorModeControl v-model="mode" />
+      </template>
+    </AppHeader>
+
+    <AppSidebar class="app-shell__sidebar" variant="dark">
+      <!-- Top level: organisation sections -->
+      <template v-if="sidebarView === 'top'">
+        <router-link to="/" custom v-slot="{ navigate }">
+          <SidebarItem label="Treasury" icon="🏦" :active="isTreasury" @click="goTreasury(navigate)" />
+        </router-link>
+        <SidebarItem label="Blockchain" icon="⛓" :active="isBlockchain" @click="enterBlockchain" />
+      </template>
+
+      <!-- Blockchain section: chain selector + up-one-level -->
+      <template v-else>
+        <button type="button" class="sidebar-up" @click="upOneLevel">
+          <span aria-hidden="true">←</span> Back
+        </button>
+        <ChainSelector v-model="selectedChain" />
+      </template>
+
+      <template #body>
+        <NetworkSelector v-if="account" class="sidebar-body" />
+      </template>
+
+      <!-- Sidebar foot holds only the wallet control (contextual). Copyright, docs links, and
+           status now live in the shell footer to free vertical space as the sidebar grows. -->
+      <template #foot>
+        <p v-if="account" class="sidebar-foot wallet-connected">
+          <CopyableAddress :address="account.address">
+            <ExplorerLink v-if="accountExplorerHref" :href="accountExplorerHref" :value="account.address" />
+          </CopyableAddress>
+          <button type="button" class="wallet-disconnect" @click="disconnect">Disconnect</button>
+        </p>
+        <p v-else class="sidebar-foot wallet-disconnected">No wallet connected</p>
+      </template>
+    </AppSidebar>
+
+    <main class="app-shell__main">
+      <RouterView />
+    </main>
+
+    <AppFooter class="app-shell__footer" variant="dark" :docs-url="DOCS_URL" :dev-url="DEV_URL">
+      <template #start>
+        <CopyrightLine symbolVariant="kopimi" organisation-name="Meddleware" rightsStatement="jam" />
+      </template>
+      <StatusWidget class="footer-status" />
+    </AppFooter>
+  </div>
+</template>
+
+<style scoped>
+.app-shell {
+  display: grid;
+  grid-template-columns: var(--mw-sidebar-width, 240px) 1fr;
+  grid-template-rows: var(--mw-header-height, 56px) 1fr auto;
+  height: 100dvh;
+  overflow: hidden;
+}
+
+.app-shell__header {
+  grid-column: 1 / -1;
+}
+
+.app-shell__footer {
+  grid-column: 1 / -1;
+}
+
+.footer-status {
+  font-size: var(--font-size-sm);
+}
+
+.app-shell__sidebar {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.app-shell__main {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+@media (width <=720px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: var(--mw-header-height, 56px) 1fr auto;
+  }
+
+  .app-shell__sidebar {
+    display: none;
+  }
+}
+
+.brand-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: inherit;
+  text-decoration: none;
+}
+
+.brand-mark {
+  color: var(--accent);
+}
+
+/* ── Up-one-level control ──────────────────────────────── */
+.sidebar-up {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  background: none;
+  border: none;
+  /* Left padding matches SidebarItem so "← Back" aligns with the items below. */
+  padding: 0.2rem var(--space-sm);
+  margin-bottom: 0.35rem;
+  color: var(--muted);
+  font-size: 0.8rem;
+  cursor: pointer;
+  border-radius: 0;
+}
+
+.sidebar-up:hover {
+  color: var(--text);
+}
+
+.sidebar-up:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* ── Sidebar body/foot ──────────────────────────────────
+   AppSidebar renders these slots unwrapped, so the shell styles its own content. */
+.sidebar-body {
+  flex-shrink: 0;
+}
+
+.sidebar-foot {
+  flex-shrink: 0;
+  margin: 0;
+  /* Extra bottom space keeps the wallet control clear of the shell footer's border. */
+  padding: var(--space-xs) var(--space-sm) calc(var(--space-xs) + 0.5rem);
+  border-top: 1px solid var(--_border);
+  color: var(--_muted);
+  font-size: var(--font-size-sm);
+}
+
+.wallet-connected {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.wallet-disconnect {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--muted);
+  font-size: 0.8rem;
+  cursor: pointer;
+  white-space: nowrap;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.wallet-disconnect:hover {
+  color: var(--text);
+}
+
+.wallet-disconnected {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+
+/* Decorative status dot (the text states the status). */
+.wallet-disconnected::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--muted, #666);
+  flex-shrink: 0;
+}
+</style>

package/src/components/ChainSelector.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+// Modular blockchain selector shown in the sidebar while the Blockchain section is open.
+// Data-driven so new chains are a one-line addition; defaults to Sui (the only live chain).
+import { SidebarItem } from '@meddleware/ui'
+
+interface Chain {
+  id: string
+  label: string
+  icon: string
+}
+
+const CHAINS: Chain[] = [
+  { id: 'sui', label: 'Sui', icon: '🌊' },
+  // Future chains slot in here — the Blockchain view swaps tool sets by the selected id.
+]
+
+const model = defineModel<string>({ default: 'sui' })
+</script>
+
+<template>
+  <div class="chain-selector">
+    <div class="chain-selector__title">Select chain</div>
+    <SidebarItem
+      v-for="c in CHAINS"
+      :key="c.id"
+      :label="c.label"
+      :icon="c.icon"
+      :active="model === c.id"
+      @click="model = c.id"
+    />
+  </div>
+</template>
+
+<style scoped>
+.chain-selector__title {
+  font-size: 0.7rem;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--muted);
+  opacity: 0.75;
+  /* Left margin matches SidebarItem's horizontal padding so the label aligns with the items. */
+  margin: 0 0 var(--space-2xs) var(--space-sm);
+}
+</style>

package/src/components/NetworkSelector.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+// Network selector for the dashboard sidebar. Reads and writes the shared useNetwork()
+// singleton so every embedded tool view reacts to the chosen network immediately.
+import { ref, watch, onMounted } from 'vue'
+import { useNetwork } from '@meddleware/wallet-adapter'
+import type { MwNetwork } from '@meddleware/wallet-adapter'
+
+const { network, localnetRpc, setNetwork, setLocalnetRpc } = useNetwork()
+
+const localnetInput = ref(localnetRpc.value)
+
+// Sync input when singleton changes externally (e.g. another tab via storage event).
+watch(localnetRpc, (v) => { localnetInput.value = v })
+
+function onNetworkChange(e: Event): void {
+  setNetwork((e.target as HTMLSelectElement).value as MwNetwork)
+}
+
+function commitLocalnetUrl(): void {
+  const url = localnetInput.value.trim()
+  if (url) setLocalnetRpc(url)
+}
+
+onMounted(() => {
+  if (network.value === 'mainnet') setNetwork('testnet')
+})
+</script>
+
+<template>
+  <div class="ns-root">
+    <label class="ns-label" for="ns-select">Network</label>
+    <select id="ns-select" class="ns-select" :value="network" @change="onNetworkChange">
+      <option value="testnet">Testnet</option>
+      <option value="mainnet" disabled title="Coming soon">Mainnet</option>
+      <option value="localnet">Localnet</option>
+    </select>
+
+    <template v-if="network === 'localnet'">
+      <label class="ns-label ns-label--url" for="ns-localnet-url">RPC URL</label>
+      <input
+        id="ns-localnet-url"
+        v-model="localnetInput"
+        type="url"
+        class="ns-input"
+        placeholder="http://127.0.0.1:9000"
+        @blur="commitLocalnetUrl"
+        @keydown.enter="commitLocalnetUrl"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.ns-root {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--border, #333);
+  border-bottom: 1px solid var(--border, #333);
+}
+
+.ns-label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted, #888);
+}
+
+.ns-label--url {
+  margin-top: 0.25rem;
+}
+
+.ns-select {
+  appearance: none;
+  background: var(--surface, transparent)
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E")
+    no-repeat right 0.6rem center;
+  border: 1px solid var(--border, #444);
+  border-radius: 6px;
+  color: var(--text, #f0f0f0);
+  font-size: 0.85rem;
+  padding: 0.35rem 1.75rem 0.35rem 0.6rem;
+  cursor: pointer;
+  width: 100%;
+}
+
+.ns-select:focus {
+  outline: 2px solid var(--accent, #6366f1);
+  outline-offset: 1px;
+}
+
+.ns-input {
+  background: var(--surface, transparent);
+  border: 1px solid var(--border, #444);
+  border-radius: 6px;
+  color: var(--text, #f0f0f0);
+  font-size: 0.8rem;
+  font-family: monospace;
+  padding: 0.35rem 0.6rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.ns-input:focus {
+  outline: 2px solid var(--accent, #6366f1);
+  outline-offset: 1px;
+}
+</style>

package/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export default component
+}

package/src/main.ts

@@ -0,0 +1,20 @@
+import { createApp } from 'vue'
+
+// Shared design system: tokens first (defines CSS vars), then base element defaults.
+import '@meddleware/design-tokens/tokens.css'
+import '@meddleware/design-tokens/seasons.css'
+import '@meddleware/ui/base.css'
+import './styles.css'
+
+import { useColorMode, useSeason } from '@meddleware/ui'
+import App from './App.vue'
+import router from './router'
+
+// Default to dark on first load (persisted to localStorage thereafter).
+// Applied before mount to avoid a light-mode flash.
+useColorMode('dark')
+useSeason()
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')

package/src/router/index.ts

@@ -0,0 +1,41 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+// Two org-level sections:
+//   /            → Treasury console (organisation accounting), the default landing route.
+//   /blockchain  → Blockchain tools hub: a qt-style tabbed interface over the Sui tools.
+// Each view/tool renders inline via the component exported from its own package (no iframes),
+// sharing the dashboard's wallet through the @meddleware/wallet-adapter singleton. Routes are
+// lazy so a tool's deps (incl. the Walrus wasm) load only on navigation.
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'treasury',
+      component: () => import('@meddleware/treasury-ui').then((m) => m.TreasuryView),
+    },
+    {
+      path: '/blockchain',
+      name: 'blockchain',
+      component: () => import('../views/BlockchainView.vue'),
+    },
+    // DAO is temporarily retired from the dashboard (the @meddleware/dao-ui dependency is
+    // retained). Re-enable this route once DAO participation ships so users aren't shown a
+    // governance surface they can't yet act on.
+    // {
+    //   path: '/dao',
+    //   name: 'dao',
+    //   component: () => import('@meddleware/dao-ui').then((m) => m.DaoView),
+    // },
+
+    // Legacy per-tool paths now live as tabs inside /blockchain — redirect old bookmarks.
+    { path: '/walrus', redirect: '/blockchain' },
+    { path: '/walrus-storage', redirect: '/blockchain' },
+    { path: '/sealed-storage', redirect: '/blockchain' },
+    { path: '/access-gate', redirect: '/blockchain' },
+    { path: '/token-deployer', redirect: '/blockchain' },
+    { path: '/token-issuance', redirect: '/blockchain' },
+  ],
+})
+
+export default router

package/src/styles.css

@@ -0,0 +1,17 @@
+/*
+ * Dashboard app-layout styles. Design tokens + element defaults come from
+ * @meddleware/design-tokens + @meddleware/ui/base.css (imported in main.ts).
+ * App shell grid layout lives in App.vue scoped styles.
+ */
+
+#app {
+  min-height: 100dvh;
+}
+
+.prose {
+  max-width: 68ch;
+  color: var(--muted);
+}
+.prose h2 {
+  color: var(--text);
+}

package/src/views/BlockchainView.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+// Blockchain tools hub — a qt-style tabbed console over one chain's tools. Today the only
+// chain is Sui; the component takes a `chain` prop so a future multi-chain sidebar selector can
+// switch tool sets without a rewrite. Each tool view is lazy-loaded (its deps, incl. the Walrus
+// wasm, load only when its tab is first opened) and kept alive so switching tabs preserves state.
+import { computed, defineAsyncComponent, ref, watch } from 'vue'
+import { AppTabNav, UiTabPanel, type AppTab } from '@meddleware/ui'
+
+const props = withDefaults(defineProps<{ chain?: string }>(), { chain: 'sui' })
+
+interface Tool extends AppTab {
+  comp: ReturnType<typeof defineAsyncComponent>
+}
+
+// Per-chain tool sets. Add a new key when onboarding a chain.
+const TOOLSETS: Record<string, Tool[]> = {
+  sui: [
+    { id: 'walrus-storage', label: 'Walrus Storage', comp: defineAsyncComponent(() => import('@meddleware/walrus-storage-ui').then((m) => m.WalrusStorageView)) },
+    { id: 'sealed-storage', label: 'Sealed Storage', comp: defineAsyncComponent(() => import('@meddleware/sealed-storage-ui').then((m) => m.SealedStorageView)) },
+    { id: 'access-gate', label: 'Access Gate', comp: defineAsyncComponent(() => import('@meddleware/access-gate-ui').then((m) => m.AccessGateView)) },
+    { id: 'token-issuance', label: 'Token Issuance', comp: defineAsyncComponent(() => import('@meddleware/token-issuance-ui').then((m) => m.TokenIssuanceView)) },
+  ],
+}
+
+const tools = computed<Tool[]>(() => TOOLSETS[props.chain] ?? [])
+const tabs = computed<AppTab[]>(() => tools.value.map(({ id, label }) => ({ id, label })))
+const active = ref(tools.value[0]?.id ?? '')
+
+// Reset to the first tool when the chain changes.
+watch(
+  () => props.chain,
+  () => {
+    active.value = tools.value[0]?.id ?? ''
+  },
+)
+
+const activeComp = computed(() => tools.value.find((t) => t.id === active.value)?.comp)
+</script>
+
+<template>
+  <!-- Fills the shell's main area exactly, so main never scrolls on this page: the tool tabs stay
+       in view and only the tool panel scrolls (its scrollbar at the right edge of the area). -->
+  <div class="blockchain-view">
+    <AppTabNav
+      v-model="active"
+      :tabs="tabs"
+      id-prefix="blockchain"
+      variant="raised"
+      size="lg"
+      class="blockchain-view__tabs"
+      aria-label="Sui tools"
+    />
+
+    <UiTabPanel id-prefix="blockchain" :tab="active" class="blockchain-view__content">
+      <KeepAlive>
+        <component :is="activeComp" :key="active" />
+      </KeepAlive>
+    </UiTabPanel>
+  </div>
+</template>
+
+<style scoped>
+.blockchain-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.blockchain-view__tabs {
+  flex: none;
+}
+
+/* The only scroll container on this page. It spans the full width of the main area (so its
+   scrollbar sits at the area's edge, not beside the content column); the content column is centred
+   and capped at --mw-tool-content-max by inline padding that grows with the spare width. The
+   panel is focusable (UiTabPanel), so keyboard users can scroll it. */
+.blockchain-view__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  /* Consecutive Fibonacci steps of the spacing scale (13 : 8 : 5 units), so top : bottom and
+     bottom : sides are each ≈ φ — generous air under the tabs, tighter at the foot and sides. */
+  padding-block: var(--space-lg) var(--space-md);
+  padding-inline: max(var(--space-sm), calc((100% - var(--mw-tool-content-max)) / 2 + var(--space-sm)));
+}
+
+/* This page only: the tool tabs sit flush — no inset around the strip and no gaps between tabs.
+   Overrides AppTabNav's shared raised/lg spacing for this instance; other tab strips keep theirs.
+   The modifier classes match the component's own selector so this wins regardless of CSS order. */
+.blockchain-view__tabs.mw-tab-nav--raised.mw-tab-nav--lg {
+  gap: 0;
+  padding: 0;
+}
+</style>

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "jsx": "preserve",
+    "types": ["node"],
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.d.ts", "tests/**/*.ts", "e2e/**/*.ts", "vite.config.ts", "vitest.config.ts", "playwright.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// @meddleware/* resolve from node_modules (published packages — no monorepo aliases).
+export default defineConfig({
+  plugins: [vue()],
+  optimizeDeps: {
+    // The Walrus wasm client is dynamically imported inside the inline WalrusStorageView upload flow;
+    // keep it out of the eager dep-optimization graph so it stays a lazy chunk.
+    // @meddleware/wallet-adapter ships TS + .vue source and holds the shared wallet singleton; if it
+    // were pre-bundled, its .vue files (served raw) would load a second copy of the singleton in dev.
+    exclude: ['@mysten/walrus', '@mysten/walrus-wasm', '@meddleware/wallet-adapter'],
+  },
+})

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.