feat: add NationGeneralsView and NationPersonnelView components for managing generals and personnel in the nation

app/game-api/src/router/nation/index.ts

@@ -1,10 +1,874 @@
 import { TRPCError } from '@trpc/server';
 import { z } from 'zod';
 
+import { asNumber, asRecord } from '@sammo-ts/common';
+import {
+    DomesticTraitLoader,
+    loadDomesticTraitModules,
+    isDomesticTraitKey,
+    loadNationTraitModules,
+    NationTraitLoader,
+    isNationTraitKey,
+    loadPersonalityTraitModules,
+    PersonalityTraitLoader,
+    isPersonalityTraitKey,
+    loadWarTraitModules,
+    WarTraitLoader,
+    isWarTraitKey,
+    type GeneralActionContext,
+    type General as LogicGeneral,
+    type Nation as LogicNation,
+    type TriggerValue,
+} from '@sammo-ts/logic';
+
+import type { WorldStateRow } from '../../context.js';
 import { authedProcedure, router } from '../../trpc.js';
 import { getMyGeneral } from '../shared/general.js';
 
+type PermissionKind = 'normal' | 'ambassador' | 'auditor';
+
+type TraitNameMap = Map<string, { name: string; info: string }>;
+
+type TraitCache = {
+    domestic: TraitNameMap;
+    war: TraitNameMap;
+    personality: TraitNameMap;
+    nation: TraitNameMap;
+};
+
+type NationTraitModule = Awaited<ReturnType<typeof loadNationTraitModules>>[number] | null;
+
+type NationIncomeContext = {
+    trait: NationTraitModule;
+    context: GeneralActionContext;
+    rate: number;
+};
+
+type NationIncomeRow = {
+    id: number;
+    name: string;
+    color: string;
+    capitalCityId: number | null;
+    level: number;
+    typeCode: string;
+    meta: unknown;
+    gold?: number;
+    rice?: number;
+};
+
+type CityIncomeRow = {
+    id: number;
+    name: string;
+    level: number;
+    nationId: number;
+    region: number;
+    population: number;
+    populationMax: number;
+    agriculture: number;
+    agricultureMax: number;
+    commerce: number;
+    commerceMax: number;
+    security: number;
+    securityMax: number;
+    trust: number;
+    trade: number;
+    defence: number;
+    defenceMax: number;
+    wall: number;
+    wallMax: number;
+    supplyState: number;
+    frontState: number;
+    meta: unknown;
+};
+
+type GeneralListRow = {
+    id: number;
+    name: string;
+    npcState: number;
+    nationId: number;
+    cityId: number;
+    troopId: number;
+    officerLevel: number;
+    leadership: number;
+    strength: number;
+    intel: number;
+    experience: number;
+    dedication: number;
+    injury: number;
+    gold: number;
+    rice: number;
+    crew: number;
+    personalCode: string;
+    specialCode: string;
+    special2Code: string;
+    meta: unknown;
+    penalty: unknown;
+};
+
+type GeneralOfficerRow = {
+    id: number;
+    name: string;
+    npcState: number;
+    officerLevel: number;
+    cityId: number;
+    leadership: number;
+    strength: number;
+    intel: number;
+    meta: unknown;
+};
+
+const traitCache: TraitCache = {
+    domestic: new Map(),
+    war: new Map(),
+    personality: new Map(),
+    nation: new Map(),
+};
+
+const DEFAULT_CHIEF_STAT_MIN = 65;
+
+const normalizeTraitKey = (value: string | null | undefined): string | null => {
+    if (!value || value === 'None') {
+        return null;
+    }
+    return value;
+};
+
+const readMetaNumber = (meta: Record<string, unknown>, key: string, fallback: number): number => {
+    const raw = meta[key];
+    return typeof raw === 'number' && Number.isFinite(raw) ? raw : fallback;
+};
+
+const resolveOfficerCity = (meta: Record<string, unknown>): number => {
+    const camel = readMetaNumber(meta, 'officerCity', 0);
+    if (camel > 0) {
+        return camel;
+    }
+    return readMetaNumber(meta, 'officer_city', 0);
+};
+
+const resolveBelong = (meta: Record<string, unknown>): number => readMetaNumber(meta, 'belong', 0);
+
+const resolvePermission = (meta: Record<string, unknown>): PermissionKind => {
+    const value = meta.permission;
+    if (value === 'ambassador' || value === 'auditor') {
+        return value;
+    }
+    return 'normal';
+};
+
+const resolveChiefStatMin = (worldState: WorldStateRow | null): number => {
+    if (!worldState) {
+        return DEFAULT_CHIEF_STAT_MIN;
+    }
+    const config = asRecord(worldState.config);
+    const stat = asRecord(config.stat);
+    return asNumber(stat.chiefMin, DEFAULT_CHIEF_STAT_MIN);
+};
+
+const resolveNationRate = (nation: NationIncomeRow): number => {
+    const meta = asRecord(nation.meta);
+    return asNumber(meta.rate, 20);
+};
+
+const checkSecretMaxPermission = (penalty: Record<string, unknown>): number => {
+    if (penalty.noTopSecret) {
+        return 1;
+    }
+    if (penalty.noChief) {
+        return 1;
+    }
+    if (penalty.noAmbassador) {
+        return 2;
+    }
+    return 4;
+};
+
+const loadTraitNames = async (
+    keys: Array<string | null>,
+    kind: keyof TraitCache
+): Promise<TraitNameMap> => {
+    const cache = traitCache[kind];
+    const unique = Array.from(new Set(keys.filter((key): key is string => Boolean(key))));
+    const missing = unique.filter((key) => !cache.has(key));
+
+    if (!missing.length) {
+        return cache;
+    }
+
+    if (kind === 'domestic') {
+        const filtered = missing.filter((key) => isDomesticTraitKey(key));
+        if (filtered.length) {
+            const modules = await loadDomesticTraitModules(filtered, new DomesticTraitLoader());
+            for (const module of modules) {
+                cache.set(module.key, { name: module.name, info: module.info ?? '' });
+            }
+        }
+    } else if (kind === 'war') {
+        const filtered = missing.filter((key) => isWarTraitKey(key));
+        if (filtered.length) {
+            const modules = await loadWarTraitModules(filtered, new WarTraitLoader());
+            for (const module of modules) {
+                cache.set(module.key, { name: module.name, info: module.info ?? '' });
+            }
+        }
+    } else if (kind === 'personality') {
+        const filtered = missing.filter((key) => isPersonalityTraitKey(key));
+        if (filtered.length) {
+            const modules = await loadPersonalityTraitModules(filtered, new PersonalityTraitLoader());
+            for (const module of modules) {
+                cache.set(module.key, { name: module.name, info: module.info ?? '' });
+            }
+        }
+    } else if (kind === 'nation') {
+        const filtered = missing.filter((key) => isNationTraitKey(key));
+        if (filtered.length) {
+            const modules = await loadNationTraitModules(filtered, new NationTraitLoader());
+            for (const module of modules) {
+                cache.set(module.key, { name: module.name, info: module.info ?? '' });
+            }
+        }
+    }
+
+    return cache;
+};
+
+const buildIncomeContext = (nation: NationIncomeRow): GeneralActionContext => {
+    const nationMeta = asRecord(nation.meta) as Record<string, TriggerValue>;
+    const general: LogicGeneral = {
+        id: 0,
+        name: 'SYSTEM',
+        nationId: nation.id,
+        cityId: 0,
+        troopId: 0,
+        stats: { leadership: 0, strength: 0, intelligence: 0 },
+        experience: 0,
+        dedication: 0,
+        officerLevel: 0,
+        role: {
+            personality: null,
+            specialDomestic: null,
+            specialWar: null,
+            items: {
+                horse: null,
+                weapon: null,
+                book: null,
+                item: null,
+            },
+        },
+        injury: 0,
+        gold: 0,
+        rice: 0,
+        crew: 0,
+        crewTypeId: 0,
+        train: 0,
+        atmos: 0,
+        age: 0,
+        npcState: 0,
+        triggerState: {
+            flags: {},
+            counters: {},
+            modifiers: {},
+            meta: {},
+        },
+        meta: {},
+    };
+    const logicNation: LogicNation = {
+        id: nation.id,
+        name: nation.name,
+        color: nation.color,
+        capitalCityId: nation.capitalCityId,
+        chiefGeneralId: null,
+        gold: nation.gold ?? 0,
+        rice: nation.rice ?? 0,
+        power: 0,
+        level: nation.level,
+        typeCode: nation.typeCode,
+        meta: nationMeta,
+    };
+    return { general, nation: logicNation };
+};
+
+const buildNationIncomeContext = async (nation: NationIncomeRow): Promise<NationIncomeContext> => {
+    let trait: NationTraitModule = null;
+    if (isNationTraitKey(nation.typeCode)) {
+        [trait] = await loadNationTraitModules([nation.typeCode], new NationTraitLoader());
+    }
+    return {
+        trait,
+        context: buildIncomeContext(nation),
+        rate: resolveNationRate(nation),
+    };
+};
+
+const applyNationIncome = (
+    incomeContext: NationIncomeContext,
+    type: 'gold' | 'rice' | 'pop',
+    amount: number
+): number => {
+    if (!incomeContext.trait?.onCalcNationalIncome) {
+        return amount;
+    }
+    return incomeContext.trait.onCalcNationalIncome(incomeContext.context, type, amount);
+};
+
+const calcCityGoldIncome = (
+    incomeContext: NationIncomeContext,
+    city: CityIncomeRow,
+    officerCnt: number,
+    isCapital: boolean,
+    nationLevel: number
+): number => {
+    if (city.supplyState === 0) {
+        return 0;
+    }
+    const trustRatio = city.trust / 200 + 0.5;
+    const commMax = Math.max(1, city.commerceMax);
+    const secuMax = Math.max(1, city.securityMax);
+
+    let income = (city.population * city.commerce * trustRatio) / commMax / 30;
+    income *= 1 + city.security / secuMax / 10;
+    income *= Math.pow(1.05, officerCnt);
+    if (isCapital && nationLevel > 0) {
+        income *= 1 + 1 / (3 * nationLevel);
+    }
+
+    const adjusted = applyNationIncome(incomeContext, 'gold', income);
+    return Math.round(adjusted * (incomeContext.rate / 20));
+};
+
+const calcCityRiceIncome = (
+    incomeContext: NationIncomeContext,
+    city: CityIncomeRow,
+    officerCnt: number,
+    isCapital: boolean,
+    nationLevel: number
+): number => {
+    if (city.supplyState === 0) {
+        return 0;
+    }
+    const trustRatio = city.trust / 200 + 0.5;
+    const agriMax = Math.max(1, city.agricultureMax);
+    const secuMax = Math.max(1, city.securityMax);
+
+    let income = (city.population * city.agriculture * trustRatio) / agriMax / 30;
+    income *= 1 + city.security / secuMax / 10;
+    income *= Math.pow(1.05, officerCnt);
+    if (isCapital && nationLevel > 0) {
+        income *= 1 + 1 / (3 * nationLevel);
+    }
+
+    const adjusted = applyNationIncome(incomeContext, 'rice', income);
+    return Math.round(adjusted * (incomeContext.rate / 20));
+};
+
+const calcCityWallIncome = (
+    incomeContext: NationIncomeContext,
+    city: CityIncomeRow,
+    officerCnt: number,
+    isCapital: boolean,
+    nationLevel: number
+): number => {
+    if (city.supplyState === 0) {
+        return 0;
+    }
+    const wallMax = Math.max(1, city.wallMax);
+    const secuMax = Math.max(1, city.securityMax);
+
+    let income = (city.defence * city.wall) / wallMax / 3;
+    income *= 1 + city.security / secuMax / 10;
+    income *= Math.pow(1.05, officerCnt);
+    if (isCapital && nationLevel > 0) {
+        income *= 1 + 1 / (3 * nationLevel);
+    }
+
+    const adjusted = applyNationIncome(incomeContext, 'rice', income);
+    return Math.round(adjusted * (incomeContext.rate / 20));
+};
+
+const assertNationAccess = (general: { nationId: number; officerLevel: number }) => {
+    if (general.nationId <= 0 || general.officerLevel <= 0) {
+        throw new TRPCError({ code: 'PRECONDITION_FAILED', message: 'Nation membership required.' });
+    }
+};
+
+const mapGeneralList = async (
+    generals: GeneralListRow[],
+    cityNameMap: Map<number, string>,
+    troopNameMap: Map<number, string>
+) => {
+    const personalityKeys = generals.map((general) => normalizeTraitKey(general.personalCode));
+    const domesticKeys = generals.map((general) => normalizeTraitKey(general.specialCode));
+    const warKeys = generals.map((general) => normalizeTraitKey(general.special2Code));
+
+    const [personalityMap, domesticMap, warMap] = await Promise.all([
+        loadTraitNames(personalityKeys, 'personality'),
+        loadTraitNames(domesticKeys, 'domestic'),
+        loadTraitNames(warKeys, 'war'),
+    ]);
+
+    return generals.map((general) => {
+        const meta = asRecord(general.meta);
+        const officerCity = resolveOfficerCity(meta);
+        const permission = resolvePermission(meta);
+        const belong = resolveBelong(meta);
+        const personalityKey = normalizeTraitKey(general.personalCode);
+        const domesticKey = normalizeTraitKey(general.specialCode);
+        const warKey = normalizeTraitKey(general.special2Code);
+
+        return {
+            id: general.id,
+            name: general.name,
+            npcState: general.npcState,
+            officerLevel: general.officerLevel,
+            cityId: general.cityId,
+            cityName: cityNameMap.get(general.cityId) ?? null,
+            troopId: general.troopId,
+            troopName: troopNameMap.get(general.troopId) ?? null,
+            officerCity,
+            officerCityName: officerCity > 0 ? cityNameMap.get(officerCity) ?? null : null,
+            stats: {
+                leadership: general.leadership,
+                strength: general.strength,
+                intelligence: general.intel,
+            },
+            experience: general.experience,
+            dedication: general.dedication,
+            injury: general.injury,
+            gold: general.gold,
+            rice: general.rice,
+            crew: general.crew,
+            personality: personalityKey
+                ? {
+                      key: personalityKey,
+                      name: personalityMap.get(personalityKey)?.name ?? personalityKey,
+                  }
+                : null,
+            specialDomestic: domesticKey
+                ? {
+                      key: domesticKey,
+                      name: domesticMap.get(domesticKey)?.name ?? domesticKey,
+                  }
+                : null,
+            specialWar: warKey
+                ? {
+                      key: warKey,
+                      name: warMap.get(warKey)?.name ?? warKey,
+                  }
+                : null,
+            belong,
+            permission,
+        };
+    });
+};
+
 export const nationRouter = router({
+    getGeneralList: authedProcedure.query(async ({ ctx }) => {
+        const general = await getMyGeneral(ctx);
+        assertNationAccess(general);
+
+        const [nation, cityRows, troopRows, generalRows, worldState] = await Promise.all([
+            ctx.db.nation.findUnique({
+                where: { id: general.nationId },
+                select: {
+                    id: true,
+                    name: true,
+                    color: true,
+                    level: true,
+                    typeCode: true,
+                    capitalCityId: true,
+                    meta: true,
+                },
+            }),
+            ctx.db.city.findMany({ select: { id: true, name: true } }),
+            ctx.db.troop.findMany({ select: { troopLeaderId: true, name: true } }),
+            ctx.db.general.findMany({
+                where: { nationId: general.nationId },
+                select: {
+                    id: true,
+                    name: true,
+                    npcState: true,
+                    nationId: true,
+                    cityId: true,
+                    troopId: true,
+                    picture: true,
+                    imageServer: true,
+                    officerLevel: true,
+                    leadership: true,
+                    strength: true,
+                    intel: true,
+                    experience: true,
+                    dedication: true,
+                    injury: true,
+                    gold: true,
+                    rice: true,
+                    crew: true,
+                    personalCode: true,
+                    specialCode: true,
+                    special2Code: true,
+                    meta: true,
+                    penalty: true,
+                },
+                orderBy: { id: 'asc' },
+            }),
+            ctx.db.worldState.findFirst(),
+        ]);
+
+        if (!nation) {
+            throw new TRPCError({ code: 'NOT_FOUND', message: 'Nation not found' });
+        }
+
+        const cityNameMap = new Map(cityRows.map((city) => [city.id, city.name]));
+        const troopNameMap = new Map(troopRows.map((troop) => [troop.troopLeaderId, troop.name]));
+        const list = await mapGeneralList(generalRows, cityNameMap, troopNameMap);
+
+        return {
+            nation: {
+                id: nation.id,
+                name: nation.name,
+                color: nation.color,
+                level: nation.level,
+                typeCode: nation.typeCode,
+                capitalCityId: nation.capitalCityId ?? 0,
+            },
+            chiefStatMin: resolveChiefStatMin(worldState),
+            generals: list,
+        };
+    }),
+    getCityOverview: authedProcedure.query(async ({ ctx }) => {
+        const me = await getMyGeneral(ctx);
+        assertNationAccess(me);
+
+        const [nation, cityRows, generalRows, worldState] = await Promise.all([
+            ctx.db.nation.findUnique({
+                where: { id: me.nationId },
+                select: {
+                    id: true,
+                    name: true,
+                    color: true,
+                    level: true,
+                    typeCode: true,
+                    capitalCityId: true,
+                    meta: true,
+                },
+            }),
+            ctx.db.city.findMany({
+                where: { nationId: me.nationId },
+                select: {
+                    id: true,
+                    name: true,
+                    level: true,
+                    nationId: true,
+                    region: true,
+                    population: true,
+                    populationMax: true,
+                    agriculture: true,
+                    agricultureMax: true,
+                    commerce: true,
+                    commerceMax: true,
+                    security: true,
+                    securityMax: true,
+                    trust: true,
+                    trade: true,
+                    defence: true,
+                    defenceMax: true,
+                    wall: true,
+                    wallMax: true,
+                    supplyState: true,
+                    frontState: true,
+                    meta: true,
+                },
+                orderBy: { id: 'asc' },
+            }),
+            ctx.db.general.findMany({
+                where: { nationId: me.nationId },
+                select: {
+                    id: true,
+                    name: true,
+                    npcState: true,
+                    officerLevel: true,
+                    cityId: true,
+                    leadership: true,
+                    strength: true,
+                    intel: true,
+                    meta: true,
+                },
+                orderBy: { id: 'asc' },
+            }),
+            ctx.db.worldState.findFirst(),
+        ]);
+
+        if (!nation) {
+            throw new TRPCError({ code: 'NOT_FOUND', message: 'Nation not found' });
+        }
+
+        const cityNameMap = new Map(cityRows.map((city) => [city.id, city.name]));
+
+        const officerByCity = new Map<number, Record<number, GeneralOfficerRow>>();
+        const officerCntByCity = new Map<number, number>();
+
+        for (const general of generalRows) {
+            if (general.officerLevel < 2 || general.officerLevel > 4) {
+                continue;
+            }
+            const meta = asRecord(general.meta);
+            const officerCity = resolveOfficerCity(meta);
+            if (!officerCity) {
+                continue;
+            }
+            const entry = officerByCity.get(officerCity) ?? {};
+            entry[general.officerLevel] = general;
+            officerByCity.set(officerCity, entry);
+
+            if (general.cityId === officerCity) {
+                officerCntByCity.set(officerCity, (officerCntByCity.get(officerCity) ?? 0) + 1);
+            }
+        }
+
+        const incomeContext = await buildNationIncomeContext(nation);
+
+        const cities = cityRows.map((city) => {
+            const officers = officerByCity.get(city.id) ?? {};
+            const officerCnt = officerCntByCity.get(city.id) ?? 0;
+            const isCapital = nation.capitalCityId === city.id;
+            const incomes = {
+                gold: calcCityGoldIncome(incomeContext, city, officerCnt, isCapital, nation.level),
+                rice: calcCityRiceIncome(incomeContext, city, officerCnt, isCapital, nation.level),
+                wall: calcCityWallIncome(incomeContext, city, officerCnt, isCapital, nation.level),
+            };
+
+            return {
+                id: city.id,
+                name: city.name,
+                level: city.level,
+                region: city.region,
+                population: city.population,
+                populationMax: city.populationMax,
+                agriculture: city.agriculture,
+                agricultureMax: city.agricultureMax,
+                commerce: city.commerce,
+                commerceMax: city.commerceMax,
+                security: city.security,
+                securityMax: city.securityMax,
+                trust: city.trust,
+                trade: city.trade,
+                defence: city.defence,
+                defenceMax: city.defenceMax,
+                wall: city.wall,
+                wallMax: city.wallMax,
+                supplyState: city.supplyState,
+                frontState: city.frontState,
+                incomes,
+                officers: {
+                    4: officers[4]
+                        ? {
+                              id: officers[4].id,
+                              name: officers[4].name,
+                              npcState: officers[4].npcState,
+                              officerLevel: officers[4].officerLevel,
+                              cityId: officers[4].cityId,
+                              cityName: cityNameMap.get(officers[4].cityId) ?? null,
+                          }
+                        : null,
+                    3: officers[3]
+                        ? {
+                              id: officers[3].id,
+                              name: officers[3].name,
+                              npcState: officers[3].npcState,
+                              officerLevel: officers[3].officerLevel,
+                              cityId: officers[3].cityId,
+                              cityName: cityNameMap.get(officers[3].cityId) ?? null,
+                          }
+                        : null,
+                    2: officers[2]
+                        ? {
+                              id: officers[2].id,
+                              name: officers[2].name,
+                              npcState: officers[2].npcState,
+                              officerLevel: officers[2].officerLevel,
+                              cityId: officers[2].cityId,
+                              cityName: cityNameMap.get(officers[2].cityId) ?? null,
+                          }
+                        : null,
+                },
+            };
+        });
+
+        const generals = generalRows.map((general) => {
+            const meta = asRecord(general.meta);
+            return {
+                id: general.id,
+                name: general.name,
+                npcState: general.npcState,
+                officerLevel: general.officerLevel,
+                cityId: general.cityId,
+                officerCity: resolveOfficerCity(meta),
+                stats: {
+                    leadership: general.leadership,
+                    strength: general.strength,
+                    intelligence: general.intel,
+                },
+            };
+        });
+
+        return {
+            me: {
+                id: me.id,
+                officerLevel: me.officerLevel,
+            },
+            nation: {
+                id: nation.id,
+                name: nation.name,
+                color: nation.color,
+                level: nation.level,
+                typeCode: nation.typeCode,
+                capitalCityId: nation.capitalCityId ?? 0,
+                rate: resolveNationRate(nation),
+            },
+            chiefStatMin: resolveChiefStatMin(worldState),
+            cities,
+            generals,
+        };
+    }),
+    getPersonnelInfo: authedProcedure.query(async ({ ctx }) => {
+        const me = await getMyGeneral(ctx);
+        assertNationAccess(me);
+
+        const [nation, cityRows, troopRows, generalRows, worldState] = await Promise.all([
+            ctx.db.nation.findUnique({
+                where: { id: me.nationId },
+                select: {
+                    id: true,
+                    name: true,
+                    color: true,
+                    level: true,
+                    typeCode: true,
+                    capitalCityId: true,
+                    meta: true,
+                },
+            }),
+            ctx.db.city.findMany({
+                where: { nationId: me.nationId },
+                select: { id: true, name: true, level: true, region: true },
+                orderBy: { id: 'asc' },
+            }),
+            ctx.db.troop.findMany({ select: { troopLeaderId: true, name: true } }),
+            ctx.db.general.findMany({
+                where: { nationId: me.nationId },
+                select: {
+                    id: true,
+                    name: true,
+                    npcState: true,
+                    nationId: true,
+                    cityId: true,
+                    troopId: true,
+                    officerLevel: true,
+                    leadership: true,
+                    strength: true,
+                    intel: true,
+                    experience: true,
+                    dedication: true,
+                    injury: true,
+                    gold: true,
+                    rice: true,
+                    crew: true,
+                    personalCode: true,
+                    specialCode: true,
+                    special2Code: true,
+                    meta: true,
+                    penalty: true,
+                },
+                orderBy: { id: 'asc' },
+            }),
+            ctx.db.worldState.findFirst(),
+        ]);
+
+        if (!nation) {
+            throw new TRPCError({ code: 'NOT_FOUND', message: 'Nation not found' });
+        }
+
+        const cityNameMap = new Map(cityRows.map((city) => [city.id, city.name]));
+        const troopNameMap = new Map(troopRows.map((troop) => [troop.troopLeaderId, troop.name]));
+        const mappedGenerals = await mapGeneralList(generalRows, cityNameMap, troopNameMap);
+
+        const chiefAssignments = mappedGenerals
+            .filter((general) => general.officerLevel >= 5)
+            .reduce<Record<number, typeof mappedGenerals[number]>>((acc, general) => {
+                acc[general.officerLevel] = general;
+                return acc;
+            }, {});
+
+        const cityAssignments = cityRows.map((city) => {
+            const officers = mappedGenerals.filter(
+                (general) => general.officerLevel >= 2 && general.officerLevel <= 4 && general.officerCity === city.id
+            );
+
+            const officerMap: Record<number, typeof mappedGenerals[number] | null> = {
+                4: null,
+                3: null,
+                2: null,
+            };
+
+            for (const officer of officers) {
+                officerMap[officer.officerLevel] = officer;
+            }
+
+            return {
+                id: city.id,
+                name: city.name,
+                level: city.level,
+                region: city.region,
+                officers: officerMap,
+            };
+        });
+
+        const penaltyMap = new Map<number, Record<string, unknown>>(
+            generalRows.map((row) => [row.id, asRecord(row.penalty)])
+        );
+
+        const permissionCandidates = mappedGenerals
+            .filter((general) => general.officerLevel !== 12)
+            .map((general) => {
+                const penalty = penaltyMap.get(general.id) ?? {};
+                const maxPermission = checkSecretMaxPermission(penalty);
+                return {
+                    id: general.id,
+                    name: general.name,
+                    npcState: general.npcState,
+                    permission: general.permission,
+                    maxPermission,
+                };
+            });
+
+        const ambassadors = permissionCandidates.filter(
+            (candidate) => candidate.permission === 'ambassador' || candidate.maxPermission === 4
+        );
+        const auditors = permissionCandidates.filter(
+            (candidate) => candidate.permission === 'auditor' || candidate.maxPermission >= 3
+        );
+
+        return {
+            me: {
+                id: me.id,
+                officerLevel: me.officerLevel,
+            },
+            nation: {
+                id: nation.id,
+                name: nation.name,
+                color: nation.color,
+                level: nation.level,
+                typeCode: nation.typeCode,
+                capitalCityId: nation.capitalCityId ?? 0,
+            },
+            chiefStatMin: resolveChiefStatMin(worldState),
+            generals: mappedGenerals,
+            chiefAssignments,
+            cityAssignments,
+            permissionCandidates: {
+                ambassadors,
+                auditors,
+            },
+        };
+    }),
     changePermission: authedProcedure
         .input(
             z.object({

app/game-frontend/src/router/index.ts

@@ -3,6 +3,9 @@ import MainView from '../views/MainView.vue';
 import PublicView from '../views/PublicView.vue';
 import LoginView from '../views/LoginView.vue';
 import JoinView from '../views/JoinView.vue';
+import NationCitiesView from '../views/NationCitiesView.vue';
+import NationGeneralsView from '../views/NationGeneralsView.vue';
+import NationPersonnelView from '../views/NationPersonnelView.vue';
 import NotFoundView from '../views/NotFoundView.vue';
 import { useSessionStore } from '../stores/session';
 
@@ -30,6 +33,33 @@ const routes = [
             requiresNoGeneral: true,
         },
     },
+    {
+        path: '/nation/cities',
+        name: 'nation-cities',
+        component: NationCitiesView,
+        meta: {
+            requiresAuth: true,
+            requiresGeneral: true,
+        },
+    },
+    {
+        path: '/nation/generals',
+        name: 'nation-generals',
+        component: NationGeneralsView,
+        meta: {
+            requiresAuth: true,
+            requiresGeneral: true,
+        },
+    },
+    {
+        path: '/nation/personnel',
+        name: 'nation-personnel',
+        component: NationPersonnelView,
+        meta: {
+            requiresAuth: true,
+            requiresGeneral: true,
+        },
+    },
     {
         path: '/login',
         name: 'login',

app/game-frontend/src/utils/nationFormat.ts

@@ -0,0 +1,123 @@
+export const officerLevelMapDefault: Record<number, string> = {
+    12: '군주',
+    11: '참모',
+    10: '제1장군',
+    9: '제1모사',
+    8: '제2장군',
+    7: '제2모사',
+    6: '제3장군',
+    5: '제3모사',
+    4: '태수',
+    3: '군사',
+    2: '종사',
+    1: '일반',
+    0: '재야',
+};
+
+export const officerLevelMapByNationLevel: Record<number, Record<number, string>> = {
+    7: {
+        12: '황제',
+        11: '승상',
+        10: '표기장군',
+        9: '사공',
+        8: '거기장군',
+        7: '태위',
+        6: '위장군',
+        5: '사도',
+    },
+    6: {
+        12: '왕',
+        11: '광록훈',
+        10: '좌장군',
+        9: '상서령',
+        8: '우장군',
+        7: '중서령',
+        6: '전장군',
+        5: '비서령',
+    },
+    5: {
+        12: '공',
+        11: '광록대부',
+        10: '안국장군',
+        9: '집금오',
+        8: '파로장군',
+        7: '소부',
+    },
+    4: {
+        12: '주목',
+        11: '태사령',
+        10: '아문장군',
+        9: '낭중',
+        8: '호군',
+        7: '종사중랑',
+    },
+    3: {
+        12: '주자사',
+        11: '주부',
+        10: '편장군',
+        9: '간의대부',
+    },
+    2: {
+        12: '군벌',
+        11: '참모',
+        10: '비장군',
+        9: '부참모',
+    },
+    1: {
+        12: '영주',
+        11: '참모',
+    },
+    0: {
+        12: '두목',
+        11: '부두목',
+    },
+};
+
+export const formatOfficerLevelText = (officerLevel: number, nationLevel?: number): string => {
+    if (officerLevel < 5) {
+        return officerLevelMapDefault[officerLevel] ?? '???';
+    }
+
+    const nationMap =
+        nationLevel === undefined
+            ? officerLevelMapDefault
+            : (officerLevelMapByNationLevel[nationLevel] ?? officerLevelMapDefault);
+
+    return nationMap[officerLevel] ?? (officerLevelMapDefault[officerLevel] ?? '???');
+};
+
+export const regionMap: Record<number, string> = {
+    1: '하북',
+    2: '중원',
+    3: '서북',
+    4: '서촉',
+    5: '남중',
+    6: '초',
+    7: '오월',
+    8: '동이',
+};
+
+export const cityLevelMap: Record<number, string> = {
+    1: '수',
+    2: '진',
+    3: '관',
+    4: '이',
+    5: '소',
+    6: '중',
+    7: '대',
+    8: '특',
+};
+
+export const getNationChiefLevel = (nationLevel: number): number => {
+    const map: Record<number, number> = {
+        7: 5,
+        6: 5,
+        5: 7,
+        4: 7,
+        3: 9,
+        2: 9,
+        1: 11,
+        0: 11,
+    };
+    return map[nationLevel] ?? 11;
+};

app/game-frontend/src/views/MainView.vue

@@ -91,6 +91,9 @@ watch(
                 <p class="page-subtitle">{{ statusLine }}</p>
             </div>
             <div class="header-actions">
+                <RouterLink class="ghost" to="/nation/cities">세력 도시</RouterLink>
+                <RouterLink class="ghost" to="/nation/generals">세력 장수</RouterLink>
+                <RouterLink class="ghost" to="/nation/personnel">인사부</RouterLink>
                 <button
                     class="toggle"
                     :class="{ active: realtimeEnabled }"

app/game-frontend/src/views/NationCitiesView.vue

@@ -0,0 +1,582 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+import PanelCard from '../components/ui/PanelCard.vue';
+import SkeletonLines from '../components/ui/SkeletonLines.vue';
+import { trpc } from '../utils/trpc';
+import { cityLevelMap, regionMap } from '../utils/nationFormat';
+
+type CityOverviewResponse = Awaited<ReturnType<typeof trpc.nation.getCityOverview.query>>;
+
+type CityEntry = CityOverviewResponse['cities'][number];
+type GeneralEntry = CityOverviewResponse['generals'][number];
+
+type CitySortKey = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+type OfficerLevel = 2 | 3 | 4;
+
+const officerLabels: Record<OfficerLevel, string> = {
+    4: '태수',
+    3: '군사',
+    2: '종사',
+};
+
+const officerLevels: OfficerLevel[] = [4, 3, 2];
+
+const sortOptions: Array<{ key: CitySortKey; label: string }> = [
+    { key: 1, label: '기본' },
+    { key: 2, label: '인구' },
+    { key: 3, label: '인구율' },
+    { key: 4, label: '민심' },
+    { key: 5, label: '농업' },
+    { key: 6, label: '상업' },
+    { key: 7, label: '치안' },
+    { key: 8, label: '수비' },
+    { key: 9, label: '성벽' },
+    { key: 10, label: '시세' },
+    { key: 11, label: '지역' },
+    { key: 12, label: '규모' },
+];
+
+const loading = ref(false);
+const error = ref<string | null>(null);
+const data = ref<CityOverviewResponse | null>(null);
+const sortKey = ref<CitySortKey>(1);
+const filterText = ref('');
+const showAppointment = ref(false);
+const appointmentDraft = reactive<Record<number, Record<number, number>>>({});
+
+const resolveErrorMessage = (value: unknown): string => {
+    if (value instanceof Error) {
+        return value.message;
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    return 'unknown_error';
+};
+
+const loadCities = async () => {
+    if (loading.value) {
+        return;
+    }
+    loading.value = true;
+    error.value = null;
+
+    try {
+        data.value = await trpc.nation.getCityOverview.query();
+    } catch (err) {
+        error.value = resolveErrorMessage(err);
+    } finally {
+        loading.value = false;
+    }
+};
+
+const cityNameMap = computed(() => {
+    const map = new Map<number, string>();
+    if (data.value) {
+        for (const city of data.value.cities) {
+            map.set(city.id, city.name);
+        }
+    }
+    return map;
+});
+
+const generalMap = computed(() => {
+    const map = new Map<number, GeneralEntry>();
+    for (const general of data.value?.generals ?? []) {
+        map.set(general.id, general);
+    }
+    return map;
+});
+
+const generalsByCity = computed(() => {
+    const map = new Map<number, GeneralEntry[]>();
+    for (const general of data.value?.generals ?? []) {
+        if (!map.has(general.cityId)) {
+            map.set(general.cityId, []);
+        }
+        map.get(general.cityId)?.push(general);
+    }
+    return map;
+});
+
+const canAppoint = computed(() => (data.value?.me.officerLevel ?? 0) >= 5);
+
+const candidatesByLevel = computed(() => {
+    const minStat = data.value?.chiefStatMin ?? 0;
+    const base = (data.value?.generals ?? []).filter((general) => general.officerLevel !== 12);
+    return {
+        4: base.filter((general) => general.stats.strength >= minStat),
+        3: base.filter((general) => general.stats.intelligence >= minStat),
+        2: base,
+    } as Record<OfficerLevel, GeneralEntry[]>;
+});
+
+const formatCandidateLabel = (general: GeneralEntry): string => {
+    const cityName = cityNameMap.value.get(general.cityId);
+    const role = general.officerLevel >= 5 ? '수뇌' : general.officerLevel >= 2 ? '관직' : '일반';
+    return `${general.name}${cityName ? ` (${cityName})` : ''} · ${role}`;
+};
+
+const ensureDraft = (cityId: number, level: OfficerLevel, defaultValue: number) => {
+    if (!appointmentDraft[cityId]) {
+        appointmentDraft[cityId] = { 2: 0, 3: 0, 4: 0 };
+    }
+    if (appointmentDraft[cityId][level] === undefined) {
+        appointmentDraft[cityId][level] = defaultValue;
+    }
+};
+
+const resetDrafts = (cities: CityEntry[]) => {
+    for (const key of Object.keys(appointmentDraft)) {
+        delete appointmentDraft[Number(key)];
+    }
+    for (const city of cities) {
+        appointmentDraft[city.id] = {
+            2: city.officers[2]?.id ?? 0,
+            3: city.officers[3]?.id ?? 0,
+            4: city.officers[4]?.id ?? 0,
+        };
+    }
+};
+
+watch(
+    () => data.value,
+    (value) => {
+        if (value) {
+            resetDrafts(value.cities);
+        }
+    }
+);
+
+const sortedCities = computed(() => {
+    const list = data.value?.cities ?? [];
+    const keyword = filterText.value.trim();
+    const filtered = keyword
+        ? list.filter((city) => city.name.includes(keyword))
+        : list;
+
+    return [...filtered].sort((lhs, rhs) => {
+        switch (sortKey.value) {
+            case 2:
+                return rhs.population - lhs.population;
+            case 3:
+                return rhs.population / rhs.populationMax - lhs.population / lhs.populationMax;
+            case 4:
+                return rhs.trust - lhs.trust;
+            case 5:
+                return rhs.agriculture - lhs.agriculture;
+            case 6:
+                return rhs.commerce - lhs.commerce;
+            case 7:
+                return rhs.security - lhs.security;
+            case 8:
+                return rhs.defence - lhs.defence;
+            case 9:
+                return rhs.wall - lhs.wall;
+            case 10:
+                return rhs.trade - lhs.trade;
+            case 11: {
+                const regionCmp = lhs.region - rhs.region;
+                if (regionCmp !== 0) {
+                    return regionCmp;
+                }
+                return rhs.level - lhs.level;
+            }
+            case 12: {
+                const levelCmp = rhs.level - lhs.level;
+                if (levelCmp !== 0) {
+                    return levelCmp;
+                }
+                return lhs.region - rhs.region;
+            }
+            default:
+                return lhs.id - rhs.id;
+        }
+    });
+});
+
+const formatPercent = (value: number, max: number): string => {
+    if (!max) {
+        return '-';
+    }
+    return `${((value / max) * 100).toFixed(1)}%`;
+};
+
+const formatNumber = (value: number): string => new Intl.NumberFormat('ko-KR').format(value);
+
+const resolveOfficerName = (officer: CityEntry['officers'][OfficerLevel]): string => {
+    if (!officer) {
+        return '-';
+    }
+    if (officer.cityName) {
+        return `${officer.name} (${officer.cityName})`;
+    }
+    return officer.name;
+};
+
+const appointOfficer = async (cityId: number, officerLevel: OfficerLevel) => {
+    if (!data.value) {
+        return;
+    }
+    const city = data.value.cities.find((entry) => entry.id === cityId);
+    if (!city) {
+        return;
+    }
+    const destGeneralId = appointmentDraft[cityId]?.[officerLevel] ?? 0;
+    const general = generalMap.value.get(destGeneralId);
+    const officerLabel = officerLabels[officerLevel];
+    const targetName = destGeneralId === 0 ? '공석' : general?.name ?? '알 수 없음';
+    const message =
+        destGeneralId === 0
+            ? `${city.name} ${officerLabel} 자리를 비우시겠습니까?`
+            : `${targetName}을(를) ${city.name} ${officerLabel}로 임명하시겠습니까?`;
+
+    if (!window.confirm(message)) {
+        return;
+    }
+
+    try {
+        await trpc.nation.appoint.mutate({
+            destGeneralId,
+            destCityId: cityId,
+            officerLevel,
+        });
+        await loadCities();
+    } catch (err) {
+        error.value = resolveErrorMessage(err);
+    }
+};
+
+onMounted(() => {
+    void loadCities();
+});
+</script>
+
+<template>
+    <main class="nation-page">
+        <header class="page-header">
+            <div>
+                <h1 class="page-title">세력 도시</h1>
+                <p class="page-subtitle">세력 도시 현황과 관직 배치를 확인합니다.</p>
+            </div>
+            <div class="header-actions">
+                <RouterLink class="ghost" to="/">메인</RouterLink>
+                <RouterLink class="ghost" to="/nation/generals">세력 장수</RouterLink>
+                <RouterLink class="ghost" to="/nation/personnel">인사부</RouterLink>
+                <button class="ghost" @click="loadCities">새로고침</button>
+            </div>
+        </header>
+
+        <div v-if="error" class="error">{{ error }}</div>
+
+        <PanelCard title="세력 도시 목록" subtitle="도시별 개발 상태 및 관직 현황">
+            <template #actions>
+                <div class="toolbar-actions">
+                    <select v-model.number="sortKey" class="select-input">
+                        <option v-for="option in sortOptions" :key="option.key" :value="option.key">
+                            {{ option.label }}
+                        </option>
+                    </select>
+                    <input v-model="filterText" class="filter-input" placeholder="도시 검색" />
+                    <button
+                        class="ghost"
+                        :class="{ active: showAppointment }"
+                        @click="showAppointment = !showAppointment"
+                        v-if="canAppoint"
+                    >
+                        관직 임명 모드
+                    </button>
+                </div>
+            </template>
+
+            <div class="list-meta">
+                총 {{ sortedCities.length }}개 도시 · 관직 최소 능력 {{ data?.chiefStatMin ?? '-' }}
+            </div>
+
+            <SkeletonLines v-if="loading" :lines="8" />
+            <section v-else class="city-grid">
+                <article v-for="city in sortedCities" :key="city.id" class="city-card">
+                    <div class="city-header">
+                        <div>
+                            <div class="city-title">
+                                {{ city.name }}
+                                <span v-if="data?.nation.capitalCityId === city.id" class="capital-tag">수도</span>
+                            </div>
+                            <div class="city-meta">
+                                {{ regionMap[city.region] ?? '미지' }} · {{ cityLevelMap[city.level] ?? '-' }} 규모
+                            </div>
+                        </div>
+                        <div class="city-meta">시세 {{ city.trade }}%</div>
+                    </div>
+
+                    <div class="city-stats">
+                        <div>
+                            주민 {{ city.population }}/{{ city.populationMax }}
+                            <span class="muted">({{ formatPercent(city.population, city.populationMax) }})</span>
+                        </div>
+                        <div>농업 {{ city.agriculture }}/{{ city.agricultureMax }}</div>
+                        <div>상업 {{ city.commerce }}/{{ city.commerceMax }}</div>
+                        <div>치안 {{ city.security }}/{{ city.securityMax }}</div>
+                        <div>수비 {{ city.defence }}/{{ city.defenceMax }}</div>
+                        <div>성벽 {{ city.wall }}/{{ city.wallMax }}</div>
+                        <div>민심 {{ city.trust }}</div>
+                    </div>
+
+                    <div class="city-incomes">
+                        <div>자금 수입 {{ formatNumber(city.incomes.gold) }}</div>
+                        <div>군량 수입 {{ formatNumber(city.incomes.rice) }}</div>
+                        <div>둔전 수입 {{ formatNumber(city.incomes.wall) }}</div>
+                    </div>
+
+                    <div class="city-officers">
+                        <div>
+                            <span class="officer-label">태수</span>
+                            {{ resolveOfficerName(city.officers[4]) }}
+                        </div>
+                        <div>
+                            <span class="officer-label">군사</span>
+                            {{ resolveOfficerName(city.officers[3]) }}
+                        </div>
+                        <div>
+                            <span class="officer-label">종사</span>
+                            {{ resolveOfficerName(city.officers[2]) }}
+                        </div>
+                    </div>
+
+                    <div v-if="showAppointment && canAppoint" class="city-appoint">
+                        <div class="appoint-row" v-for="level in officerLevels" :key="level">
+                            <span class="officer-label">{{ officerLabels[level] }}</span>
+                            <select
+                                v-model.number="appointmentDraft[city.id][level]"
+                                class="select-input"
+                                @focus="ensureDraft(city.id, level, city.officers[level]?.id ?? 0)"
+                            >
+                                <option :value="0">공석</option>
+                                <option
+                                    v-for="candidate in candidatesByLevel[level]"
+                                    :key="candidate.id"
+                                    :value="candidate.id"
+                                >
+                                    {{ formatCandidateLabel(candidate) }}
+                                </option>
+                            </select>
+                            <button class="ghost" @click="appointOfficer(city.id, level)">임명</button>
+                        </div>
+                    </div>
+
+                    <div class="city-generals">
+                        <div class="muted">장수</div>
+                        <div class="general-tags">
+                            <span
+                                v-for="general in generalsByCity.get(city.id) ?? []"
+                                :key="general.id"
+                                class="general-tag"
+                            >
+                                <span v-if="general.npcState > 0" class="npc-tag">NPC</span>
+                                {{ general.name }}
+                            </span>
+                            <span v-if="(generalsByCity.get(city.id) ?? []).length === 0" class="muted">-</span>
+                        </div>
+                    </div>
+                </article>
+            </section>
+        </PanelCard>
+    </main>
+</template>
+
+<style scoped>
+.nation-page {
+    min-height: 100vh;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.page-header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 12px;
+    border-bottom: 1px solid rgba(201, 164, 90, 0.4);
+    padding-bottom: 12px;
+}
+
+.page-title {
+    font-size: 1.6rem;
+    font-weight: 600;
+}
+
+.page-subtitle {
+    font-size: 0.85rem;
+    color: rgba(232, 221, 196, 0.7);
+}
+
+.header-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.ghost {
+    border: 1px solid rgba(201, 164, 90, 0.4);
+    padding: 6px 12px;
+    font-size: 0.8rem;
+    cursor: pointer;
+    text-decoration: none;
+    color: inherit;
+    background: rgba(16, 16, 16, 0.6);
+}
+
+.ghost.active {
+    background: rgba(201, 164, 90, 0.2);
+}
+
+.error {
+    color: #f5b7b1;
+    font-size: 0.85rem;
+}
+
+.toolbar-actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.select-input {
+    border: 1px solid rgba(201, 164, 90, 0.4);
+    background: rgba(16, 16, 16, 0.8);
+    color: rgba(232, 221, 196, 0.9);
+    padding: 6px 8px;
+    font-size: 0.75rem;
+}
+
+.filter-input {
+    border: 1px solid rgba(201, 164, 90, 0.4);
+    background: rgba(16, 16, 16, 0.8);
+    color: rgba(232, 221, 196, 0.9);
+    padding: 6px 8px;
+    font-size: 0.75rem;
+}
+
+.list-meta {
+    margin-bottom: 12px;
+    font-size: 0.75rem;
+    color: rgba(232, 221, 196, 0.6);
+}
+
+.city-grid {
+    display: grid;
+    gap: 12px;
+}
+
+.city-card {
+    border: 1px solid rgba(201, 164, 90, 0.3);
+    padding: 12px;
+    background: rgba(12, 12, 12, 0.75);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.city-header {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    align-items: center;
+}
+
+.city-title {
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.city-meta {
+    font-size: 0.75rem;
+    color: rgba(232, 221, 196, 0.6);
+}
+
+.capital-tag {
+    margin-left: 6px;
+    font-size: 0.65rem;
+    padding: 2px 6px;
+    border: 1px solid rgba(201, 164, 90, 0.4);
+    color: rgba(232, 221, 196, 0.8);
+}
+
+.city-stats,
+.city-incomes,
+.city-officers {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 6px;
+    font-size: 0.8rem;
+}
+
+.city-incomes {
+    padding-top: 6px;
+    border-top: 1px solid rgba(201, 164, 90, 0.2);
+}
+
+.city-officers {
+    border-top: 1px solid rgba(201, 164, 90, 0.2);
+    padding-top: 6px;
+}
+
+.officer-label {
+    font-weight: 600;
+    margin-right: 6px;
+}
+
+.city-appoint {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    border-top: 1px dashed rgba(201, 164, 90, 0.2);
+    padding-top: 8px;
+}
+
+.appoint-row {
+    display: grid;
+    grid-template-columns: 60px minmax(0, 1fr) auto;
+    gap: 6px;
+    align-items: center;
+}
+
+.city-generals {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.general-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.general-tag {
+    padding: 3px 6px;
+    border: 1px solid rgba(201, 164, 90, 0.3);
+    font-size: 0.75rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.npc-tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.6rem;
+    padding: 1px 3px;
+    border: 1px solid rgba(201, 164, 90, 0.4);
+    color: rgba(232, 221, 196, 0.8);
+}
+
+.muted {
+    color: rgba(232, 221, 196, 0.6);
+}
+</style>

app/game-frontend/src/views/NationGeneralsView.vue

@@ -0,0 +1,349 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import PanelCard from '../components/ui/PanelCard.vue';
+import SkeletonLines from '../components/ui/SkeletonLines.vue';
+import { trpc } from '../utils/trpc';
+import { formatOfficerLevelText } from '../utils/nationFormat';
+
+type GeneralListResponse = Awaited<ReturnType<typeof trpc.nation.getGeneralList.query>>;
+
+type GeneralEntry = GeneralListResponse['generals'][number];
+
+type SortKey =
+    | 1
+    | 2
+    | 3
+    | 4
+    | 5
+    | 6
+    | 7
+    | 8
+    | 9
+    | 10
+    | 11
+    | 12
+    | 13
+    | 14
+    | 15;
+
+const sortOptions: Array<{ key: SortKey; label: string }> = [
+    { key: 1, label: '관직' },
+    { key: 2, label: '공헌' },
+    { key: 3, label: '경험' },
+    { key: 4, label: '통솔' },
+    { key: 5, label: '무력' },
+    { key: 6, label: '지력' },
+    { key: 7, label: '자금' },
+    { key: 8, label: '군량' },
+    { key: 9, label: '병사' },
+    { key: 10, label: '벌점' },
+    { key: 11, label: '성격' },
+    { key: 12, label: '내특' },
+    { key: 13, label: '전특' },
+    { key: 14, label: '사관' },
+    { key: 15, label: 'NPC' },
+];
+
+const loading = ref(false);
+const error = ref<string | null>(null);
+const data = ref<GeneralListResponse | null>(null);
+const sortKey = ref<SortKey>(1);
+const filterText = ref('');
+
+const resolveErrorMessage = (value: unknown): string => {
+    if (value instanceof Error) {
+        return value.message;
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    return 'unknown_error';
+};
+
+const loadGenerals = async () => {
+    if (loading.value) {
+        return;
+    }
+    loading.value = true;
+    error.value = null;
+
+    try {
+        data.value = await trpc.nation.getGeneralList.query();
+    } catch (err) {
+        error.value = resolveErrorMessage(err);
+    } finally {
+        loading.value = false;
+    }
+};
+
+const sortGenerals = (list: GeneralEntry[]): GeneralEntry[] => {
+    const key = sortKey.value;
+    const sorted = [...list].sort((lhs, rhs) => {
+        switch (key) {
+            case 1:
+                return rhs.officerLevel - lhs.officerLevel;
+            case 2:
+                return rhs.dedication - lhs.dedication;
+            case 3:
+                return rhs.experience - lhs.experience;
+            case 4:
+                return rhs.stats.leadership - lhs.stats.leadership;
+            case 5:
+                return rhs.stats.strength - lhs.stats.strength;
+            case 6:
+                return rhs.stats.intelligence - lhs.stats.intelligence;
+            case 7:
+                return rhs.gold - lhs.gold;
+            case 8:
+                return rhs.rice - lhs.rice;
+            case 9:
+                return rhs.crew - lhs.crew;
+            case 10:
+                return 0;
+            case 11:
+                return (lhs.personality?.name ?? '').localeCompare(rhs.personality?.name ?? '');
+            case 12:
+                return (lhs.specialDomestic?.name ?? '').localeCompare(rhs.specialDomestic?.name ?? '');
+            case 13:
+                return (lhs.specialWar?.name ?? '').localeCompare(rhs.specialWar?.name ?? '');
+            case 14:
+                return rhs.belong - lhs.belong;
+            case 15:
+                return rhs.npcState - lhs.npcState;
+            default:
+                return 0;
+        }
+    });
+
+    if (key === 11 || key === 12 || key === 13) {
+        return sorted;
+    }
+
+    return sorted;
+};
+
+const filteredGenerals = computed(() => {
+    const list = data.value?.generals ?? [];
+    const keyword = filterText.value.trim().toLowerCase();
+    const filtered = keyword
+        ? list.filter((general) => {
+              return (
+                  general.name.toLowerCase().includes(keyword) ||
+                  (general.cityName ?? '').toLowerCase().includes(keyword) ||
+                  (general.officerCityName ?? '').toLowerCase().includes(keyword)
+              );
+          })
+        : list;
+
+    return sortGenerals(filtered);
+});
+
+const nationLevel = computed(() => data.value?.nation.level ?? 0);
+
+const formatSpecial = (general: GeneralEntry): string => {
+    const domestic = general.specialDomestic?.name ?? '-';
+    const war = general.specialWar?.name ?? '-';
+    return `${domestic} / ${war}`;
+};
+
+onMounted(() => {
+    void loadGenerals();
+});
+</script>
+
+<template>
+    <main class="nation-page">
+        <header class="page-header">
+            <div>
+                <h1 class="page-title">세력 장수</h1>
+                <p class="page-subtitle">세력 내 장수 현황 및 정렬</p>
+            </div>
+            <div class="header-actions">
+                <RouterLink class="ghost" to="/">메인</RouterLink>
+                <RouterLink class="ghost" to="/nation/cities">세력 도시</RouterLink>
+                <RouterLink class="ghost" to="/nation/personnel">인사부</RouterLink>
+                <button class="ghost" @click="loadGenerals">새로고침</button>
+            </div>
+        </header>
+
+        <div v-if="error" class="error">{{ error }}</div>
+
+        <PanelCard title="세력 장수 목록" subtitle="국가 소속 장수들을 확인합니다.">
+            <template #actions>
+                <div class="toolbar-actions">
+                    <select v-model.number="sortKey" class="select-input">
+                        <option v-for="option in sortOptions" :key="option.key" :value="option.key">
+                            {{ option.label }}
+                        </option>
+                    </select>
+                    <input v-model="filterText" class="filter-input" placeholder="이름/도시 검색" />
+                </div>
+            </template>
+
+            <div class="list-meta">총 {{ filteredGenerals.length }}명</div>
+
+            <SkeletonLines v-if="loading" :lines="6" />
+            <div v-else class="table-scroll">
+                <table class="nation-table">
+                    <thead>
+                        <tr>
+                            <th>이름</th>
+                            <th>관직</th>
+                            <th>공헌</th>
+                            <th>경험</th>
+                            <th>통솔</th>
+                            <th>무력</th>
+                            <th>지력</th>
+                            <th>자금</th>
+                            <th>군량</th>
+                            <th>병사</th>
+                            <th>성격</th>
+                            <th>특기</th>
+                            <th>사관</th>
+                            <th>현재 도시</th>
+                            <th>관직 도시</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="general in filteredGenerals" :key="general.id">
+                            <td>
+                                <span v-if="general.npcState > 0" class="npc-tag">NPC</span>
+                                {{ general.name }}
+                            </td>
+                            <td>{{ formatOfficerLevelText(general.officerLevel, nationLevel) }}</td>
+                            <td>{{ general.dedication }}</td>
+                            <td>{{ general.experience }}</td>
+                            <td>{{ general.stats.leadership }}</td>
+                            <td>{{ general.stats.strength }}</td>
+                            <td>{{ general.stats.intelligence }}</td>
+                            <td>{{ general.gold }}</td>
+                            <td>{{ general.rice }}</td>
+                            <td>{{ general.crew }}</td>
+                            <td>{{ general.personality?.name ?? '-' }}</td>
+                            <td>{{ formatSpecial(general) }}</td>
+                            <td>{{ general.belong > 0 ? general.belong : '-' }}</td>
+                            <td>{{ general.cityName ?? '-' }}</td>
+                            <td>{{ general.officerCityName ?? '-' }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </PanelCard>
+    </main>
+</template>
+
+<style scoped>
+.nation-page {
+    min-height: 100vh;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.page-header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 12px;
+    border-bottom: 1px solid rgba(201, 164, 90, 0.4);
+    padding-bottom: 12px;
+}
+
+.page-title {
+    font-size: 1.6rem;
+    font-weight: 600;
+}
+
+.page-subtitle {
+    font-size: 0.85rem;
+    color: rgba(232, 221, 196, 0.7);
+}
+
+.header-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.ghost {
+    border: 1px solid rgba(201, 164, 90, 0.4);
+    padding: 6px 12px;
+    font-size: 0.8rem;
+    cursor: pointer;
+    text-decoration: none;
+    color: inherit;
+    background: rgba(16, 16, 16, 0.6);
+}
+
+.error {
+    color: #f5b7b1;
+    font-size: 0.85rem;
+}
+
+.toolbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.select-input {
+    border: 1px solid rgba(201, 164, 90, 0.4);
+    background: rgba(16, 16, 16, 0.8);
+    color: rgba(232, 221, 196, 0.9);
+    padding: 6px 8px;
+    font-size: 0.75rem;
+}
+
+.filter-input {
+    border: 1px solid rgba(201, 164, 90, 0.4);
+    background: rgba(16, 16, 16, 0.8);
+    color: rgba(232, 221, 196, 0.9);
+    padding: 6px 8px;
+    font-size: 0.75rem;
+}
+
+.list-meta {
+    margin-bottom: 8px;
+    font-size: 0.75rem;
+    color: rgba(232, 221, 196, 0.6);
+}
+
+.table-scroll {
+    overflow-x: auto;
+    max-height: 70vh;
+    overflow-y: auto;
+}
+
+.nation-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8rem;
+}
+
+.nation-table th,
+.nation-table td {
+    padding: 6px 8px;
+    border-bottom: 1px solid rgba(201, 164, 90, 0.2);
+    text-align: left;
+    white-space: nowrap;
+}
+
+.nation-table thead th {
+    font-size: 0.7rem;
+    color: rgba(232, 221, 196, 0.6);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.npc-tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.6rem;
+    padding: 2px 4px;
+    margin-right: 6px;
+    border: 1px solid rgba(201, 164, 90, 0.4);
+    color: rgba(232, 221, 196, 0.8);
+}
+</style>

app/game-frontend/src/views/NationPersonnelView.vue

@@ -0,0 +1,627 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+import PanelCard from '../components/ui/PanelCard.vue';
+import SkeletonLines from '../components/ui/SkeletonLines.vue';
+import { trpc } from '../utils/trpc';
+import {
+    cityLevelMap,
+    formatOfficerLevelText,
+    getNationChiefLevel,
+    regionMap,
+} from '../utils/nationFormat';
+
+type PersonnelResponse = Awaited<ReturnType<typeof trpc.nation.getPersonnelInfo.query>>;
+
+type GeneralEntry = PersonnelResponse['generals'][number];
+
+type OfficerLevel = 2 | 3 | 4;
+
+const officerLabels: Record<OfficerLevel, string> = {
+    4: '태수',
+    3: '군사',
+    2: '종사',
+};
+
+const loading = ref(false);
+const error = ref<string | null>(null);
+const data = ref<PersonnelResponse | null>(null);
+
+const chiefAppointmentDraft = reactive<Record<number, number>>({});
+const selectedCityId = ref<number>(0);
+const selectedOfficerLevel = ref<OfficerLevel>(4);
+const selectedGeneralId = ref<number>(0);
+const kickTargetId = ref<number>(0);
+const ambassadorSelection = ref<number[]>([]);
+const auditorSelection = ref<number[]>([]);
+
+const resolveErrorMessage = (value: unknown): string => {
+    if (value instanceof Error) {
+        return value.message;
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    return 'unknown_error';
+};
+
+const loadPersonnel = async () => {
+    if (loading.value) {
+        return;
+    }
+    loading.value = true;
+    error.value = null;
+
+    try {
+        data.value = await trpc.nation.getPersonnelInfo.query();
+    } catch (err) {
+        error.value = resolveErrorMessage(err);
+    } finally {
+        loading.value = false;
+    }
+};
+
+const nationLevel = computed(() => data.value?.nation.level ?? 0);
+const canAssign = computed(() => (data.value?.me.officerLevel ?? 0) >= 5);
+const isLeader = computed(() => (data.value?.me.officerLevel ?? 0) >= 12);
+
+const chiefLevels = computed(() => {
+    if (!data.value) {
+        return [] as number[];
+    }
+    const minLevel = getNationChiefLevel(data.value.nation.level);
+    const levels: number[] = [];
+    for (let level = 12; level >= minLevel; level -= 1) {
+        levels.push(level);
+    }
+    return levels;
+});
+
+const cityNameMap = computed(() => {
+    const map = new Map<number, string>();
+    for (const city of data.value?.cityAssignments ?? []) {
+        map.set(city.id, city.name);
+    }
+    return map;
+});
+
+const generalMap = computed(() => {
+    const map = new Map<number, GeneralEntry>();
+    for (const general of data.value?.generals ?? []) {
+        map.set(general.id, general);
+    }
+    return map;
+});
+
+const chiefAssignments = computed(() => data.value?.chiefAssignments ?? {});
+
+const formatCandidateLabel = (general: GeneralEntry): string => {
+    const cityName = cityNameMap.value.get(general.cityId);
+    const role = general.officerLevel >= 5 ? '수뇌' : general.officerLevel >= 2 ? '관직' : '일반';
+    return `${general.name}${cityName ? ` (${cityName})` : ''} · ${role}`;
+};
+
+const chiefCandidates = (level: number): GeneralEntry[] => {
+    const minStat = data.value?.chiefStatMin ?? 0;
+    const list = data.value?.generals ?? [];
+    if (level === 11) {
+        return list;
+    }
+    if (level % 2 === 0) {
+        return list.filter((general) => general.stats.strength >= minStat);
+    }
+    return list.filter((general) => general.stats.intelligence >= minStat);
+};
+
+const cityCandidatesByLevel = computed(() => {
+    const minStat = data.value?.chiefStatMin ?? 0;
+    const base = (data.value?.generals ?? []).filter((general) => general.officerLevel !== 12);
+    return {
+        4: base.filter((general) => general.stats.strength >= minStat),
+        3: base.filter((general) => general.stats.intelligence >= minStat),
+        2: base,
+    } as Record<OfficerLevel, GeneralEntry[]>;
+});
+
+const currentCityOfficer = computed(() => {
+    const city = data.value?.cityAssignments.find((entry) => entry.id === selectedCityId.value);
+    if (!city) {
+        return null;
+    }
+    return city.officers[selectedOfficerLevel.value] ?? null;
+});
+
+const initializeDrafts = () => {
+    if (!data.value) {
+        return;
+    }
+    for (const key of Object.keys(chiefAppointmentDraft)) {
+        delete chiefAppointmentDraft[Number(key)];
+    }
+    for (const level of chiefLevels.value) {
+        chiefAppointmentDraft[level] = chiefAssignments.value[level]?.id ?? 0;
+    }
+
+    selectedCityId.value = data.value.cityAssignments[0]?.id ?? 0;
+    selectedOfficerLevel.value = 4;
+    selectedGeneralId.value = currentCityOfficer.value?.id ?? 0;
+    kickTargetId.value = 0;
+
+    ambassadorSelection.value = data.value.permissionCandidates.ambassadors
+        .filter((candidate) => candidate.permission === 'ambassador')
+        .map((candidate) => candidate.id);
+    auditorSelection.value = data.value.permissionCandidates.auditors
+        .filter((candidate) => candidate.permission === 'auditor')
+        .map((candidate) => candidate.id);
+};
+
+watch(
+    () => data.value,
+    (value) => {
+        if (value) {
+            initializeDrafts();
+        }
+    }
+);
+
+watch([selectedCityId, selectedOfficerLevel], () => {
+    selectedGeneralId.value = currentCityOfficer.value?.id ?? 0;
+});
+
+const appointChief = async (level: number) => {
+    if (!data.value) {
+        return;
+    }
+    const generalId = chiefAppointmentDraft[level] ?? 0;
+    const general = generalMap.value.get(generalId);
+    const title = formatOfficerLevelText(level, nationLevel.value);
+    const message =
+        generalId === 0
+            ? `${title} 자리를 비우시겠습니까?`
+            : `${general?.name ?? '선택 장수'}을(를) ${title}로 임명하시겠습니까?`;
+
+    if (!window.confirm(message)) {
+        return;
+    }
+
+    try {
+        await trpc.nation.appoint.mutate({
+            destGeneralId: generalId,
+            destCityId: 0,
+            officerLevel: level,
+        });
+        await loadPersonnel();
+    } catch (err) {
+        error.value = resolveErrorMessage(err);
+    }
+};
+
+const appointCityOfficer = async () => {
+    if (!data.value || !selectedCityId.value) {
+        return;
+    }
+    const city = data.value.cityAssignments.find((entry) => entry.id === selectedCityId.value);
+    const general = generalMap.value.get(selectedGeneralId.value);
+    const officerLabel = officerLabels[selectedOfficerLevel.value];
+    const message =
+        selectedGeneralId.value === 0
+            ? `${city?.name ?? ''} ${officerLabel} 자리를 비우시겠습니까?`
+            : `${general?.name ?? '선택 장수'}을(를) ${city?.name ?? ''} ${officerLabel}로 임명하시겠습니까?`;
+
+    if (!window.confirm(message)) {
+        return;
+    }
+
+    try {
+        await trpc.nation.appoint.mutate({
+            destGeneralId: selectedGeneralId.value,
+            destCityId: selectedCityId.value,
+            officerLevel: selectedOfficerLevel.value,
+        });
+        await loadPersonnel();
+    } catch (err) {
+        error.value = resolveErrorMessage(err);
+    }
+};
+
+const kickGeneral = async () => {
+    const general = generalMap.value.get(kickTargetId.value);
+    if (!general) {
+        return;
+    }
+    if (!window.confirm(`${general.name}을(를) 추방하시겠습니까?`)) {
+        return;
+    }
+
+    try {
+        await trpc.nation.kick.mutate({ destGeneralId: general.id });
+        await loadPersonnel();
+    } catch (err) {
+        error.value = resolveErrorMessage(err);
+    }
+};
+
+const enforceLimit = (list: number[], id: number) => {
+    if (list.length <= 2) {
+        return;
+    }
+    const idx = list.indexOf(id);
+    if (idx >= 0) {
+        list.splice(idx, 1);
+    }
+    alert('최대 2명까지 설정 가능합니다.');
+};
+
+const enforceAmbassadorLimit = (id: number) => {
+    enforceLimit(ambassadorSelection.value, id);
+};
+
+const enforceAuditorLimit = (id: number) => {
+    enforceLimit(auditorSelection.value, id);
+};
+
+const changePermissions = async (isAmbassador: boolean) => {
+    const selection = isAmbassador ? ambassadorSelection.value : auditorSelection.value;
+    if (!window.confirm('권한을 변경하시겠습니까?')) {
+        return;
+    }
+
+    try {
+        await trpc.nation.changePermission.mutate({
+            isAmbassador,
+            targetGeneralIds: selection,
+        });
+        await loadPersonnel();
+    } catch (err) {
+        error.value = resolveErrorMessage(err);
+    }
+};
+
+const kickCandidates = computed(() => {
+    const list = data.value?.generals ?? [];
+    const myId = data.value?.me.id ?? 0;
+    return list.filter((general) => general.id !== myId);
+});
+
+onMounted(() => {
+    void loadPersonnel();
+});
+</script>
+
+<template>
+    <main class="nation-page">
+        <header class="page-header">
+            <div>
+                <h1 class="page-title">인사부</h1>
+                <p class="page-subtitle">수뇌 임명과 도시 관직 관리</p>
+            </div>
+            <div class="header-actions">
+                <RouterLink class="ghost" to="/">메인</RouterLink>
+                <RouterLink class="ghost" to="/nation/cities">세력 도시</RouterLink>
+                <RouterLink class="ghost" to="/nation/generals">세력 장수</RouterLink>
+                <button class="ghost" @click="loadPersonnel">새로고침</button>
+            </div>
+        </header>
+
+        <div v-if="error" class="error">{{ error }}</div>
+
+        <SkeletonLines v-if="loading" :lines="6" />
+
+        <section v-else class="panel-grid">
+            <PanelCard title="수뇌 현황" subtitle="현재 수뇌 배치">
+                <div class="chief-grid">
+                    <div v-for="level in chiefLevels" :key="level" class="chief-item">
+                        <div class="chief-title">{{ formatOfficerLevelText(level, nationLevel) }}</div>
+                        <div class="chief-name">
+                            {{ chiefAssignments[level]?.name ?? '-' }}
+                        </div>
+                        <div class="chief-meta" v-if="chiefAssignments[level]">
+                            {{ chiefAssignments[level]?.officerCityName ?? chiefAssignments[level]?.cityName ?? '-' }}
+                        </div>
+                    </div>
+                </div>
+            </PanelCard>
+
+            <PanelCard title="수뇌부 임명" subtitle="수뇌 관직 임명 및 해임" v-if="canAssign">
+                <div class="chief-appoint">
+                    <div v-for="level in chiefLevels" :key="level" class="appoint-row">
+                        <div class="appoint-label">{{ formatOfficerLevelText(level, nationLevel) }}</div>
+                        <select v-model.number="chiefAppointmentDraft[level]" class="select-input">
+                            <option :value="0">공석</option>
+                            <option v-for="candidate in chiefCandidates(level)" :key="candidate.id" :value="candidate.id">
+                                {{ formatCandidateLabel(candidate) }}
+                            </option>
+                        </select>
+                        <button class="ghost" @click="appointChief(level)">임명</button>
+                    </div>
+                </div>
+            </PanelCard>
+
+            <PanelCard title="도시 관직 빠른 임명" subtitle="도시별 관직을 신속하게 배치합니다" v-if="canAssign">
+                <div class="fast-appoint">
+                    <div class="appoint-row">
+                        <div class="appoint-label">도시</div>
+                        <select v-model.number="selectedCityId" class="select-input">
+                            <option v-for="city in data?.cityAssignments ?? []" :key="city.id" :value="city.id">
+                                {{ regionMap[city.region] ?? '-' }} · {{ cityLevelMap[city.level] ?? '-' }} {{ city.name }}
+                            </option>
+                        </select>
+                    </div>
+                    <div class="appoint-row">
+                        <div class="appoint-label">관직</div>
+                        <select v-model.number="selectedOfficerLevel" class="select-input">
+                            <option :value="4">태수</option>
+                            <option :value="3">군사</option>
+                            <option :value="2">종사</option>
+                        </select>
+                    </div>
+                    <div class="appoint-row">
+                        <div class="appoint-label">장수</div>
+                        <select v-model.number="selectedGeneralId" class="select-input">
+                            <option :value="0">공석</option>
+                            <option
+                                v-for="candidate in cityCandidatesByLevel[selectedOfficerLevel]"
+                                :key="candidate.id"
+                                :value="candidate.id"
+                            >
+                                {{ formatCandidateLabel(candidate) }}
+                            </option>
+                        </select>
+                    </div>
+                    <div class="current-officer">
+                        현재 임명: {{ currentCityOfficer?.name ?? '-' }}
+                    </div>
+                    <button class="ghost" @click="appointCityOfficer">임명</button>
+                </div>
+            </PanelCard>
+
+            <PanelCard title="도시 관직 현황" subtitle="도시별 관직 배치">
+                <div class="table-scroll">
+                    <table class="nation-table">
+                        <thead>
+                            <tr>
+                                <th>도시</th>
+                                <th>태수</th>
+                                <th>군사</th>
+                                <th>종사</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="city in data?.cityAssignments ?? []" :key="city.id">
+                                <td>{{ city.name }}</td>
+                                <td>{{ city.officers[4]?.name ?? '-' }}</td>
+                                <td>{{ city.officers[3]?.name ?? '-' }}</td>
+                                <td>{{ city.officers[2]?.name ?? '-' }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </PanelCard>
+
+            <PanelCard title="외교 권한" subtitle="외교권자/조언자 임명" v-if="isLeader">
+                <div class="permission-grid">
+                    <div>
+                        <div class="permission-title">외교권자 (최대 2명)</div>
+                        <div class="permission-list">
+                            <label
+                                v-for="candidate in data?.permissionCandidates.ambassadors ?? []"
+                                :key="candidate.id"
+                                class="permission-item"
+                            >
+                                <input
+                                    type="checkbox"
+                                    :value="candidate.id"
+                                    v-model="ambassadorSelection"
+                                    @change="enforceAmbassadorLimit(candidate.id)"
+                                />
+                                {{ candidate.name }}
+                            </label>
+                        </div>
+                        <button class="ghost" @click="changePermissions(true)">변경</button>
+                    </div>
+                    <div>
+                        <div class="permission-title">조언자 (최대 2명)</div>
+                        <div class="permission-list">
+                            <label
+                                v-for="candidate in data?.permissionCandidates.auditors ?? []"
+                                :key="candidate.id"
+                                class="permission-item"
+                            >
+                                <input
+                                    type="checkbox"
+                                    :value="candidate.id"
+                                    v-model="auditorSelection"
+                                    @change="enforceAuditorLimit(candidate.id)"
+                                />
+                                {{ candidate.name }}
+                            </label>
+                        </div>
+                        <button class="ghost" @click="changePermissions(false)">변경</button>
+                    </div>
+                </div>
+            </PanelCard>
+
+            <PanelCard title="추방" subtitle="국가에서 장수를 추방합니다" v-if="canAssign">
+                <div class="kick-panel">
+                    <select v-model.number="kickTargetId" class="select-input">
+                        <option :value="0">장수 선택</option>
+                        <option v-for="general in kickCandidates" :key="general.id" :value="general.id">
+                            {{ general.name }}
+                        </option>
+                    </select>
+                    <button class="ghost" @click="kickGeneral" :disabled="kickTargetId === 0">추방</button>
+                </div>
+            </PanelCard>
+        </section>
+    </main>
+</template>
+
+<style scoped>
+.nation-page {
+    min-height: 100vh;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.page-header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 12px;
+    border-bottom: 1px solid rgba(201, 164, 90, 0.4);
+    padding-bottom: 12px;
+}
+
+.page-title {
+    font-size: 1.6rem;
+    font-weight: 600;
+}
+
+.page-subtitle {
+    font-size: 0.85rem;
+    color: rgba(232, 221, 196, 0.7);
+}
+
+.header-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.ghost {
+    border: 1px solid rgba(201, 164, 90, 0.4);
+    padding: 6px 12px;
+    font-size: 0.8rem;
+    cursor: pointer;
+    text-decoration: none;
+    color: inherit;
+    background: rgba(16, 16, 16, 0.6);
+}
+
+.error {
+    color: #f5b7b1;
+    font-size: 0.85rem;
+}
+
+.panel-grid {
+    display: grid;
+    gap: 16px;
+}
+
+.chief-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 12px;
+}
+
+.chief-item {
+    border: 1px solid rgba(201, 164, 90, 0.2);
+    padding: 8px;
+}
+
+.chief-title {
+    font-size: 0.75rem;
+    color: rgba(232, 221, 196, 0.6);
+}
+
+.chief-name {
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+.chief-meta {
+    font-size: 0.75rem;
+    color: rgba(232, 221, 196, 0.6);
+}
+
+.chief-appoint,
+.fast-appoint {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.appoint-row {
+    display: grid;
+    grid-template-columns: 120px minmax(0, 1fr) auto;
+    gap: 8px;
+    align-items: center;
+}
+
+.appoint-label {
+    font-size: 0.8rem;
+    color: rgba(232, 221, 196, 0.7);
+}
+
+.select-input {
+    border: 1px solid rgba(201, 164, 90, 0.4);
+    background: rgba(16, 16, 16, 0.8);
+    color: rgba(232, 221, 196, 0.9);
+    padding: 6px 8px;
+    font-size: 0.75rem;
+}
+
+.current-officer {
+    font-size: 0.75rem;
+    color: rgba(232, 221, 196, 0.6);
+}
+
+.table-scroll {
+    overflow-x: auto;
+    max-height: 320px;
+    overflow-y: auto;
+}
+
+.nation-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8rem;
+}
+
+.nation-table th,
+.nation-table td {
+    padding: 6px 8px;
+    border-bottom: 1px solid rgba(201, 164, 90, 0.2);
+    text-align: left;
+    white-space: nowrap;
+}
+
+.nation-table thead th {
+    font-size: 0.7rem;
+    color: rgba(232, 221, 196, 0.6);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.permission-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 16px;
+}
+
+.permission-title {
+    font-size: 0.8rem;
+    color: rgba(232, 221, 196, 0.7);
+    margin-bottom: 6px;
+}
+
+.permission-list {
+    display: grid;
+    gap: 6px;
+    margin-bottom: 8px;
+}
+
+.permission-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.8rem;
+}
+
+.kick-panel {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+</style>