Audit Scope Merge Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Merge the "Information System" and "Device" sections in ProjectCreateView and ProjectSettingsView into a single "受評範圍 (Audit Scope)" section, frontend-only, no BE / schema changes.

Architecture: Build a new AuditScopeSection.vue wrapper component that hosts the existing SystemPicker and DevicePicker components stacked vertically. Wire it into both views, replacing the separate tabs/steps. All save logic stays exactly the same — syncProjectSystems() and syncProjectDevices() continue to fire independently from the wrapper's events.

Tech Stack: Vue 3 (Composition API + <script setup lang="ts">), PrimeVue (TabView, Steps), vue-i18n, Pinia (menuStore), Vuelidate (existing).

Repository: All code work happens in ~/Projects/Billows/Audit-Manager/compliance-manager-fe/. Design + plan + changelog live in ~/Projects/Billows/Audit-Manager/compliance-manager-be/docs/.

Spec reference: docs/features/FR-017-2604-audit-scope-merge/design.md

Testing approach (READ THIS)

This is a Vue 3 frontend project that does NOT have a unit test framework for components (no Vitest / no @vue/test-utils in package.json). Only Cypress E2E tests exist (cypress:open, cypress:run).

Therefore TDD as "write failing test first" does not apply here. Each task uses manual browser verification as the validation step:

1. Make the change
2. Run dev server: npm run dev (port 5180)
3. Open the affected screen in browser
4. Verify the specific behavior listed in the task
5. Commit when verified

If there is an existing Cypress test for the affected view, run it after the change. Do NOT add new Cypress tests as part of this plan unless explicitly extending coverage — out of scope.

Branch convention

Work in branch feature/merge-project-setting-item (already created in BE repo; create matching branch in FE repo: git checkout -b feature/merge-project-setting-item).

Commit style

Mirror the BE repo's recent style:

• feat: ... for new components
• refactor: ... for view restructuring
• chore(i18n): ... for translation key changes
• docs: ... for changelog

Each commit must be focused — one task = one commit unless explicitly noted.

Don't do these

• ❌ Don't modify SystemPicker.vue or DevicePicker.vue (use them as-is via the wrapper)
• ❌ Don't touch DeviceManage.vue or InformationSystemManage.vue (independent management pages, out of scope)
• ❌ Don't touch any BE file
• ❌ Don't introduce new dependencies
• ❌ Don't delete the old i18n keys (tab_audit_systems, tab_devices, step_audit_systems, step_devices, etc.) — keep them for safety; cleanup is a follow-up PR
• ❌ Don't add the "future hierarchy" hint UI — user explicitly declined

Goal: Confirm clean baseline before changes.

Files: None (verification only)

• Step 1: Confirm BE branch and clean working tree (BE repo)

cd ~/Projects/Billows/Audit-Manager/compliance-manager-be
git status
git log -1 --oneline

Expected: on branch feature/merge-project-setting-item, last commit is 33d592d docs: 新增 audit-scope-merge ..., working tree clean.

• Step 2: Switch to FE repo and create matching branch

cd ~/Projects/Billows/Audit-Manager/compliance-manager-fe
git status
git checkout -b feature/merge-project-setting-item || git checkout feature/merge-project-setting-item
git status

Expected: clean working tree, on branch feature/merge-project-setting-item.

• Step 3: Smoke-test current dev server

cd ~/Projects/Billows/Audit-Manager/compliance-manager-fe
npm run dev

In browser, open /project/projects/new and /project/projects/<some-existing-uid>/settings. Verify both load. Note current Tab 2 = Audit Systems and Tab 4 = Devices in Settings; Step 1 = Audit Systems and Step 3 = Devices in Create.

Stop the dev server (Ctrl-C). No commit needed for this task.

Goal: Define all new translation keys before they're referenced from views.

Files:

• Modify: src/config/locales/i18n/zh-tw/project-settings.json
• Modify: src/config/locales/i18n/en/project-settings.json
• Modify: src/config/locales/i18n/zh-tw/project-create.json
• Modify: src/config/locales/i18n/en/project-create.json

• Step 1: Inspect current key shape in each file

cd ~/Projects/Billows/Audit-Manager/compliance-manager-fe
grep -n "tab_audit_systems\|tab_devices" src/config/locales/i18n/zh-tw/project-settings.json
grep -n "step_audit_systems\|step_devices\|review_audit_systems\|review_devices" src/config/locales/i18n/zh-tw/project-create.json

Note the surrounding key naming and JSON nesting (e.g., flat keys vs nested). All new keys must follow the same pattern.

• Step 2: Add new keys to zh-tw/project-settings.json

Add these new keys (place near existing tab_* keys, do NOT remove old ones):

"tab_audit_scope": "受評範圍 ({systems} 系統 / {devices} 設備)",
"section_audit_scope": "受評範圍",
"section_audit_scope_desc": "本專案要稽核的資訊系統與設備"

• Step 3: Add corresponding keys to en/project-settings.json

"tab_audit_scope": "Audit Scope ({systems} systems / {devices} devices)",
"section_audit_scope": "Audit Scope",
"section_audit_scope_desc": "Information systems and devices in scope for this audit"

• Step 4: Add new keys to zh-tw/project-create.json

Add these (place near existing step_* keys):

"step_audit_scope": "受評範圍",
"audit_scope_title": "受評範圍",
"audit_scope_subtitle": "選擇本專案要稽核的系統與設備",
"review_audit_scope": "受評範圍",
"review_audit_scope_systems": "資訊系統",
"review_audit_scope_devices": "設備"

• Step 5: Add corresponding keys to en/project-create.json

"step_audit_scope": "Audit Scope",
"audit_scope_title": "Audit Scope",
"audit_scope_subtitle": "Select systems and devices for this audit",
"review_audit_scope": "Audit Scope",
"review_audit_scope_systems": "Information Systems",
"review_audit_scope_devices": "Devices"

• Step 6: Validate JSON syntax

cd ~/Projects/Billows/Audit-Manager/compliance-manager-fe
for f in src/config/locales/i18n/zh-tw/project-settings.json \
         src/config/locales/i18n/en/project-settings.json \
         src/config/locales/i18n/zh-tw/project-create.json \
         src/config/locales/i18n/en/project-create.json; do
  python3 -c "import json; json.load(open('$f'))" && echo "OK: $f"
done

Expected: 4 lines of OK: .... If any fails, fix the JSON before continuing.

• Step 7: Commit

git add src/config/locales/i18n/zh-tw/project-settings.json \
        src/config/locales/i18n/en/project-settings.json \
        src/config/locales/i18n/zh-tw/project-create.json \
        src/config/locales/i18n/en/project-create.json
git commit -m "chore(i18n): 新增 audit-scope-merge 翻譯 key (zh-tw + en)"

Goal: Build the wrapper component that hosts SystemPicker + DevicePicker stacked.

Files:

• Create: src/components/grc/AuditScopeSection.vue

• Step 1: Verify inner picker i18n keys exist (pre-flight check)

The wrapper uses these existing keys for inner picker headers; confirm they're already present:

cd ~/Projects/Billows/Audit-Manager/compliance-manager-fe
grep -n "section_audit_systems\|section_devices" \
  src/config/locales/i18n/zh-tw/project-settings.json \
  src/config/locales/i18n/en/project-settings.json

Expected: 4 matches (2 keys × 2 locales). If any are missing, add them BEFORE proceeding (use the same wording you'd see in current SystemPicker / DevicePicker #header slots).

• Step 2: Create the file with the full component

<script setup lang="ts">
/**
 * 受評範圍 section — 包裝 SystemPicker + DevicePicker，stacked 版面
 * 用於 ProjectCreateView 和 ProjectSettingsView
 *
 * 設計：純 layout wrapper。所有 props/emits 透傳給內部 picker。
 * 不做 API 呼叫、不存內部狀態。
 */
import { useI18n } from 'vue-i18n'
import SystemPicker from '@/components/grc/SystemPicker.vue'
import DevicePicker from '@/components/grc/DevicePicker.vue'

interface SystemMenuItem {
    id: string
    name: string
    abbreviation: string | null
}

withDefaults(defineProps<{
    // System
    selectedSystemIds: string[]
    selectedSystemDetails: Record<string, any>
    infoSystemMenu: SystemMenuItem[]
    // Device
    selectedDevices: string[]
    selectedDeviceDetails: Record<string, any>
    deviceMenu: any[]
    // Shared
    userMenu: any[]
    readonly?: boolean
    confirmBeforeRemove?: boolean
    /** 是否顯示 section 標題（Settings tab 用 false，Create step 用 true） */
    showSectionHeader?: boolean
}>(), {
    readonly: false,
    confirmBeforeRemove: false,
    showSectionHeader: false,
})

defineEmits<{
    // System
    'update:selectedSystemIds': [ids: string[]]
    'update:selectedSystemDetails': [details: Record<string, any>]
    'update:infoSystemMenu': [menu: SystemMenuItem[]]
    'change-systems': []
    // Device
    'update:selectedDevices': [ids: string[]]
    'update:selectedDeviceDetails': [details: Record<string, any>]
    'change-devices': []
    'device-created': []
    'device-detail-saved': []
}>()

const { t } = useI18n()
</script>

<template>
    <div class="flex flex-column gap-4">
        <!-- Optional section header (used by Create wizard step) -->
        <div v-if="showSectionHeader">
            <h3 class="m-0">{{ t('lang.project_create.audit_scope_title') }}</h3>
            <p class="m-0 mt-2 text-sm" style="color: var(--text-muted);">
                {{ t('lang.project_create.audit_scope_subtitle') }}
            </p>
        </div>

        <!-- System block (top) -->
        <div class="border-round-lg p-4 surface-section"
             style="border: 1px solid var(--surface-border)">
            <SystemPicker
                :selectedIds="selectedSystemIds"
                :systemMenu="infoSystemMenu"
                :systemDetails="selectedSystemDetails"
                :userMenu="userMenu"
                :readonly="readonly"
                :confirmBeforeRemove="confirmBeforeRemove"
                @update:selectedIds="$emit('update:selectedSystemIds', $event)"
                @update:systemMenu="$emit('update:infoSystemMenu', $event)"
                @update:systemDetails="$emit('update:selectedSystemDetails', $event)"
                @change="$emit('change-systems')"
            >
                <template #header>
                    <h4 class="m-0">{{ t('lang.project_settings.section_audit_systems') }}</h4>
                </template>
            </SystemPicker>
        </div>

        <!-- Device block (bottom) -->
        <div class="border-round-lg p-4 surface-section"
             style="border: 1px solid var(--surface-border)">
            <DevicePicker
                :selectedIds="selectedDevices"
                :deviceDetails="selectedDeviceDetails"
                :deviceMenu="deviceMenu"
                :readonly="readonly"
                :confirmBeforeRemove="confirmBeforeRemove"
                @update:selectedIds="$emit('update:selectedDevices', $event)"
                @update:deviceDetails="$emit('update:selectedDeviceDetails', $event)"
                @change="$emit('change-devices')"
                @created="$emit('device-created')"
                @detailSaved="$emit('device-detail-saved')"
            >
                <template #header>
                    <h4 class="m-0">{{ t('lang.project_settings.section_devices') }}</h4>
                </template>
            </DevicePicker>
        </div>
    </div>
</template>

• Step 3: Sanity check — open file in editor, verify no syntax errors

cd ~/Projects/Billows/Audit-Manager/compliance-manager-fe
ls -la src/components/grc/AuditScopeSection.vue

Run dev server briefly to check Vue compilation:

npm run dev

The dev server should start without errors. AuditScopeSection isn't used yet, so no visual to check. Stop the server.

• Step 4: Commit

git add src/components/grc/AuditScopeSection.vue
git commit -m "feat(grc): 新增 AuditScopeSection 元件包裝 System+Device picker"

Goal: Replace Tab 2 (Audit Systems) and Tab 4 (Devices) with a single new Tab 2 (Audit Scope).

Files:

• Modify: src/views/project/ProjectSettingsView.vue

• Step 1: Add AuditScopeSection import

In the <script setup> section, find these lines:

import SystemPicker from '@/components/grc/SystemPicker.vue'
import DevicePicker from '@/components/grc/DevicePicker.vue'

Replace with:

import AuditScopeSection from '@/components/grc/AuditScopeSection.vue'

(Remove both old picker imports — the wrapper handles them internally.)

• Step 2: Replace Tab 2 and Tab 4 in template with new merged Tab 2

In the <template>, locate the existing Tab 2 (Audit Systems, line ~254):

<!-- Tab 2: Audit Systems -->
<TabPanel :header="t('lang.project_settings.tab_audit_systems', { count: selectedSystemIds.length })">
    <div class="border-round-xl p-5 shadow-3 surface-card"
         style="border: 1px solid var(--surface-border)">
        <SystemPicker v-model:selectedIds="selectedSystemIds"
                      v-model:systemMenu="infoSystemMenu"
                      v-model:systemDetails="selectedSystemDetails"
                      :userMenu="userMenu ?? []"
                      :readonly="!canEdit"
                      :confirmBeforeRemove="true"
                      @change="syncProjectSystems">
            <template #header>...</template>
        </SystemPicker>
    </div>
</TabPanel>

Replace with the new merged Tab 2:

<!-- Tab 2: Audit Scope (merged Systems + Devices) -->
<TabPanel :header="t('lang.project_settings.tab_audit_scope', {
    systems: selectedSystemIds.length,
    devices: selectedDevices.length
})">
    <div class="border-round-xl p-5 shadow-3 surface-card"
         style="border: 1px solid var(--surface-border)">
        <AuditScopeSection
            v-model:selectedSystemIds="selectedSystemIds"
            v-model:selectedSystemDetails="selectedSystemDetails"
            v-model:infoSystemMenu="infoSystemMenu"
            v-model:selectedDevices="selectedDevices"
            v-model:selectedDeviceDetails="selectedDeviceDetails"
            :deviceMenu="deviceMenu ?? []"
            :userMenu="userMenu ?? []"
            :readonly="!canEdit"
            :confirmBeforeRemove="true"
            @change-systems="syncProjectSystems"
            @change-devices="syncProjectDevices"
            @device-created="menuStore.fetchDeviceMenu()"
            @device-detail-saved="fetchProject(); menuStore.fetchDeviceMenu()"
        />
    </div>
</TabPanel>

• Step 3: Delete the old Tab 4 (Devices)

Locate the existing Tab 4 (line ~291 in the original file):

<!-- Tab 4: Devices -->
<TabPanel :header="t('lang.project_settings.tab_devices', { count: selectedDevices.length })">
    <div class="border-round-xl p-5 shadow-3 surface-card"
         style="border: 1px solid var(--surface-border)">
        <DevicePicker v-model:selectedIds="selectedDevices" .../>
    </div>
</TabPanel>

Delete the entire <TabPanel> block (Tab 3 Participants stays unchanged and becomes the new Tab 3).

• Step 4: Verify final tab order

The TabView should now have exactly 3 panels in this order:

1. 基本資訊 (Tab 1, unchanged)
2. 受評範圍 (Tab 2, NEW merged)
3. 參與者 (Tab 3, was Tab 3, unchanged)

• Step 5: Browser verification

npm run dev

Open /project/projects/<existing-uid>/settings (use a real project UID from your dev environment).

Verify:

• Three tabs visible: 基本資訊 / 受評範圍 / 參與者
• Tab 2 header shows count format 受評範圍 (3 系統 / 5 設備) (numbers should match what was in the project before)
• Click Tab 2 → see two stacked sections: 資訊系統 (top) + 設備 (bottom)
• Both pickers show pre-selected items correctly
• Add a system → network tab shows PUT /api/1.0/grc-project/<id> with audit_systems body
• Add a device → network tab shows PUT /api/1.0/grc-project/<id> with devices body
• Both PUT requests succeed (200)
• Switch to other tab and back → state preserved
• Login as a non-manager user → both blocks render readonly

Stop the dev server.

• Step 6: Commit

git add src/views/project/ProjectSettingsView.vue
git commit -m "refactor(project-settings): 合併稽核系統與設備 tab 為「受評範圍」"

Goal: Reorder steps to (basic / participants / audit-scope / review). Replace step 1 (system) and step 3 (device) with a single audit-scope step. Update review section.

Files:

• Modify: src/views/project/ProjectCreateView.vue

• Step 1: Update imports

Find these lines:

import SystemPicker from '@/components/grc/SystemPicker.vue'
import DevicePicker from '@/components/grc/DevicePicker.vue'

Replace with:

import AuditScopeSection from '@/components/grc/AuditScopeSection.vue'

• Step 2: Update stepsItems array (5 → 4 steps with new order)

Find the existing stepsItems computed (line ~38):

const stepsItems = computed(() => [
    { label: t('lang.project_create.step_basic_info') },
    { label: t('lang.project_create.step_audit_systems') },
    { label: t('lang.project_create.step_participants_depts') },
    { label: t('lang.project_create.step_devices') },
    { label: t('lang.project_create.step_review') },
])

Replace with:

const stepsItems = computed(() => [
    { label: t('lang.project_create.step_basic_info') },
    { label: t('lang.project_create.step_participants_depts') },
    { label: t('lang.project_create.step_audit_scope') },
    { label: t('lang.project_create.step_review') },
])

New step indices:

• 0: 基本資訊 (was 0)
• 1: 參與者 (was 2)
• 2: 受評範圍 (NEW, replaces was-1 + was-3)
• 3: 確認 (was 4)

• Step 3: Update step content blocks in template (atomic, do all in one edit)

⚠️ Critical: do all 4 of these changes in a single edit pass. Mid-state (e.g., two blocks both keyed currentStep === 2) will break the wizard.

The template currently has 5 v-if / v-else-if blocks for currentStep === 0..4. Restructure to 4 blocks for currentStep === 0..3 as follows:

Recommended edit order to avoid duplicate keys mid-edit:

1. First delete BOTH old "Audit Systems" (cond=1) and "Devices" (cond=3) blocks
2. Then renumber Participants block (cond=2 → cond=1)
3. Then renumber Review block (cond=4 → cond=3)
4. Finally INSERT the new Audit Scope block (cond=2) between Participants and Review

The new Audit Scope block to insert:

<!-- Step 2: Audit Scope (merged Systems + Devices) -->
<div v-else-if="currentStep === 2" class="flex flex-column gap-5">
    <AuditScopeSection
        v-model:selectedSystemIds="selectedSystemIds"
        v-model:selectedSystemDetails="selectedSystemDetails"
        v-model:infoSystemMenu="infoSystemMenu"
        v-model:selectedDevices="selectedDevices"
        v-model:selectedDeviceDetails="selectedDeviceDetails"
        :deviceMenu="deviceMenu ?? []"
        :userMenu="userMenu ?? []"
        :showSectionHeader="true"
        @device-created="menuStore.fetchDeviceMenu()"
    />
</div>

(Note: in Create wizard, change-systems / change-devices events are not wired — there's no real-time sync during create; everything saves via handleCreate at the final step.)

Step 3 (Review): confirmed renumbered to v-else-if="currentStep === 3" (per the table above).

• Step 4: Update Review section to merge Audit Systems + Devices into single Audit Scope block

Inside the Step 3 (review) block, locate these two existing sub-sections:

<!-- Audit Systems --> ... (currentStep = 1 edit link)
<!-- Devices --> ... (currentStep = 3 edit link)

Replace BOTH with this single combined block (place it AFTER the Participants block to match the new step order: basic → participants → audit-scope):

<!-- Audit Scope (merged Systems + Devices) -->
<div class="p-4 border-round-lg surface-section" style="border: 1px solid var(--surface-border)">
    <div class="flex align-items-center justify-content-between mb-3">
        <span class="font-medium">{{ t('lang.project_create.review_audit_scope') }}</span>
        <button class="cursor-pointer border-none bg-transparent text-primary"
                @click="currentStep = 2">{{ t('lang.project_create.btn_edit') }}</button>
    </div>

    <!-- Systems sub-block -->
    <div class="mb-4">
        <div class="text-sm text-color-secondary mb-2">{{ t('lang.project_create.review_audit_scope_systems') }}</div>
        <div v-if="selectedSystemIds.length > 0" class="flex flex-column gap-2">
            <div v-for="sysId in selectedSystemIds" :key="sysId"
                 class="flex align-items-center justify-content-between px-3 py-2 border-round surface-card"
                 style="border: 1px solid var(--surface-border)">
                <span class="font-medium">{{ infoSystemMenu.find(s => s.id === sysId)?.name ?? sysId }}</span>
                <span v-if="infoSystemMenu.find(s => s.id === sysId)?.abbreviation"
                      class="text-color-secondary text-sm">
                    {{ infoSystemMenu.find(s => s.id === sysId)?.abbreviation }}
                </span>
            </div>
        </div>
        <span v-else class="text-color-secondary">{{ t('lang.project_create.review_none') }}</span>
    </div>

    <!-- Devices sub-block -->
    <div>
        <div class="text-sm text-color-secondary mb-2">{{ t('lang.project_create.review_audit_scope_devices') }}</div>
        <div v-if="selectedDevices.length > 0" class="flex flex-wrap gap-2">
            <span v-for="devId in selectedDevices" :key="devId"
                  class="inline-flex align-items-center gap-1 px-2 py-1 border-round surface-card"
                  style="border: 1px solid var(--surface-border)">
                <i class="pi pi-desktop"></i>
                {{ (deviceMenu?.find((d: any) => d.uid === devId)?.name) ?? devId }}
            </span>
        </div>
        <span v-else class="text-color-secondary">{{ t('lang.project_create.review_none') }}</span>
    </div>
</div>

Also: update the Participants edit link (still in review block) — its @click="currentStep = 2" was pointing at old step 2 (participants). Now participants are at step 1, so change to @click="currentStep = 1".

Final review block sub-sections in this order:

1. Basic Info (@click="currentStep = 0")
2. Participants (@click="currentStep = 1")
3. Audit Scope (@click="currentStep = 2")

• Step 5: Update handleNext validation gate (if any depends on step index)

Look at handleNext (around line 108):

async function handleNext() {
    if (currentStep.value === 0) {
        const valid = await v$.value.$validate()
        if (!valid) return
    }
    currentStep.value++
}

This is fine — only step 0 has validation. New step 0 is still basic info. No change needed.

Look at handleBack (around line 116):

function handleBack() {
    if (currentStep.value === 0) {
        router.push({ name: 'project-list' })
    } else {
        currentStep.value--
        if (currentStep.value === 0) v$.value.$reset()
    }
}

No change needed — still resets validation when returning to step 0.

• Step 6: Verify handleCreate payload still matches BE expectation

Look at handleCreate (around line 125). It builds audit_systems from selectedSystemIds and devices from selectedDevices. This is unchanged because the underlying refs are unchanged — only the UI grouping moved. No code change needed here.

• Step 7: Browser verification

npm run dev

Open /project/projects/new. Verify:

• Step indicator shows 4 steps: 基本資訊 → 參與者 → 受評範圍 → 確認
• Step 0: basic info form works (validation on Next)
• Step 1: ParticipantPicker works (add at least one participant)
• Step 2: AuditScopeSection visible with section header "受評範圍" and subtitle; both stacked sections work
• Step 2: add a system, add a device
• Step 3: review page shows 3 sections (basic / participants / audit scope); audit scope shows BOTH systems and devices sub-blocks correctly
• Click "編輯" on audit scope → returns to step 2
• Click "編輯" on participants → returns to step 1
• Click "編輯" on basic info → returns to step 0
• Click "建立專案" → POST /oscal-project/start succeeds (200), redirects to project overview

Empty-state check:

• Restart create flow, skip step 2 entirely (no system, no device) → still creates successfully

Stop the dev server.

• Step 8: Commit

git add src/views/project/ProjectCreateView.vue
git commit -m "refactor(project-create): 4 步驟重構 + 合併「受評範圍」步驟"

Goal: Confirm unrelated views still work — especially anything that consumes Device or InformationSystem data outside the changed views.

Files: None (verification only)

• Step 1: Start dev server

npm run dev

• Step 2: ProjectAuditorOverview

Open /project/projects/<existing-uid>/auditor-overview. Verify:

• Page renders normally

• Audit systems and devices info (if displayed) still appear correctly

• Step 3: JobExecutionDrawer

Open any project's job execution view, click into a job that has devices attached. Verify:

• Drawer opens

• Devices listed correctly

• No console errors

• Step 4: DeviceManage independent page

Open /device/device-manage. Verify:

• List loads

• Can create a new device

• Can edit an existing device

• Step 5: InformationSystemManage independent page

Open /information-system/manage. Verify:

• List loads

• Can create a new system

• Can edit an existing system

• Step 6: Locale switching

In Settings or anywhere with the language switcher, toggle between zh-tw and en. Verify:

• New tab/step labels translate correctly
• No raw key strings (e.g., lang.project_settings.tab_audit_scope) visible

Stop the dev server. No commit needed.

Goal: Confirm we didn't leave any orphaned/unused references to old keys, and check if old keys can be safely removed in a follow-up. This task does NOT delete keys — just produces a report.

Files: None (audit only)

• Step 1: Search for references to old keys

cd ~/Projects/Billows/Audit-Manager/compliance-manager-fe
echo "=== tab_audit_systems references ==="
grep -rn "tab_audit_systems" src/ --include="*.vue" --include="*.ts" --include="*.js"
echo "=== tab_devices references ==="
grep -rn "tab_devices" src/ --include="*.vue" --include="*.ts" --include="*.js"
echo "=== step_audit_systems references ==="
grep -rn "step_audit_systems" src/ --include="*.vue" --include="*.ts" --include="*.js"
echo "=== step_devices references ==="
grep -rn "step_devices" src/ --include="*.vue" --include="*.ts" --include="*.js"
echo "=== review_audit_systems references ==="
grep -rn "review_audit_systems" src/ --include="*.vue" --include="*.ts" --include="*.js"
echo "=== review_devices references ==="
grep -rn "review_devices" src/ --include="*.vue" --include="*.ts" --include="*.js"

Expected: only the i18n JSON files themselves should match (no .vue / .ts / .js references). If any code file still uses these keys, that's a bug — report and fix.

• Step 2: Verify new keys are wired correctly

echo "=== tab_audit_scope ==="
grep -rn "tab_audit_scope" src/
echo "=== step_audit_scope ==="
grep -rn "step_audit_scope" src/
echo "=== review_audit_scope ==="
grep -rn "review_audit_scope" src/

Expected: each new key appears in 2 locale files + at least one Vue file.

• Step 3: Document findings in PR description (later)

If old keys are confirmed orphaned, note in the PR description that they can be removed in a follow-up cleanup PR. Do NOT remove them in this PR — keep for safety.

No commit needed.

Goal: Document the change per CLAUDE.md convention.

Files:

• Create: ~/Projects/Billows/Audit-Manager/compliance-manager-be/docs/changelog/2026-04-25-audit-scope-merge.md

• Step 1: Switch to BE repo

cd ~/Projects/Billows/Audit-Manager/compliance-manager-be
git status

Should be on feature/merge-project-setting-item, clean working tree.

• Step 2: Create changelog file

Create docs/changelog/2026-04-25-audit-scope-merge.md with this content:

# 2026-04-25 — 專案受評範圍合併（Audit Scope Consolidation）

## 需求說明

ProjectCreate 與 ProjectSettings 兩個畫面內，「資訊系統」與「設備」原本分屬獨立 step / tab。從 user 視角兩者都屬「本專案要稽核的範圍」之組成元件，分散造成認知負擔。

本次將兩者在 UI 層合併為單一 section「受評範圍 (Audit Scope)」。BE / schema 完全不動，作為將來 OSCAL SSP 匯出 / 跨模組引用的階段性踏腳石。

設計文件：`docs/features/FR-017-2604-audit-scope-merge/design.md`
實作計畫：`docs/features/FR-017-2604-audit-scope-merge/implementation-plan.md`

## 變更範圍

### Frontend (compliance-manager-fe)

| 檔案 | 動作 |
|------|------|
| `src/components/grc/AuditScopeSection.vue` | 新增 — 包裝 SystemPicker + DevicePicker，stacked 版面 |
| `src/views/project/ProjectSettingsView.vue` | 修改 — 4 tabs → 3 tabs（合併 Tab 2 系統 + Tab 4 設備 為新 Tab 2 受評範圍） |
| `src/views/project/ProjectCreateView.vue` | 修改 — 5 steps → 4 steps，順序改為：基本資訊 → 參與者 → 受評範圍 → 確認 |
| `src/config/locales/i18n/zh-tw/project-settings.json` | 修改 — 新增 `tab_audit_scope` 等 key（保留舊 key） |
| `src/config/locales/i18n/en/project-settings.json` | 修改 — 同上（英文） |
| `src/config/locales/i18n/zh-tw/project-create.json` | 修改 — 新增 `step_audit_scope`、`review_audit_scope` 等 key |
| `src/config/locales/i18n/en/project-create.json` | 修改 — 同上（英文） |

### Backend

無變更。

## API 變更

無。`PUT /api/1.0/grc-project/<id>` 仍以 `audit_systems` + `devices` 兩個 key 各自接收，FE 仍各自呼叫 sync。

## 行為差異

| 情境 | 之前 | 現在 |
|------|------|------|
| ProjectSettings tab 數 | 4（基本/系統/參與者/設備） | 3（基本/受評範圍/參與者） |
| ProjectSettings 受評範圍 tab header | n/a | `受評範圍 (3 系統 / 5 設備)` |
| ProjectCreate step 數 | 5 | 4 |
| ProjectCreate step 順序 | 基本→系統→參與者→設備→確認 | 基本→參與者→受評範圍→確認 |
| ProjectCreate 確認頁區段 | 4（基本/系統/參與者/設備） | 3（基本/參與者/受評範圍）|
| 既有 SystemPicker / DevicePicker 元件 | — | 完全不變，由 AuditScopeSection 包裝 |
| 存檔 API call | `PUT` 各自 sync | `PUT` 各自 sync（不變） |

## Phase 2 預留（不在本次）

- OSCAL SSP exporter（可選 a 純讀現有表 / b 加 mapping 小表 / c 加 FK）
- ComponentService 抽象（給 control-implementation / POA&M / evidence ref 引用）
- 樹狀 ComponentPicker（系統下層展示設備）

## 不做的事

- 不動 BE / schema
- 不動 jedi-device 套件 / jedi_information_system 模組
- 不動 SystemPicker / DevicePicker 元件本身
- 不動 DeviceManage / InformationSystemManage 獨立管理頁
- 不動 job_execution_device_mapping、evidence、device_view 聚合
- 不刪除舊的 i18n key（之後 PR 再清理）

## 參考

- 設計文件：`docs/features/FR-017-2604-audit-scope-merge/design.md`
- 實作計畫：`docs/features/FR-017-2604-audit-scope-merge/implementation-plan.md`

• Step 3: Commit changelog

git add docs/changelog/2026-04-25-audit-scope-merge.md
git commit -m "docs(changelog): audit-scope-merge 變更紀錄"

Goal: Final sanity pass before declaring done.

Files: None (verification only)

• Step 1: Review FE commits

cd ~/Projects/Billows/Audit-Manager/compliance-manager-fe
git log --oneline feature/merge-project-setting-item ^main 2>/dev/null || git log --oneline -10

Expected commits (in order):

1. chore(i18n): 新增 audit-scope-merge 翻譯 key (zh-tw + en)
2. feat(grc): 新增 AuditScopeSection 元件包裝 System+Device picker
3. refactor(project-settings): 合併稽核系統與設備 tab 為「受評範圍」
4. refactor(project-create): 4 步驟重構 + 合併「受評範圍」步驟

• Step 2: Review BE commits

cd ~/Projects/Billows/Audit-Manager/compliance-manager-be
git log --oneline feature/merge-project-setting-item ^main 2>/dev/null || git log --oneline -5

Expected commits:

1. docs: 新增 audit-scope-merge 功能設計文件 + 加 .superpowers/ 到 gitignore
2. docs(changelog): audit-scope-merge 變更紀錄

• Step 3: Final cross-browser smoke test

Run dev server one more time. Walk through:

• Create a new project end-to-end (4 steps, finish with create)

• Edit the new project's settings (verify audit scope tab works for both add + remove of systems and devices)

• Step 4: Report completion

This implementation is complete. The implementer should report:

• All tasks completed
• All commits in place
• Manual verification passed
• Open PRs in both repos with branch feature/merge-project-setting-item

PR descriptions should reference docs/features/FR-017-2604-audit-scope-merge/design.md and docs/changelog/2026-04-25-audit-scope-merge.md.

Test data setup

If you need a clean dev project to test with: log in as blsit / Billows@123! (tenant_id=102, org_unit_id=99). Use any existing project UID for Settings tests, or create a new one for the Create flow.

Common pitfalls

• i18n raw key showing in browser: forgot to add the key in one of the 4 locale files, or typo in the key reference
• update:selectedSystemIds not firing: check the wrapper passes through the right event name (it's update:selectedIds from inner SystemPicker → re-emitted as update:selectedSystemIds from wrapper)
• Device count not updating in tab header: the wrapper passes selectedDevices through v-model; verify both :value binding and update: event are correctly wired

Out of scope (do NOT do)

• Adding the "future hierarchy" hint UI
• Changing tab/step header count display format from "3 系統 / 5 設備" to anything else
• Removing old i18n keys
• Adding Cypress tests
• Modifying SystemPicker / DevicePicker
• Any BE change