@synopackageland/cli 0.4.1 → 0.5.0

package/templates/native-go-vue/frontend/README-M2.md

@@ -0,0 +1,64 @@
+# Interactive File Station UI (experimental)
+
+This optional entry uses the package CGI's `ctx.call` transport and the current
+user's DSM session. It does not borrow an administrator session, request root
+helper approval, cache DSM credentials or install a mock provider.
+
+The existing `main.ts` and SDK worker entry remain the default. To select this
+session-only UI in a generated `native-go --ui vue` project:
+
+1. Enable `integration: {protocol: 2, workers: {}}` in `dsm-package.yaml`.
+2. Set `SYNOPKGLAND_M2_SIMPLE=1` in `frontend/.env.production.local`.
+3. Run the existing `synopkgland build-spk` workflow and inspect the final SPK.
+
+You can also build the frontend with `SYNOPKGLAND_M2_SIMPLE=1 npm run build`.
+The flag selects `src/m2-main.ts` before the existing SDK-workers entry; it
+selects a session-only surface, without background job or root-maintenance UI.
+It does not change backend permissions. Protocol 1 / no integration lacks the
+required routes and the UI shows that the adapter is unavailable. Without this
+flag, generated artifacts retain their previous bytes.
+
+## SDK display contract
+
+`src/nas/m2-contract.ts` exports `M2Provider`, `M2Selection`, `M2Entry`,
+`M2Page`, `M2Session`, safe codes and the 512 KiB / 100-entry bounds.
+`createM2Provider(ctx)` implements status, discovery, confirmation, saved
+selection listing/revocation, relative list/stat/read, mkdir and upload.
+Pass an AbortSignal per operation and call `dispose()` on unmount. Each mount
+owns its provider and clears its UI after account/package change or pagehide.
+
+`M2Selection.writable` records consent to attempt writes; it is not a File
+Station permission probe. The backend validates the actual session and current
+File Station permissions on every operation. A selection is an opaque handle
+with a display path, not the native helper's prepare/digest/revision grant.
+User/UID fields in backend records are stripped from the frontend projection.
+Selections use relaxed username/UID identity: recreating both may preserve a
+selection. Paths do not pin inodes or provide symlink/rename confinement.
+
+Discovery supports files in returned pages but shows only folders in the
+picker. Pagination advances by the full server page, not the filtered count;
+rendering is bounded to the latest 200 entries. Writes require explicit
+writable consent. Upload creates a new file and does not overwrite. Read and
+upload are limited to 512 KiB; read bytes become a local binary download, never
+HTML or an inline preview.
+
+Requests are observed for at most 22 seconds (backend handler: 20 seconds).
+The existing `ctx.call` does not expose transport abort: closing or canceling
+suppresses late display updates but does not establish server rollback or Q.
+No operation is retried automatically. A lost mutation response reports
+`commit-uncertain`; inspect saved selections or the destination before
+resubmitting. Session expiry requires signing into DSM again and refreshing.
+Background/offline work, streaming and atomic publish remain unsupported.
+
+## Local checks
+
+Copy `../../_shared/third-party-notices.mjs` into this folder before `npm ci`,
+`npm test`, `npx vue-tsc --noEmit` and `npm run build`. Also build with the M2
+flag. Remove the copied notice tool, `node_modules` and `dist` before root
+repository tests or generating fixtures: the generator copies template files.
+
+`test/m2-preview.html` serves synthetic `ctx.call` responses for local browser
+QA. It does not access a NAS and is not the production provider's backend.
+Local unit/jsdom/Chromium tests do not establish DSM compatibility. Actual DSM
+session, File Station ACL, multipart upload and download validation belongs to
+the backend/device-validation thread. No public support claim is made here.

package/templates/native-go-vue/frontend/package-lock.json

@@ -6,7 +6,8 @@
     "": {
       "name": "native-dsm-vue-app",
       "dependencies": {
-        "@synopackageland/ui": "0.4.0",
+        "@lucide/vue": "1.48.0",
+        "@synopackageland/ui": "0.5.7",
         "vue": "3.5.43"
       },
       "devDependencies": {
@@ -1050,9 +1051,9 @@
       }
     },
     "node_modules/@synopackageland/ui": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@synopackageland/ui/-/ui-0.4.0.tgz",
-      "integrity": "sha512-is5/UdiaDbqvqy53IaecTwoGtFBiX0tcaypBhma6dEnlefHaQrb8UszwPWdY0YrMhgLmt8Z2EIhnesfxnrRVFA==",
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@synopackageland/ui/-/ui-0.5.7.tgz",
+      "integrity": "sha512-egHKoU4Jk33MhZULykelsq5+JB+l8DuRTCD/hOo3ZZa+p2aXoZSl6M0Gwpd+FGLvvARTsrtT8A5lk/PXTMqUmA==",
       "license": "MIT",
       "dependencies": {
         "@internationalized/date": "3.12.4",

package/templates/native-go-vue/frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-dsm-vue-app", "private": true, "type": "module",
   "scripts": {"build": "vue-tsc --noEmit && vite build", "test": "vitest run"},
-  "dependencies": {"@synopackageland/ui": "0.4.0", "vue": "3.5.43"},
+  "dependencies": {"@lucide/vue": "1.48.0", "@synopackageland/ui": "0.5.7", "vue": "3.5.43"},
   "devDependencies": {"@vitejs/plugin-vue": "6.0.9", "vite": "7.3.6", "typescript": "5.9.3", "vue-tsc": "3.3.11", "vitest": "4.1.11", "jsdom": "26.1.0"}
 }

package/templates/native-go-vue/frontend/src/App.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import {computed, inject, onMounted, onUnmounted, ref} from 'vue'
-import {AppRoot, Button, Callout, Dialog, SettingsSection, Textarea} from '@synopackageland/ui'
+import {computed, inject, onMounted, onUnmounted, ref, watch} from 'vue'
+import {AppRoot, ConfigProvider, Button, Callout, Dialog, Form, FormActions, FormItem, SettingsSection, Textarea} from '@synopackageland/ui'
+import {uiLocale} from './nas/m2-i18n'
 import {stateCopy, type AppStatus, type Context, type Status} from './context'
 import {NasProviderKey} from './nas/provider'
 import {errorCopy, nasCopy} from './nas/i18n'
 import NasGrantSettings from './nas/NasGrantSettings.vue'
 import NasUnavailable from './nas/NasUnavailable.vue'
+import AppShell from './shell/AppShell.vue'
+import {activePage, shellPages, type ShellPage} from './shell/pages'
 const nasProvider = inject(NasProviderKey, null)
 // A mount owns one provider binding. A native subject/package switch must
 // discard its UI and pending work; the host supplies a new provider on remount.
@@ -22,9 +25,20 @@ const text = ref('')
 const identity = ref('')
 let disposed = false
 const refreshing = ref(false)
+const hasIdentity = ref(false)
 let appCookie = ''
+// The CLI rewrites this to "true" only for a project whose manifest declares
+// the sha256-v1 background worker (--background).
+const backgroundEnabled = (('__BACKGROUND_ENABLED__') as string) === 'true'
+const page = ref<ShellPage>('status')
+const pages = computed(() => shellPages({sample:status.value?.state === 'ready',nas:true,background:backgroundEnabled,identity:hasIdentity.value}))
+watch(pages,list => {page.value = activePage(page.value,list)})
+const subtitle = computed(() => app.value ? `${app.value.package} · ${app.value.user} · ${app.value.version}` : undefined)
 const configured = computed(() => status.value?.reason !== "not-requested")
+// An integration built without a privileged helper has nothing to approve.
+const packageOnly = computed(() => status.value?.reason === 'package-only')
 const details = computed(() => {
+ if(packageOnly.value) return {label:'Ready',description:'This package runs as its own DSM package account. No privileged helper is installed.'}
  if(status.value?.state === 'pending') {
   const copy = nasCopy(props.ctx.locale)
   return {label:copy.healthPending,description:copy.healthPendingHelp}
@@ -97,7 +111,6 @@ async function checkIdentity() {
  try {const result=await props.ctx.call<{user:string}>('identity.current',{cookie:appCookie});if(!disposed) identity.value=`App session for ${result.user}`}
  catch(e) {if(!disposed) {appCookie='';identity.value='';error.value=message(e)}} finally {if(!disposed) busy.value=false}
 }
-const hasIdentity = ref(false)
 onMounted(async()=>{
  props.ctx.reopen(()=>{if(!disposed) void refresh()})
  await refresh()
@@ -109,20 +122,22 @@ onUnmounted(()=>{disposed=true;appCookie='';text.value='';id.value=''})
 
 <template>
  <AppRoot modal-scope="app" style="height: 100%">
-  <main class="integration-app" :aria-busy="busy || refreshing" aria-label="Package settings">
-   <header class="integration-heading">
-    <div><h1>{{ app?.package || 'Package settings' }}</h1><p v-if="app">{{ app.user }} · {{ app.version }}</p></div>
+  <ConfigProvider :locale="uiLocale(ctx.locale)">
+  <AppShell v-model="page" :locale="ctx.locale" :pages="pages" :description="subtitle">
+   <template #actions>
     <Button variant="secondary" :disabled="busy || refreshing" @click="error=''; refresh()">Refresh</Button>
-   </header>
+   </template>
+   <div class="integration-app" :aria-busy="busy || refreshing" aria-label="Package settings">
    <p v-if="refreshing" role="status">Refreshing status…</p>
    <p v-else-if="busy" role="status">Completing operation…</p>
    <Callout v-if="error" tone="danger" title="Action required"><span role="alert">{{ error }}</span></Callout>
    <p v-if="notice" class="integration-notice" role="status">{{ notice }}</p>
+   <div data-page="status" v-show="page==='status'">
    <SettingsSection title="DSM integration" :collapsible="false">
     <div v-if="status && details" :data-integration-state="status.state" class="integration-status" role="status">
      <h2>{{ details.label }}</h2><p>{{ details.description }}</p>
      <p v-if="status.cleanup === 'required'">Cleanup is required. Ask an administrator to run teardown or disable. If the helper supervisor was lost, use Repair cleanup and follow the package recovery instructions.</p>
-     <dl><dt>Package running</dt><dd>{{ status.packageRunning }}</dd><dt>Scheduler</dt><dd>{{ status.scheduler }}</dd></dl>
+     <dl><dt>Package running</dt><dd>{{ status.packageRunning }}</dd><template v-if="!packageOnly"><dt>Scheduler</dt><dd>{{ status.scheduler }}</dd></template></dl>
     </div>
     <p v-else-if="error" role="status">Status could not be loaded. Refresh to try again.</p>
     <p v-else role="status">Loading integration status…</p>
@@ -136,24 +151,37 @@ onUnmounted(()=>{disposed=true;appCookie='';text.value='';id.value=''})
     <p v-if="app?.admin && ctx.root && configured" class="integration-help">Repair cleanup clears verified leftover helper state. It does not restart integration.</p>
     <Callout v-if="app && !app.admin && status?.state !== 'ready' && status?.state !== 'pending'" title="Administrator action needed">Ask a DSM administrator to open this package's settings. Your login cannot approve root operations.</Callout>
    </SettingsSection>
+   </div>
+   <div data-page="sample" v-show="page==='sample'">
    <SettingsSection v-if="status?.state === 'ready'" title="My sample data" :collapsible="false">
     <p class="integration-help">This synthetic note belongs to your DSM account and is stored in package data.</p>
     <p v-if="refreshing" role="status">Loading your sample data…</p>
     <Callout v-else-if="!id" title="No sample data">Refresh to request your sample data again.</Callout>
-    <label v-if="id" class="integration-field"><span>My sample note</span><Textarea v-model="text" aria-label="My sample note" :disabled="busy || refreshing" /></label>
-    <Button v-if="id" variant="primary" :disabled="busy || refreshing" @click="save">Save my note</Button>
+    <Form v-if="id" @submit.prevent><FormItem label="My sample note"><Textarea v-model="text" :disabled="busy || refreshing" /></FormItem>
+     <FormActions><Button variant="primary" :disabled="busy || refreshing" @click="save">Save my note</Button></FormActions>
+    </Form>
    </SettingsSection>
+   </div>
+   <div data-page="nas" v-show="page==='nas'">
    <NasGrantSettings v-if="nasProvider && app && status && !nasInvalidated" :locale="ctx.locale" />
    <NasUnavailable v-else :locale="ctx.locale" />
+   </div>
+   <div data-page="background" v-show="page==='background'">
+   <!-- BACKGROUND_PANEL -->
+   </div>
+   <div data-page="identity" v-show="page==='identity'">
    <SettingsSection v-if="hasIdentity" title="Optional app identity" :collapsible="false">
     <p class="integration-help">Your DSM login is checked again for every app session request.</p>
     <div class="integration-actions"><Button variant="primary" :disabled="busy || refreshing" @click="login">Create app session</Button><Button variant="secondary" :disabled="busy || refreshing || !identity" @click="checkIdentity">Check app session</Button></div>
     <p v-if="identity" role="status">{{ identity }}</p>
    </SettingsSection>
+   </div>
+   </div>
    <Dialog v-model:open="disableOpen" title="Disable integration?" description="New integration requests will be refused before helper cleanup begins.">
     <p>Your sample data and historical root output are retained. A failed cleanup remains visible.</p>
     <template #footer><Button variant="secondary" @click="disableOpen=false">Cancel</Button><Button variant="danger" :disabled="busy || refreshing" @click="disableOpen=false; action('helper_disable')">Confirm disable</Button></template>
    </Dialog>
-  </main>
+  </AppShell>
+  </ConfigProvider>
  </AppRoot>
 </template>

package/templates/native-go-vue/frontend/src/M2App.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import {computed,inject,onMounted,onUnmounted,ref} from 'vue'
+import {AppRoot,ConfigProvider,Button,Callout,SettingsSection} from '@synopackageland/ui'
+import type {AppStatus,Context} from './context'
+import {M2ProviderKey} from './nas/m2-contract'
+import {m2Copy,m2ErrorCopy,uiLocale} from './nas/m2-i18n'
+import {useM2Request} from './nas/use-m2-request'
+import M2Settings from './nas/M2Settings.vue'
+import AppShell from './shell/AppShell.vue'
+import {shellPages,type ShellPage} from './shell/pages'
+const props=defineProps<{ctx:Context}>(),copy=computed(()=>m2Copy(props.ctx.locale)),provider=inject(M2ProviderKey)!
+const request=useM2Request(),{busy,error}=request
+const app=ref<AppStatus>(),invalid=ref(false),view=ref(0),nestedBusy=ref(false)
+const page=ref<ShellPage>('status')
+// The simple session build only has the File Station folder screen.
+const pages=computed(()=>shellPages({folders:true}))
+const subtitle=computed(()=>app.value?`${app.value.package} · ${app.value.version} · ${app.value.user}`:undefined)
+let bound:{user:string;package:string}|undefined
+let removeReopen:()=>void=()=>{}
+async function refresh(){
+ if(invalid.value)return
+ const value=await request.run(()=>props.ctx.call<AppStatus>('app.status'))
+ if(value){
+  if(typeof value.user!=='string'||!value.user||typeof value.package!=='string'||!value.package){error.value={code:'unavailable'};return}
+  if(bound&&(bound.user!==value.user||bound.package!==value.package)){invalidate();return}
+  bound??={user:value.user,package:value.package};app.value=value;view.value++
+ }else{app.value=undefined}
+}
+function invalidate(){invalid.value=true;app.value=undefined;request.cancel();provider.dispose()}
+onMounted(()=>{removeReopen=props.ctx.reopen(()=>void refresh());window.addEventListener('pagehide',invalidate);void refresh()})
+onUnmounted(()=>{removeReopen?.();window.removeEventListener('pagehide',invalidate);app.value=undefined})
+</script>
+<template>
+ <AppRoot theme="dsm7" modal-scope="app" style="height: 100%">
+  <ConfigProvider :locale="uiLocale(ctx.locale)">
+  <AppShell v-model="page" :locale="ctx.locale" :pages="pages" :description="subtitle">
+   <template #actions>
+    <Button v-if="!invalid" variant="secondary" :disabled="busy||nestedBusy" @click="refresh">{{ copy.refresh }}</Button>
+   </template>
+   <div class="integration-app m2-app" :aria-busy="busy||nestedBusy">
+   <Callout v-if="invalid" tone="warning" role="alert">{{ copy.accountChanged }}</Callout>
+   <Callout v-else-if="error" tone="danger" role="alert">{{ m2ErrorCopy(error,copy) }}</Callout>
+   <p v-if="busy" role="status">{{ copy.loading }}</p>
+   <div data-page="status" v-show="page==='status'">
+   <SettingsSection title="Package" :collapsible="false">
+    <p v-if="app" role="status">{{ app.package }} · {{ app.version }} · {{ app.user }}</p>
+    <p v-else role="status">{{ copy.loading }}</p>
+   </SettingsSection>
+   </div>
+   <div data-page="folders" v-show="page==='folders'">
+   <M2Settings v-if="app&&!invalid" :key="view" :locale="ctx.locale" @busy="value=>nestedBusy=value" />
+   </div>
+   </div>
+  </AppShell>
+  </ConfigProvider>
+ </AppRoot>
+</template>

package/templates/native-go-vue/frontend/src/SDKApp.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import {computed, inject, onMounted, onUnmounted, ref, watch} from 'vue'
+import {AppRoot, ConfigProvider, Button, Callout, Dialog, Form, FormActions, FormItem, SettingsSection, Textarea} from '@synopackageland/ui'
+import {uiLocale} from './nas/m2-i18n'
+import {stateCopy, type AppStatus, type Context, type Status} from './context'
+import {NasProviderKey} from './nas/provider'
+import {errorCopy, nasCopy} from './nas/i18n'
+import NasGrantSettings from './nas/NasGrantSettings.vue'
+import NasUnavailable from './nas/NasUnavailable.vue'
+import JobsPanel from './jobs/JobsPanel.vue'
+import {JobsProviderKey} from './jobs/provider'
+const jobsProvider=inject(JobsProviderKey,null)
+import JobsAdminPanel from './jobs/JobsAdminPanel.vue'
+import AppShell from './shell/AppShell.vue'
+import {activePage,shellPages,type ShellPage} from './shell/pages'
+const nasProvider = inject(NasProviderKey, null)
+// A mount owns one provider binding. A native subject/package switch must
+// discard its UI and pending work; the host supplies a new provider on remount.
+const nasInvalidated = ref(false)
+const props = defineProps<{ctx: Context}>()
+const app = ref<AppStatus>()
+const status = ref<Status>()
+const busy = ref(false)
+const error = ref('')
+const notice = ref('')
+const disableOpen = ref(false)
+const id = ref('')
+const text = ref('')
+const identity = ref('')
+let disposed = false
+const refreshing = ref(false)
+const hasIdentity = ref(false)
+let appCookie = ''
+const page = ref<ShellPage>('status')
+const pages = computed(() => shellPages({
+ // The session-SDK build submits interactive work instead of sample notes.
+ sample: status.value?.state === 'ready' && !jobsProvider?.interactive,
+ // Connected workers carry their own consent per job; the grant screen only
+ // exists while no interactive worker is advertised.
+ nas: !!nasProvider || !jobsProvider?.interactive?.workers.length,
+ interactive: !!jobsProvider?.interactive,
+ background: jobsProvider?.readiness?.background !== 'unavailable',
+ admin: !!app.value?.admin,
+ identity: hasIdentity.value,
+}))
+watch(pages,list => {page.value = activePage(page.value,list)})
+const subtitle = computed(() => app.value ? `${app.value.package} · ${app.value.user} · ${app.value.version}` : undefined)
+const configured = computed(() => status.value?.reason !== "not-requested")
+const details = computed(() => {
+ if(status.value?.state === 'pending') {
+  const copy = nasCopy(props.ctx.locale)
+  return {label:copy.healthPending,description:copy.healthPendingHelp}
+ }
+ return status.value ? stateCopy[status.value.state] : undefined
+})
+function message(e: unknown) {
+ const code = (e as {code?: string})?.code || 'request_failed'
+ if(['denied','unknown_method','unavailable','unsupported','session_required','auth_unavailable'].includes(code)) return errorCopy(e,nasCopy(props.ctx.locale))
+ return ({session_required:'Your DSM session expired. Sign in again.',access_denied:'This sample belongs to another account.',integration_unavailable:'Integration is unavailable. Ask an administrator to activate or recover it.',personal_unavailable:'Sample storage is unavailable. Ask an administrator to check package data.',root_conflict:'A conflicting scheduler task exists. Ask an administrator to review it.',root_verify_failed:'Scheduler verification failed. Refresh and review the task.',root_run_failed:'The approved operation failed. Review integration status and cleanup.'} as Record<string,string>)[code] || `Request failed (${code}). Refresh and try again.`
+}
+async function refresh() {
+ if(disposed || refreshing.value) return
+ refreshing.value = true; error.value = ''
+ try {
+  const [a,s] = await Promise.all([props.ctx.call<AppStatus>('app.status'),props.ctx.call<Status>('integration.status')])
+  if(disposed) return
+  if(app.value && (app.value.user!==a.user || app.value.package!==a.package)) nasInvalidated.value=true
+  app.value = a; status.value = s
+  if(s.state !== 'ready') {id.value='';text.value='';return}
+  // The session SDK build exposes File Station jobs, not native sample notes.
+  if(jobsProvider?.interactive) {id.value='';text.value='';return}
+  // Plain --ui vue has no personal routes; not-enabled status hides this.
+  const list = await props.ctx.call<{items:Array<{id:string;name:string}>}>('personal.list')
+  if(disposed) return
+  id.value = list.items[0]?.id || ''
+  if(id.value) {
+   const note = await props.ctx.call<{text:string}>('personal.read',{id:id.value})
+   if(!disposed) text.value = note.text
+  }
+ } catch(e) {if(!disposed) {error.value = message(e);status.value=undefined;id.value='';text.value=''}} finally {refreshing.value=false}
+}
+async function action(op: string) {
+ if(busy.value || refreshing.value || disposed) return
+ busy.value=true;error.value='';notice.value=''
+ try {
+  if(!props.ctx.root) throw {code:'unsupported'}
+  const approved = await props.ctx.root.authorize(op)
+  if(disposed) return
+  if(approved !== 'ready') {notice.value='Approval cancelled. No operation was run.';return}
+  await props.ctx.root.run(op)
+  if(disposed) return
+  notice.value=op==='helper_repair' ? 'Cleanup repaired. Use Recover or Approve and activate when ready.' : 'Operation completed. Integration status was checked again.'
+  await refresh()
+ } catch(e) {if(!disposed) {
+  await refresh()
+  if(!disposed) {
+   const code=(e as {code?:string})?.code
+   if(code==='root_cancelled') notice.value='Repair confirmation cancelled. No operation was run.'
+   else error.value=op==='helper_repair' && (code==='root_run_failed' || code==='root_task_failed') ? 'Repair could not verify safe cleanup. Review the package recovery instructions before trying again.' : message(e)
+  }
+ }}
+ finally {if(!disposed) busy.value=false}
+}
+async function save() {
+ if(busy.value || refreshing.value || !id.value || disposed) return
+ busy.value=true;error.value='';notice.value=''
+ try {await props.ctx.call('personal.write',{id:id.value,text:text.value});if(!disposed) notice.value='Your sample note was saved.'}
+ catch(e) {if(!disposed) error.value=message(e)} finally {if(!disposed) busy.value=false}
+}
+async function login() {
+ if(busy.value || refreshing.value || disposed) return
+ busy.value=true;error.value=''
+ try {
+  const result=await props.ctx.call<{cookie:string;user:string}>('identity.login')
+  if(!disposed){appCookie=result.cookie;identity.value=`App session for ${result.user}`}
+ } catch(e) {if(!disposed) error.value=message(e)} finally {if(!disposed) busy.value=false}
+}
+async function checkIdentity() {
+ if(busy.value || refreshing.value || disposed) return
+ busy.value=true;error.value=''
+ try {const result=await props.ctx.call<{user:string}>('identity.current',{cookie:appCookie});if(!disposed) identity.value=`App session for ${result.user}`}
+ catch(e) {if(!disposed) {appCookie='';identity.value='';error.value=message(e)}} finally {if(!disposed) busy.value=false}
+}
+onMounted(async()=>{
+ props.ctx.reopen(()=>{if(!disposed) void refresh()})
+ await refresh()
+ if(disposed || !app.value) return
+ try {const result = await props.ctx.call<{mode:string}>('identity.status');if(!disposed) hasIdentity.value = result.mode==='better-auth'} catch { /* Optional route absent in Go-only. */ }
+})
+onUnmounted(()=>{disposed=true;appCookie='';text.value='';id.value=''})
+</script>
+
+<template>
+ <AppRoot modal-scope="app" style="height: 100%">
+  <ConfigProvider :locale="uiLocale(ctx.locale)">
+  <AppShell v-model="page" :locale="ctx.locale" :pages="pages" :description="subtitle">
+   <template #actions>
+    <Button variant="secondary" :disabled="busy || refreshing" @click="error=''; refresh()">Refresh</Button>
+   </template>
+   <div class="integration-app" :aria-busy="busy || refreshing" aria-label="Package settings">
+   <p v-if="refreshing" role="status">Refreshing status…</p>
+   <p v-else-if="busy" role="status">Completing operation…</p>
+   <Callout v-if="error" tone="danger" title="Action required"><span role="alert">{{ error }}</span></Callout>
+   <p v-if="notice" class="integration-notice" role="status">{{ notice }}</p>
+   <div data-page="status" v-show="page==='status'">
+   <SettingsSection title="DSM integration" :collapsible="false">
+    <div v-if="status && details" :data-integration-state="status.state" class="integration-status" role="status">
+     <h2>{{ details.label }}</h2><p>{{ details.description }}</p>
+     <p v-if="status.cleanup === 'required'">Cleanup is required. Ask an administrator to run teardown or disable. If the helper supervisor was lost, use Repair cleanup and follow the package recovery instructions.</p>
+     <dl><dt>Package running</dt><dd>{{ status.packageRunning }}</dd><dt>Scheduler</dt><dd>{{ status.scheduler }}</dd></dl>
+    </div>
+    <p v-else-if="error" role="status">Status could not be loaded. Refresh to try again.</p>
+    <p v-else role="status">Loading integration status…</p>
+    <div v-if="app?.admin && ctx.root && configured" class="integration-actions">
+     <Button variant="primary" :disabled="busy || refreshing" @click="action('helper_enable')">Approve and activate</Button>
+     <Button variant="secondary" :disabled="busy || refreshing" @click="action('helper_recover')">Recover</Button>
+     <Button variant="secondary" :disabled="busy || refreshing" @click="action('helper_teardown')">Teardown</Button>
+     <Button variant="secondary" :disabled="busy || refreshing" @click="disableOpen=true">Disable</Button>
+     <Button variant="secondary" :disabled="busy || refreshing" @click="action('helper_repair')">Repair cleanup</Button>
+    </div>
+    <p v-if="app?.admin && ctx.root && configured" class="integration-help">Repair cleanup clears verified leftover helper state. It does not restart integration.</p>
+    <Callout v-if="app && !app.admin && status?.state !== 'ready' && status?.state !== 'pending'" title="Administrator action needed">Ask a DSM administrator to open this package's settings. Your login cannot approve root operations.</Callout>
+   </SettingsSection>
+   </div>
+   <div data-page="sample" v-show="page==='sample'">
+   <SettingsSection v-if="status?.state === 'ready' && !jobsProvider?.interactive" title="My sample data" :collapsible="false">
+    <p class="integration-help">This synthetic note belongs to your DSM account and is stored in package data.</p>
+    <p v-if="refreshing" role="status">Loading your sample data…</p>
+    <Callout v-else-if="!id" title="No sample data">Refresh to request your sample data again.</Callout>
+    <Form v-if="id" @submit.prevent><FormItem label="My sample note"><Textarea v-model="text" :disabled="busy || refreshing" /></FormItem>
+     <FormActions><Button variant="primary" :disabled="busy || refreshing" @click="save">Save my note</Button></FormActions>
+    </Form>
+   </SettingsSection>
+   </div>
+   <div data-page="nas" v-show="page==='nas'">
+   <NasGrantSettings v-if="nasProvider && app && status && !nasInvalidated" :locale="ctx.locale" />
+   <NasUnavailable v-else-if="!jobsProvider?.interactive?.workers.length" :locale="ctx.locale" />
+   </div>
+   <div data-page="interactive" v-show="page==='interactive'">
+   <JobsPanel v-if="app && !nasInvalidated" section="interactive" :locale="ctx.locale" />
+   </div>
+   <div data-page="background" v-show="page==='background'">
+   <JobsPanel v-if="app && !nasInvalidated" section="background" :locale="ctx.locale" />
+   </div>
+   <div data-page="admin" v-show="page==='admin'">
+   <JobsAdminPanel v-if="app?.admin && !nasInvalidated" :locale="ctx.locale" />
+   </div>
+   <div data-page="identity" v-show="page==='identity'">
+   <SettingsSection v-if="hasIdentity" title="Optional app identity" :collapsible="false">
+    <p class="integration-help">Your DSM login is checked again for every app session request.</p>
+    <div class="integration-actions"><Button variant="primary" :disabled="busy || refreshing" @click="login">Create app session</Button><Button variant="secondary" :disabled="busy || refreshing || !identity" @click="checkIdentity">Check app session</Button></div>
+    <p v-if="identity" role="status">{{ identity }}</p>
+   </SettingsSection>
+   </div>
+   </div>
+   <Dialog v-model:open="disableOpen" title="Disable integration?" description="New integration requests will be refused before helper cleanup begins.">
+    <p>Your sample data and historical root output are retained. A failed cleanup remains visible.</p>
+    <template #footer><Button variant="secondary" @click="disableOpen=false">Cancel</Button><Button variant="danger" :disabled="busy || refreshing" @click="disableOpen=false; action('helper_disable')">Confirm disable</Button></template>
+   </Dialog>
+  </AppShell>
+  </ConfigProvider>
+ </AppRoot>
+</template>

package/templates/native-go-vue/frontend/src/jobs/InteractiveJobForm.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import {computed,ref,watch} from 'vue'
+import {Button,Callout,Form,FormActions,FormItem,Input,Select} from '@synopackageland/ui'
+import type {JobsProvider,PreparedInteractive} from './provider'
+import type {M2JobSource} from '../nas/m2-contract'
+import M2PathPicker from '../nas/M2PathPicker.vue'
+import {m2Copy,m2ErrorCopy} from '../nas/m2-i18n'
+import {jobCopy} from './i18n'
+import {useNasRequest} from '../nas/use-request'
+const props=defineProps<{locale:string;provider:JobsProvider}>(),emit=defineEmits<{submitted:[]}>()
+const copy=computed(()=>jobCopy(props.locale)),request=useNasRequest(),{busy,error}=request
+const open=ref(false),pickerBusy=ref(false),source=ref<M2JobSource>(),workerId=ref(''),action=ref('nas.files.stat'),bound=ref(100),uncertain=ref<PreparedInteractive>(),notice=ref(false),invalid=ref(false)
+const worker=computed(()=>props.provider.interactive?.workers.find(w=>w.id===workerId.value))
+const actions=computed(()=>worker.value?.actions.filter(a=>source.value?.entry.isDir?a!=='nas.files.read':a!=='nas.files.list')??[])
+const workerOptions=computed(()=>props.provider.interactive?.workers.map(w=>({value:w.id,label:`${w.id} · ${w.revision}`}))??[])
+const operationLabel=(a:string)=>a==='nas.files.list'?copy.value.listOperation:a==='nas.files.read'?copy.value.readOperation:copy.value.statOperation
+const actionOptions=computed(()=>actions.value.map(a=>({value:a,label:operationLabel(a)})))
+const ready=computed(()=>props.provider.readiness?.interactive==='ready'&&!invalid.value)
+const locked=computed(()=>busy.value||pickerBusy.value||!!uncertain.value||!ready.value)
+watch(()=>props.provider.interactive?.workers,workers=>{if(!workers?.some(w=>w.id===workerId.value))workerId.value=workers?.[0]?.id??''},{immediate:true})
+watch(actions,values=>{if(!values.includes(action.value as never))action.value=values[0]??''})
+watch(action,value=>{bound.value=value==='nas.files.read'?worker.value?.maxBytes??1:100})
+watch(error,e=>{if(['session_required','auth_unavailable','denied'].includes((e as {code?:string})?.code??'')){invalid.value=true;source.value=undefined;open.value=false}})
+function select(value:M2JobSource){source.value=value;notice.value=false}
+async function submit(){
+ if(locked.value||!source.value||!worker.value)return
+ const chosen=source.value,w=worker.value,a=action.value
+ if(!actions.value.includes(a as never)||((a==='nas.files.list'||a==='nas.files.read')&&(!Number.isSafeInteger(bound.value)||bound.value<1||bound.value>(a==='nas.files.list'?100:w.maxBytes)))){error.value={code:'invalid-request'};return}
+ await request.run(async signal=>{
+  const prepared=await props.provider.interactive!.prepareInteractive(signal,{id:w.id,revision:w.revision},{id:chosen.selection.grantId,revision:1},{steps:[{action:a,segments:[...chosen.segments],...(a==='nas.files.list'?{limit:bound.value}:a==='nas.files.read'?{maxBytes:bound.value}:{})}]})
+  if(Date.now()>=prepared.expiresAt)throw {code:'expired'}
+  // Preserve the original intent before the single submit attempt. A missing
+  // reply cannot establish rollback; lookup never creates or attaches a job.
+  uncertain.value=prepared
+  await props.provider.interactive!.submitInteractive(prepared,signal)
+  uncertain.value=undefined;source.value=undefined;notice.value=true;emit('submitted')
+ })
+}
+async function lookup(){
+ const original=uncertain.value;if(!original||busy.value)return
+ const found=await request.run(signal=>props.provider.lookup(original.intentId,signal))
+ if(found?.jobId===original.jobId){uncertain.value=undefined;source.value=undefined;notice.value=true;emit('submitted')}
+}
+const errorText=computed(()=>{
+ const code=(error.value as {code?:string})?.code
+ if(code==='revalidating')return copy.value.revalidating
+ if(code==='session_required'||code==='auth_unavailable')return copy.value.accessLost
+ if(['denied','invalid-request','limit-exceeded'].includes(code??''))return m2ErrorCopy(error.value,m2Copy(props.locale))
+ return copy.value.error
+})
+</script>
+<template>
+ <Form class="jobs-input" :aria-label="copy.newInteractive" :aria-busy="busy||pickerBusy" @submit.prevent="submit">
+  <h3>{{ copy.newInteractive }}</h3>
+  <p>{{ copy.sourceHelp }}</p>
+  <Callout v-if="error" tone="danger" role="alert">{{ errorText }}</Callout>
+  <p v-if="notice" role="status">{{ copy.interactiveSubmitted }}</p>
+  <Button variant="secondary" :disabled="locked" @click="open=true">{{ copy.chooseSource }}</Button>
+  <p v-if="source" role="status">{{ source.entry.path }}</p>
+  <FormItem :label="copy.worker"><Select v-model="workerId" :options="workerOptions" :disabled="locked" /></FormItem>
+  <FormItem :label="copy.operation"><Select v-model="action" data-job-action :options="actionOptions" :disabled="locked||!source" /></FormItem>
+  <FormItem v-if="action==='nas.files.list'||action==='nas.files.read'" :label="action==='nas.files.list'?copy.entryLimit:copy.byteLimit"><Input v-model.number="bound" data-job-bound type="number" min="1" :max="action==='nas.files.list'?100:worker?.maxBytes" step="1" :disabled="locked" /></FormItem>
+  <FormActions><Button type="submit" variant="primary" :disabled="locked||!source||!worker||!actions.length">{{ copy.submitInteractive }}</Button></FormActions>
+  <template v-if="uncertain"><p role="status">{{ copy.uncertain }}</p><Button variant="secondary" :disabled="busy||invalid" @click="lookup">{{ copy.lookup }}</Button></template>
+  <M2PathPicker v-model:open="open" :locale="locale" :title="copy.chooseSource" select-files read-only @source="select" @busy="value=>pickerBusy=value" />
+ </Form>
+</template>
+<style scoped>
+.jobs-input { margin-block: var(--ui-space-4, 16px); }
+</style>

package/templates/native-go-vue/frontend/src/jobs/JobsAdminPanel.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {computed,inject,onMounted,ref,watch} from 'vue'
+import {Button,Callout,SettingsSection} from '@synopackageland/ui'
+import {JobsAdminProviderKey,type AdminJobView} from './provider'
+import {jobCopy} from './i18n'
+import {adminPage} from './validate'
+import {useNasRequest} from '../nas/use-request'
+const props=defineProps<{locale:string}>(),copy=computed(()=>jobCopy(props.locale))
+const provider=inject(JobsAdminProviderKey,null),request=useNasRequest(),{busy,error}=request,items=ref<readonly AdminJobView[]>([]),nextCursor=ref<string>()
+const invalidated=ref(false),loaded=ref(false)
+watch(error,e=>{if(['denied','session_required','auth_unavailable'].includes((e as {code?:string})?.code??'')){invalidated.value=true;items.value=[]}})
+async function load(cursor?:string){if(!provider||invalidated.value)return;const result=await request.run(async signal=>adminPage(await provider.list(signal,cursor)));if(result){loaded.value=true;items.value=result.items;nextCursor.value=result.nextCursor}else if(error.value){items.value=[];nextCursor.value=undefined}}
+async function refresh(){await load()}
+async function cancel(item:AdminJobView){if(!provider)return;await request.run(signal=>provider.cancel(item.jobId,item.revision,signal));await refresh()}
+function state(item:AdminJobView){return ({pending:copy.value.pending,running:copy.value.running,'cancel-requested':copy.value.stopping,draining:copy.value.stopping,succeeded:copy.value.succeeded,failed:copy.value.failed,canceled:copy.value.canceled,interrupted:copy.value.interrupted,'cleanup-required':copy.value.cleanup})[item.state]}
+onMounted(()=>{if(provider?.mode==='mock')void refresh()})
+</script>
+<template>
+ <SettingsSection :title="copy.adminTitle" :collapsible="false" :aria-busy="busy">
+  <Callout v-if="!provider||provider.mode==='unavailable'" tone="info" :title="copy.unavailable" />
+  <Callout v-else-if="invalidated" tone="danger" :title="copy.accessLost" role="alert" />
+  <template v-else>
+   <p v-if="provider.mode==='mock'">{{ copy.mock }}</p><p v-else-if="!loaded&&!error">{{ copy.loadManagement }}</p><Callout v-if="error" tone="danger" :title="copy.error" role="alert" />
+   <Button :disabled="busy" variant="secondary" @click="refresh">{{ copy.refresh }}</Button>
+   <p v-if="loaded&&!items.length&&!error">{{ copy.empty }}</p>
+   <ul class="nas-grants"><li v-for="item in items" :key="item.jobId">
+    <p role="status">{{ state(item) }}</p><p v-if="item.drained">{{ copy.drained }}</p><p v-if="item.effectsUnknown">{{ copy.effects }}</p>
+    <Button v-if="['pending','running','cancel-requested','draining'].includes(item.state)" :disabled="busy" variant="secondary" @click="cancel(item)">{{ copy.cancel }}</Button>
+   </li></ul>
+   <Button v-if="nextCursor" :disabled="busy" variant="secondary" @click="load(nextCursor)">{{ copy.next }}</Button>
+  </template>
+ </SettingsSection>
+</template>