@synopackageland/cli 0.5.3 → 0.6.0

package/dist/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": {"@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"}
+  "dependencies": {"@lucide/vue": "1.48.0", "@synopackageland/ui": "0.8.0", "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": "27.4.0"}
 }

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

@@ -1,186 +1,90 @@
 <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 {computed, onMounted, onUnmounted, ref, watch} from 'vue'
+import {AppRoot, ConfigProvider, Button, Callout, Form, FormActions, FormItem, SettingsSection, Textarea} from '@synopackageland/ui'
+import {uiLocale} from './nas/locale'
+import type {AppStatus, Context} from './context'
 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)
+import CapabilityPanels from './CapabilityPanels.vue'
+import FilesPage from './files/FilesPage.vue'
+import {shellPages, type ShellPage} from './shell/pages'
+import {createSession} from './identity/session'
+import LoginPage from './identity/LoginPage.vue'
 const props = defineProps<{ctx: Context}>()
+const login = createSession(props.ctx)
 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 = ''
-// The CLI rewrites this to "true" only for a project whose manifest declares
-// the sha256-v1 background worker (--background).
+let unsubscribe: (() => void) | undefined
+// The CLI substitutes this only for a declared package-account background worker.
 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 pages = computed(() => shellPages({background:backgroundEnabled}))
 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}
- }
- 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.`
+ return ({session_required:'Your DSM session expired. Sign in again.',admin_required:'A DSM administrator must perform this action.',auth_unavailable:'DSM authentication is unavailable. Refresh to try again.'} 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}
-  // 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=''
+ if(disposed || busy.value || (login.enabled.value && !login.subject.value)) return
+ busy.value = true; error.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}
+  const a = await login.call<AppStatus>('app.status')
+  if(!disposed) app.value = a
+  if(a.admin) {const greeting = await login.call<{text:string}>('greeting.get'); if(!disposed) text.value = greeting.text}
+ } catch(e) {if(!disposed) error.value = 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.'}
+ if(disposed || busy.value) return
+ busy.value = true; error.value='';notice.value=''
+ try {await login.call('greeting.set',{text:text.value});if(!disposed) notice.value='Greeting 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}
+watch(login.subject, (subject, previous) => {
+ if(!subject) {app.value=undefined;text.value='';notice.value='';error.value=''}
+ else if((!previous || previous.user!==subject.user)) void refresh()
+})
+async function signOut() {
+ try {await login.logout()} catch(e) {if(!disposed) error.value=message(e)}
 }
 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. */ }
+ unsubscribe = props.ctx.reopen(()=>{if(!disposed) void refresh()})
+ await login.start()
+ if((!login.enabled.value || login.subject.value)) await refresh()
 })
-onUnmounted(()=>{disposed=true;appCookie='';text.value='';id.value=''})
+onUnmounted(()=>{disposed=true;unsubscribe?.();login.dispose();text.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><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>
-    <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>
+  <p v-if="!login.ready.value" role="status">Checking session…</p>
+  <LoginPage v-else-if="login.enabled.value && !login.subject.value" :session="login" />
+  <AppShell v-else v-model="page" :locale="ctx.locale" :pages="pages" :description="subtitle">
+   <template #actions><Button variant="secondary" :disabled="busy" @click="refresh">Refresh</Button><Button v-if="login.enabled.value" variant="secondary" :disabled="busy" @click="signOut">Sign out</Button></template>
+   <div class="integration-app" :aria-busy="busy" aria-label="Package settings">
+    <p v-if="busy" role="status">Loading package data…</p>
+    <Callout v-if="error" tone="danger" title="Action required"><span role="alert">{{ error }}</span></Callout>
+    <p v-if="notice" role="status">{{ notice }}</p>
+    <div data-page="status" v-show="page==='status'">
+     <SettingsSection title="Package status" :collapsible="false">
+      <p v-if="app">{{ app.package }} · {{ app.user }} · {{ app.version }}</p>
+      <p v-else-if="error" role="status">Status could not be loaded. Refresh to try again.</p>
+     </SettingsSection>
+     <SettingsSection v-if="app?.admin" title="Greeting" :collapsible="false">
+      <Form @submit.prevent="save"><FormItem label="Greeting"><Textarea v-model="text" :disabled="busy" /></FormItem>
+       <FormActions><Button variant="primary" :disabled="busy || !text.trim()" @click="save">Save</Button></FormActions>
+      </Form>
+     </SettingsSection>
     </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'" 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 :locale="ctx.locale" />
-   </div>
-   <div data-page="background" v-show="page==='background'">
+    <CapabilityPanels v-if="app" :key="app.user" :ctx="ctx" :admin="app.admin" />
+    <FilesPage v-if="page==='status'" :ctx="ctx" />
+    <div data-page="background" v-show="page==='background'">
    <!-- BACKGROUND_PANEL -->
+    </div>
    </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>

package/dist/templates/native-go-vue/frontend/src/CapabilityPanels.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import type {Context} from './context'
+import ExecutorSettings from './delegate/ExecutorSettings.vue'
+defineProps<{ctx:Context;admin:boolean}>()
+</script>
+<template><ExecutorSettings v-if="ctx.executor" :admin="admin" :locale="ctx.locale" /></template>

package/dist/templates/native-go-vue/frontend/src/context.ts

@@ -1,5 +1,3 @@
-export type IntegrationState = 'not-enabled' | 'ready' | 'needs-approval' | 'incompatible' | 'stopped' | 'failed' | 'pending'
-export interface Status {state: IntegrationState; reason?: string; cleanup?: string; packageRunning: string; scheduler: string}
 export interface HostPlatformSnapshot {
  readonly web: boolean
  readonly host: 'dsm' | 'standalone-web' | 'unavailable'
@@ -37,23 +35,13 @@ export interface HostAdapter {
  subscribe(event: HostEvent, listener: () => void): HostSubscriptionResult
  dispose(): void
 }
-export interface AuthorizationStatus {command: "authorization"; schema_version: 1; state: "ready" | "authorization_required" | "not_admin" | "session_expired" | "unavailable"; reason: string | null}
 export interface Context {
+ files?: {endpoint:string;token?:()=>string|undefined}
  displayName?: string
- authorization?: {canManage?(): boolean; status(): Promise<AuthorizationStatus>; request(): Promise<AuthorizationStatus>; revoke(): Promise<AuthorizationStatus>}
+ executor?: import('./delegate/executor-setup').ExecutorSetup
  call<T = unknown>(method: string, params?: Record<string, unknown>): Promise<T>
  reopen(fn: () => void): () => void
  locale: string
  host: HostAdapter
- root?: {state(op: string): Promise<string>; authorize(op: string): Promise<string>; run(op: string): Promise<unknown>; remove(op: string): Promise<string>}
 }
 export interface AppStatus {package: string; version: string; user: string; admin: boolean}
-export const stateCopy: Record<IntegrationState, {label: string; description: string}> = {
- 'not-enabled': {label: 'Not enabled', description: 'An administrator can enable integration for this package.'},
- pending: {label: 'Temporarily revalidating', description: 'Integration is temporarily revalidating. Wait, then refresh. New access is unavailable until verification completes.'},
- ready: {label: 'Ready', description: 'The helper passed a fresh trusted health check.'},
- 'needs-approval': {label: 'Approval required', description: 'Ask an administrator to approve and activate integration.'},
- incompatible: {label: 'Incompatible', description: 'Inventory or trust checks failed. Ask an administrator to review this package.'},
- stopped: {label: 'Stopped', description: 'An administrator must recover integration after start or reboot.'},
- failed: {label: 'Failed', description: 'Integration could not finish. Review cleanup status before retrying.'},
-}

package/dist/templates/native-go-vue/frontend/src/delegate/ExecutorSettings.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {computed,onBeforeUnmount,onMounted,ref} from 'vue'
+import {Button,Callout,Form,FormActions,FormItem,Input,SettingsSection} from '@synopackageland/ui'
+import {useExecutorSetup,type CapabilityStatus} from './executor-setup'
+import {delegateCopy} from './copy'
+const props=defineProps<{admin:boolean;locale?:string}>()
+const setup=useExecutorSetup(),copy=computed(()=>delegateCopy(props.locale))
+const status=ref<CapabilityStatus>(),password=ref(''),busy=ref(false),error=ref(false)
+let disposed=false
+async function refresh(){if(!props.admin||busy.value)return;busy.value=true;error.value=false;try{const next=await setup.status();if(!disposed)status.value=next}catch{if(!disposed)error.value=true}finally{if(!disposed)busy.value=false}}
+async function authorize(){if(!props.admin||busy.value||!password.value)return;busy.value=true;error.value=false;const entered=password.value;password.value='';try{const next=await setup.authorize(entered);if(!disposed)status.value=next}catch{if(!disposed)error.value=true}finally{if(!disposed)busy.value=false}}
+onMounted(()=>void refresh());onBeforeUnmount(()=>{disposed=true;password.value=''})
+</script>
+<template>
+ <SettingsSection v-if="admin" :title="copy.setupTitle" :collapsible="false" :aria-busy="busy">
+  <p>{{ copy.setupHelp }}</p>
+  <Callout v-if="error" tone="danger" role="alert">{{ copy.setupError }}</Callout>
+  <p role="status">{{ status?.state==='ready'?copy.ready:status?.state==='needs-admin-approval'?copy.needs:copy.blocked }}</p>
+  <Form v-if="status?.state==='needs-admin-approval'" @submit.prevent="authorize">
+   <FormItem :label="copy.password" label-for="delegate-password"><Input id="delegate-password" v-model="password" type="password" autocomplete="current-password" :disabled="busy" /></FormItem>
+   <FormActions><Button type="submit" variant="primary" :disabled="busy||!password">{{ copy.authorize }}</Button></FormActions>
+  </Form>
+  <Button variant="secondary" :disabled="busy" @click="refresh">{{ copy.refresh }}</Button>
+ </SettingsSection>
+</template>

package/dist/templates/native-go-vue/frontend/src/delegate/copy.ts

@@ -0,0 +1,4 @@
+import en from './i18n/en.json'
+import zh from './i18n/zh-TW.json'
+export function delegateCopy(locale='en'){return locale.toLowerCase().startsWith('zh')?zh:en}
+export function errorCopy(error:unknown,copy:typeof en){const code=(error as {code?:string})?.code;return ['session_required','AUTH_DENIED'].includes(code??'')?copy.session:['DENIED','SCOPE_DENIED','PERMISSION_DENIED','APP_DENIED','INELIGIBLE','denied'].includes(code??'')?copy.denied:copy.error}

package/dist/templates/native-go-vue/frontend/src/delegate/executor-setup.ts

@@ -0,0 +1,18 @@
+import {inject,type InjectionKey} from 'vue'
+export type CapabilityState='unsupported'|'needs-admin-approval'|'ready'|'blocked'|'incompatible'
+export interface CapabilityStatus {state:CapabilityState;reason?:string}
+// p2-setup supplies the implementation through app.provide(ExecutorSetupKey, setup).
+// Passwords belong only to this call and must never be persisted or logged.
+export interface ExecutorSetup {
+ status():Promise<CapabilityStatus>
+ authorize(password:string):Promise<CapabilityStatus>
+ control(action:'start'|'stop'|'purge'):Promise<CapabilityStatus>
+}
+export const ExecutorSetupKey:InjectionKey<ExecutorSetup>=Symbol('executor-setup')
+export function useExecutorSetup():ExecutorSetup {
+ return inject(ExecutorSetupKey,{
+  async status(){return {state:'blocked',reason:'setup-unavailable'}},
+  async authorize(){throw {code:'setup-unavailable'}},
+  async control(){throw {code:'setup-unavailable'}},
+ })
+}

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

@@ -0,0 +1,36 @@
+{
+  "title": "Background file access",
+  "help": "Downloads continue after you close this app. Each job can write only to the folder you select, for up to one hour. Existing files are never replaced.",
+  "setupTitle": "Administrator setup",
+  "setupHelp": "Approve this app once to let it complete file jobs while users are offline.",
+  "password": "DSM password",
+  "authorize": "Approve background file access",
+  "ready": "Background file access is ready.",
+  "needs": "An administrator must approve background file access.",
+  "blocked": "Background file access is unavailable. Ask an administrator to check the app setup.",
+  "refresh": "Refresh",
+  "revoke": "Revoke",
+  "cancel": "Cancel job",
+  "noDelegations": "You have no active delegations.",
+  "delegations": "My delegations",
+  "expires": "Expires",
+  "downloads": "My downloads",
+  "noJobs": "You have no download jobs.",
+  "url": "Download URL",
+  "name": "File name",
+  "choose": "Choose folder",
+  "submit": "Download to my folder",
+  "destination": "Destination",
+  "pending": "Job canceled. Revocation is pending; the app will retry.",
+  "error": "The action could not be completed. Refresh and try again. If it keeps failing, contact your administrator.",
+  "setupError": "Approval could not be completed. Re-enter your DSM password and try again, or check the app setup.",
+  "denied": "Access was refused. Check your folder permissions and try again.",
+  "session": "Sign in to DSM again, then refresh.",
+  "size": "Downloads are limited to 64 MiB and 60 seconds.",
+  "queued": "Queued",
+  "running": "Downloading",
+  "succeeded": "Saved",
+  "failed": "Failed",
+  "canceled": "Canceled",
+  "interrupted": "Interrupted"
+}

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

@@ -0,0 +1,36 @@
+{
+  "title": "背景檔案存取",
+  "help": "關閉 App 後下載仍會繼續。每項工作只能寫入您選取的資料夾，委託最長一小時，不會取代既有檔案。",
+  "setupTitle": "管理員設定",
+  "setupHelp": "核准一次，讓 App 在使用者離線後完成檔案工作。",
+  "password": "DSM 密碼",
+  "authorize": "核准背景檔案存取",
+  "ready": "背景檔案存取已就緒。",
+  "needs": "需要管理員核准背景檔案存取。",
+  "blocked": "背景檔案存取無法使用，請管理員檢查 App 設定。",
+  "refresh": "重新整理",
+  "revoke": "撤銷",
+  "cancel": "取消工作",
+  "noDelegations": "目前沒有有效委託。",
+  "delegations": "我的委託",
+  "expires": "到期時間",
+  "downloads": "我的下載",
+  "noJobs": "目前沒有下載工作。",
+  "url": "下載網址",
+  "name": "檔案名稱",
+  "choose": "選擇資料夾",
+  "submit": "下載到我的資料夾",
+  "destination": "目的資料夾",
+  "pending": "工作已取消，委託撤銷待完成，App 將自動重試。",
+  "error": "操作未完成，請重新整理後再試。若持續失敗，請聯絡管理員。",
+  "setupError": "核准未完成，請重新輸入 DSM 密碼再試，或檢查 App 設定。",
+  "denied": "存取遭拒，請檢查資料夾權限後再試。",
+  "session": "請重新登入 DSM，再重新整理。",
+  "size": "下載上限為 64 MiB、60 秒。",
+  "queued": "等待中",
+  "running": "下載中",
+  "succeeded": "已儲存",
+  "failed": "失敗",
+  "canceled": "已取消",
+  "interrupted": "已中斷"
+}

package/dist/templates/native-go-vue/frontend/src/files/FileBrowser.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import {computed,onBeforeUnmount,onMounted,ref} from 'vue'
+import {Button,Callout,DataGrid,TreeView,FilePicker,type DataGridSort,type TreeNode} from '@synopackageland/ui'
+import {Folder,File} from '@lucide/vue'
+import type {NasEntry,NasProvider} from '../nas/contract'
+import {nasCopy,nasErrorCopy} from '../nas/locale'
+import {format} from '../nas/i18n'
+import {useNasRequest} from '../nas/use-request'
+const props=withDefaults(defineProps<{provider:NasProvider;locale:string;mode?:'folder'|'file';transfers?:boolean}>(),{mode:'file',transfers:false})
+const emit=defineEmits<{selected:[path:string|undefined]}>()
+const copy=computed(()=>nasCopy(props.locale))
+const request=useNasRequest(),{busy,error}=request
+const entries=ref<NasEntry[]>([]),roots=ref<TreeNode[]>([]),trail=ref<NasEntry[]>([]),chosen=ref<NasEntry>(),next=ref<number>()
+const expanded=ref<string[]>([]),treeSelection=ref<string>()
+const sort=ref<DataGridSort>({key:'name',direction:'asc'}),generation=ref(0)
+const uploads=ref<globalThis.File[]>([]),uploadDone=ref(false)
+let life=new AbortController()
+async function download(){
+ const selected=chosen.value
+ if(!selected||selected.isDir||!props.provider.download)return
+ await request.run(async signal=>{await props.provider.info(selected.path,signal);props.provider.download!(selected.path);return true})
+}
+async function upload(){
+ const parent=trail.value.at(-1)?.path,file=uploads.value[0]
+ if(!parent||!file||!props.provider.upload)return
+ uploadDone.value=false
+ const done=await request.run(async signal=>{await props.provider.upload!(parent,file,signal);return true})
+ if(done){uploads.value=[];await browse(trail.value);uploadDone.value=true}
+}
+
+const columns=computed(()=>[
+ {key:'name',label:copy.value.nameColumn,sortable:true},
+ {key:'kind',label:copy.value.kindColumn},
+ {key:'bytes',label:copy.value.sizeColumn,align:'right' as const,sortable:true},
+ {key:'selection',label:copy.value.selectAction},
+])
+function node(entry:NasEntry):TreeNode{return {id:entry.path,label:entry.name,icon:Folder,data:entry}}
+function select(entry?:NasEntry){chosen.value=entry;emit('selected',entry?.path)}
+function findTrail(nodes:TreeNode[],id:string,parents:NasEntry[]=[]):NasEntry[]|undefined{
+ for(const n of nodes){const path=[...parents,n.data as NasEntry];if(n.id===id)return path;const found=findTrail(n.children??[],id,path);if(found)return found}
+}
+async function loadChildren(parent:TreeNode):Promise<TreeNode[]|undefined>{
+ const version=generation.value,signal=life.signal
+ try{
+  const children:TreeNode[]=[]
+  let offset:number|undefined=0
+  while(offset!==undefined){
+   const page=await props.provider.list(parent.id,{offset,sortBy:'name',sortDirection:'ASC'},signal)
+   if(signal.aborted||version!==generation.value)return undefined
+   children.push(...page.entries.filter(e=>e.isDir).map(node));offset=page.nextOffset
+  }
+  return children
+ }catch(e){if(!signal.aborted&&version===generation.value){error.value=e;select()};return undefined}
+}
+async function browse(target:NasEntry[],more=false){
+ if(busy.value)return
+ select();entries.value=more?entries.value:[];next.value=more?next.value:undefined
+ const offset=more?next.value??0:0,path=target.at(-1)?.path
+ trail.value=target
+ const page=await request.run(signal=>path
+  ?props.provider.list(path,{offset,sortBy:sort.value.key as 'name'|'size',sortDirection:sort.value.direction==='asc'?'ASC':'DESC'},signal)
+  :props.provider.shares(offset,signal))
+ if(page){
+  entries.value=more?[...entries.value,...page.entries]:page.entries;next.value=page.nextOffset
+  if(!path)roots.value=entries.value.filter(e=>e.isDir).map(node)
+ }
+}
+function open(entry:NasEntry){void browse([...trail.value,entry])}
+function sortChanged(value:DataGridSort|null){sort.value={key:value?.key==='bytes'?'size':'name',direction:value?.direction??'asc'};void browse(trail.value)}
+function refresh(){
+ if(busy.value)return
+ generation.value++;life.abort();life=new AbortController();roots.value=[];expanded.value=[];treeSelection.value=undefined
+ void browse([])
+}
+onMounted(()=>void browse([]))
+onBeforeUnmount(()=>{generation.value++;life.abort()})
+</script>
+<template>
+ <section class="file-browser" :aria-busy="busy" :aria-label="copy.title">
+  <p>{{ copy.ownPermissions }}</p>
+  <nav class="file-toolbar" :aria-label="copy.directoryKind">
+   <Button variant="secondary" :disabled="busy" @click="refresh">{{ copy.refresh }}</Button>
+   <Button v-if="trail.length" variant="secondary" :disabled="busy" @click="browse(trail.slice(0,-1))">{{ copy.back }}</Button>
+   <Button variant="secondary" :disabled="busy" @click="browse([])">{{ copy.roots }}</Button>
+   <Button v-for="(part,index) in trail" :key="part.path" variant="secondary" :disabled="busy" @click="browse(trail.slice(0,index+1))">{{ part.name }}</Button>
+  </nav>
+  <div v-if="transfers&&provider.upload&&trail.length" class="file-toolbar">
+   <FilePicker v-model="uploads" variant="compact" :disabled="busy" :max-files="1" :max-size="16*1024**3" :title="copy.upload" @rejected="error={code:'upload_size_required'}" />
+   <Button variant="primary" :disabled="busy||!uploads.length" @click="upload">{{ copy.upload }}</Button>
+  </div>
+  <p v-if="uploadDone" role="status">{{ copy.uploaded }}</p>
+  <Button v-if="transfers&&provider.download&&chosen&&!chosen.isDir&&!error" variant="secondary" :disabled="busy" @click="download">{{ copy.download }}</Button>
+  <Callout v-if="error" tone="danger"><span role="alert">{{ nasErrorCopy(error,copy) }}</span></Callout>
+  <p v-if="busy" role="status">{{ copy.loading }}</p>
+  <div class="file-columns">
+   <aside class="file-tree" :aria-label="copy.roots">
+    <TreeView v-if="roots.length" :key="generation" v-model="treeSelection" v-model:nodes="roots" v-model:expanded="expanded" :load-children="loadChildren" :expand-label="(n,expanded)=>format(expanded?copy.collapse:copy.expand,n.label)" @select="n=>browse(findTrail(roots,n.id)??[n.data as NasEntry])" />
+   </aside>
+   <div class="file-content">
+    <DataGrid v-if="!error" :columns="columns" :rows="entries.map(e=>({...e,kind:e.isDir?copy.directoryKind:copy.fileKind}))" row-key="path" :footer="false" :resizable="false" :local-sort="false" :local-pagination="false" :loading="busy" :loading-text="copy.loading" :sort="{key:sort.key==='size'?'bytes':sort.key,direction:sort.direction}" :labels="{empty:copy.emptyFolder}" @update:sort="sortChanged">
+     <template #cell-name="{row}">
+      <Button v-if="row.isDir" variant="secondary" :disabled="busy" :aria-label="format(copy.open,String(row.name))" @click="open(entries.find(e=>e.path===row.path)!)"><Folder :size="16" aria-hidden="true" />{{ row.name }}</Button>
+      <span v-else class="file-name"><File :size="16" aria-hidden="true" />{{ row.name }}</span>
+     </template>
+     <template #cell-bytes="{row}"><span class="file-bytes">{{ row.isDir?'—':row.bytes??'—' }}</span></template>
+     <template #cell-selection="{row}">
+      <Button v-if="mode==='folder'?row.isDir:!row.isDir" variant="secondary" :disabled="busy" :aria-pressed="chosen?.path===row.path" :aria-label="format(copy.select,String(row.name))" @click="select(entries.find(e=>e.path===row.path))">{{ copy.selectAction }}</Button>
+     </template>
+    </DataGrid>
+    <Button v-if="next!==undefined&&!error" variant="secondary" :disabled="busy" @click="browse(trail,true)">{{ copy.loadMore }}</Button>
+    <Button v-if="mode==='folder'&&trail.length&&!error" variant="secondary" :disabled="busy" @click="select(trail.at(-1))">{{ format(copy.select,trail.at(-1)!.name) }}</Button>
+   </div>
+  </div>
+  <p v-if="chosen&&!error" class="file-selection" role="status">{{ format(copy.selected,chosen.path) }}</p>
+ </section>
+</template>
+<style scoped>
+.file-browser { min-width: 0; color: var(--ui-text); }
+.file-toolbar { display: flex; flex-wrap: wrap; gap: var(--ui-space-2, 8px); margin-block: var(--ui-space-3, 12px); }
+.file-columns { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr); gap: var(--ui-space-3, 12px); }
+.file-tree { min-width: 0; max-height: 55vh; overflow: auto; border-inline-end: 1px solid var(--ui-border); }
+.file-content { min-width: 0; overflow: auto; }
+.file-name { display: inline-flex; align-items: center; gap: var(--ui-space-2, 8px); overflow-wrap: anywhere; }
+.file-bytes { font-variant-numeric: tabular-nums; }
+.file-selection { overflow-wrap: anywhere; }
+@media (max-width: 600px) {
+ .file-columns { grid-template-columns: minmax(0, 1fr); }
+ .file-content :deep(th:nth-child(2)), .file-content :deep(td:nth-child(2)), .file-content :deep(th:nth-child(3)), .file-content :deep(td:nth-child(3)) { display: none; }
+ .file-tree { max-height: 180px; border-inline-end: 0; border-bottom: 1px solid var(--ui-border); }
+}
+</style>

package/dist/templates/native-go-vue/frontend/src/files/FilesPage.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {onBeforeUnmount,onMounted,ref} from 'vue'
+import {Button,Callout,SettingsSection} from '@synopackageland/ui'
+import type {Context} from '../context'
+import FileBrowser from './FileBrowser.vue'
+import NasPicker from '../nas/NasPicker.vue'
+import {createNasProvider} from '../nas/provider'
+import {nasCopy,nasErrorCopy} from '../nas/locale'
+const props=defineProps<{ctx:Context}>()
+const error=ref<unknown>()
+const ready=ref(false),mode=ref<'folder'|'file'>('folder'),open=ref(false),selected=ref(''),generation=ref(0)
+const provider=createNasProvider(props.ctx)
+let disposed=false,unsubscribe:(()=>void)|undefined
+async function check(){
+ if(disposed)return
+ error.value=undefined
+ ready.value=false;selected.value='';open.value=false;generation.value++
+ try{await props.ctx.call('nas.session.status');if(!disposed)ready.value=true}catch(e){if(!disposed&&(e as {code?:string})?.code!=='unknown_method')error.value=e}
+}
+onMounted(()=>{unsubscribe=props.ctx.reopen(()=>void check());void check()})
+onBeforeUnmount(()=>{disposed=true;unsubscribe?.();provider.dispose()})
+</script>
+<template>
+ <Callout v-if="error" tone="danger"><span role="alert">{{ nasErrorCopy(error,nasCopy(ctx.locale)) }}</span><Button variant="secondary" @click="check">{{ nasCopy(ctx.locale).refresh }}</Button></Callout>
+ <SettingsSection v-if="ready" :title="nasCopy(ctx.locale).title" :collapsible="false">
+  <div class="files-actions"><Button variant="secondary" @click="mode='folder';open=true">{{ nasCopy(ctx.locale).choose }}</Button><Button variant="secondary" @click="mode='file';open=true">{{ nasCopy(ctx.locale).chooseFile }}</Button></div>
+  <p v-if="selected" class="files-path" role="status">{{ selected }}</p>
+  <FileBrowser :key="generation" :provider="provider" :locale="ctx.locale" transfers />
+  <NasPicker :provider="provider" :locale="ctx.locale" :mode="mode" v-model:open="open" @selected="selected=$event" />
+ </SettingsSection>
+</template>
+<style scoped>
+.files-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2, 8px); }
+.files-path { overflow-wrap: anywhere; }
+</style>