@synopackageland/cli 0.4.0 → 0.5.0

package/templates/native-go-vue/frontend/src/nas/m2-provider.ts

@@ -0,0 +1,104 @@
+import type {Context} from '../context'
+import {M2_MAX_BYTES,M2_PAGE_SIZE,type M2Code,type M2Entry,type M2Page,type M2Provider,type M2Selection,type M2Session} from './m2-contract'
+
+const codes=new Set<M2Code>(['session_required','auth_unavailable','denied','not_found','conflict','invalid-request','unavailable','unknown_method','unsupported','commit-uncertain','limit-exceeded','canceled','timeout'])
+function refuse(code:M2Code='invalid-request'):never{throw {code}}
+const record=(value:unknown):Record<string,unknown>=>{
+ if(!value||typeof value!=='object'||Array.isArray(value))return refuse('unavailable')
+ return value as Record<string,unknown>
+}
+const length=(s:string)=>new TextEncoder().encode(s).length
+const name=(s:unknown):s is string=>typeof s==='string'&&length(s)<=255&&s!==''&&s!=='.'&&s!=='..'&&!/[/\\\x00\r\n,"]/.test(s)
+const path=(s:unknown):s is string=>typeof s==='string'&&s.startsWith('/')&&length(s)<=4096&&s.slice(1).split('/').every(name)
+const relative=(s:string)=>s===''||(!s.startsWith('/')&&s.split('/').every(name))
+const id=(s:unknown):s is string=>typeof s==='string'&&/^[a-fA-F0-9]{64}$/.test(s)
+const integer=(v:unknown):v is number=>typeof v==='number'&&Number.isSafeInteger(v)&&v>=0
+function selection(value:unknown):M2Selection{
+ const v=record(value)
+ if(!id(v.grantId)||!path(v.folder)||typeof v.writable!=='boolean')refuse('unavailable')
+ return {grantId:v.grantId,folder:v.folder,writable:v.writable}
+}
+function entry(value:unknown):M2Entry{
+ const v=record(value),additional=record(v.additional??{})
+ if(!name(v.name)||!path(v.path)||typeof v.isdir!=='boolean'||(additional.size!==undefined&&!integer(additional.size)))refuse('unavailable')
+ return {name:v.name,path:v.path,isDir:v.isdir,...(additional.size===undefined?{}:{bytes:additional.size as number})}
+}
+function page(value:unknown,offset:number):M2Page{
+ const v=record(value)
+ if(!('files' in v)&&!('shares' in v))refuse('unavailable')
+ const raw=v.shares??v.files??[]
+ if(!Array.isArray(raw)||raw.length>M2_PAGE_SIZE||!integer(v.total)||v.offset!==offset||offset+raw.length>v.total)refuse('unavailable')
+ const entries=raw.map(entry),next=offset+entries.length
+ return {entries,total:v.total,offset,...(entries.length&&next<v.total&&next<=1000000?{nextOffset:next}:{})}
+}
+function encode(data:Uint8Array):string{
+ let raw=''
+ for(const byte of data)raw+=String.fromCharCode(byte)
+ return btoa(raw)
+}
+function bytes(value:unknown):Uint8Array{
+ const v=record(value)
+ if(!integer(v.bytes)||v.bytes>M2_MAX_BYTES||typeof v.data!=='string'||v.data.length>4*Math.ceil(M2_MAX_BYTES/3)||! /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/.test(v.data))refuse('unavailable')
+ const raw=atob(v.data)
+ if(raw.length!==v.bytes||btoa(raw)!==v.data)refuse('unavailable')
+ return Uint8Array.from(raw,c=>c.charCodeAt(0))
+}
+export function createM2Provider(ctx:Pick<Context,'call'>):M2Provider{
+ let disposed=false
+ const life=new AbortController()
+ async function request(method:string,args:Record<string,unknown>,signal:AbortSignal,mutates=false):Promise<unknown>{
+  if(disposed||signal.aborted)refuse('canceled')
+  let cleanup=()=>{}
+  const stop=new Promise<never>((_,reject)=>{
+   const abort=()=>reject({code:mutates?'commit-uncertain':'canceled'})
+   const timer=setTimeout(()=>reject({code:mutates?'commit-uncertain':'timeout'}),22000)
+   signal.addEventListener('abort',abort,{once:true});life.signal.addEventListener('abort',abort,{once:true})
+   cleanup=()=>{clearTimeout(timer);signal.removeEventListener('abort',abort);life.signal.removeEventListener('abort',abort)}
+  })
+  try{
+   // ctx.call retains DSM's existing same-origin session and CSRF transport.
+   // It has no abort API: canceling local observation cannot prove rollback.
+   const value=await Promise.race([ctx.call(method,args),stop])
+   if(disposed||signal.aborted)refuse(mutates?'commit-uncertain':'canceled')
+   return value
+  }catch(e){
+   const code=(e as {code?:M2Code})?.code
+   if(mutates&&(!code||!codes.has(code)||['timeout','canceled'].includes(code)))refuse('commit-uncertain')
+   throw {code:code&&codes.has(code)?code:'unavailable'}
+  }finally{cleanup()}
+ }
+ function fileArgs(grantId:string,rel:string){if(!id(grantId)||!relative(rel))refuse();return {grantId,relative:rel}}
+ function offsetArgs(offset:number){if(!integer(offset)||offset>1000000)refuse();return {offset}}
+ function dispose(){if(disposed)return;disposed=true;life.abort();if(typeof window!=='undefined')window.removeEventListener('pagehide',dispose)}
+ if(typeof window!=='undefined')window.addEventListener('pagehide',dispose)
+ return {
+  mode:'filestation-session',
+  async status(signal){
+   const v=record(await request('nas.session.status',{},signal))
+   if(v.mode!=='filestation-session'||v.interactive!=='session-required'||v.background!=='unavailable'||v.validation!=='local-only')refuse('unavailable')
+   return {mode:v.mode,interactive:v.interactive,background:v.background,validation:v.validation} as M2Session
+  },
+  async discovery(folder,offset,signal){if(folder!==undefined&&!path(folder))refuse();return page(await request('nas.discovery',{...(folder?{folder}:{}),...offsetArgs(offset)},signal),offset)},
+  async confirm(folder,writable,signal){
+   if(!path(folder)||typeof writable!=='boolean')refuse()
+   const value=await request('nas.grants.confirm',{folder,writable},signal,true)
+   try{const s=selection(value);if(s.folder!==folder||s.writable!==writable)refuse();return s}catch{refuse('commit-uncertain')}
+  },
+  async selections(signal){const values=await request('nas.grants.list',{},signal);if(!Array.isArray(values)||values.length>256)refuse('unavailable');return values.map(selection)},
+  async revoke(grantId,signal){if(!id(grantId))refuse();const result=await request('nas.grants.revoke',{grantId},signal,true);if(!result||typeof result!=='object'||(result as {revoked?:unknown}).revoked!==true)refuse('commit-uncertain')},
+  async list(grantId,rel,offset,signal){return page(await request('nas.files.list',{...fileArgs(grantId,rel),...offsetArgs(offset)},signal),offset)},
+  async stat(grantId,rel,signal){return entry(await request('nas.files.stat',fileArgs(grantId,rel),signal))},
+  async read(grantId,rel,signal){if(!rel)refuse();return bytes(await request('nas.files.read',fileArgs(grantId,rel),signal))},
+  async create(grantId,rel,n,signal){
+   if(!name(n))refuse()
+   const v=await request('nas.files.create',{...fileArgs(grantId,rel),name:n},signal,true)
+   if(!v||typeof v!=='object'||(v as {created?:unknown}).created!==true)refuse('commit-uncertain')
+  },
+  async upload(grantId,rel,n,data,signal){
+   if(!name(n)||!(data instanceof Uint8Array))refuse()
+   if(data.byteLength>M2_MAX_BYTES)refuse('limit-exceeded')
+   const v=await request('nas.files.write',{...fileArgs(grantId,rel),name:n,data:encode(data)},signal,true)
+   if(!v||typeof v!=='object'||(v as {written?:unknown}).written!==true)refuse('commit-uncertain')
+  },dispose,
+ }
+}

package/templates/native-go-vue/frontend/src/nas/mock-provider.ts

@@ -0,0 +1,119 @@
+import {readActions, type DiscoveryAnchor, type FolderEntry, type GrantView, type NasProvider, type PickerContext, type PreparedIntent, type SafeCode, type ScopeKind} from './provider'
+
+// In-memory fixtures only. This does NOT validate DSM identity/ACL, implement
+// durable R/Q, issue protocol-2 tickets or connect a helper. Never use as auth.
+type Subject = 'admin' | 'normal1' | 'normal2'
+type Binding = {subject: Subject; session: number; epoch: number}
+type Browse = Binding & PickerContext & {canceled: boolean}
+type Candidate = Binding & FolderEntry & {contextId: string; scopeKind: ScopeKind; location: string; depth: number}
+type Intent = Binding & PreparedIntent & {candidateId: string; consumed: boolean}
+type Record = {owner: Subject; view: GrantView}
+function opaque() {return Array.from(crypto.getRandomValues(new Uint8Array(32)), b=>b.toString(16).padStart(2,'0')).join('')}
+function fail(code:SafeCode):never {throw {code}}
+function aborted(signal:AbortSignal) {if(signal.aborted) fail('canceled')}
+const clone = <T>(value:T):T => JSON.parse(JSON.stringify(value))
+
+export function createMockNasService(options:{now?:()=>number; drained?:boolean; appName?:string; pageSize?:number; homeAvailable?:boolean; personalFolders?:readonly string[]} = {}) {
+ const now=options.now ?? Date.now
+ const subjects = new Map<Subject, {session:number; admin:boolean}>([['admin',{session:1,admin:true}],['normal1',{session:1,admin:false}],['normal2',{session:1,admin:false}]])
+ const contexts=new Map<string,Browse>(), candidates=new Map<string,Candidate>(), intents=new Map<string,Intent>(), records=new Map<string,Record>()
+ const cursors=new Map<string,Binding & {contextId:string; nodeId?:string; offset:number}>()
+ // References have S1's shape but are synthetic fixtures, not native proofs.
+ const principals = new Map([...subjects.keys()].map(subject=>[subject,{kind:'local' as const,subjectRef:opaque(),instanceRef:opaque()}]))
+ const epoch={value:1}
+ function connect(subject:Subject):NasProvider {
+  const actor=()=>subjects.get(subject)!
+  const binding=():Binding=>({subject,session:actor().session,epoch:epoch.value})
+  function check(b:Binding) {
+   if(b.subject!==subject) fail('denied')
+   if(b.session!==actor().session || b.epoch!==epoch.value) fail('stale')
+  }
+  function browse(id:string) {
+   const ctx=contexts.get(id); if(!ctx) fail('denied'); check(ctx)
+   if(ctx.canceled) fail('canceled')
+   if(now()>=ctx.expiresAt) fail('expired')
+   if(ctx.scopeKind==='app-shared' && !actor().admin) fail('denied')
+   return ctx
+  }
+  function candidate(id:string) {
+   const node=candidates.get(id); if(!node) fail('denied'); check(node); browse(node.contextId)
+   return node
+  }
+  function entry(ctx:Browse, displayName:string, depth:number, parent?:Candidate):Candidate {
+   const node:Candidate={...binding(),contextId:ctx.contextId,scopeKind:ctx.scopeKind,nodeId:opaque(),displayName,targetKind:'directory',selectable:true,depth,location:parent?`${parent.location} / ${displayName}`:`${ctx.scopeKind==='user-personal'?'My home':'Shared folders'} / ${displayName}`}
+   candidates.set(node.nodeId,node); return node
+  }
+  const visible=()=>[...records.values()].filter(r=>r.owner===subject || r.view.scopeKind==='app-shared').map(r=>({...clone(r.view),canRevoke:r.view.scopeKind==='app-shared'?actor().admin:r.owner===subject}))
+  const provider:NasProvider = {
+   mode:'mock',
+   async begin(scopeKind,signal) {
+    aborted(signal)
+    if(!['user-personal','app-shared'].includes(scopeKind)) fail('invalid-request')
+    if(scopeKind==='app-shared' && !actor().admin) fail('denied')
+    if(scopeKind==='user-personal' && options.homeAvailable===false) fail('unavailable')
+    // Bound retained fixtures; never evict unexpired replay/intent state.
+    if(contexts.size>=256) fail('limit-exceeded')
+    const ctx:Browse={...binding(),contextId:opaque(),scopeKind,expiresAt:now()+60_000,canceled:false}
+    contexts.set(ctx.contextId,ctx)
+    return {contextId:ctx.contextId,scopeKind,expiresAt:ctx.expiresAt}
+   },
+   async list(contextId,nodeId,cursor,signal) {
+    aborted(signal); const ctx=browse(contextId), parent=nodeId?candidate(nodeId):undefined
+    if(parent && parent.contextId!==contextId) fail('denied')
+    let offset=0
+    if(cursor) {
+     const c=cursors.get(cursor); if(!c) fail('denied'); check(c)
+     if(c.contextId!==contextId || c.nodeId!==nodeId) fail('denied'); offset=c.offset
+    }
+    // Own home never returns a selectable home root. Only subdirectories do.
+    // Shared discovery first supplies S1 anchor metadata; no absolute paths.
+    const anchors:DiscoveryAnchor[]=[{ref:opaque(),displayName:'Team documents',kind:ctx.scopeKind,owner:principals.get(subject)!,localFilesystem:true}]
+    const names=parent?(parent.displayName==='Empty folder' || parent.depth>=2?[]:['Reports']):(ctx.scopeKind==='user-personal'?(options.personalFolders ?? ['Projects','Empty folder']):anchors.map(a=>a.displayName))
+    const size=Math.max(1,Math.min(200,options.pageSize ?? 200)), slice=names.slice(offset,offset+size)
+    const entries=slice.map(name=>{
+     const n=entry(ctx,name,(parent?.depth ?? 0)+1,parent)
+     return {nodeId:n.nodeId,displayName:n.displayName,targetKind:n.targetKind,selectable:n.selectable}
+    })
+    let nextCursor:string|undefined
+    if(offset+size<names.length) {nextCursor=opaque();cursors.set(nextCursor,{...binding(),contextId,nodeId,offset:offset+size})}
+    return {entries,nextCursor}
+   },
+   async prepare(candidateId,signal) {
+    aborted(signal);const node=candidate(candidateId)
+    if(!node.selectable) fail('denied')
+    if([...intents.values()].filter(i=>i.subject===subject && !i.consumed && i.expiresAt>now() && !contexts.get(candidates.get(i.candidateId)!.contextId)!.canceled).length>=8) fail('limit-exceeded')
+    const intent:Intent={...binding(),intentId:opaque(),candidateId,consumed:false,summaryDigest:opaque(),expiresAt:now()+30_000,summary:{appName:options.appName ?? 'Mock package',scopeKind:node.scopeKind,displayName:node.location,targetKind:'directory',actions:[...readActions],persistent:true}}
+    // Synthetic digest-shaped token bound to this immutable fixture summary;
+    // the real S3 adapter must supply its actual exact-summary digest.
+    intents.set(intent.intentId,intent);return clone({intentId:intent.intentId,summaryDigest:intent.summaryDigest,expiresAt:intent.expiresAt,summary:intent.summary})
+   },
+   async confirm(intentId,summaryDigest,signal) {
+    aborted(signal);const intent=intents.get(intentId);if(!intent) fail('denied');check(intent)
+    if(intent.consumed) fail('replay')
+    if(now()>=intent.expiresAt) fail('expired')
+    if(summaryDigest!==intent.summaryDigest) fail('stale')
+    const node=candidate(intent.candidateId)
+    if(node.scopeKind==='app-shared' && !actor().admin) fail('denied')
+    if(records.size>=256) fail('limit-exceeded')
+    intent.consumed=true
+    const view:GrantView={grantId:opaque(),revision:1,scopeKind:node.scopeKind,displayName:node.location,targetKind:'directory',actions:[...readActions],effectiveState:'active',createdAt:now(),canRevoke:true}
+    records.set(view.grantId,{owner:subject,view});return clone(view)
+   },
+   async cancel(contextId) {
+    const ctx=contexts.get(contextId);if(!ctx) return;check(ctx);ctx.canceled=true
+   },
+   async grants(signal) {aborted(signal);return visible()},
+   async settings(signal) {aborted(signal);return {items:visible(),canManageShared:actor().admin}},
+   async revoke(grantId,revision,signal) {
+    aborted(signal);const record=records.get(grantId);if(!record) fail('denied')
+    if(record.view.scopeKind==='app-shared'?!actor().admin:record.owner!==subject) fail('denied')
+    if(record.view.revision!==revision) fail('stale')
+    if(record.view.effectiveState!=='revoked') {record.view.revision++;record.view.effectiveState='revoked'}
+    record.view.drained=options.drained ?? true
+    return {grantId,grantRevision:record.view.revision,revoked:true,drained:record.view.drained}
+   },
+  }
+  return provider
+ }
+ return {connect,setAdmin(subject:Subject,admin:boolean){subjects.get(subject)!.admin=admin},invalidate(subject:Subject){subjects.get(subject)!.session++},newEpoch(){epoch.value++;for(const r of records.values()) if(r.view.effectiveState==='active') r.view.effectiveState='suspended'}}
+}

package/templates/native-go-vue/frontend/src/nas/provider.ts

@@ -0,0 +1,59 @@
+import type {InjectionKey} from 'vue'
+
+// S0 protocol-2 display projections, not root Grant/Intent authority records.
+// IDs index provider-owned mappings. No paths, credentials, UID or role claims
+// travel in picker/consent arguments. S1 discovery metadata is not a grant.
+export type ScopeKind = 'app-shared' | 'user-personal'
+export const readActions = ['nas.files.list', 'nas.files.stat', 'nas.files.read'] as const
+export type ReadAction = typeof readActions[number]
+export type SafeCode = 'unknown_method' | 'session_required' | 'auth_unavailable' | 'invalid-request' | 'incompatible' | 'unsupported' | 'replay' | 'stale' | 'expired' | 'denied' | 'unavailable' | 'suspended' | 'revoked' | 'fenced' | 'busy' | 'limit-exceeded' | 'canceled' | 'timeout' | 'partial' | 'commit-uncertain' | 'cleanup-required' | 'internal'
+export interface SafeError {code: SafeCode; operationId?: string}
+export interface DiscoveryAnchor {
+ ref: string
+ displayName: string
+ kind: ScopeKind
+ owner: {kind: 'local'; subjectRef: string; instanceRef: string}
+ localFilesystem: boolean
+}
+export interface PickerContext {contextId: string; scopeKind: ScopeKind; expiresAt: number}
+export interface FolderEntry {nodeId: string; displayName: string; targetKind: 'directory'; selectable: boolean}
+export interface FolderPage {entries: FolderEntry[]; nextCursor?: string}
+export interface ConsentSummary {
+ appName: string
+ scopeKind: ScopeKind
+ displayName: string
+ targetKind: 'directory'
+ actions: readonly ReadAction[]
+ persistent: true
+}
+export interface PreparedIntent {intentId: string; summaryDigest: string; expiresAt: number; summary: ConsentSummary}
+export interface GrantHandle {
+ grantId: string
+ revision: number
+ scopeKind: ScopeKind
+ displayName: string
+ targetKind: 'directory'
+ actions: readonly ReadAction[]
+}
+export interface GrantView extends GrantHandle {
+ effectiveState: 'active' | 'suspended' | 'revoked'
+ createdAt: number
+ canRevoke: boolean
+ // S0 R/Q receipt: undefined means Q has not been observed, never assume true.
+ drained?: boolean
+ cleanupRequired?: boolean
+}
+export interface GrantList {items: GrantView[]; canManageShared: boolean}
+export interface RevokeResult {grantId: string; grantRevision: number; revoked: boolean; drained: boolean}
+export interface NasProvider {
+ readonly mode: 'mock' | 'connected'
+ begin(kind: ScopeKind, signal: AbortSignal): Promise<PickerContext>
+ list(contextId: string, nodeId: string | undefined, cursor: string | undefined, signal: AbortSignal): Promise<FolderPage>
+ prepare(candidateId: string, signal: AbortSignal): Promise<PreparedIntent>
+ confirm(intentId: string, summaryDigest: string, signal: AbortSignal): Promise<GrantHandle>
+ cancel(contextId: string): Promise<void>
+ grants(signal: AbortSignal): Promise<GrantView[]>
+ settings(signal: AbortSignal): Promise<GrantList>
+ revoke(grantId: string, revision: number, signal: AbortSignal): Promise<RevokeResult>
+}
+export const NasProviderKey: InjectionKey<NasProvider> = Symbol('nas-provider')

package/templates/native-go-vue/frontend/src/nas/use-m2-request.ts

@@ -0,0 +1,18 @@
+import {onBeforeUnmount,ref} from 'vue'
+
+// The provider owns the 22 s bound (backend handlers are bounded to 20 s).
+// Local cancellation suppresses late display updates, never promises rollback.
+export function useM2Request(){
+ const busy=ref(false),error=ref<unknown>()
+ let disposed=false,generation=0,active:AbortController|undefined
+ function cancel(){generation++;active?.abort();active=undefined;busy.value=false;error.value=undefined}
+ async function run<T>(fn:(signal:AbortSignal)=>Promise<T>):Promise<T|undefined>{
+  if(disposed||busy.value)return
+  const version=++generation,controller=new AbortController();active=controller;busy.value=true;error.value=undefined
+  try{const value=await fn(controller.signal);return !disposed&&version===generation?value:undefined}
+  catch(e){if(!disposed&&version===generation)error.value=e;return undefined}
+  finally{if(!disposed&&version===generation){busy.value=false;active=undefined}}
+ }
+ onBeforeUnmount(()=>{disposed=true;cancel()})
+ return {busy,error,run,cancel}
+}

package/templates/native-go-vue/frontend/src/nas/use-request.ts

@@ -0,0 +1,27 @@
+import {onBeforeUnmount, ref} from 'vue'
+
+// One admission at a time per component, bounded metadata requests, and no late
+// responses after close/unmount. An abort is not a server rollback/Q receipt.
+export function useNasRequest() {
+ const busy=ref(false), error=ref<unknown>()
+ let generation=0, disposed=false, controller:AbortController|undefined
+ function cancel() {generation++;controller?.abort();controller=undefined;busy.value=false;error.value=undefined}
+ async function run<T>(operation:(signal:AbortSignal,current:()=>boolean)=>Promise<T>):Promise<T|undefined> {
+  if(busy.value || disposed) return
+  const version=++generation, active=new AbortController();controller=active;busy.value=true;error.value=undefined
+  const current=()=>!disposed && generation===version
+  let timer:ReturnType<typeof setTimeout>|undefined
+  let onAbort:()=>void=()=>{}
+  try {
+   const stop=new Promise<never>((_,reject)=> {
+    onAbort=()=>reject({code:'canceled'});active.signal.addEventListener('abort',onAbort,{once:true})
+    timer=setTimeout(()=>{reject({code:'timeout'});active.abort()},5000)
+   })
+   const value=await Promise.race([operation(active.signal,current),stop])
+   return current()?value:undefined
+  } catch(e) {if(current()) error.value=e;return undefined}
+  finally {clearTimeout(timer);active.signal.removeEventListener('abort',onAbort);if(current()){busy.value=false;controller=undefined}}
+ }
+ onBeforeUnmount(()=>{disposed=true;cancel()})
+ return {busy,error,run,cancel}
+}

package/templates/native-go-vue/frontend/src/sdk-main.ts

@@ -0,0 +1,39 @@
+import {createApp} from 'vue'
+import App from './SDKApp.vue'
+import {JobsProviderKey,JobsAdminProviderKey} from './jobs/provider'
+import {createConnectedJobsProvider,createConnectedJobsAdminProvider} from './jobs/connected-provider'
+import type {Context} from './context'
+import {NasProviderKey, type NasProvider} from './nas/provider'
+import {M2ProviderKey} from './nas/m2-contract'
+import {createM2Provider} from './nas/m2-provider'
+import '@synopackageland/ui/themes/dsm7-embedded.css'
+import './style.css'
+import './m2-style.css'
+
+let mountSequence = 0
+export function mount(root: HTMLElement, ctx: Context, options: {nasProvider?: NasProvider} = {}) {
+ const app = createApp(App, {ctx})
+ const jobs=createConnectedJobsProvider(ctx)
+ const selections=createM2Provider(ctx)
+ app.provide(M2ProviderKey,selections)
+ app.provide(JobsProviderKey,jobs)
+ app.provide(JobsAdminProviderKey,createConnectedJobsAdminProvider(ctx))
+ // The shipped strict-S1 build never installs a NAS provider. Preview is dev/mock only.
+ if(import.meta.env.DEV && options.nasProvider?.mode === 'mock') app.provide(NasProviderKey, options.nasProvider)
+ // Include the generated package ID, an instance counter and randomness even
+ // across separately loaded bundles. getRandomValues also works on DSM HTTP.
+ app.config.idPrefix = `__PACKAGE__-${++mountSequence}-${crypto.getRandomValues(new Uint32Array(4)).join('-')}`
+ const hadRootClass = root.classList.contains('dsmapp-vue-root')
+ root.classList.add('dsmapp-vue-root')
+ app.mount(root)
+ return {unmount() {app.unmount(); jobs.disconnect(); selections.dispose(); if(!hadRootClass) root.classList.remove('dsmapp-vue-root')}}
+}
+// Register with the existing per-package DSM window loader. Never share a
+// singleton app or user/session state between different mount calls.
+const script = document.currentScript as HTMLScriptElement | null
+const packageID = script?.getAttribute('data-package')
+const host = window as unknown as {DsmPackageApps: Record<string, {mount: typeof mount}>}
+if (packageID) {
+ host.DsmPackageApps = host.DsmPackageApps || {}
+ host.DsmPackageApps[packageID] = {mount}
+}

package/templates/native-go-vue/frontend/src/shell/AppShell.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// DSM-style shell: a fixed left navigation and one right-hand page with a
+// header. Pages stay mounted (v-show) so provider leases and job polling keep
+// running while the user moves between them.
+import {computed, type Component} from 'vue'
+import {AppLayout, AppSidebar, PageContent, PageHeader, type AppSidebarGroup} from '@synopackageland/ui'
+import {FolderOpen, Info, KeyRound, ListChecks, MousePointerClick, NotebookPen, Shield, Timer} from '@lucide/vue'
+import {shellCopy} from './i18n'
+import type {ShellPage} from './pages'
+
+const props = defineProps<{
+  locale: string
+  modelValue: ShellPage
+  pages: readonly ShellPage[]
+  description?: string
+}>()
+const emit = defineEmits<{'update:modelValue': [value: ShellPage]}>()
+const copy = computed(() => shellCopy(props.locale))
+const icons: Record<ShellPage, Component> = {status:Info,sample:NotebookPen,nas:FolderOpen,interactive:MousePointerClick,background:Timer,admin:ListChecks,identity:KeyRound,folders:Shield}
+const groups = computed<AppSidebarGroup[]>(() => [{
+  items: props.pages.map(page => ({key:page,label:copy.value[page],icon:icons[page]})),
+}])
+const title = computed(() => copy.value[props.modelValue] ?? copy.value.status)
+</script>
+
+<template>
+  <AppLayout class="app-shell" min-height="0">
+    <template #sidebar>
+      <AppSidebar :model-value="modelValue" :groups="groups" @update:model-value="emit('update:modelValue', $event as ShellPage)" />
+    </template>
+    <PageContent class="app-page">
+      <PageHeader :title="title" :description="description">
+        <template #actions><slot name="actions" /></template>
+      </PageHeader>
+      <div class="app-page-content"><slot /></div>
+    </PageContent>
+  </AppLayout>
+</template>
+
+<style scoped>
+/* The library clips AppLayout at window height; the page body scrolls while
+   the sidebar keeps its own height. Modeled on syno-reclaim's AppShell. */
+.app-shell { height: 100%; min-width: 0; grid-template-rows: minmax(0, 1fr); }
+.app-shell :deep(> div) { min-height: 0; }
+.app-shell :deep(main) { display: flex; flex-direction: column; overflow: hidden; }
+.app-page { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+.app-page-content { padding-bottom: var(--ui-space-6, 24px); }
+</style>

package/templates/native-go-vue/frontend/src/shell/i18n/de.json

@@ -0,0 +1,10 @@
+{
+  "status": "Status",
+  "sample": "Meine Beispieldaten",
+  "nas": "NAS-Ordnerzugriff",
+  "interactive": "Interaktive Aufträge",
+  "background": "Hintergrundaufträge",
+  "admin": "Auftragsverwaltung",
+  "identity": "Optionale App-Identität",
+  "folders": "Ordnerauswahl"
+}

package/templates/native-go-vue/frontend/src/shell/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "status": "Status",
+  "sample": "My sample data",
+  "nas": "NAS folder access",
+  "interactive": "Interactive jobs",
+  "background": "Background jobs",
+  "admin": "Job management",
+  "identity": "Optional app identity",
+  "folders": "Folder selections"
+}

package/templates/native-go-vue/frontend/src/shell/i18n/es.json

@@ -0,0 +1,10 @@
+{
+  "status": "Estado",
+  "sample": "Mis datos de ejemplo",
+  "nas": "Acceso a carpetas NAS",
+  "interactive": "Tareas interactivas",
+  "background": "Tareas en segundo plano",
+  "admin": "Gestión de tareas",
+  "identity": "Identidad de aplicación opcional",
+  "folders": "Selección de carpetas"
+}

package/templates/native-go-vue/frontend/src/shell/i18n/fr.json

@@ -0,0 +1,10 @@
+{
+  "status": "État",
+  "sample": "Mes données d'exemple",
+  "nas": "Accès aux dossiers NAS",
+  "interactive": "Tâches interactives",
+  "background": "Tâches en arrière-plan",
+  "admin": "Gestion des tâches",
+  "identity": "Identité d'application facultative",
+  "folders": "Sélection de dossiers"
+}

package/templates/native-go-vue/frontend/src/shell/i18n/it.json

@@ -0,0 +1,10 @@
+{
+  "status": "Stato",
+  "sample": "I miei dati di esempio",
+  "nas": "Accesso alle cartelle NAS",
+  "interactive": "Attività interattive",
+  "background": "Attività in background",
+  "admin": "Gestione attività",
+  "identity": "Identità app opzionale",
+  "folders": "Selezione cartelle"
+}

package/templates/native-go-vue/frontend/src/shell/i18n/ja.json

@@ -0,0 +1,10 @@
+{
+  "status": "ステータス",
+  "sample": "サンプルデータ",
+  "nas": "NAS フォルダーアクセス",
+  "interactive": "インタラクティブジョブ",
+  "background": "バックグラウンドジョブ",
+  "admin": "ジョブ管理",
+  "identity": "任意のアプリ ID",
+  "folders": "フォルダーの選択"
+}

package/templates/native-go-vue/frontend/src/shell/i18n/ko.json

@@ -0,0 +1,10 @@
+{
+  "status": "상태",
+  "sample": "내 샘플 데이터",
+  "nas": "NAS 폴더 액세스",
+  "interactive": "대화형 작업",
+  "background": "백그라운드 작업",
+  "admin": "작업 관리",
+  "identity": "선택적 앱 ID",
+  "folders": "폴더 선택"
+}

package/templates/native-go-vue/frontend/src/shell/i18n/zh-CN.json

@@ -0,0 +1,10 @@
+{
+  "status": "状态",
+  "sample": "我的示例数据",
+  "nas": "NAS 文件夹访问",
+  "interactive": "交互工作",
+  "background": "后台工作",
+  "admin": "工作管理",
+  "identity": "可选应用身份",
+  "folders": "文件夹选择"
+}

package/templates/native-go-vue/frontend/src/shell/i18n/zh-TW.json

@@ -0,0 +1,10 @@
+{
+  "status": "狀態",
+  "sample": "我的範例資料",
+  "nas": "NAS 資料夾存取",
+  "interactive": "互動工作",
+  "background": "背景工作",
+  "admin": "工作管理",
+  "identity": "選用應用程式身分",
+  "folders": "資料夾選取"
+}

package/templates/native-go-vue/frontend/src/shell/i18n.ts

@@ -0,0 +1,17 @@
+import en from './i18n/en.json'
+import zhTW from './i18n/zh-TW.json'
+import zhCN from './i18n/zh-CN.json'
+import ja from './i18n/ja.json'
+import ko from './i18n/ko.json'
+import de from './i18n/de.json'
+import fr from './i18n/fr.json'
+import es from './i18n/es.json'
+import it from './i18n/it.json'
+
+export type ShellCopy = typeof en
+export const shellCatalogs: Record<string, ShellCopy> = {en,'zh-TW':zhTW,'zh-CN':zhCN,ja,ko,de,fr,es,it}
+const aliases: Record<string,string> = {enu:'en',cht:'zh-TW',chs:'zh-CN',jpn:'ja',krn:'ko',ger:'de',fre:'fr',spn:'es',ita:'it'}
+export function shellCopy(locale: string): ShellCopy {
+  const normalized = locale.replaceAll('_','-')
+  return shellCatalogs[aliases[normalized] ?? normalized] ?? shellCatalogs[normalized.split('-')[0]!] ?? en
+}

package/templates/native-go-vue/frontend/src/shell/pages.ts

@@ -0,0 +1,34 @@
+// The DSM-style shell shows one sidebar entry per feature that this build
+// actually provides. The manifest is resolved at build time, so the entries
+// here are driven by runtime feature flags rather than by the YAML itself.
+export type ShellPage =
+  | 'status'
+  | 'sample'
+  | 'nas'
+  | 'interactive'
+  | 'background'
+  | 'admin'
+  | 'identity'
+  | 'folders'
+
+export interface ShellFeatureFlags {
+  sample?: boolean
+  nas?: boolean
+  interactive?: boolean
+  background?: boolean
+  admin?: boolean
+  identity?: boolean
+  folders?: boolean
+}
+
+/** 'status' is the integration/account page every Vue build has. */
+const ORDER: readonly ShellPage[] = ['status','sample','nas','interactive','background','admin','identity','folders']
+
+export function shellPages(features: ShellFeatureFlags): ShellPage[] {
+  return ORDER.filter(page => page === 'status' || features[page] === true)
+}
+
+/** Keeps a selection that still exists; otherwise the first page wins. */
+export function activePage(current: ShellPage | undefined, pages: readonly ShellPage[]): ShellPage {
+  return current !== undefined && pages.includes(current) ? current : (pages[0] ?? 'status')
+}

package/templates/native-go-vue/frontend/src/style.css

@@ -1,14 +1,27 @@
 .dsmapp-vue-root {height: 100%; min-height: 0; width: 100%; overflow: hidden;}
-[data-ui-app] .integration-app {padding: var(--ui-space-5, 20px); max-width: 72ch; color: var(--ui-text); font-family: var(--ui-font-sans); font-size: 13px; line-height: 1.5;}
-[data-ui-app] .integration-heading {display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px;}
-[data-ui-app] .integration-heading h1 {font-size: 20px; font-weight: 600; margin: 0;}
-[data-ui-app] .integration-heading p {color: var(--ui-text); margin: 4px 0 0;}
-[data-ui-app] .integration-app section {margin-top: 24px;}
+[data-ui-app] .integration-app {padding: 0 var(--ui-page-padding-x, 16px); color: var(--ui-text); font-family: var(--ui-font-sans); font-size: 13px; line-height: 1.5;}
+[data-ui-app] .integration-app section {margin-top: var(--ui-space-4, 16px);}
 [data-ui-app] .integration-status h2 {font-size: 15px; font-weight: 600; margin: 0;}
 [data-ui-app] .integration-status p {margin: 6px 0;}
 [data-ui-app] .integration-status dl {display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0;}
 [data-ui-app] .integration-status dt, [data-ui-app] .integration-help {color: var(--ui-text);}
 [data-ui-app] .integration-status dd {margin: 0;}
 [data-ui-app] .integration-actions {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;}
-[data-ui-app] .integration-field {display: grid; gap: 6px; margin: 12px 0;}
 [data-ui-app] .integration-notice {color: var(--ui-text);}
+[data-ui-app] .nas-summary {display: grid; grid-template-columns: minmax(6ch, max-content) minmax(0, 1fr); gap: var(--ui-space-2, 8px) var(--ui-space-4, 16px);}
+[data-ui-app] .nas-summary dd {margin: 0; overflow-wrap: anywhere;}
+[data-ui-app] .nas-breadcrumb {display: flex; flex-wrap: wrap; gap: var(--ui-space-2, 8px); margin-block: var(--ui-space-3, 12px);}
+[data-ui-app] .nas-browser {display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-3, 12px);}
+[data-ui-app] .nas-tree {display: none;}
+[data-ui-app] .nas-folder-list {min-width: 0; overflow: auto;}
+[data-ui-app] .nas-folder-name {white-space: normal; overflow-wrap: anywhere; text-align: start;}
+[data-ui-app] .nas-folder-action {white-space: normal; max-width: 100%;}
+[data-ui-app] .nas-picker {max-height: 55vh; overflow: auto; overflow-wrap: anywhere;}
+[data-ui-app] .nas-grants {list-style: none; padding: 0;}
+[data-ui-app] .nas-grants > li {padding-block: var(--ui-space-4, 16px); border-bottom: 1px solid var(--ui-border);}
+[data-ui-app] .nas-grant-heading {display: flex; align-items: start; justify-content: space-between; gap: var(--ui-space-3, 12px);}
+[data-ui-app] .nas-grant-heading strong {overflow-wrap: anywhere;}
+@media (min-width: 960px) {
+ [data-ui-app] .nas-browser {grid-template-columns: minmax(8ch, 1fr) minmax(0, 3fr);}
+ [data-ui-app] .nas-tree {display: block; overflow: auto;}
+}