@synopackageland/cli 0.4.1 → 0.5.0

package/templates/native-go-vue/frontend/test/m2-ui.test.ts

@@ -0,0 +1,209 @@
+// @vitest-environment jsdom
+import {expect,test,vi} from 'vitest'
+import {createApp,h,nextTick} from 'vue'
+import {AppRoot} from '@synopackageland/ui'
+import {mount} from '../src/m2-main'
+import M2PathPicker from '../src/nas/M2PathPicker.vue'
+import {M2_MAX_BYTES,M2ProviderKey,type M2Provider} from '../src/nas/m2-contract'
+import {m2Copy,m2Catalogs,m2ErrorCopy} from '../src/nas/m2-i18n'
+import {format} from '../src/nas/i18n'
+import {shellCopy} from '../src/shell/i18n'
+import type {Context} from '../src/context'
+vi.stubGlobal('URL',Object.assign(URL,{createObjectURL:vi.fn(()=> 'blob:local-test'),revokeObjectURL:vi.fn()}))
+const id='a'.repeat(64)
+async function settle(){for(let i=0;i<20;i++){await Promise.resolve();await nextTick()}await new Promise(r=>setTimeout(r,25))}
+function click(root:HTMLElement,text:string){const b=[...root.querySelectorAll('button')].find(b=>b.textContent?.trim()===text||b.getAttribute('aria-label')===text);expect(b,text).toBeTruthy();b!.click()}
+function fixture(locale='en'){
+ let user='normal1',selections:any[]=[],failure=''
+ const reopen:Array<()=>void>=[]
+ const call=vi.fn(async(method:string,args?:Record<string,unknown>)=>{
+  if(failure&&method.startsWith('nas.'))throw {code:failure,message:'Cookie=secret /private'}
+  if(method==='app.status')return {package:'SamePackage',version:'1',user,admin:false}
+  if(method==='nas.session.status')return {mode:'filestation-session',interactive:'session-required',background:'unavailable',validation:'local-only'}
+  if(method==='nas.discovery')return {files:args?.folder?[]:null,shares:args?.folder?undefined:[{name:'Home',path:'/home',isdir:true}],total:args?.folder?0:1,offset:0}
+  if(method==='nas.grants.list')return selections
+  if(method==='nas.grants.confirm'){const s={grantId:id,folder:args!.folder,writable:args!.writable};selections.push(s);return s}
+  if(method==='nas.grants.revoke'){selections=[];return {revoked:true}}
+  if(method==='nas.files.list')return {files:[{name:'notes.txt',path:'/home/notes.txt',isdir:false,additional:{size:3}}],total:1,offset:0}
+  if(method==='nas.files.stat')return {name:'notes.txt',path:'/home/notes.txt',isdir:false,additional:{size:3}}
+  if(method==='nas.files.read')return {data:'YWJj',bytes:3}
+  if(method==='nas.files.create')return {created:true}
+  if(method==='nas.files.write')return {written:true}
+  throw {code:'unknown_method'}
+ })
+ const ctx={locale,call,reopen(fn:()=>void){reopen.push(fn);return ()=>{}}} as Context
+ const root=document.createElement('div');document.body.append(root);const app=mount(root,ctx)
+ return {root,app,call,reopen,setUser(value:string){user=value},fail(code:string){failure=code},close(){app.unmount();root.remove()}}
+}
+test('the File Station build uses the same DSM sidebar with a status page',async()=>{
+ const f=fixture(),copy=shellCopy('en')
+ try{
+  await settle()
+  const labels=[...f.root.querySelectorAll<HTMLElement>('[data-nav-item]')].map(node=>node.textContent?.trim())
+  expect(labels).toEqual([copy.status,copy.folders])
+  expect(f.root.querySelector('h1')?.textContent?.trim()).toBe(copy.status)
+  const folders=[...f.root.querySelectorAll<HTMLElement>('[data-nav-item]')].find(node=>node.textContent?.trim()===copy.folders)!
+  folders.click();await settle()
+  expect(f.root.querySelector('h1')?.textContent?.trim()).toBe(copy.folders)
+  expect(f.root.textContent).toContain(m2Copy('en').ownPermissions)
+ }finally{f.close()}
+})
+
+test('real session routes drive browse, writable consent, file actions and revoke without helper approval',async()=>{
+ const f=fixture(),copy=m2Copy('en')
+ try{
+  await settle();expect(f.root.textContent).toContain(copy.ownPermissions);expect(f.root.textContent).toContain(copy.unsupported)
+  click(f.root,copy.choose);await settle();click(f.root,'Select Home');await settle()
+  const checkbox=f.root.querySelector<HTMLElement>('[role=checkbox]')!;checkbox.click()
+  click(f.root,copy.confirm);await settle()
+  expect(f.call).toHaveBeenCalledWith('nas.grants.confirm',{folder:'/home',writable:true})
+  click(f.root,copy.openFiles);await settle();click(f.root,copy.inspect);await settle()
+  expect(f.root.textContent).toContain('3');click(f.root,copy.read);await settle()
+  expect(f.root.textContent).toContain(copy.readComplete)
+  const labelled=(text:string)=>f.root.querySelector<HTMLElement>(`#${[...f.root.querySelectorAll('label')].find(l=>l.textContent?.startsWith(text))!.htmlFor}`)
+  expect(labelled(copy.folderName)).toBe(f.root.querySelector('input[data-folder-name]'));expect(labelled(copy.uploadFile)).toBe(f.root.querySelector('input[type=file]'))
+  const input=f.root.querySelector<HTMLInputElement>('input[data-folder-name]')!;input.value='new';input.dispatchEvent(new Event('input',{bubbles:true}));await settle()
+  click(f.root,copy.create);await settle();expect(f.call).toHaveBeenCalledWith('nas.files.create',{grantId:id,relative:'',name:'new'})
+  const upload=f.root.querySelector<HTMLInputElement>('input[type=file]')!
+  Object.defineProperty(upload,'files',{value:[{name:'note.bin',size:3,arrayBuffer:async()=>new Uint8Array([0,1,255]).buffer}]})
+  upload.dispatchEvent(new Event('change',{bubbles:true}));await settle();click(f.root,copy.upload);await settle()
+  expect(f.call).toHaveBeenCalledWith('nas.files.write',{grantId:id,relative:'',name:'note.bin',data:'AAH/'})
+  click(f.root,copy.revoke);await settle();click(f.root,copy.confirmRevoke);await settle()
+  expect(f.root.textContent).toContain(copy.emptySelections)
+  expect(f.call.mock.calls.some(([m])=>/prepare|stream|publish|integration|root/.test(m))).toBe(false)
+ }finally{f.close()}
+})
+test('nine catalogs contain matching placeholders and distinct recovery copy for each safe failure',async()=>{
+ expect(Object.keys(m2Catalogs)).toHaveLength(9)
+ for(const [locale,copy]of Object.entries(m2Catalogs)){
+  expect(Object.keys(copy).sort()).toEqual(Object.keys(m2Catalogs.en).sort())
+  for(const key of Object.keys(copy)as Array<keyof typeof copy>){expect(copy[key].trim()).not.toBe('');expect(copy[key].match(/\{\w+\}/g)??[]).toEqual(m2Catalogs.en[key].match(/\{\w+\}/g)??[])}
+  const messages=['session_required','denied','not_found','conflict','commit-uncertain'].map(code=>m2ErrorCopy({code,message:'secret'},copy))
+  expect(new Set(messages).size).toBe(5)
+  const f=fixture(locale)
+  try{await settle();expect(f.root.textContent).toContain(copy.ownPermissions);f.fail('session_required');click(f.root,copy.refresh);await settle();expect(f.root.textContent).toContain(copy.errorSession);expect(f.root.textContent).not.toContain('Cookie=secret')}
+  finally{f.close()}
+ }
+})
+test('account change discards selections and pending dialogs until remount; two mounts isolate dialogs',async()=>{
+ const a=fixture(),b=fixture(),copy=m2Copy('en')
+ try{
+  await settle();click(a.root,copy.choose);click(b.root,copy.choose);await settle()
+  const ids=[...document.querySelectorAll('[id]')].map(n=>n.id).filter(Boolean);expect(new Set(ids).size).toBe(ids.length)
+  expect(a.root.querySelector('[role=dialog]')?.hasAttribute('aria-modal')).toBe(false)
+  a.setUser('normal2');a.reopen.forEach(fn=>fn());await settle()
+  expect(a.root.textContent).toContain(copy.accountChanged);expect(a.root.querySelector('[role=dialog]')).toBeNull()
+  expect(b.root.querySelector('[role=dialog]')).toBeTruthy()
+ }finally{a.close();b.close()}
+})
+
+test('read-only selection hides mutations; cancellation never confirms and errors never auto-retry',async()=>{
+ const f=fixture(),copy=m2Copy('en')
+ try{
+  await settle();click(f.root,copy.choose);await settle();click(f.root,'Select Home');click(f.root,copy.cancel);await settle()
+  expect(f.call.mock.calls.some(([m])=>m==='nas.grants.confirm')).toBe(false)
+  click(f.root,copy.choose);await settle();click(f.root,'Select Home');await settle();click(f.root,copy.confirm);await settle()
+  expect(f.call).toHaveBeenCalledWith('nas.grants.confirm',{folder:'/home',writable:false})
+  click(f.root,copy.openFiles);await settle()
+  expect(f.root.querySelector('input[type=file]')).toBeNull();expect(f.root.querySelector('input[data-folder-name]')).toBeNull()
+  f.fail('not_found');click(f.root,copy.inspect);await settle();expect(f.root.textContent).toContain(copy.errorNotFound)
+  expect(f.call.mock.calls.filter(([m])=>m==='nas.files.stat')).toHaveLength(1)
+ }finally{f.close()}
+})
+test('late discovery is discarded on unmount; a failed refresh does not forget the original account binding',async()=>{
+ const f=fixture(),copy=m2Copy('en')
+ try{
+  await settle()
+  const original=f.call.getMockImplementation()!
+  f.call.mockImplementation(async(method,args)=>{if(method==='app.status')throw {code:'session_required'};return original(method,args)})
+  f.reopen.forEach(fn=>fn());await settle()
+  f.call.mockImplementation(original);f.setUser('normal2');f.reopen.forEach(fn=>fn());await settle()
+  expect(f.root.textContent).toContain(copy.accountChanged)
+ }finally{f.close()}
+ const g=fixture()
+ await settle()
+ let release!:(value:unknown)=>void
+ const original=g.call.getMockImplementation()!
+ g.call.mockImplementation(async(method,args)=>method==='nas.discovery'?new Promise(r=>release=r):original(method,args))
+ click(g.root,copy.choose);await settle();g.app.unmount()
+ release({files:null,shares:[{name:'private',path:'/private',isdir:true}],total:1,offset:0});await settle()
+ expect(g.root.childElementCount).toBe(0);g.root.remove()
+})
+
+test('pending upload blocks competing folder controls and duplicate submission; uncertain outcome is actionable',async()=>{
+ const f=fixture(),copy=m2Copy('en')
+ try{
+  await settle();click(f.root,copy.choose);await settle();click(f.root,'Select Home');await settle()
+  const checkbox=f.root.querySelector<HTMLElement>('[role=checkbox]')!;checkbox.click()
+  click(f.root,copy.confirm);await settle();click(f.root,copy.openFiles);await settle()
+  const upload=f.root.querySelector<HTMLInputElement>('input[type=file]')!
+  Object.defineProperty(upload,'files',{value:[{name:'note.bin',size:3,arrayBuffer:async()=>new Uint8Array([0,1,255]).buffer}]})
+  upload.dispatchEvent(new Event('change',{bubbles:true}));await settle()
+  let reject!:(error:unknown)=>void
+  const original=f.call.getMockImplementation()!
+  f.call.mockImplementation(async(method,args)=>method==='nas.files.write'?new Promise((_resolve,r)=>reject=r):original(method,args))
+  click(f.root,copy.upload);click(f.root,copy.upload);await settle()
+  for(const button of [...f.root.querySelectorAll('button')].filter(b=>[copy.choose,copy.revoke,copy.refresh,copy.openFiles].includes(b.textContent?.trim()??'')))expect(button.disabled).toBe(true)
+  reject({code:'commit-uncertain'});await settle()
+  expect(f.root.textContent).toContain(copy.errorUncertain)
+  expect(f.call.mock.calls.filter(([m])=>m==='nas.files.write')).toHaveLength(1)
+  expect([...f.root.querySelectorAll('button')].find(b=>b.textContent?.trim()===copy.upload)?.disabled).toBe(true)
+ }finally{f.close()}
+})
+
+function mountPicker(consent?:string){
+ const provider={discovery:async()=>({entries:[],nextOffset:undefined})} as unknown as M2Provider
+ const root=document.createElement('div');document.body.append(root)
+ const app=createApp({render:()=>h(AppRoot,{},()=>h(M2PathPicker,{open:true,locale:'en',consent}))})
+ app.provide(M2ProviderKey,provider);app.config.idPrefix=`picker-${Math.random()}`;app.mount(root)
+ return {root,close(){app.unmount();root.remove()}}
+}
+test('the picker shows the caller-provided consent copy and keeps the M2 copy by default',async()=>{
+ const custom=mountPicker('Read once with your DSM login.');await settle()
+ expect(custom.root.textContent).toContain('Read once with your DSM login.');expect(custom.root.textContent).not.toContain(m2Copy('en').consent);custom.close()
+ const plain=mountPicker();await settle()
+ expect(plain.root.textContent).toContain(m2Copy('en').consent);plain.close()
+})
+
+async function openFiles(f:ReturnType<typeof fixture>,locale='en'){
+ const copy=m2Copy(locale)
+ await settle()
+ // In ko the navigation item shares the Choose button's label; the page button is the last match.
+ ;[...f.root.querySelectorAll('button')].filter(b=>b.textContent?.trim()===copy.choose).at(-1)!.click();await settle();click(f.root,format(copy.select,'Home'));await settle()
+ f.root.querySelector<HTMLElement>('[role=checkbox]')!.click()
+ click(f.root,copy.confirm);await settle();click(f.root,copy.openFiles);await settle()
+ return copy
+}
+// UI FilePicker "Choose files" per locale, written as escapes: template sources keep non-English text in catalogs only.
+const chooseFiles:Record<string,string>={en:'Choose files','zh-TW':'\u9078\u64c7\u6a94\u6848','zh-CN':'\u9009\u62e9\u6587\u4ef6',ja:'\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e',ko:'\ud30c\uc77c \uc120\ud0dd',de:'Dateien ausw\u00e4hlen',fr:'Choisir des fichiers',es:'Elegir archivos',it:'Scegli file'}
+test.each(Object.keys(chooseFiles))('upload uses the compact UI FilePicker in %s',async locale=>{
+ const f=fixture(locale)
+ try{
+  const copy=await openFiles(f,locale)
+  expect(f.root.textContent).toContain(chooseFiles[locale])
+  expect(f.root.querySelectorAll('input[type=file]')).toHaveLength(1)
+  const upload=f.root.querySelector<HTMLInputElement>('input[type=file]')!
+  expect(upload.multiple).toBe(false)
+  expect(f.root.querySelector(`label[for="${upload.id}"]`)?.textContent).toContain(copy.uploadFile)
+ }finally{f.close()}
+})
+test('an oversize file is refused with the limit message and is never uploaded',async()=>{
+ const f=fixture(),copy=m2Copy('en')
+ try{
+  await openFiles(f)
+  const upload=f.root.querySelector<HTMLInputElement>('input[type=file]')!
+  Object.defineProperty(upload,'files',{value:[new File([new Uint8Array(M2_MAX_BYTES+1)],'big.bin')]})
+  upload.dispatchEvent(new Event('change',{bubbles:true}));await settle()
+  expect(f.root.textContent).toContain(m2ErrorCopy({code:'limit-exceeded'},copy))
+  expect([...f.root.querySelectorAll('button')].find(b=>b.textContent?.trim()===copy.upload)?.disabled).toBe(true)
+  expect(f.call.mock.calls.some(([m])=>m==='nas.files.write')).toBe(false)
+ }finally{f.close()}
+})
+test('a downloaded read result is a UI Link with the file name',async()=>{
+ const f=fixture(),copy=m2Copy('en')
+ try{
+  await openFiles(f);click(f.root,copy.read);await settle()
+  const link=f.root.querySelector<HTMLAnchorElement>('a[download]')!
+  expect(link.textContent).toContain(copy.download);expect(link.download).toBe('notes.txt');expect(link.getAttribute('href')).toMatch(/^blob:/)
+ }finally{f.close()}
+})

package/templates/native-go-vue/frontend/test/native-controls.test.ts

@@ -0,0 +1,27 @@
+import {readdirSync,readFileSync} from 'node:fs'
+import {join} from 'node:path'
+import {expect,test} from 'vitest'
+const root=join(__dirname,'../src')
+const sources=(dir:string):string[]=>readdirSync(dir,{withFileTypes:true}).flatMap(e=>e.isDirectory()?sources(join(dir,e.name)):e.name.endsWith('.vue')?[join(dir,e.name)]:[])
+const template=(file:string)=>readFileSync(file,'utf8').replace(/<script[\s\S]*?<\/script>/g,'').replace(/<style[\s\S]*?<\/style>/g,'')
+const uses=(file:string,tag:string)=>new RegExp(`<${tag}[\\s>/]`).test(template(file))
+// The template ships @synopackageland/ui controls only; a native form control
+// means a missing UI component, which is a UI gap to report, not to paper over.
+test.each(['select','option','textarea','label','input','a'])('no vue template renders a native <%s>',tag=>{
+ expect(sources(root).filter(file=>uses(file,tag))).toEqual([])
+})
+// Form direction and the control id come from the UI: `direction="auto"` stacks labels in a
+// narrow package window, and a control inside a FormItem binds its id/ARIA by itself.
+test('FormItem controls rely on the UI auto layout and id binding',()=>{
+ const items=sources(root).filter(file=>uses(file,'FormItem'))
+ expect(items.length).toBeGreaterThan(0)
+ expect(items.filter(file=>/direction="vertical"|field\.controlId|#default="\{field\}"/.test(template(file)))).toEqual([])
+})
+// UI built-in text follows the Provider locale (nine locales), so every app root sets it once and no
+// component repeats a per-control locale or download label.
+test('app roots set the UI locale once and components do not translate UI text themselves',()=>{
+ const roots=sources(root).filter(file=>uses(file,'AppRoot'))
+ expect(roots.length).toBeGreaterThan(0)
+ expect(roots.filter(file=>!uses(file,'ConfigProvider'))).toEqual([])
+ expect(sources(root).filter(file=>/download-label|external-label|<FilePicker[^>]*:locale=/.test(template(file)))).toEqual([])
+})

package/templates/native-go-vue/frontend/test/picker-wire.test.ts

@@ -0,0 +1,110 @@
+// @vitest-environment jsdom
+import {expect,test,vi} from 'vitest'
+import {nextTick} from 'vue'
+import {mount} from '../src/sdk-main'
+import {jobCopy,jobCatalogs} from '../src/jobs/i18n'
+import {m2Copy} from '../src/nas/m2-i18n'
+import type {Context} from '../src/context'
+const id=(c:string)=>c.repeat(64)
+async function settle(){for(let i=0;i<35;i++){await Promise.resolve();await nextTick()}await new Promise(r=>setTimeout(r,25))}
+function click(root:HTMLElement,text:string){const b=[...root.querySelectorAll('button')].find(b=>b.textContent?.trim()===text||b.getAttribute('aria-label')===text);expect(b,text).toBeTruthy();b!.click()}
+function fixture(locale='en'){
+ let state='running',reason='',lost=false,user='normal1',deny=false
+ const reopen:Array<()=>void>=[]
+ const wire=()=>({jobId:id('b'),revision:2,mode:'interactive',state,safeReason:reason||undefined,progress:{completedUnits:state==='succeeded'?1:0,totalUnits:1},drained:state==='succeeded',effectsUnknown:false})
+ const call=vi.fn(async(method:string,args?:Record<string,unknown>)=>{
+  if(method==='app.status')return {package:'t0090',version:'1',user,admin:false}
+  if(method==='integration.status')return {state:'ready',packageRunning:'running',scheduler:'ready'}
+  if(method==='personal.list')return {items:[]}
+  if(method==='jobs.status')return {revision:2,availability:'session-required',workers:[{id:'inspect',revision:7,actions:['nas.files.list','nas.files.stat','nas.files.read'],maxBytes:4096}],items:call.mock.calls.some(([m])=>m==='jobs.submit')?[wire()]:[]}
+  if(method==='nas.discovery'){if(deny)throw {code:'denied',message:'Cookie=CANARY'};return {files:args?.folder?[{name:'fixture.txt',path:'/home/fixture.txt',isdir:false,additional:{size:3}}]:null,shares:args?.folder?undefined:[{name:'Home',path:'/home',isdir:true}],total:1,offset:0}}
+  if(method==='nas.grants.confirm')return {grantId:id('a'),folder:args!.folder,writable:args!.writable}
+  if(method==='jobs.prepare')return {intentId:id('c'),jobId:id('b'),summaryDigest:id('d'),expiresAt:Date.now()+30000}
+  if(method==='jobs.submit'){if(lost)throw {code:'timeout'};return {jobId:id('b'),attachId:id('e'),revision:1,renewAfterMs:2000,ttlMs:6000}}
+  if(method==='jobs.lookup')return wire()
+  if(method==='jobs.cancel'){state='canceled';return {}}
+  throw {code:'unknown_method'}
+ })
+ const root=document.createElement('div');document.body.append(root)
+ const ctx={locale,call,reopen(fn:()=>void){reopen.push(fn);return ()=>{}}} as Context
+ const app=mount(root,ctx)
+ return {root,app,call,reopen,done(){state='succeeded'},fence(){state='canceled';reason='fenced'},lost(){lost=true},deny(){deny=true},switchUser(){user='normal2'},close(){app.unmount();root.remove()}}
+}
+// The UI Select is a Reka combobox: drive it by keyboard (the UI README helper), which also proves it is keyboard operable.
+// Attrs such as data-job-action land on the focusable combobox itself.
+async function choose(root:HTMLElement,marker:string,label:string){
+ const trigger=root.querySelector<HTMLElement>(`[${marker}][role=combobox]`)!;expect(trigger,marker).toBeTruthy()
+ expect(trigger.id,marker).toBeTruthy();expect(root.querySelector(`label[for="${trigger.id}"]`),marker).toBeTruthy()
+ trigger.dispatchEvent(new KeyboardEvent('keydown',{key:'ArrowDown',bubbles:true,cancelable:true}));await settle()
+ const option=[...document.querySelectorAll<HTMLElement>('[role=option]')].find(o=>o.textContent?.trim()===label)
+ if(!option||option.getAttribute('aria-disabled')==='true')throw new Error(`No enabled option: ${label}`)
+ option.focus();option.dispatchEvent(new KeyboardEvent('keydown',{key:'Enter',bubbles:true,cancelable:true}));await settle()
+ expect(trigger.textContent).toContain(label)
+}
+async function pick(f:ReturnType<typeof fixture>,file=true){
+ const j=jobCopy('en'),n=m2Copy('en')
+ click(f.root,j.chooseSource);await settle()
+ if(file){click(f.root,'Open Home');await settle();const button=f.root.querySelector<HTMLButtonElement>('button[aria-label="Select fixture.txt"]')!;expect(button.textContent?.trim()).toBe('Select fixture.txt');click(f.root,'Select fixture.txt')}
+ else click(f.root,'Select Home')
+ await settle();click(f.root,n.confirm);await settle()
+}
+test('SDK mount connects file picker, folder consent, worker revision, single submit and completion/cancel/fence',async()=>{
+ const f=fixture(),j=jobCopy('en')
+ try{
+  await settle();expect(f.call.mock.calls.some(([m])=>m==='personal.list')).toBe(false);await pick(f)
+  expect(f.call).toHaveBeenCalledWith('nas.grants.confirm',{folder:'/home',writable:false})
+  expect(f.root.textContent).toContain('/home/fixture.txt')
+  expect(f.root.textContent).not.toContain('NAS folder grants and file operations are not available yet.')
+  click(f.root,j.submitInteractive);click(f.root,j.submitInteractive);await settle()
+  expect(f.call).toHaveBeenCalledWith('jobs.prepare',{worker:{id:'inspect',revision:7},parent:{id:id('a'),revision:1},input:{steps:[{action:'nas.files.stat',segments:['fixture.txt']}]}})
+  expect(f.call.mock.calls.filter(([m])=>m==='jobs.submit')).toHaveLength(1)
+  expect(f.root.querySelector('progress')).toBeTruthy()
+  click(f.root,j.cancel);await settle();expect(f.root.textContent).toContain(j.canceled)
+  f.fence();click(f.root.querySelector<HTMLElement>('.jobs-panel')!,j.refresh);await settle();expect(f.root.textContent).toContain(j.fenceCanceled)
+  f.done();click(f.root.querySelector<HTMLElement>('.jobs-panel')!,j.refresh);await settle();expect(f.root.textContent).toContain(j.succeeded)
+ }finally{f.close()}
+})
+test('lost initial submit reply locks the form to original lookup; permissions fail without grant or submit',async()=>{
+ const f=fixture(),j=jobCopy('en')
+ try{
+  await settle();await pick(f);f.lost();click(f.root,j.submitInteractive);await settle()
+  expect(f.root.textContent).toContain(j.uncertain)
+  const button=[...f.root.querySelectorAll('button')].find(b=>b.textContent?.trim()===j.submitInteractive);expect(button?.disabled).toBe(true)
+  click(f.root,j.lookup);await settle()
+  expect(f.call).toHaveBeenCalledWith('jobs.lookup',{intentId:id('c')})
+  expect(f.call.mock.calls.filter(([m])=>m==='jobs.submit')).toHaveLength(1)
+ }finally{f.close()}
+ const g=fixture()
+ try{await settle();g.deny();click(g.root,j.chooseSource);await settle();expect(g.root.textContent).toContain(m2Copy('en').errorDenied);expect(g.root.textContent).not.toContain('CANARY');expect(g.call.mock.calls.some(([m])=>m==='nas.grants.confirm'||m==='jobs.submit')).toBe(false)}finally{g.close()}
+})
+test('folder list/read bounds and identity switch clear pending input; nine job catalogs stay complete',async()=>{
+ const f=fixture(),j=jobCopy('en')
+ try{
+  await settle();await pick(f,false)
+  await choose(f.root,'data-job-action',j.listOperation)
+  const limit=f.root.querySelector<HTMLInputElement>('input[data-job-bound]')!;limit.value='101';limit.dispatchEvent(new Event('input',{bubbles:true}));await settle()
+  click(f.root,j.submitInteractive);await settle();expect(f.call.mock.calls.some(([m])=>m==='jobs.prepare')).toBe(false)
+  limit.value='5';limit.dispatchEvent(new Event('input',{bubbles:true}));await settle();click(f.root,j.submitInteractive);await settle()
+  expect(f.call).toHaveBeenCalledWith('jobs.prepare',{worker:{id:'inspect',revision:7},parent:{id:id('a'),revision:1},input:{steps:[{action:'nas.files.list',segments:[],limit:5}]}})
+  f.switchUser();f.reopen.forEach(fn=>fn());await settle();expect(f.root.querySelector('[data-job-action]')).toBeNull()
+ }finally{f.close()}
+ for(const copy of Object.values(jobCatalogs)){expect(Object.keys(copy).sort()).toEqual(Object.keys(jobCatalogs.en).sort());for(const key of Object.keys(copy) as Array<keyof typeof copy>){expect(copy[key].trim()).not.toBe('');expect(copy[key].match(/\{\w+\}/g)??[]).toEqual(jobCatalogs.en[key].match(/\{\w+\}/g)??[])}}
+})
+
+test('read input is bounded by the live worker and late prepare cannot submit after account switch',async()=>{
+ const f=fixture(),j=jobCopy('en')
+ try{
+  await settle();await pick(f)
+  await choose(f.root,'data-job-action',j.readOperation)
+  const bound=f.root.querySelector<HTMLInputElement>('input[data-job-bound]')!;expect(bound.max).toBe('4096');expect(f.root.querySelector<HTMLLabelElement>(`label[for="${bound.id}"]`)?.textContent).toContain(j.byteLimit)
+  bound.value='24';bound.dispatchEvent(new Event('input',{bubbles:true}));await settle();click(f.root.querySelector<HTMLElement>('.jobs-panel')!,j.refresh);await settle();expect(bound.value).toBe('24')
+  bound.value='4097';bound.dispatchEvent(new Event('input',{bubbles:true}));await settle();click(f.root,j.submitInteractive);await settle();expect(f.call.mock.calls.some(([m])=>m==='jobs.prepare')).toBe(false)
+  bound.value='3';bound.dispatchEvent(new Event('input',{bubbles:true}));await settle()
+  let done!:(value:unknown)=>void
+  const original=f.call.getMockImplementation()!
+  f.call.mockImplementation(async(method,args)=>method==='jobs.prepare'?new Promise(resolve=>done=resolve):original(method,args))
+  click(f.root,j.submitInteractive);await settle();f.switchUser();f.reopen.forEach(fn=>fn());await settle()
+  done({intentId:id('c'),jobId:id('b'),summaryDigest:id('d'),expiresAt:Date.now()+30000});await settle()
+  expect(f.call.mock.calls.some(([m])=>m==='jobs.submit')).toBe(false)
+ }finally{f.close()}
+})

package/templates/native-go-vue/frontend/test/shell-preview.html

@@ -0,0 +1,19 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Shell local fixture</title><style>html,body{margin:0;height:100%}#root{height:100%}</style></head>
+<body><div id="root"></div><script type="module">
+import {mount} from '../src/main.ts'
+import {createMockNasService} from '../src/nas/mock-provider.ts'
+// Synthetic responses for local browser QA of the DSM shell. No NAS, no credentials.
+const params=new URLSearchParams(location.search),state=params.get('state')||'ready',locale=params.get('locale')||'en'
+mount(document.querySelector('#root'),{
+ locale,reopen(){return()=>{}},
+ async call(method){
+  if(method==='app.status')return {package:'T0133 Sidebar Demo',version:'0.1.0-0001',user:'admin',admin:true}
+  if(method==='integration.status')return {state,reason:state==='ready'?'fixture':'not-requested',packageRunning:'running',scheduler:'ready'}
+  if(method==='identity.status')return {mode:'better-auth'}
+  if(method==='personal.list')return {items:[{id:'demo-private',name:'My sample note'}]}
+  if(method==='personal.read')return {id:'demo-private',text:'Remember to check the DSM window layout.'}
+  throw {code:'unknown_method'}
+ },
+ root:{state:async()=> 'missing',authorize:async()=> 'ready',run:async()=>{},remove:async()=> 'missing'},
+},{nasProvider:createMockNasService().connect('admin')})
+</script></body></html>

package/templates/native-go-vue/frontend/test/shell-sdk.test.ts

@@ -0,0 +1,73 @@
+// @vitest-environment jsdom
+import {expect,test,vi} from 'vitest'
+import {createApp,h,nextTick} from 'vue'
+import SDKApp from '../src/SDKApp.vue'
+import {JobsProviderKey,type JobsProvider} from '../src/jobs/provider'
+import {jobCopy} from '../src/jobs/i18n'
+import {createMockNasService} from '../src/nas/mock-provider'
+import {NasProviderKey} from '../src/nas/provider'
+import {shellCopy} from '../src/shell/i18n'
+import type {Context} from '../src/context'
+
+async function settle(){for(let i=0;i<16;i++){await Promise.resolve();await nextTick()}await new Promise(resolve=>setTimeout(resolve,25))}
+function navLabels(root:HTMLElement){return [...root.querySelectorAll<HTMLElement>('[data-nav-item]')].map(node=>node.textContent?.trim())}
+function heading(root:HTMLElement){return root.querySelector('h1')?.textContent?.trim()}
+function pageText(root:HTMLElement,page:string){return root.querySelector(`[data-page="${page}"]`)?.textContent??''}
+function clickNav(root:HTMLElement,label:string){const node=[...root.querySelectorAll<HTMLElement>('[data-nav-item]')].find(node=>node.textContent?.trim()===label);expect(node,label).toBeTruthy();node!.click()}
+
+// A connected provider advertises interactive workers; the mock used by the
+// standalone preview does not. This stub keeps both modes on one provider so
+// the shell test can exercise both pages.
+function provider():JobsProvider{
+ return {
+  mode:'mock',
+  readiness:{interactive:'ready',background:'ready'},
+  interactive:{workers:[],prepareInteractive:async()=>{throw {code:'unavailable'}},submitInteractive:async()=>{throw {code:'unavailable'}}},
+  list:async()=>({revision:1,items:[]}),
+  prepare:async()=>{throw {code:'unavailable'}},
+  confirm:async()=>{},
+  lookup:async()=>undefined,
+  cancel:async()=>{},
+  revoke:async()=>({revoked:true,drained:true}),
+  disconnect(){},
+ }
+}
+function fixture(admin:boolean,locale='en'){
+ const call=vi.fn(async(method:string)=>{
+  if(method==='app.status') return {package:'SdkShell',version:'0.1.0-0001',user:admin?'admin':'normal1',admin}
+  if(method==='integration.status') return {state:'ready',reason:'fixture',packageRunning:'unknown',scheduler:'not-probed'}
+  if(method==='identity.status') return {mode:'none'}
+  throw {code:'unknown_method'}
+ })
+ const ctx={locale,call,reopen:()=>()=>{}} as unknown as Context
+ const root=document.createElement('div');document.body.append(root)
+ const app=createApp({render:()=>h(SDKApp,{ctx})})
+ app.config.idPrefix=`sdk-shell-${Math.random()}`
+ app.provide(JobsProviderKey,provider())
+ app.provide(NasProviderKey,createMockNasService().connect(admin?'admin':'normal1'))
+ app.mount(root)
+ return {root,close(){app.unmount();root.remove()}}
+}
+
+test('interactive and background work get separate pages and the admin page is administrator-only',async()=>{
+ const admin=fixture(true),other=fixture(false)
+ try{
+  await settle()
+  expect(navLabels(admin.root)).toEqual(['Status','NAS folder access','Interactive jobs','Background jobs','Job management'])
+  expect(navLabels(other.root)).toEqual(['Status','NAS folder access','Interactive jobs','Background jobs'])
+  expect(heading(admin.root)).toBe(shellCopy('en').status)
+
+  clickNav(admin.root,shellCopy('en').interactive);await settle()
+  expect(heading(admin.root)).toBe('Interactive jobs')
+  expect(pageText(admin.root,'interactive')).toContain(jobCopy('en').interactiveHelp)
+  expect(pageText(admin.root,'interactive')).not.toContain(jobCopy('en').backgroundHelp)
+
+  clickNav(admin.root,shellCopy('en').background);await settle()
+  expect(heading(admin.root)).toBe('Background jobs')
+  expect(pageText(admin.root,'background')).toContain(jobCopy('en').backgroundHelp)
+  expect(pageText(admin.root,'background')).not.toContain(jobCopy('en').interactiveHelp)
+
+  clickNav(other.root,shellCopy('en').interactive);await settle()
+  expect(other.root.textContent).not.toContain(jobCopy('en').adminTitle)
+ }finally{admin.close();other.close()}
+})

package/templates/native-go-vue/frontend/test/shell-ui.test.ts

@@ -0,0 +1,114 @@
+// @vitest-environment jsdom
+import {expect,test,vi} from 'vitest'
+import {nextTick} from 'vue'
+import {mount} from '../src/main'
+import {createMockNasService} from '../src/nas/mock-provider'
+import {shellCopy} from '../src/shell/i18n'
+import type {Context,IntegrationState} from '../src/context'
+
+async function settle(){for(let i=0;i<16;i++){await Promise.resolve();await nextTick()}await new Promise(resolve=>setTimeout(resolve,25))}
+function nav(root:HTMLElement){return [...root.querySelectorAll<HTMLElement>('[data-nav-item]')]}
+function navLabels(root:HTMLElement){return nav(root).map(node=>node.textContent?.trim())}
+function clickNav(root:HTMLElement,label:string){const node=nav(root).find(node=>node.textContent?.trim()===label);expect(node,label).toBeTruthy();node!.click()}
+function heading(root:HTMLElement){return root.querySelector('h1')?.textContent?.trim()}
+function pageShown(root:HTMLElement,page:string){return root.querySelector<HTMLElement>(`[data-page="${page}"]`)?.style.display !== 'none'}
+// A --background project adds one more page; the same test runs in both builds.
+function withBackground(root:HTMLElement,labels:string[]){return labels.flatMap(label=>label==='@@background@@'?(root.querySelector('[data-background-panel]')?[shellCopy('en').background]:[]):[label])}
+
+function fixture(options:{state?:IntegrationState;admin?:boolean;identity?:boolean;locale?:string}={}){
+ const flags={state:options.state??'ready' as IntegrationState,identity:options.identity??false,admin:options.admin??true,locale:options.locale??'en'}
+ const reopen:Array<()=>void>=[]
+ const call=vi.fn(async(method:string)=>{
+  if(method==='app.status') return {package:'ShellDemo',version:'0.1.0-0001',user:flags.admin?'admin':'normal1',admin:flags.admin}
+  if(method==='integration.status') return {state:flags.state,reason:flags.state==='ready'?'fixture':'not-requested',packageRunning:'unknown',scheduler:'not-probed'}
+  if(method==='identity.status') return {mode:flags.identity?'better-auth':'none'}
+  if(method==='personal.list') return {items:[{id:'ShellDemo-private',name:'My sample note'}]}
+  if(method==='personal.read') return {id:'ShellDemo-private',text:'Private ShellDemo'}
+  throw {code:'unknown_method'}
+ })
+ const ctx={locale:flags.locale,reopen:(fn:()=>void)=>reopen.push(fn),call,root:{state:vi.fn(async()=> 'missing'),authorize:vi.fn(async()=> 'ready'),run:vi.fn(async()=>{}),remove:vi.fn(async()=> 'missing')}} as Context
+ const root=document.createElement('div');document.body.append(root)
+ const app=mount(root,ctx,{nasProvider:createMockNasService().connect(flags.admin?'admin':'normal1')})
+ const refresh=async()=>{reopen.forEach(fn=>fn());await settle()}
+ return {root,app,flags,refresh,cleanup(){app.unmount();root.remove()}}
+}
+
+test('the sidebar lists the enabled pages and the first one is shown by default',async()=>{
+ const f=fixture({identity:true})
+ try{
+  await settle()
+  expect(navLabels(f.root)).toEqual(withBackground(f.root,['Status','My sample data','NAS folder access','@@background@@','Optional app identity']))
+  expect(heading(f.root)).toBe('Status')
+  expect(nav(f.root).find(node=>node.textContent?.trim()==='Status')?.getAttribute('aria-current')).toBe('page')
+  expect(pageShown(f.root,'status')).toBe(true)
+ }finally{f.cleanup()}
+})
+
+test('choosing a sidebar entry swaps the page and its header',async()=>{
+ const f=fixture({identity:true})
+ try{
+  await settle()
+  clickNav(f.root,'NAS folder access');await settle()
+  expect(heading(f.root)).toBe('NAS folder access')
+  expect(nav(f.root).find(node=>node.textContent?.trim()==='NAS folder access')?.getAttribute('aria-current')).toBe('page')
+  expect(nav(f.root).find(node=>node.textContent?.trim()==='Status')?.getAttribute('aria-current')).toBeNull()
+  expect(pageShown(f.root,'status')).toBe(false)
+  expect(pageShown(f.root,'nas')).toBe(true)
+  clickNav(f.root,'My sample data');await settle()
+  expect(heading(f.root)).toBe('My sample data')
+ }finally{f.cleanup()}
+})
+
+test('pages only appear when the manifest enables their feature',async()=>{
+ const pending=fixture({state:'pending',identity:false})
+ const ready=fixture({state:'ready',identity:false})
+ try{
+  await settle()
+  // Sample data needs a ready integration; identity needs the better-auth build.
+  expect(navLabels(pending.root)).toEqual(withBackground(pending.root,['Status','NAS folder access','@@background@@']))
+  expect(navLabels(ready.root)).toEqual(withBackground(ready.root,['Status','My sample data','NAS folder access','@@background@@']))
+  expect(pending.root.textContent).not.toContain('My sample data')
+ }finally{pending.cleanup();ready.cleanup()}
+})
+
+test('navigation is keyboard operable through native buttons and the catalog follows DSM locales',async()=>{
+ const f=fixture({identity:true,locale:'cht'})
+ try{
+  await settle()
+  for(const node of nav(f.root)){
+   expect(node.tagName).toBe('BUTTON')
+   expect(node.getAttribute('type')).toBe('button')
+   expect(node.getAttribute('tabindex')).toBeNull()
+   expect(node.getAttribute('aria-label')||node.textContent?.trim()).toBeTruthy()
+  }
+  clickNav(f.root,shellCopy('zh-TW').nas);await settle()
+  expect(heading(f.root)).toBe(shellCopy('zh-TW').nas)
+ }finally{f.cleanup()}
+})
+
+test('a page that disappears from the manifest falls back to the first page',async()=>{
+ const f=fixture()
+ try{
+  await settle()
+  clickNav(f.root,'My sample data');await settle()
+  expect(heading(f.root)).toBe('My sample data')
+  // The integration stops being ready while its sample page is selected.
+  f.flags.state='pending'
+  await f.refresh()
+  expect(navLabels(f.root)).toEqual(withBackground(f.root,['Status','NAS folder access','@@background@@']))
+  expect(heading(f.root)).toBe('Status')
+  expect(pageShown(f.root,'status')).toBe(true)
+  expect(pageShown(f.root,'sample')).toBe(false)
+ }finally{f.cleanup()}
+})
+
+test('the page header and the page content share one PageContent boundary',async()=>{
+ const f=fixture({identity:true})
+ try{
+  await settle()
+  const body=f.root.querySelector('[data-page-content-body]')
+  expect(body).toBeTruthy()
+  expect(body!.contains(f.root.querySelector('h1'))).toBe(true)
+  expect(body!.contains(f.root.querySelector('[data-page="status"]'))).toBe(true)
+ }finally{f.cleanup()}
+})

package/templates/native-go-vue/frontend/test/shell.test.ts

@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import {expect,test} from 'vitest'
+import {activePage,shellPages,type ShellFeatureFlags} from '../src/shell/pages'
+import {shellCatalogs,shellCopy} from '../src/shell/i18n'
+
+test('status is always first and secondary pages follow their feature flag',()=>{
+ expect(shellPages({})).toEqual(['status'])
+ expect(shellPages({sample:true,nas:true,interactive:true,background:true,admin:true,identity:true}))
+  .toEqual(['status','sample','nas','interactive','background','admin','identity'])
+ // Unknown or disabled features never leak into the navigation.
+ expect(shellPages({sample:false,nas:false,admin:false})).toEqual(['status'])
+})
+
+test('a selected page that is no longer available falls back to the first page',()=>{
+ const pages=shellPages({sample:true,admin:true})
+ expect(activePage('admin',pages)).toBe('admin')
+ expect(activePage('nas',pages)).toBe('status')
+ expect(activePage(undefined,pages)).toBe('status')
+ expect(activePage('status',shellPages({folders:true}))).toBe('status')
+ expect(shellPages({folders:true})).toEqual(['status','folders'])
+})
+
+test('feature flags accept plain booleans without a build-time manifest read',()=>{
+ const flags:ShellFeatureFlags={sample:true,interactive:false}
+ expect(shellPages(flags)).toEqual(['status','sample'])
+})
+
+test('nine navigation catalogs stay complete and resolve DSM locale aliases',()=>{
+ expect(Object.keys(shellCatalogs)).toEqual(['en','zh-TW','zh-CN','ja','ko','de','fr','es','it'])
+ for(const catalog of Object.values(shellCatalogs)){
+  expect(Object.keys(catalog).sort()).toEqual(Object.keys(shellCatalogs.en).sort())
+  expect(Object.values(catalog).every(value=>typeof value==='string'&&value.trim().length>0)).toBe(true)
+ }
+ expect(shellCopy('cht')).toEqual(shellCatalogs['zh-TW'])
+ expect(shellCopy('zh_CN')).toEqual(shellCatalogs['zh-CN'])
+ expect(shellCopy('unknown')).toEqual(shellCatalogs.en)
+ expect(Object.values(shellCatalogs).every(catalog=>typeof catalog.background==='string'&&catalog.background.trim().length>0)).toBe(true)
+})
+
+test('navigation labels are unique inside every catalog',()=>{
+ for(const catalog of Object.values(shellCatalogs)){
+  const labels=Object.values(catalog).map(value=>value.trim().toLowerCase())
+  expect(new Set(labels).size).toBe(labels.length)
+ }
+})

package/templates/native-go-vue/frontend/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 // @ts-expect-error The shared notice tool is a plain Node module.
 import { writeThirdPartyNotices } from './third-party-notices.mjs'
@@ -6,5 +6,5 @@ export default defineConfig(({command}) => ({
   plugins: [vue(), {name: 'dependency-notices', closeBundle() {writeThirdPartyNotices('.', 'dist/LICENSES', {ui: true})}}],
   // Library mode must replace Vue dependency env guards for the DSM browser.
   define: command === 'build' ? {'process.env.NODE_ENV': JSON.stringify('production')} : {},
-  build: {lib: {entry: 'src/main.ts', formats: ['iife'], name: 'DsmVueApp', fileName: () => 'app.js'}, cssCodeSplit: false, rollupOptions: {output: {assetFileNames: 'app.[ext]'}}},
+  build: {lib: {entry: loadEnv('production', '.', '').SYNOPKGLAND_M2_SIMPLE === '1' ? 'src/m2-main.ts' : loadEnv('production', '.', '').SYNOPKGLAND_SDK_WORKERS === '1' ? 'src/sdk-main.ts' : 'src/main.ts', formats: ['iife'], name: 'DsmVueApp', fileName: () => 'app.js'}, cssCodeSplit: false, rollupOptions: {output: {assetFileNames: 'app.[ext]'}}},
 }))