@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/LICENSE

@@ -0,0 +1,16 @@
+Copyright (c) 2026 PT Init Solusi Digital. All rights reserved.
+
+This software and its source code are proprietary to PT Init Solusi Digital.
+
+The source code is made available for viewing and reference only. No license
+is granted to use, copy, modify, merge, publish, distribute, sublicense, or
+sell this software, in whole or in part, or to create derivative works from
+it, without prior written permission from PT Init Solusi Digital.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,123 @@
-# Temporary Holding Version
+# @initsolusidigital/worksuite-shell
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The signed-in shell shared by the Init Worksuite web apps: the page layout with its sidebar and
+header, the user menu, notifications, the app launcher, global search, the floating chat and
+assistant widgets, the profile pages, and the screens several apps render the same way (approval
+inbox, dashboard grid, import and export, custom fields, KPI and HR metrics). The package ships raw
+`.js` and `.vue` source, and each app compiles it in its own Vite build.
+
+The source is published so it can be read. Using it requires written permission from
+PT Init Solusi Digital; the terms are in the `LICENSE` file included in the package.
+
+## Contents
+
+The files mirror the `src/` folder of an app, so `src/layouts/AppLayout.vue` in the package is the
+file an app used to keep at `src/layouts/AppLayout.vue`.
+
+| Folder | Files |
+|---|---|
+| `layouts/` | `AppLayout.vue` (sidebar, header, banners, breadcrumb row, floating widgets, toasts) |
+| `components/layout/` | `AppSidebar`, `AppSidebarNav`, `AppNavbar`, `AppUserMenu`, `AppUserMenuContent`, `AppNotificationPopup`, `AppNotificationDrawer`, `AppNotificationContent`, `AppLauncherPopup`, `AppLanguagePopup`, `AppGlobalSearch`, `AppPlatformBanners`, `AppLegalConsentModal` |
+| `components/chat/` | the floating chat widget and its bubble, list and panel |
+| `components/ai/` | the assistant widget, its draft confirmation screen, cited answers |
+| `components/approvals/` | `AppApprovalInbox`, `AppApprovalSubjectModal` |
+| `components/communications/` | `AppConversationThread`, `AppChannelBadge` |
+| `components/dashboard/` | `AppDashboardGrid`, `AppDashboardToolbar`, `AppCustomWidget`, `AppCustomWidgetForm`, `AppSubAppsCatalog` |
+| `components/dataTools/` | `AppImportExport`, `AppImportSchemaGuide` |
+| `components/customFields/` | custom field input, value, section and filter panel |
+| `components/kpi/`, `composables/useKpi.js` | KPI workspace, scorecards, entry and target forms, appraisals |
+| `components/hrMetrics/` | HR metrics dashboard, per-employee list, stat card |
+| `composables/` | `useNavigation.js` (menu filtered by module permission) |
+| `pages/profile/` | `Layout.vue` and the account, security, sessions, two-factor, preferences, support access and approval delegation sections |
+| `pages/auth/` | `AccountBlocked.vue`, `IdentityRedirect.vue` (the local `/login` route that forwards to the sign-in app) |
+| `locales/` | `id.json`, `en.json` (see Translations) |
+
+## Requirements
+
+- `@initsolusidigital/worksuite-core`, `@initsolusidigital/worksuite-ui` and
+  `@initsolusidigital/worksuite-tooling` at the same exact version as this package. Shell files
+  import the core stores and composables and the ui components.
+- Vue 3.5, vue-router 4, vue-i18n 11, `@lucide/vue`, `@iconify/vue` and
+  `@iconify-icons/simple-icons`.
+- Tailwind CSS v4. The app's Tailwind build must scan this package.
+- Optional libraries, needed only by the files that use them: `grid-layout-plus` (dashboard grid),
+  `leaflet` (location messages in chat), `qrcode` (two-factor enrolment). The custom dashboard
+  widget and the HR metrics charts render `<apexchart>`, so an app that shows them registers
+  `vue3-apexcharts` globally.
+
+## Installation
+
+```bash
+npm install --save-exact @initsolusidigital/worksuite-shell @initsolusidigital/worksuite-core @initsolusidigital/worksuite-ui @initsolusidigital/worksuite-tooling
+```
+
+1. Set up `worksuite-core` first (see its README). The shell builds on its configuration.
+
+2. Add a `@source` line for this package to `src/style.css`, next to the core and ui lines:
+
+   ```css
+   @source "../node_modules/@initsolusidigital/worksuite-shell/src";
+   ```
+
+3. Call `configureShell()` in `src/main.js`, after `configureWorksuite()`:
+
+   ```js
+   import { configureWorksuite } from '@initsolusidigital/worksuite-core/setup.js'
+   import { configureShell } from '@initsolusidigital/worksuite-shell/shellSetup.js'
+   import { navigation } from '@/data/navigation'
+   import { useBreadcrumbs } from '@/composables/useAppBreadcrumbs'
+
+   configureWorksuite({ router, messages })
+   configureShell({ navigation, useBreadcrumbs })
+   ```
+
+   | Option | Required | Meaning |
+   |---|---|---|
+   | `navigation` | yes | The app's sidebar menu: `[{ labelKey?, position?, items: [...] }]`. |
+   | `useBreadcrumbs` | yes | The app's breadcrumb composable, returning `{ breadcrumbs }`. |
+   | `navigationBadges` | no | `{ badgeKey: () => ref }`, one factory per menu badge. |
+   | `tenantSettingsEntryRoute` | no | `(can) => routeName \| null`. Without it the tenant settings icon is not shown in the header. |
+   | `onLogout` | no | `({ router, redirect }) => void`, called after the session ends from the user menu. `redirect()` is the default behaviour: the sign-in app, or the app's `login` route when its address is unknown. |
+
+   Shell files read this configuration when they render, never when they are imported. Rendering a
+   shell component before `configureShell()` throws an error that names the missing call.
+
+4. Delete the app's copies of the files that now come from the package.
+
+5. Run `npx worksuite-kit-check` from the app root.
+
+## Importing
+
+As with core, apps keep their existing imports. The plugin redirects `@/layouts/AppLayout.vue`,
+`@/components/layout/AppNavbar.vue`, `@/composables/useNavigation` and every other path that exists
+in this package to the package file, and paths the package does not have still resolve to the
+app's own files.
+
+What stays in the app: `data/navigation.js`, the breadcrumb map and composable, route definitions
+(including the `/profile` child routes), dashboard widget registries and the widgets themselves.
+
+The profile layout only links the sections whose routes the app has registered, so an app can
+leave a section out by not registering its route.
+
+## Translations
+
+The package ships its own dictionary in `locales/id.json` and `locales/en.json` and registers it
+with the core i18n instance when `shellSetup.js` loads. The app's dictionary is merged on top, and
+the app's keys win, so the rule from core applies here too: an app key with the same path as a
+package key is an override that blocks fixes made in the package. `worksuite-kit-check` lists
+those overrides as warnings.
+
+## What worksuite-kit-check reports
+
+For apps that install this package, the check fails when:
+
+- `src/main.js` does not call `configureShell()`. The sidebar then has no menu, the breadcrumb row
+  is empty, and the shell dictionary is never merged;
+- the package is installed without `worksuite-core`;
+- `src/style.css` has no `@source` line for this package;
+- a copy of a package file is still in the app's `src/`.
+
+## Versioning
+
+All `@initsolusidigital/worksuite-*` packages share one version number. Install them at the same
+exact version; mixing versions is not supported.

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "@initsolusidigital/worksuite-shell",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.3.0",
+  "description": "Signed-in app shell for the Init Worksuite web apps: layout, navigation, user menu, notifications, chat widget, profile pages and shared dashboard widgets, shipped as raw source",
+  "type": "module",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "src"
+  ],
+  "exports": {
+    "./*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "*.vue",
+    "*.css"
+  ],
+  "peerDependencies": {
+    "@iconify-icons/simple-icons": "^1.2.74",
+    "@iconify/vue": "^5.0.1",
+    "@initsolusidigital/worksuite-core": ">=0.3.0 <1.0.0",
+    "@initsolusidigital/worksuite-ui": ">=0.3.0 <1.0.0",
+    "@lucide/vue": "^1.21.0",
+    "grid-layout-plus": "^1.1.1",
+    "leaflet": "^1.9.4",
+    "qrcode": "^1.5.4",
+    "vue": "^3.5.34",
+    "vue-i18n": "^11.4.6",
+    "vue-router": "^4.6.4"
+  },
+  "peerDependenciesMeta": {
+    "grid-layout-plus": {
+      "optional": true
+    },
+    "leaflet": {
+      "optional": true
+    },
+    "qrcode": {
+      "optional": true
+    }
+  }
+}

package/src/components/ai/AppAssistantDraft.vue

@@ -0,0 +1,120 @@
+<script setup>
+// Layar konfirmasi draf asisten. Asisten TIDAK pernah menyimpan sendiri: ia
+// menyiapkan muatan, pengguna melengkapi `needs` (jenis tugas & entitas tujuan dikonfigurasi per
+// tenant, jadi tak bisa ditebak model), lalu layar mengirimnya ke endpoint biasa — dengan
+// gerbang izin yang sama seperti membuat tugas dari layar CRM.
+import { ref, computed, watch, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { assistantApi } from '@initsolusidigital/worksuite-core/api/endpoints/assistant.js'
+import { useFormSubmit } from '@initsolusidigital/worksuite-core/composables/useFormSubmit.js'
+import AppAlert from '@initsolusidigital/worksuite-ui/AppAlert.vue'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+import AppInput from '@initsolusidigital/worksuite-ui/AppInput.vue'
+import AppCombobox from '@initsolusidigital/worksuite-ui/AppCombobox.vue'
+
+const props = defineProps({
+  draft: { type: Object, required: true },   // { type: 'crm_task', endpoint, payload, needs }
+})
+const emit = defineEmits(['done', 'cancel'])
+
+const { t, te } = useI18n()
+const { fieldErrors, formError, saving, submit } = useFormSubmit()
+
+const toLocalInput = (v) => {
+  if (!v) return ''
+  const d = new Date(String(v).replace(' ', 'T'))
+  if (Number.isNaN(d.getTime())) return ''
+  const p = (n) => String(n).padStart(2, '0')
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`
+}
+
+const form = ref({
+  title: props.draft.payload?.title ?? '',
+  due_at: toLocalInput(props.draft.payload?.due_at),
+  type: null,
+  taskable_type: 'opportunities',
+  taskable_id: null,
+})
+
+const typeOptions = ref([])
+const taskableOptions = ref([])
+const loadingTaskables = ref(false)
+const taskableTypeOptions = computed(() => ['opportunities', 'customers', 'contacts'].map((v) => ({ value: v, label: t(`ai.assistant.draft.taskable.${v}`) })))
+
+async function loadTaskables(search = '') {
+  loadingTaskables.value = true
+  try {
+    const { data } = await assistantApi.taskables(form.value.taskable_type, search ? { search } : {})
+    const rows = data?.data?.data ?? data?.data ?? []
+    taskableOptions.value = rows.map((r) => ({
+      value: r.id,
+      label: r.name ?? r.customer_company_name ?? ([r.first_name, r.last_name].filter(Boolean).join(' ') || r.id),
+    }))
+  } catch { taskableOptions.value = [] } finally {
+    loadingTaskables.value = false
+  }
+}
+watch(() => form.value.taskable_type, () => { form.value.taskable_id = null; loadTaskables() })
+
+onMounted(async () => {
+  try {
+    const { data } = await assistantApi.taskTypes()
+    const rows = data?.data?.data ?? data?.data ?? []
+    typeOptions.value = rows.map((r) => ({
+      value: r.key,
+      label: r.is_system && te(`crm.stages.taskType.${r.key}`) ? t(`crm.stages.taskType.${r.key}`) : (r.name ?? r.key),
+    }))
+    form.value.type = typeOptions.value[0]?.value ?? null
+  } catch { typeOptions.value = [] }
+  loadTaskables()
+})
+
+function save() {
+  const f = form.value
+  const payload = {
+    ...props.draft.payload,
+    title: f.title.trim(),
+    due_at: f.due_at ? `${f.due_at.replace('T', ' ')}:00` : null,
+    type: f.type,
+    taskable_type: f.taskable_type,
+    taskable_id: f.taskable_id,
+  }
+  submit(() => assistantApi.submitDraft(props.draft.endpoint, payload), {
+    require: ['title', 'type', 'taskable_id'],
+    requireIn: f,
+    successKey: 'ai.assistant.draft.saved',
+    errorKey: 'ai.assistant.draft.saveError',
+    onSuccess: () => emit('done'),
+  })
+}
+</script>
+
+<template>
+  <div class="rounded-lg border border-blue-200 dark:border-blue-800 bg-blue-50/60 dark:bg-blue-900/20 p-3 space-y-3" data-assistant-draft>
+    <p class="text-xs font-medium text-blue-800 dark:text-blue-300">{{ t('ai.assistant.draft.title') }}</p>
+    <AppAlert v-if="formError" variant="error" :message="formError" />
+    <AppInput v-model="form.title" :label="t('ai.assistant.draft.fieldTitle')" :error="fieldErrors.title" required />
+    <div class="grid grid-cols-1 gap-3">
+      <AppCombobox v-model="form.type" :options="typeOptions" :label="t('ai.assistant.draft.fieldType')" :error="fieldErrors.type" hide-clear required />
+      <div>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="assistant-due">{{ t('ai.assistant.draft.fieldDue') }}</label>
+        <input id="assistant-due" v-model="form.due_at" type="datetime-local" class="w-full px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" />
+      </div>
+      <AppCombobox v-model="form.taskable_type" :options="taskableTypeOptions" :label="t('ai.assistant.draft.fieldTaskableType')" hide-clear />
+      <AppCombobox
+        v-model="form.taskable_id"
+        :options="taskableOptions"
+        :loading="loadingTaskables"
+        :filter-results="false"
+        :label="t(`ai.assistant.draft.taskable.${form.taskable_type}`)"
+        :error="fieldErrors.taskable_id"
+        required
+        @search="loadTaskables"
+      />
+    </div>
+    <div class="flex justify-end gap-2">
+      <AppButton size="sm" variant="secondary" @click="emit('cancel')">{{ t('common.cancel') }}</AppButton>
+      <AppButton size="sm" variant="primary" :loading="saving" data-assistant-draft-save @click="save">{{ t('ai.assistant.draft.save') }}</AppButton>
+    </div>
+  </div>
+</template>

package/src/components/ai/AppAssistantWidget.vue

@@ -0,0 +1,245 @@
+<script setup>
+// Widget Asisten AI — tombol melayang DI ATAS tombol chat (satu kolom kanan),
+// semua app staf. Posisinya ikut `--fab-lift` dari AppLayout supaya naik bersama tombol chat saat
+// footer terlihat.
+// Tampil hanya bila pengguna boleh MENJALANKAN asisten (`ai_assistant,can_create`) dan tenant
+// beradd-on AI; tool yang ditawarkan sudah disaring backend menurut izin modul masing-masing.
+// Konteks `{app, path}` ikut dikirim supaya pertanyaan "di halaman ini" bisa dijawab relevan.
+//
+// Riwayat percakapan hanya hidup di memori tab: backend tak menyimpannya, dan menyimpannya di
+// browser akan membawa potongan data tenant ke perangkat yang mungkin dipakai bersama.
+import { ref, computed, nextTick, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { Sparkles, X, Send, ExternalLink } from '@lucide/vue'
+import { useAuthStore } from '@initsolusidigital/worksuite-core/stores/auth.js'
+import { useChat } from '@initsolusidigital/worksuite-core/composables/useChat.js'
+import { useCrossAppLink } from '@initsolusidigital/worksuite-core/composables/useCrossAppLink.js'
+import { assistantApi } from '@initsolusidigital/worksuite-core/api/endpoints/assistant.js'
+import { normalizeApiError } from '@initsolusidigital/worksuite-core/api/errors.js'
+import { aiErrorKey, creditSummary } from '@initsolusidigital/worksuite-core/utils/aiError.js'
+import AppSpinner from '@initsolusidigital/worksuite-ui/AppSpinner.vue'
+import AppCitedAnswer from './AppCitedAnswer.vue'
+import AppAssistantDraft from './AppAssistantDraft.vue'
+
+const { t, te, locale } = useI18n()
+const route = useRoute()
+const authStore = useAuthStore()
+const { openTarget } = useCrossAppLink()
+
+const companyId = computed(() => authStore.user?.company?.id ?? authStore.user?.company_id)
+// Add-on AI dibaca dari `entitled_addons` /auth/me; absen (null) = jangan sembunyikan — gerbang
+// sesungguhnya 403 `ai_addon_not_active` di backend, yang ditampilkan sebagai kalimat.
+const addonOk = computed(() => {
+  const list = authStore.sessionMeta?.entitled_addons
+  return !Array.isArray(list) || list.includes('ai_credits')
+})
+
+const open = ref(false)
+const tools = ref(null)
+const loadingTools = ref(false)
+const turns = ref([])        // [{ q, res?, error?, pending, draftDone? }]
+const question = ref('')
+const sending = ref(false)
+const scrollEl = ref(null)
+
+async function loadTools() {
+  if (tools.value || loadingTools.value || !companyId.value) return
+  loadingTools.value = true
+  try {
+    const { data } = await assistantApi.tools(companyId.value)
+    tools.value = data?.data ?? []
+  } catch { tools.value = [] } finally {
+    loadingTools.value = false
+  }
+}
+watch(open, (v) => { if (v) loadTools() })
+
+// Panel asisten & panel chat berlabuh di titik yang sama (kiri tumpukan tombol), jadi hanya satu
+// yang boleh terbuka: tanpa ini panel yang dirender belakangan menutupi yang lain sepenuhnya.
+const { isOpen: chatOpen, closeWidget: closeChat } = useChat()
+watch(open, (v) => { if (v) closeChat() })
+watch(chatOpen, (v) => { if (v) open.value = false })
+
+const toolLabel = (k) => (te(`ai.assistant.tool.${k}`) ? t(`ai.assistant.tool.${k}`) : k)
+const suggestions = computed(() => (tools.value ?? [])
+  .filter((x) => te(`ai.assistant.sample.${x.key}`))
+  .slice(0, 6)
+  .map((x) => ({ key: x.key, text: t(`ai.assistant.sample.${x.key}`) })))
+
+async function scrollDown() {
+  await nextTick()
+  scrollEl.value?.scrollTo({ top: scrollEl.value.scrollHeight })
+}
+
+async function ask(text) {
+  const q = (text ?? question.value).trim()
+  if (!q || sending.value) return
+  question.value = ''
+  const turn = { q, pending: true }
+  turns.value.push(turn)
+  sending.value = true
+  scrollDown()
+  try {
+    const { data } = await assistantApi.ask(companyId.value, q, { app: import.meta.env.VITE_APP_KEY, path: route.fullPath })
+    turn.res = data?.data ?? null
+  } catch (err) {
+    const e = normalizeApiError(err)
+    turn.error = aiErrorKey(e) ? t(aiErrorKey(e)) : e.status === 429 ? t('ai.assistant.tooFast') : t('ai.assistant.error')
+  } finally {
+    turn.pending = false
+    sending.value = false
+    turns.value = [...turns.value]
+    scrollDown()
+  }
+}
+function onKey(e) {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); ask() }
+}
+
+// ── Data tool: daftar yang bisa diklik bila tujuannya diketahui ──
+function fmtDate(v) {
+  if (!v) return ''
+  const d = new Date(String(v).length === 10 ? `${v}T00:00:00` : String(v).replace(' ', 'T'))
+  return Number.isNaN(d.getTime()) ? String(v) : d.toLocaleDateString(locale.value === 'id' ? 'id-ID' : 'en-US', { day: 'numeric', month: 'short' })
+}
+const money = (n) => new Intl.NumberFormat(locale.value === 'id' ? 'id-ID' : 'en-US', { maximumFractionDigits: 0 }).format(Number(n) || 0)
+
+function listOf(res) {
+  const d = res?.data ?? {}
+  switch (res?.tool) {
+    case 'my_crm_tasks':
+      return (d.tasks ?? []).map((x) => ({ id: x.id, title: x.title, meta: fmtDate(x.due_at), alert: x.overdue, target: { target_app: 'crm', target_path: '/opportunities/tasks' } }))
+    case 'my_open_tickets':
+      return (d.assigned_to_me ?? []).map((x) => ({ id: x.id, title: `${x.ticket_number} · ${x.subject}`, meta: fmtDate(x.resolution_due_at), alert: x.resolution_breached, target: { target_app: 'crm', target_path: `/tickets/${x.id}` } }))
+    case 'my_pipeline':
+      return (d.top ?? []).map((x) => ({ id: x.id, title: x.name, meta: money(x.expected_value_base), target: { target_app: 'crm', target_path: `/opportunities?open=${x.id}` } }))
+    case 'overdue_invoices':
+      return (d.largest ?? []).map((x) => ({ id: x.id, title: x.invoice_number, meta: `${money(x.total_amount)} · ${fmtDate(x.due_date)}`, alert: true, target: { target_app: 'finance', target_path: `/transactions/invoices?open=${x.id}` } }))
+    case 'my_project_tasks':
+      return (d.tasks ?? []).map((x) => ({ id: x.id, title: x.title, meta: fmtDate(x.due_date), target: { target_app: 'project', target_path: `/my-tasks?open=${x.id}` } }))
+    case 'pending_leave_requests':
+      return (d.oldest ?? []).map((x) => ({ id: x.id, title: `${fmtDate(x.start_date)} – ${fmtDate(x.end_date)}`, meta: t('ai.assistant.days', { n: x.total_days }) }))
+    default:
+      return []
+  }
+}
+function openItem(it) {
+  if (it.target) openTarget(it.target)
+}
+</script>
+
+<template>
+  <div v-if="addonOk">
+    <button
+      type="button"
+      class="fixed bottom-[calc(5.75rem+var(--fab-lift,0px))] right-5 sm:right-7 z-[46] w-12 h-12 rounded-full bg-violet-600 hover:bg-violet-700 text-white shadow-lg flex items-center justify-center transition-colors"
+      :aria-label="t('ai.assistant.title')"
+      :aria-expanded="open"
+      data-assistant-toggle
+      @click="open = !open"
+    >
+      <X v-if="open" class="w-5 h-5" />
+      <Sparkles v-else class="w-5 h-5" />
+    </button>
+
+    <div
+      v-if="open"
+      class="fixed bottom-[calc(9.5rem+var(--fab-lift,0px))] right-4 sm:bottom-[calc(1.5rem+var(--fab-lift,0px))] sm:right-24 z-[46] w-[calc(100vw-2rem)] sm:w-96 max-h-[calc(100vh-16rem-var(--fab-lift,0px))] sm:max-h-[calc(100vh-8rem-var(--fab-lift,0px))] flex flex-col rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-2xl overflow-hidden"
+      role="dialog"
+      :aria-label="t('ai.assistant.title')"
+      data-assistant-panel
+    >
+      <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-violet-600 text-white">
+        <p class="text-sm font-semibold flex items-center gap-1.5"><Sparkles class="w-4 h-4" />{{ t('ai.assistant.title') }}</p>
+        <p class="text-[11px] text-violet-100">{{ t('ai.assistant.subtitle') }}</p>
+      </div>
+
+      <div ref="scrollEl" class="flex-1 overflow-y-auto scrollbar-rounded p-3 space-y-3 bg-gray-50 dark:bg-gray-900/40">
+        <div v-if="!turns.length" class="space-y-2">
+          <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('ai.assistant.intro') }}</p>
+          <div v-if="loadingTools" class="flex justify-center py-3"><AppSpinner size="sm" /></div>
+          <div v-else class="flex flex-wrap gap-1.5">
+            <button
+              v-for="s in suggestions"
+              :key="s.key"
+              type="button"
+              class="px-2.5 py-1 rounded-full text-xs border border-violet-200 dark:border-violet-700 text-violet-700 dark:text-violet-300 bg-white dark:bg-gray-800 hover:bg-violet-50 dark:hover:bg-violet-900/30"
+              :data-assistant-suggestion="s.key"
+              @click="ask(s.text)"
+            >{{ s.text }}</button>
+          </div>
+          <p v-if="tools && !tools.length" class="text-xs text-gray-400">{{ t('ai.assistant.noTools') }}</p>
+        </div>
+
+        <div v-for="(turn, i) in turns" :key="i" class="space-y-2" :data-assistant-turn="i">
+          <div class="flex justify-end">
+            <p class="max-w-[85%] rounded-2xl rounded-tr-sm bg-violet-600 text-white px-3 py-2 text-sm whitespace-pre-line">{{ turn.q }}</p>
+          </div>
+          <div class="flex justify-start">
+            <div class="max-w-[92%] rounded-2xl rounded-tl-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-3 py-2 space-y-2">
+              <AppSpinner v-if="turn.pending" size="sm" />
+              <p v-else-if="turn.error" class="text-sm text-red-600 dark:text-red-400">{{ turn.error }}</p>
+              <template v-else-if="turn.res">
+                <AppCitedAnswer v-if="turn.res.citations?.length" :answer="turn.res.answer ?? ''" :citations="turn.res.citations" />
+                <p v-else class="text-sm text-gray-800 dark:text-gray-100 whitespace-pre-line">{{ turn.res.answer }}</p>
+
+                <ul v-if="listOf(turn.res).length" class="space-y-1">
+                  <li v-for="it in listOf(turn.res)" :key="it.id">
+                    <button
+                      type="button"
+                      class="w-full text-left flex items-start gap-2 text-xs rounded-md px-2 py-1 hover:bg-gray-50 dark:hover:bg-gray-700/40 disabled:cursor-default"
+                      :disabled="!it.target"
+                      @click="openItem(it)"
+                    >
+                      <span class="flex-1 min-w-0 text-gray-800 dark:text-gray-200 truncate">{{ it.title }}</span>
+                      <span class="shrink-0" :class="it.alert ? 'text-red-600 dark:text-red-400' : 'text-gray-400'">{{ it.meta }}</span>
+                      <ExternalLink v-if="it.target" class="w-3 h-3 shrink-0 text-gray-400 mt-0.5" />
+                    </button>
+                  </li>
+                </ul>
+
+                <div v-if="turn.res.tool === 'unsupported' && turn.res.data?.available_tools?.length" class="text-xs text-gray-500 dark:text-gray-400">
+                  <p class="mb-1">{{ t('ai.assistant.canHelpWith') }}</p>
+                  <ul class="list-disc pl-4 space-y-0.5">
+                    <li v-for="k in turn.res.data.available_tools" :key="k">{{ toolLabel(k) }}</li>
+                  </ul>
+                </div>
+
+                <AppAssistantDraft
+                  v-if="turn.res.draft && !turn.draftDone"
+                  :draft="turn.res.draft"
+                  @done="turn.draftDone = 'saved'; turns = [...turns]"
+                  @cancel="turn.draftDone = 'cancelled'; turns = [...turns]"
+                />
+                <p v-else-if="turn.draftDone === 'saved'" class="text-xs text-green-600 dark:text-green-400">{{ t('ai.assistant.draft.saved') }}</p>
+
+                <p class="text-[10px] text-gray-400">{{ creditSummary(t, turn.res) }}</p>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-3 border-t border-gray-200 dark:border-gray-700 flex items-end gap-2">
+        <textarea
+          v-model="question"
+          rows="2"
+          :placeholder="t('ai.assistant.placeholder')"
+          :aria-label="t('ai.assistant.placeholder')"
+          class="flex-1 px-3 py-2 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-violet-500 resize-none"
+          data-assistant-input
+          @keydown="onKey"
+        ></textarea>
+        <button
+          type="button"
+          class="p-2.5 rounded-lg bg-violet-600 hover:bg-violet-700 text-white disabled:opacity-50"
+          :disabled="!question.trim() || sending"
+          :aria-label="t('ai.assistant.send')"
+          data-assistant-send
+          @click="ask()"
+        ><Send class="w-4 h-4" /></button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/ai/AppCitedAnswer.vue

@@ -0,0 +1,86 @@
+<script setup>
+// Jawaban AI bersitasi — dipakai tanya-jawab KB, widget asisten, dan sumber
+// balasan bot di inbox. Penanda `[n]` di teks merujuk `citations[].n`; penanda yang tak punya
+// sitasi dibiarkan sebagai teks biasa, jadi jawaban tetap terbaca walau sitasinya terpotong.
+//
+// Teks jawaban dirender sebagai potongan teks + tombol, BUKAN `v-html`: jawaban dihasilkan model
+// dari isi dokumen tenant, dan HTML di dalamnya tak boleh pernah dieksekusi.
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { BookOpen, Landmark } from '@lucide/vue'
+
+const props = defineProps({
+  answer: { type: String, default: '' },
+  // [{ n, document_id, title, heading, page, scope: 'company'|'platform', excerpt }]
+  citations: { type: Array, default: () => [] },
+  // Daftar sumber di bawah jawaban. Dimatikan oleh pemakai yang sudah menampilkannya sendiri.
+  showSources: { type: Boolean, default: true },
+})
+
+const { t } = useI18n()
+const active = ref(null)
+
+const byN = computed(() => Object.fromEntries(props.citations.map((c) => [String(c.n), c])))
+
+const parts = computed(() => {
+  const out = []
+  const re = /\[(\d+)\]/g
+  let last = 0
+  let m
+  const text = props.answer ?? ''
+  while ((m = re.exec(text))) {
+    if (m.index > last) out.push({ text: text.slice(last, m.index) })
+    out.push(byN.value[m[1]] ? { n: m[1] } : { text: m[0] })
+    last = m.index + m[0].length
+  }
+  if (last < text.length) out.push({ text: text.slice(last) })
+  return out
+})
+
+function toggle(n) {
+  active.value = active.value === String(n) ? null : String(n)
+}
+const activeCitation = computed(() => (active.value ? byN.value[active.value] : null))
+const scopeLabel = (c) => (c.scope === 'platform' ? t('ai.citation.platform') : t('ai.citation.company'))
+const where = (c) => [c.heading, c.page ? t('ai.citation.page', { page: c.page }) : null].filter(Boolean).join(' · ')
+</script>
+
+<template>
+  <div class="space-y-2" data-cited-answer>
+    <p class="text-sm text-gray-800 dark:text-gray-100 whitespace-pre-line break-words">
+      <template v-for="(p, i) in parts" :key="i">
+        <button
+          v-if="p.n"
+          type="button"
+          class="inline-flex items-center justify-center min-w-[1.25rem] h-4 px-1 mx-0.5 align-text-top rounded text-[10px] font-semibold transition-colors"
+          :class="active === p.n ? 'bg-blue-600 text-white' : 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/40 dark:text-blue-300'"
+          :aria-label="t('ai.citation.open', { n: p.n })"
+          :aria-expanded="active === p.n"
+          :data-citation="p.n"
+          @click="toggle(p.n)"
+        >{{ p.n }}</button>
+        <template v-else>{{ p.text }}</template>
+      </template>
+    </p>
+
+    <div v-if="activeCitation" class="rounded-lg border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 p-3" data-citation-detail>
+      <p class="text-xs font-medium text-blue-800 dark:text-blue-300 flex items-center gap-1.5">
+        <Landmark v-if="activeCitation.scope === 'platform'" class="w-3.5 h-3.5 shrink-0" />
+        <BookOpen v-else class="w-3.5 h-3.5 shrink-0" />
+        [{{ activeCitation.n }}] {{ activeCitation.title }}
+        <span class="font-normal text-blue-600/80 dark:text-blue-400/80">· {{ scopeLabel(activeCitation) }}</span>
+      </p>
+      <p v-if="where(activeCitation)" class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{{ where(activeCitation) }}</p>
+      <p v-if="activeCitation.excerpt" class="mt-1.5 text-xs text-gray-700 dark:text-gray-300 whitespace-pre-line">{{ activeCitation.excerpt }}</p>
+    </div>
+
+    <ul v-if="showSources && citations.length" class="space-y-1">
+      <li v-for="c in citations" :key="c.n">
+        <button type="button" class="text-left text-xs text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400" @click="toggle(c.n)">
+          [{{ c.n }}] {{ c.title }}<span v-if="where(c)"> — {{ where(c) }}</span>
+          <span v-if="c.scope === 'platform'" class="ml-1 text-[10px] uppercase tracking-wide text-amber-600 dark:text-amber-400">{{ t('ai.citation.platform') }}</span>
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>