feat(kol): expand variable schema and polish KOL UI

- Add length/range limits to KOL variable definitions: max_length and
  default_value for input/textarea, min_value/max_value/default_number
  for number. Backend validates and normalizes; frontend renders limit
  inputs in KolVariableConfig and applies limits at runtime in
  KolDynamicForm.
- Sort workspace cards by most recent prompt/package update, falling
  back to granted_at. Adds updated_at to KolWorkspaceCard.
- Polish TemplatesView, WorkspaceView, and KOL package management UI;
  route create/update/publish/archive/delete toasts through i18n and
  expand package form copy and status labels.
- Remove stale KnowledgeView.vue.patch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/admin-web/src/components/kol/KolDynamicForm.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import type { KolVariableDefinition } from "@geo/shared-types";
-import { computed } from "vue";
 import { useI18n } from "vue-i18n";
+import {
+  getKolVariableNumberMax,
+  getKolVariableNumberMin,
+  getKolVariableTextMaxLength,
+  sanitizeKolVariableValue,
+} from "@/lib/kol-placeholders";
 
 const props = defineProps<{
   variables: KolVariableDefinition[];
@@ -14,13 +19,8 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
-const formModel = computed({
+function updateField(variable: KolVariableDefinition, key: string, value: any) {
-  get: () => props.modelValue,
+  const next = { ...props.modelValue, [key]: sanitizeKolVariableValue(variable, value) };
-  set: (val) => emit("update:modelValue", val),
-});
-
-function updateField(key: string, value: any) {
-  const next = { ...props.modelValue, [key]: value };
   emit("update:modelValue", next);
 }
 
@@ -31,6 +31,18 @@ const selectOptions = (variable: KolVariableDefinition) => {
 function fieldKey(variable: KolVariableDefinition): string {
   return variable.key?.trim() || variable.id;
 }
+
+function textLimit(variable: KolVariableDefinition): number {
+  return getKolVariableTextMaxLength(variable);
+}
+
+function numberMin(variable: KolVariableDefinition): number {
+  return getKolVariableNumberMin(variable);
+}
+
+function numberMax(variable: KolVariableDefinition): number {
+  return getKolVariableNumberMax(variable);
+}
 </script>
 
 <template>
@@ -45,7 +57,9 @@ function fieldKey(variable: KolVariableDefinition): string {
         <a-input
           :value="modelValue[fieldKey(variable)]"
           :placeholder="variable.placeholder || t('common.inputPlease')"
-          @update:value="(val: string) => updateField(fieldKey(variable), val)"
+          :maxlength="textLimit(variable)"
+          show-count
+          @update:value="(val: string) => updateField(variable, fieldKey(variable), val)"
         />
       </template>
 
@@ -53,8 +67,10 @@ function fieldKey(variable: KolVariableDefinition): string {
         <a-textarea
           :value="modelValue[fieldKey(variable)]"
           :placeholder="variable.placeholder || t('common.inputPlease')"
+          :maxlength="textLimit(variable)"
           :rows="4"
-          @update:value="(val: string) => updateField(fieldKey(variable), val)"
+          show-count
+          @update:value="(val: string) => updateField(variable, fieldKey(variable), val)"
         />
       </template>
 
@@ -63,7 +79,7 @@ function fieldKey(variable: KolVariableDefinition): string {
           :value="modelValue[fieldKey(variable)]"
           :placeholder="variable.placeholder || t('common.selectPlease')"
           :options="selectOptions(variable)"
-          @update:value="(val: string) => updateField(fieldKey(variable), val)"
+          @update:value="(val: string) => updateField(variable, fieldKey(variable), val)"
         />
       </template>
 
@@ -71,8 +87,10 @@ function fieldKey(variable: KolVariableDefinition): string {
         <a-input-number
           :value="modelValue[fieldKey(variable)]"
           :placeholder="variable.placeholder"
+          :min="numberMin(variable)"
+          :max="numberMax(variable)"
           style="width: 100%"
-          @update:value="(val: number) => updateField(fieldKey(variable), val)"
+          @update:value="(val: number | null) => updateField(variable, fieldKey(variable), val)"
         />
       </template>
 
@@ -80,7 +98,7 @@ function fieldKey(variable: KolVariableDefinition): string {
         <a-checkbox-group
           :value="modelValue[fieldKey(variable)] || []"
           :options="selectOptions(variable)"
-          @update:value="(val: string[]) => updateField(fieldKey(variable), val)"
+          @update:value="(val: string[]) => updateField(variable, fieldKey(variable), val)"
         />
       </template>
     </a-form-item>

apps/admin-web/src/components/kol/KolPackageCard.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import { UserOutlined, TagOutlined, TeamOutlined, ThunderboltOutlined } from "@ant-design/icons-vue";
 import type { KolPackageSummary } from "@geo/shared-types";
 import { useI18n } from "vue-i18n";
 
+import { resolveApiURL } from "@/lib/api";
+
 const props = defineProps<{
   package: KolPackageSummary;
 }>();
@@ -12,6 +15,7 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useI18n();
+const coverUrl = computed(() => resolveApiURL(props.package.cover_url));
 
 function handleClick() {
   emit("click", props.package.id);
@@ -21,8 +25,8 @@ function handleClick() {
 <template>
   <a-card hoverable class="kol-package-card" @click="handleClick">
     <template #cover>
-      <div v-if="props.package.cover_url" class="card-cover-image">
+      <div v-if="coverUrl" class="card-cover-image">
-        <img alt="cover" :src="props.package.cover_url" />
+        <img alt="cover" :src="coverUrl" />
       </div>
       <div v-else class="card-cover-fallback">
         <ThunderboltOutlined class="fallback-icon" />

apps/admin-web/src/components/kol/KolPackageFormModal.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
-import { reactive, watch } from "vue";
+import { DeleteOutlined, PictureOutlined } from "@ant-design/icons-vue";
+import { message } from "ant-design-vue";
+import { computed, reactive, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { CreateKolPackageRequest } from "@geo/shared-types";
 
+import CoverPickerModal from "@/components/CoverPickerModal.vue";
+import { imagesApi, resolveApiURL } from "@/lib/api";
+import { deriveCoverFileName } from "@/lib/cover-requirements";
+
 const props = defineProps<{
   open: boolean;
   initialValue?: Partial<CreateKolPackageRequest>;
@@ -14,6 +20,7 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useI18n();
+const coverPickerOpen = ref(false);
 
 const formState = reactive<CreateKolPackageRequest>({
   name: "",
@@ -32,29 +39,57 @@ watch(
         name: props.initialValue?.name || "",
         description: props.initialValue?.description || "",
         industry: props.initialValue?.industry || "",
-        tags: props.initialValue?.tags || [],
+        tags: [...(props.initialValue?.tags || [])],
         price_note: props.initialValue?.price_note || "",
         cover_url: props.initialValue?.cover_url || "",
       });
+      return;
     }
-  }
+
+    coverPickerOpen.value = false;
+  },
 );
 
+const coverPreviewUrl = computed(() => resolveApiURL(formState.cover_url));
+const coverFileName = computed(() => deriveCoverFileName(formState.cover_url));
+
 function handleOk() {
-  if (!formState.name.trim()) return;
+  if (!formState.name.trim()) {
-  emit("submit", { ...formState });
+    message.warning(t("kol.manage.packageForm.nameRequired"));
+    return;
+  }
+  emit("submit", { ...formState, tags: [...formState.tags] });
   emit("update:open", false);
 }
 
 function handleCancel() {
   emit("update:open", false);
 }
+
+function handleRemoveCover() {
+  formState.cover_url = "";
+}
+
+function handleCoverConfirmed(payload: { url: string }) {
+  formState.cover_url = resolveApiURL(payload.url);
+}
+
+async function uploadCover(file: File) {
+  const uploaded = await imagesApi.upload(file);
+  return {
+    url: uploaded.url,
+    fileName: uploaded.name,
+    assetId: uploaded.id,
+  };
+}
 </script>
 
 <template>
   <a-modal
     :open="open"
     :title="initialValue ? t('kol.manage.editPackage') : t('kol.manage.createPackage')"
+    :ok-text="t('common.confirm')"
+    :cancel-text="t('common.cancel')"
     @ok="handleOk"
     @cancel="handleCancel"
   >
@@ -71,17 +106,132 @@ function handleCancel() {
         <a-input v-model:value="formState.industry" />
       </a-form-item>
 
-      <a-form-item label="Tags">
+      <a-form-item :label="t('kol.manage.packageForm.tags')">
-        <a-select v-model:value="formState.tags" mode="tags" style="width: 100%" placeholder="Add tags" />
+        <a-select
+          v-model:value="formState.tags"
+          mode="tags"
+          style="width: 100%"
+          :placeholder="t('kol.manage.packageForm.tagsPlaceholder')"
+        />
       </a-form-item>
 
-      <a-form-item label="Price Note">
+      <a-form-item :label="t('kol.manage.packageForm.priceNote')">
-        <a-input v-model:value="formState.price_note" />
+        <a-input
+          v-model:value="formState.price_note"
+          :placeholder="t('kol.manage.packageForm.priceNotePlaceholder')"
+        />
       </a-form-item>
 
-      <a-form-item label="Cover URL">
+      <a-form-item :label="t('kol.manage.packageForm.cover')">
-        <a-input v-model:value="formState.cover_url" />
+        <div class="package-cover-field">
+          <button
+            type="button"
+            class="package-cover-picker"
+            @click="coverPickerOpen = true"
+          >
+            <template v-if="coverPreviewUrl">
+              <img :src="coverPreviewUrl" :alt="t('kol.manage.packageForm.cover')" class="package-cover-picker__image" />
+            </template>
+            <template v-else>
+              <div class="package-cover-picker__empty">
+                <PictureOutlined class="package-cover-picker__icon" />
+                <strong>{{ t("kol.manage.packageForm.selectCover") }}</strong>
+                <span>{{ t("kol.manage.packageForm.coverHint") }}</span>
+              </div>
+            </template>
+          </button>
+
+          <div class="package-cover-actions">
+            <a-button @click="coverPickerOpen = true">
+              {{ coverPreviewUrl ? t("kol.manage.packageForm.changeCover") : t("kol.manage.packageForm.selectCover") }}
+            </a-button>
+            <a-button v-if="coverPreviewUrl" danger @click="handleRemoveCover">
+              <template #icon><DeleteOutlined /></template>
+              {{ t("kol.manage.packageForm.removeCover") }}
+            </a-button>
+          </div>
+        </div>
       </a-form-item>
     </a-form>
   </a-modal>
+
+  <CoverPickerModal
+    v-model:open="coverPickerOpen"
+    :article-id="null"
+    :platform-ids="[]"
+    :current-url="coverPreviewUrl"
+    :current-file-name="coverFileName"
+    :title="t('kol.manage.packageForm.coverPicker.title')"
+    :local-tab-label="t('kol.manage.packageForm.coverPicker.localTab')"
+    :empty-upload-title="t('kol.manage.packageForm.coverPicker.emptyTitle')"
+    :empty-upload-hint="t('kol.manage.packageForm.coverPicker.emptyHint')"
+    :upload-handler="uploadCover"
+    @confirmed="handleCoverConfirmed"
+  />
 </template>
+
+<style scoped>
+.package-cover-field {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.package-cover-picker {
+  width: 100%;
+  min-height: 180px;
+  border: 1px dashed #d0d5dd;
+  border-radius: 12px;
+  padding: 0;
+  overflow: hidden;
+  background: #f8fafc;
+  cursor: pointer;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.package-cover-picker:hover {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.08);
+}
+
+.package-cover-picker__image {
+  display: block;
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+}
+
+.package-cover-picker__empty {
+  display: flex;
+  min-height: 180px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 20px;
+  color: #475467;
+  text-align: center;
+}
+
+.package-cover-picker__empty strong {
+  color: #111827;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.package-cover-picker__empty span {
+  max-width: 320px;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.package-cover-picker__icon {
+  font-size: 28px;
+  color: #1677ff;
+}
+
+.package-cover-actions {
+  display: flex;
+  gap: 8px;
+}
+</style>

apps/admin-web/src/components/kol/KolPersonaCard.vue

@@ -6,7 +6,7 @@ import { message } from "ant-design-vue";
 import { EditOutlined, UserOutlined, LoadingOutlined } from "@ant-design/icons-vue";
 import type { KolProfile } from "@geo/shared-types";
 
-import { kolManageApi } from "@/lib/api";
+import { kolManageApi, resolveApiURL } from "@/lib/api";
 import { formatError } from "@/lib/errors";
 
 const props = defineProps<{
@@ -22,7 +22,7 @@ const draftBio = ref(props.profile.bio ?? "");
 const avatarUploading = ref(false);
 const fileInput = ref<HTMLInputElement | null>(null);
 
-const avatarURL = computed(() => props.profile.avatar_url ?? "");
+const avatarURL = computed(() => resolveApiURL(props.profile.avatar_url));
 
 const updateMutation = useMutation({
   mutationFn: kolManageApi.updateProfile,

apps/admin-web/src/components/kol/KolPromptEditor.vue

@@ -14,7 +14,11 @@ import type { KolCardConfig, KolVariableDefinition } from "@geo/shared-types";
 import { formatError } from "@/lib/errors";
 import { buildKolPlatformOptions } from "@/lib/kol-platform-options";
 import { mergeKolCardConfig, parseKolCardConfig } from "@/lib/kol-card-config";
-import { syncKolVariablesWithContent } from "@/lib/kol-placeholders";
+import {
+  getKolVariableInitialValue,
+  normalizeKolVariableDefinition,
+  syncKolVariablesWithContent,
+} from "@/lib/kol-placeholders";
 
 const props = defineProps<{
   promptId: number;
@@ -69,7 +73,9 @@ watch(
       metadataForm.allow_web_search = parsedCardConfig.allow_web_search;
       metadataForm.allow_user_knowledge = parsedCardConfig.allow_user_knowledge;
       content.value = detail.latest_prompt_content ?? "";
-      variables.value = detail.latest_schema_json?.variables ?? [];
+      variables.value = (detail.latest_schema_json?.variables ?? []).map((variable) =>
+        normalizeKolVariableDefinition(variable),
+      );
       cardConfig.value = { ...nextCardConfig };
     }
   },
@@ -178,7 +184,7 @@ function buildPreviewValues(nextVariables: KolVariableDefinition[]): Record<stri
 
   nextVariables.forEach((variable) => {
     const fieldKey = variable.key?.trim() || variable.id;
-    nextValues[fieldKey] = variable.type === "checkbox" ? [] : undefined;
+    nextValues[fieldKey] = getKolVariableInitialValue(variable);
   });
 
   return nextValues;

apps/admin-web/src/components/kol/KolVariableConfig.vue

@@ -4,6 +4,15 @@ import { nextTick, ref } from "vue";
 import { CloseOutlined, DownOutlined } from "@ant-design/icons-vue";
 import type { KolVariableDefinition, KolVariableType } from "@geo/shared-types";
 import { useI18n } from "vue-i18n";
+import {
+  DEFAULT_KOL_NUMBER_MAX,
+  DEFAULT_KOL_NUMBER_MIN,
+  DEFAULT_KOL_TEXT_MAX_LENGTH,
+  getKolVariableNumberMax,
+  getKolVariableNumberMin,
+  getKolVariableTextMaxLength,
+  normalizeKolVariableDefinition,
+} from "@/lib/kol-placeholders";
 
 const props = defineProps<{
   variables: KolVariableDefinition[];
@@ -33,7 +42,10 @@ type FocusVariableOptions = {
 
 function updateVariable(index: number, updates: Partial<KolVariableDefinition>) {
   const newVariables = [...props.variables];
-  newVariables[index] = { ...newVariables[index], ...updates };
+  newVariables[index] = normalizeKolVariableDefinition({
+    ...newVariables[index],
+    ...updates,
+  });
   emit("update:variables", newVariables);
 }
 
@@ -55,6 +67,73 @@ function handleTypeChange(index: number, type: KolVariableType) {
   updateVariable(index, { type });
 }
 
+function handleTextMaxLengthChange(index: number, value: number | null) {
+  const maxLength =
+    typeof value === "number" && Number.isFinite(value) && value > 0
+      ? Math.trunc(value)
+      : DEFAULT_KOL_TEXT_MAX_LENGTH;
+  const currentVariable = normalizeKolVariableDefinition(props.variables[index]);
+
+  updateVariable(index, {
+    max_length: maxLength,
+    default_value: currentVariable.default_value?.slice(0, maxLength),
+  });
+}
+
+function handleNumberMinChange(index: number, value: number | null) {
+  const currentVariable = normalizeKolVariableDefinition(props.variables[index]);
+  const minValue =
+    typeof value === "number" && Number.isFinite(value) ? value : DEFAULT_KOL_NUMBER_MIN;
+  const maxValue = Math.max(getKolVariableNumberMax(currentVariable), minValue);
+  const defaultNumber =
+    currentVariable.default_number === undefined
+      ? undefined
+      : Math.min(maxValue, Math.max(minValue, currentVariable.default_number));
+
+  updateVariable(index, {
+    min_value: minValue,
+    max_value: maxValue,
+    default_number: defaultNumber,
+  });
+}
+
+function handleNumberMaxChange(index: number, value: number | null) {
+  const currentVariable = normalizeKolVariableDefinition(props.variables[index]);
+  const minValue = getKolVariableNumberMin(currentVariable);
+  const maxValue =
+    typeof value === "number" && Number.isFinite(value)
+      ? Math.max(value, minValue)
+      : Math.max(DEFAULT_KOL_NUMBER_MAX, minValue);
+  const defaultNumber =
+    currentVariable.default_number === undefined
+      ? undefined
+      : Math.min(maxValue, Math.max(minValue, currentVariable.default_number));
+
+  updateVariable(index, {
+    min_value: minValue,
+    max_value: maxValue,
+    default_number: defaultNumber,
+  });
+}
+
+function handleDefaultNumberChange(index: number, value: number | null) {
+  updateVariable(index, {
+    default_number: value === null ? undefined : value,
+  });
+}
+
+function textLimit(variable: KolVariableDefinition): number {
+  return getKolVariableTextMaxLength(variable);
+}
+
+function numberMin(variable: KolVariableDefinition): number {
+  return getKolVariableNumberMin(variable);
+}
+
+function numberMax(variable: KolVariableDefinition): number {
+  return getKolVariableNumberMax(variable);
+}
+
 function setCardRef(key: string, el: Element | ComponentPublicInstance | null) {
   const element =
     el instanceof HTMLElement
@@ -180,6 +259,41 @@ defineExpose({
           />
         </div>
 
+        <template v-if="variable.type === 'input' || variable.type === 'textarea'">
+          <div class="form-item">
+            <label>{{ t('kol.manage.variable.maxLength') }}</label>
+            <a-input-number
+              :value="textLimit(variable)"
+              size="small"
+              :min="1"
+              :precision="0"
+              style="width: 100%"
+              @update:value="(val: number | null) => handleTextMaxLengthChange(index, val)"
+            />
+          </div>
+
+          <div class="form-item">
+            <label>{{ t('kol.manage.variable.defaultValue') }}</label>
+            <a-input
+              v-if="variable.type === 'input'"
+              :value="variable.default_value"
+              size="small"
+              :maxlength="textLimit(variable)"
+              show-count
+              @input="(e: Event) => updateVariable(index, { default_value: (e.target as HTMLInputElement).value })"
+            />
+            <a-textarea
+              v-else
+              :value="variable.default_value"
+              size="small"
+              :maxlength="textLimit(variable)"
+              :rows="3"
+              show-count
+              @update:value="(val: string) => updateVariable(index, { default_value: val })"
+            />
+          </div>
+        </template>
+
         <div v-if="variable.type === 'select' || variable.type === 'checkbox'" class="form-item">
           <label>{{ t('kol.manage.variable.options') }}</label>
           <a-input
@@ -189,6 +303,42 @@ defineExpose({
           />
         </div>
 
+        <template v-if="variable.type === 'number'">
+          <div class="form-item-grid">
+            <div class="form-item">
+              <label>{{ t('kol.manage.variable.minValue') }}</label>
+              <a-input-number
+                :value="numberMin(variable)"
+                size="small"
+                style="width: 100%"
+                @update:value="(val: number | null) => handleNumberMinChange(index, val)"
+              />
+            </div>
+
+            <div class="form-item">
+              <label>{{ t('kol.manage.variable.maxValue') }}</label>
+              <a-input-number
+                :value="numberMax(variable)"
+                size="small"
+                style="width: 100%"
+                @update:value="(val: number | null) => handleNumberMaxChange(index, val)"
+              />
+            </div>
+          </div>
+
+          <div class="form-item">
+            <label>{{ t('kol.manage.variable.defaultNumber') }}</label>
+            <a-input-number
+              :value="variable.default_number"
+              size="small"
+              style="width: 100%"
+              :min="numberMin(variable)"
+              :max="numberMax(variable)"
+              @update:value="(val: number | null) => handleDefaultNumberChange(index, val)"
+            />
+          </div>
+        </template>
+
         <div class="token-display">
           <code>&#123;&#123;{{ variable.key || variable.id }}&#125;&#125;</code>
         </div>
@@ -274,6 +424,12 @@ defineExpose({
   color: #8c8c8c;
 }
 
+.form-item-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
 .form-item-row {
   display: flex;
   justify-content: space-between;

apps/admin-web/src/i18n/messages/en-US.ts

@@ -79,8 +79,8 @@ const enUS = {
     contentManagement: "Content Management",
     knowledge: "Knowledge Base",
     images: "Image Management",
-    kolMarket: "Refined Templates",
+    kolMarket: "Refined Template Marketplace",
-    kolMarketplace: "Refined Templates",
+    kolMarketplace: "Refined Template Marketplace",
     kolWorkspace: "KOL Workspace",
     kolManage: "Prompt Management",
     kolDashboard: "Dashboard",
@@ -186,6 +186,8 @@ const enUS = {
     },
     manage: {
       title: "KOL Prompt Management",
+      packageTitle: "Packages",
+      promptTitle: "Prompts",
       createPackage: "Create package",
       editPackage: "Edit package",
       publishPackage: "Publish",
@@ -193,8 +195,46 @@ const enUS = {
       createPrompt: "Create prompt",
       activatePrompt: "Go live",
       archivePrompt: "Take offline",
+      confirmDeletePackage: "Are you sure you want to delete this package?",
+      confirmDeletePrompt: "Are you sure you want to delete this prompt?",
+      emptyPromptSelection: "Select a package on the left to view its prompts",
       platformHint: "Platform",
       platformHintDefault: "General",
+      packageStatus: {
+        draft: "Draft",
+        published: "Published",
+        archived: "Archived",
+      },
+      messages: {
+        packageCreated: "Package created successfully",
+        packageUpdated: "Package updated successfully",
+        packagePublished: "Package published successfully",
+        packageArchived: "Package archived successfully",
+        packageDeleted: "Package deleted successfully",
+        promptCreated: "Prompt created successfully",
+        promptActivated: "Prompt is live",
+        promptArchived: "Prompt is offline",
+        promptDeleted: "Prompt deleted successfully",
+      },
+      packageForm: {
+        tags: "Tags",
+        tagsPlaceholder: "Type a tag and press Enter",
+        priceNote: "Price Note",
+        priceNotePlaceholder: "For example: Contact me for pricing",
+        cover: "Cover Image",
+        coverHint: "Choose from the image library or upload a local image and convert it to WebP automatically.",
+        selectCover: "Select cover image",
+        changeCover: "Change cover image",
+        removeCover: "Remove cover image",
+        noCover: "No cover image selected",
+        nameRequired: "Package title is required",
+        coverPicker: {
+          title: "Select package cover",
+          localTab: "Local upload",
+          emptyTitle: "Choose an image for this package cover",
+          emptyHint: "Choose from the image library or upload a local image and convert it to WebP automatically.",
+        },
+      },
       status: {
         draft: "Draft",
         active: "Live",
@@ -221,6 +261,11 @@ const enUS = {
         required: "Required",
         placeholder: "Placeholder",
         options: "Options (comma separated)",
+        maxLength: "Max length",
+        defaultValue: "Default value",
+        minValue: "Min number",
+        maxValue: "Max number",
+        defaultNumber: "Default number",
       },
     },
     dashboard: {

apps/admin-web/src/i18n/messages/zh-CN.ts

@@ -79,8 +79,8 @@ const zhCN = {
     contentManagement: "内容管理",
     knowledge: "知识库",
     images: "图片管理",
-    kolMarket: "精调模版",
+    kolMarket: "精调模版市场",
-    kolMarketplace: "精调模版",
+    kolMarketplace: "精调模版市场",
     kolWorkspace: "KOL 工作台",
     kolManage: "提示词管理",
     kolDashboard: "数据看板",
@@ -186,6 +186,8 @@ const zhCN = {
     },
     manage: {
       title: "KOL 提示词管理",
+      packageTitle: "订阅包",
+      promptTitle: "提示词",
       createPackage: "创建订阅包",
       editPackage: "编辑包",
       publishPackage: "发布",
@@ -193,8 +195,46 @@ const zhCN = {
       createPrompt: "新增提示词",
       activatePrompt: "上线",
       archivePrompt: "下线",
+      confirmDeletePackage: "确定要删除这个订阅包吗？",
+      confirmDeletePrompt: "确定要删除这个提示词吗？",
+      emptyPromptSelection: "请选择左侧订阅包以查看提示词",
       platformHint: "平台",
       platformHintDefault: "通用",
+      packageStatus: {
+        draft: "草稿",
+        published: "已发布",
+        archived: "已归档",
+      },
+      messages: {
+        packageCreated: "订阅包创建成功",
+        packageUpdated: "订阅包更新成功",
+        packagePublished: "订阅包发布成功",
+        packageArchived: "订阅包归档成功",
+        packageDeleted: "订阅包删除成功",
+        promptCreated: "提示词创建成功",
+        promptActivated: "提示词已上线",
+        promptArchived: "提示词已下线",
+        promptDeleted: "提示词删除成功",
+      },
+      packageForm: {
+        tags: "标签",
+        tagsPlaceholder: "输入标签后按回车",
+        priceNote: "价格说明",
+        priceNotePlaceholder: "例如：联系我获取报价",
+        cover: "封面图",
+        coverHint: "支持从素材库选择，也支持本地上传后自动转为 WebP。",
+        selectCover: "选择封面图",
+        changeCover: "更换封面图",
+        removeCover: "移除封面图",
+        noCover: "暂未设置封面图",
+        nameRequired: "请填写订阅包标题",
+        coverPicker: {
+          title: "选择订阅包封面",
+          localTab: "本地上传",
+          emptyTitle: "选择一张图片作为订阅包封面",
+          emptyHint: "支持从素材库选择，也支持本地上传后自动转为 WebP。",
+        },
+      },
       status: {
         draft: "草稿",
         active: "已上线",
@@ -221,6 +261,11 @@ const zhCN = {
         required: "必填",
         placeholder: "提示语",
         options: "选项（逗号分隔）",
+        maxLength: "字数限制",
+        defaultValue: "默认值",
+        minValue: "最小数字",
+        maxValue: "最大数字",
+        defaultNumber: "默认数字",
       },
     },
     dashboard: {

apps/admin-web/src/lib/api.ts

@@ -297,10 +297,7 @@ export const kolManageApi = {
       }>>("/api/tenant/kol/manage/profile/avatar", formData);
 
       markImageUploadRequestFinished(progressToken);
-      return {
+      return response.data.data;
-        ...response.data.data,
-        url: resolveApiURL(response.data.data.url),
-      };
     } catch (error) {
       markImageUploadRequestFailed(progressToken);
       throw error;

apps/admin-web/src/lib/kol-placeholders.ts

@@ -4,6 +4,10 @@ import { newVariableId } from "./kol-variable-id";
 
 const KOL_PLACEHOLDER_RE = /\{\{\s*([^{}]+?)\s*\}\}/g;
 
+export const DEFAULT_KOL_TEXT_MAX_LENGTH = 20;
+export const DEFAULT_KOL_NUMBER_MIN = 0;
+export const DEFAULT_KOL_NUMBER_MAX = 10000;
+
 function normalizePlaceholderKey(value: string): string {
   return value.trim();
 }
@@ -21,6 +25,32 @@ function normalizeVariableType(type?: KolVariableType): KolVariableType {
   }
 }
 
+function normalizeFiniteNumber(value: unknown): number | undefined {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string" && value.trim()) {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return undefined;
+}
+
+function normalizePositiveInteger(value: unknown, fallback: number): number {
+  const normalized = normalizeFiniteNumber(value);
+  if (normalized === undefined) {
+    return fallback;
+  }
+  const rounded = Math.trunc(normalized);
+  return rounded > 0 ? rounded : fallback;
+}
+
+function clampNumber(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
 export function buildKolPlaceholderToken(key: string): string {
   return `{{${normalizePlaceholderKey(key)}}}`;
 }
@@ -70,7 +100,7 @@ export function createKolVariableDefinition(
 ): KolVariableDefinition {
   const normalizedKey = normalizePlaceholderKey(key);
 
-  return {
+  return normalizeKolVariableDefinition({
     id: overrides.id?.trim() || newVariableId(),
     key: normalizedKey,
     label: overrides.label?.trim() || normalizedKey,
@@ -78,7 +108,145 @@ export function createKolVariableDefinition(
     required: overrides.required ?? true,
     placeholder: overrides.placeholder,
     options: overrides.options,
+    max_length: overrides.max_length,
+    default_value: overrides.default_value,
+    min_value: overrides.min_value,
+    max_value: overrides.max_value,
+    default_number: overrides.default_number,
+  });
+}
+
+export function getKolVariableTextMaxLength(variable: KolVariableDefinition): number {
+  return normalizePositiveInteger(variable.max_length, DEFAULT_KOL_TEXT_MAX_LENGTH);
+}
+
+export function getKolVariableNumberMin(variable: KolVariableDefinition): number {
+  return normalizeFiniteNumber(variable.min_value) ?? DEFAULT_KOL_NUMBER_MIN;
+}
+
+export function getKolVariableNumberMax(variable: KolVariableDefinition): number {
+  const min = getKolVariableNumberMin(variable);
+  const max = normalizeFiniteNumber(variable.max_value) ?? DEFAULT_KOL_NUMBER_MAX;
+  return max >= min ? max : min;
+}
+
+export function normalizeKolVariableDefinition(variable: KolVariableDefinition): KolVariableDefinition {
+  const type = normalizeVariableType(variable.type);
+  const normalizedKey = normalizePlaceholderKey(variable.key || variable.label || variable.id);
+  const normalizedLabel = variable.label?.trim() || normalizedKey;
+  const normalizedOptions =
+    type === "select" || type === "checkbox"
+      ? (variable.options || []).map((item) => item.trim()).filter(Boolean)
+      : undefined;
+
+  const baseVariable: KolVariableDefinition = {
+    ...variable,
+    id: variable.id?.trim() || newVariableId(),
+    key: normalizedKey,
+    label: normalizedLabel,
+    type,
+    required: variable.required ?? true,
+    placeholder: variable.placeholder,
+    options: normalizedOptions,
   };
+
+  if (type === "input" || type === "textarea") {
+    const maxLength = getKolVariableTextMaxLength(baseVariable);
+    const defaultValue =
+      typeof variable.default_value === "string"
+        ? variable.default_value.slice(0, maxLength)
+        : undefined;
+
+    return {
+      ...baseVariable,
+      max_length: maxLength,
+      default_value: defaultValue,
+      min_value: undefined,
+      max_value: undefined,
+      default_number: undefined,
+    };
+  }
+
+  if (type === "number") {
+    const minValue = getKolVariableNumberMin(baseVariable);
+    const maxValue = getKolVariableNumberMax(baseVariable);
+    const rawDefaultNumber = normalizeFiniteNumber(variable.default_number);
+    const defaultNumber =
+      rawDefaultNumber === undefined ? undefined : clampNumber(rawDefaultNumber, minValue, maxValue);
+
+    return {
+      ...baseVariable,
+      options: undefined,
+      max_length: undefined,
+      default_value: undefined,
+      min_value: minValue,
+      max_value: maxValue,
+      default_number: defaultNumber,
+    };
+  }
+
+  return {
+    ...baseVariable,
+    max_length: undefined,
+    default_value: undefined,
+    min_value: undefined,
+    max_value: undefined,
+    default_number: undefined,
+  };
+}
+
+export function getKolVariableInitialValue(variable: KolVariableDefinition): any {
+  const normalized = normalizeKolVariableDefinition(variable);
+
+  if (normalized.type === "checkbox") {
+    return [];
+  }
+  if (normalized.type === "number") {
+    return normalized.default_number;
+  }
+  if (normalized.type === "input" || normalized.type === "textarea") {
+    return normalized.default_value;
+  }
+  return undefined;
+}
+
+export function sanitizeKolVariableValue(variable: KolVariableDefinition, value: any): any {
+  const normalized = normalizeKolVariableDefinition(variable);
+
+  if (normalized.type === "number") {
+    if (value === null || value === undefined || value === "") {
+      return undefined;
+    }
+    const numericValue = normalizeFiniteNumber(value);
+    if (numericValue === undefined) {
+      return undefined;
+    }
+    return clampNumber(numericValue, getKolVariableNumberMin(normalized), getKolVariableNumberMax(normalized));
+  }
+
+  if (normalized.type === "input" || normalized.type === "textarea") {
+    if (value === null || value === undefined) {
+      return undefined;
+    }
+    return String(value).slice(0, getKolVariableTextMaxLength(normalized));
+  }
+
+  return value;
+}
+
+export function isKolVariableValueEmpty(variable: KolVariableDefinition, value: any): boolean {
+  const normalized = normalizeKolVariableDefinition(variable);
+
+  if (normalized.type === "checkbox") {
+    return !Array.isArray(value) || value.length === 0;
+  }
+  if (normalized.type === "number") {
+    return value === null || value === undefined || value === "";
+  }
+  if (typeof value === "string") {
+    return value.trim().length === 0;
+  }
+  return value === null || value === undefined;
 }
 
 export function syncKolVariablesWithContent(
@@ -95,7 +263,7 @@ export function syncKolVariablesWithContent(
     }
     byKey.set(
       key,
-      createKolVariableDefinition(key, {
+      normalizeKolVariableDefinition({
         ...variable,
         key,
         label: variable.label?.trim() || key,

apps/admin-web/src/views/KnowledgeView.vue.patch

@@ -1,10 +0,0 @@
---- /Users/liangxu/Documents/test/geo-rankly/apps/admin-web/src/views/KnowledgeView.vue
-+++ /Users/liangxu/Documents/test/geo-rankly/apps/admin-web/src/views/KnowledgeView.vue
-@@ -37,6 +37,5 @@
- const itemForm = reactive({
--  group_id: undefined as number | undefined,
--  name: "",
-+  group_ids: [] as number[],
-   url: "",
-   content: "",
- });

apps/admin-web/src/views/KolGenerateView.vue

@@ -9,6 +9,11 @@ import { kolGenerateApi } from "@/lib/api";
 import KolDynamicForm from "@/components/kol/KolDynamicForm.vue";
 import KnowledgeGroupSelect from "@/components/KnowledgeGroupSelect.vue";
 import { parseKolCardConfig } from "@/lib/kol-card-config";
+import {
+  getKolVariableInitialValue,
+  isKolVariableValueEmpty,
+  normalizeKolVariableDefinition,
+} from "@/lib/kol-placeholders";
 
 const route = useRoute();
 const router = useRouter();
@@ -42,7 +47,7 @@ watch(
     if (schema?.schema_json?.variables) {
       const newValues: Record<string, any> = {};
       schema.schema_json.variables.forEach((v) => {
-        newValues[fieldKey(v.key, v.id)] = v.type === "checkbox" ? [] : undefined;
+        newValues[fieldKey(v.key, v.id)] = getKolVariableInitialValue(normalizeKolVariableDefinition(v));
       });
       values.value = newValues;
       enableWebSearch.value = false;
@@ -78,7 +83,8 @@ function handleSubmit() {
 
   const missingLabels: string[] = [];
   schema.schema_json.variables.forEach((v) => {
-    if (v.required && !values.value[fieldKey(v.key, v.id)]) {
+    const normalizedVariable = normalizeKolVariableDefinition(v);
+    if (normalizedVariable.required && isKolVariableValueEmpty(normalizedVariable, values.value[fieldKey(v.key, v.id)])) {
       missingLabels.push(v.label);
     }
   });

apps/admin-web/src/views/KolManageView.vue

@@ -45,8 +45,8 @@ const { data: prompts, isPending: promptsPending } = useQuery({
 const createPackageMutation = useMutation({
   mutationFn: (body: CreateKolPackageRequest) => kolManageApi.createPackage(body),
   onSuccess: () => {
-    message.success(t("common.create") + "成功");
+    message.success(t("kol.manage.messages.packageCreated"));
-    queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
+    void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
   },
   onError: (error) => message.error(formatError(error)),
 });
@@ -55,8 +55,8 @@ const updatePackageMutation = useMutation({
   mutationFn: (data: { id: number; body: CreateKolPackageRequest }) =>
     kolManageApi.updatePackage(data.id, data.body),
   onSuccess: () => {
-    message.success(t("common.edit") + "成功");
+    message.success(t("kol.manage.messages.packageUpdated"));
-    queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
+    void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
   },
   onError: (error) => message.error(formatError(error)),
 });
@@ -64,37 +64,40 @@ const updatePackageMutation = useMutation({
 const publishPackageMutation = useMutation({
   mutationFn: (id: number) => kolManageApi.publishPackage(id),
   onSuccess: () => {
-    message.success(t("kol.manage.publishPackage") + "成功");
+    message.success(t("kol.manage.messages.packagePublished"));
-    queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
+    void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
   },
+  onError: (error) => message.error(formatError(error)),
 });
 
 const archivePackageMutation = useMutation({
   mutationFn: (id: number) => kolManageApi.archivePackage(id),
   onSuccess: () => {
-    message.success(t("kol.manage.archivePackage") + "成功");
+    message.success(t("kol.manage.messages.packageArchived"));
-    queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
+    void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
   },
+  onError: (error) => message.error(formatError(error)),
 });
 
 const deletePackageMutation = useMutation({
   mutationFn: (id: number) => kolManageApi.deletePackage(id),
   onSuccess: (_, id) => {
-    message.success(t("common.delete") + "成功");
+    message.success(t("kol.manage.messages.packageDeleted"));
-    queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
+    void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
     if (selectedPackageId.value === id) {
       selectedPackageId.value = null;
       editingPromptId.value = null;
     }
   },
+  onError: (error) => message.error(formatError(error)),
 });
 
 const createPromptMutation = useMutation({
   mutationFn: (body: CreateKolPromptRequest) =>
     kolManageApi.createPrompt(selectedPackageId.value!, body),
   onSuccess: () => {
-    message.success(t("kol.manage.createPrompt") + "成功");
+    message.success(t("kol.manage.messages.promptCreated"));
-    queryClient.invalidateQueries({
+    void queryClient.invalidateQueries({
       queryKey: ["kol", "packages", selectedPackageId.value, "prompts"],
     });
   },
@@ -111,7 +114,7 @@ const togglePromptStatusMutation = useMutation({
   },
   onSuccess: (_, variables) => {
     message.success(
-      t(variables.nextStatus === "active" ? "kol.manage.activatePrompt" : "kol.manage.archivePrompt") + "成功"
+      t(variables.nextStatus === "active" ? "kol.manage.messages.promptActivated" : "kol.manage.messages.promptArchived")
     );
     void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
     void queryClient.invalidateQueries({
@@ -131,7 +134,7 @@ const deletePromptMutation = useMutation({
     deletingPromptId.value = id;
   },
   onSuccess: (_, id) => {
-    message.success(t("common.delete") + "成功");
+    message.success(t("kol.manage.messages.promptDeleted"));
     void queryClient.invalidateQueries({ queryKey: ["kol", "packages"] });
     void queryClient.invalidateQueries({
       queryKey: ["kol", "packages", selectedPackageId.value, "prompts"],
@@ -180,7 +183,7 @@ function handlePackageSubmit(body: CreateKolPackageRequest) {
 function handleDeletePackage(id: number) {
   Modal.confirm({
     title: t("common.delete") + "?",
-    content: "确定要删除这个订阅包吗？",
+    content: t("kol.manage.confirmDeletePackage"),
     onOk: () => deletePackageMutation.mutate(id),
   });
 }
@@ -201,7 +204,7 @@ function handleCloseEditor() {
 function handleDeletePrompt(id: number) {
   Modal.confirm({
     title: t("common.delete") + "?",
-    content: "确定要删除这个提示词吗？",
+    content: t("kol.manage.confirmDeletePrompt"),
     onOk: () => deletePromptMutation.mutate(id),
   });
 }
@@ -211,6 +214,12 @@ function promptStatusLabel(status: string) {
   if (status === "archived") return t("kol.manage.status.archived");
   return t("kol.manage.status.draft");
 }
+
+function packageStatusLabel(status: string) {
+  if (status === "published") return t("kol.manage.packageStatus.published");
+  if (status === "archived") return t("kol.manage.packageStatus.archived");
+  return t("kol.manage.packageStatus.draft");
+}
 </script>
 
 <template>
@@ -223,7 +232,7 @@ function promptStatusLabel(status: string) {
     <div v-else class="manage-content">
         <div class="package-column">
           <div class="column-header">
-            <h3>订阅包</h3>
+            <h3>{{ t("kol.manage.packageTitle") }}</h3>
             <a-button type="primary" size="small" @click="handleCreatePackage">
               <template #icon><PlusOutlined /></template>
               {{ t('kol.manage.createPackage') }}
@@ -234,7 +243,6 @@ function promptStatusLabel(status: string) {
             class="package-list"
             :loading="packagesPending"
             :data-source="packages"
-            size="small"
           >
             <template #renderItem="{ item }">
               <a-list-item
@@ -244,10 +252,13 @@ function promptStatusLabel(status: string) {
                 <div class="package-item-content">
                   <div class="package-name">{{ item.name }}</div>
                   <div class="package-meta">
-                    <a-tag :color="item.status === 'published' ? 'green' : 'orange'" size="small">
+                    <a-tag
-                      {{ item.status }}
+                      :color="item.status === 'published' ? 'green' : item.status === 'archived' ? 'orange' : 'default'"
+                      size="small"
+                    >
+                      {{ packageStatusLabel(item.status) }}
                     </a-tag>
-                    <span>{{ item.prompt_count }} 提示词</span>
+                    <span>{{ t("kol.marketplace.prompts", { count: item.prompt_count }) }}</span>
                   </div>
                 </div>
                 <template #actions>
@@ -287,7 +298,7 @@ function promptStatusLabel(status: string) {
         <div class="prompt-column">
           <template v-if="selectedPackageId">
             <div class="column-header">
-              <h3>提示词</h3>
+              <h3>{{ t("kol.manage.promptTitle") }}</h3>
               <a-button type="primary" size="small" @click="promptModalOpen = true">
                 <template #icon><PlusOutlined /></template>
                 {{ t('kol.manage.createPrompt') }}
@@ -295,6 +306,7 @@ function promptStatusLabel(status: string) {
             </div>
 
             <a-table
+              class="modern-table"
               :columns="[
                 { title: t('common.title'), dataIndex: 'name', key: 'name' },
                 { title: t('tracking.columns.platform'), dataIndex: 'platform_hint', key: 'platform_hint' },
@@ -303,12 +315,11 @@ function promptStatusLabel(status: string) {
               ]"
               :data-source="prompts"
               :loading="promptsPending"
-              size="small"
               :pagination="false"
             >
               <template #bodyCell="{ column, record }">
                 <template v-if="column.key === 'platform_hint'">
-                  <a-tag color="blue">{{ record.platform_hint || '通用' }}</a-tag>
+                  <a-tag color="blue">{{ record.platform_hint || t("kol.manage.platformHintDefault") }}</a-tag>
                 </template>
                 <template v-else-if="column.key === 'status'">
                   <a-tag :color="record.status === 'active' ? 'green' : record.status === 'archived' ? 'orange' : 'default'">
@@ -367,7 +378,7 @@ function promptStatusLabel(status: string) {
             </a-table>
           </template>
           <div v-else class="empty-prompts">
-            <a-empty description="请选择左侧订阅包以查看提示词" />
+            <a-empty :description="t('kol.manage.emptyPromptSelection')" />
           </div>
         </div>
       </div>
@@ -390,7 +401,7 @@ function promptStatusLabel(status: string) {
 .kol-manage-view {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 64px);
+  height: calc(100vh - 120px);
 }
 
 .fullscreen-editor {
@@ -398,63 +409,74 @@ function promptStatusLabel(status: string) {
   min-height: 0;
   border-radius: 12px;
   overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
 .manage-content--editor {
-  padding: 16px;
+  padding: 24px;
 }
 
 .manage-content {
   flex: 1;
   display: flex;
   overflow: hidden;
-  padding: 16px;
+  padding: 24px;
-  gap: 16px;
+  gap: 24px;
 }
 
 .package-column {
-  width: 320px;
+  width: 340px;
-  background: #fff;
+  background: #ffffff;
-  border-radius: 8px;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
+  border: 1px solid #f0f2f5;
   display: flex;
   flex-direction: column;
 }
 
 .prompt-column {
   flex: 1;
-  background: #fff;
+  background: #ffffff;
-  border-radius: 8px;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
+  border: 1px solid #f0f2f5;
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
 
 .column-header {
-  padding: 16px;
+  padding: 20px 24px;
   border-bottom: 1px solid #f0f0f0;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .column-header h3 {
   margin: 0;
   font-size: 16px;
+  font-weight: 600;
+  color: #111827;
 }
 
 .package-list {
   flex: 1;
   overflow-y: auto;
+  padding: 12px;
 }
 
 .package-item-content {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
 }
 
 .package-name {
-  font-weight: 500;
+  font-weight: 600;
+  font-size: 14px;
+  color: #1f2937;
 }
 
 .package-meta {
@@ -462,20 +484,29 @@ function promptStatusLabel(status: string) {
   align-items: center;
   gap: 8px;
   font-size: 12px;
-  color: #8c8c8c;
+  color: #6b7280;
-}
-
-.ant-list-item.is-selected {
-  background-color: #e6f7ff;
 }
 
 .ant-list-item {
+  border-radius: 8px;
+  padding: 12px 16px;
+  margin-bottom: 8px;
+  border: 1px solid transparent;
   cursor: pointer;
-  transition: background-color 0.3s;
+  transition: all 0.2s ease;
+}
+
+.ant-list-item:last-child {
+  margin-bottom: 0;
 }
 
 .ant-list-item:hover {
-  background-color: #fafafa;
+  background-color: #f9fafb;
+}
+
+.ant-list-item.is-selected {
+  background-color: #f0f7ff;
+  border-color: #bae0ff;
 }
 
 .empty-prompts {
@@ -490,29 +521,61 @@ function promptStatusLabel(status: string) {
   min-height: 0;
 }
 
+/* Modern Enterprise Table Styles */
+:deep(.modern-table) {
+  padding: 24px;
+}
+
+:deep(.modern-table .ant-table-thead > tr > th) {
+  background-color: #f9fafb !important;
+  color: #4b5563;
+  font-weight: 600;
+  border-bottom: 1px solid #f3f4f6;
+  padding: 12px 16px;
+}
+
+:deep(.modern-table .ant-table-tbody > tr > td) {
+  padding: 16px;
+  border-bottom: 1px solid #f3f4f6;
+  color: #1f2937;
+}
+
+:deep(.modern-table .ant-table-tbody > tr:last-child > td) {
+  border-bottom: none;
+}
+
+:deep(.modern-table .ant-table-tbody > tr:hover > td) {
+  background-color: #f9fafb !important;
+}
+
 .table-actions-row {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
+}
+
+.action-btn {
+  color: #6b7280;
+  transition: all 0.2s;
 }
 
 .action-edit.ant-btn:hover:not(:disabled) {
-  color: #52c41a;
+  color: #059669;
-  background: #f6ffed;
+  background: #d1fae5;
 }
 
 .action-enable.ant-btn:hover:not(:disabled) {
-  color: #1677ff;
+  color: #2563eb;
-  background: #e6f4ff;
+  background: #dbeafe;
 }
 
 .action-disable.ant-btn:hover:not(:disabled) {
-  color: #fa8c16;
+  color: #d97706;
-  background: #fff7e6;
+  background: #fef3c7;
 }
 
 .action-delete.ant-btn:hover:not(:disabled) {
-  color: #ff4d4f;
+  color: #dc2626;
-  background: #fff1f0;
+  background: #fee2e2;
 }
 </style>

apps/admin-web/src/views/KolPackageDetailView.vue

@@ -14,7 +14,7 @@ import {
   ClockCircleOutlined,
   ExclamationCircleOutlined,
 } from "@ant-design/icons-vue";
-import { kolMarketplaceApi } from "@/lib/api";
+import { kolMarketplaceApi, resolveApiURL } from "@/lib/api";
 import { formatError } from "@/lib/errors";
 
 const route = useRoute();
@@ -47,6 +47,7 @@ const subscribeMutation = useMutation({
 });
 
 const pkg = computed(() => packageQuery.data.value);
+const resolvedCoverUrl = computed(() => resolveApiURL(pkg.value?.cover_url));
 const subscription = computed(() => pkg.value?.subscription);
 
 const subscriptionStatusMeta = computed(() => {
@@ -102,8 +103,8 @@ function goBack() {
       <a-row :gutter="24">
         <a-col :xs="24" :lg="16">
           <section class="main-card">
-            <div class="package-cover" v-if="pkg.cover_url">
+            <div class="package-cover" v-if="resolvedCoverUrl">
-              <img :src="pkg.cover_url" alt="cover" />
+              <img :src="resolvedCoverUrl" alt="cover" />
             </div>
             <div class="package-info">
               <div class="package-title-row">

apps/admin-web/src/views/TemplatesView.vue

@@ -678,22 +678,27 @@ function refreshRecords(): void {
               class="templates-view__kol-cover"
               :style="card.package_cover ? { backgroundImage: `url(${card.package_cover})` } : {}"
             >
-              <div v-if="!card.package_cover" class="templates-view__kol-cover-fallback"></div>
+              <div v-if="!card.package_cover" class="templates-view__kol-cover-fallback">
+                <AppstoreOutlined class="templates-view__fallback-icon" />
+              </div>
+              <div class="templates-view__kol-hover-overlay">
+                 <ArrowRightOutlined />
+              </div>
             </div>
             <div class="templates-view__kol-content">
-              <div class="templates-view__kol-header">
+              <h4 class="templates-view__kol-title" :title="card.prompt_name">{{ card.prompt_name }}</h4>
-                <h4 class="templates-view__kol-title">{{ card.package_name }}</h4>
+              <div class="templates-view__kol-meta-row">
-                <div class="templates-view__kol-subtitle">
+                <span class="templates-view__kol-prompt" :title="card.package_name">{{ card.package_name }}</span>
-                  <span>{{ card.prompt_name }}</span>
-                  <a-tag v-if="card.platform_hint" color="blue" size="small">{{ card.platform_hint }}</a-tag>
-                </div>
               </div>
+              
               <div class="templates-view__kol-footer">
-                <span class="templates-view__kol-author">{{ card.kol_display_name }}</span>
+                <div class="templates-view__kol-author">
-                <span class="templates-view__kol-action">
+                  <div class="templates-view__author-avatar">{{ card.kol_display_name?.[0]?.toUpperCase() || 'K' }}</div>
-                  {{ t("kol.generate.title") }}
+                  <span>{{ card.kol_display_name }}</span>
-                  <ArrowRightOutlined />
+                </div>
-                </span>
+                <div class="templates-view__kol-platform" v-if="card.platform_hint">
+                  {{ card.platform_hint }}
+                </div>
               </div>
             </div>
           </article>
@@ -849,59 +854,94 @@ function refreshRecords(): void {
 
 .templates-view__drawer-mode-card {
   width: 100%;
-  border: 1px solid #dbe7f5;
+  background: #ffffff;
-  border-radius: 16px;
+  border: 1px solid #e5e7eb;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+  border-radius: 12px;
-  padding: 18px;
+  padding: 20px;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
-  gap: 14px;
+  gap: 16px;
   text-align: left;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  outline: none;
+}
+
+.templates-view__drawer-mode-card:hover {
+  border-color: #d1d5db;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  transform: translateY(-1px);
 }
 
-.templates-view__drawer-mode-card:hover,
 .templates-view__drawer-mode-card.is-active {
+  background: #eff6ff;
   border-color: #1677ff;
-  box-shadow: 0 12px 24px rgba(22, 119, 255, 0.12);
+  box-shadow: 0 0 0 1px #1677ff;
-  transform: translateY(-2px);
+}
+
+/* Radio circle representing selection */
+.templates-view__drawer-mode-card::before {
+  content: '';
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid #d1d5db;
+  background-color: #ffffff;
+  transition: all 0.2s;
+  pointer-events: none;
+}
+
+.templates-view__drawer-mode-card.is-active::before {
+  border-color: #1677ff;
+  background-color: #1677ff;
+  box-shadow: inset 0 0 0 3px #eff6ff;
 }
 
 .templates-view__drawer-mode-icon {
   width: 44px;
   height: 44px;
-  border-radius: 14px;
+  border-radius: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 18px;
+  font-size: 20px;
   flex-shrink: 0;
+  transition: all 0.2s;
 }
 
 .templates-view__drawer-mode-icon--general {
-  background: linear-gradient(180deg, #fff4d6 0%, #ffe7ad 100%);
+  background: #fff7ed;
-  color: #d48806;
+  color: #ea580c;
 }
 
 .templates-view__drawer-mode-icon--refined {
-  background: linear-gradient(180deg, #e6f4ff 0%, #cfe3ff 100%);
+  background: #e0f2fe;
-  color: #1677ff;
+  color: #0284c7;
+}
+
+.templates-view__drawer-mode-card.is-active .templates-view__drawer-mode-icon {
+  transform: scale(1.05);
 }
 
 .templates-view__drawer-mode-copy {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
+  padding-right: 32px;
 }
 
 .templates-view__drawer-mode-copy strong {
   font-size: 16px;
-  color: #101828;
+  font-weight: 600;
+  color: #111827;
 }
 
 .templates-view__drawer-mode-copy small {
-  color: #667085;
+  color: #6b7280;
   font-size: 13px;
   line-height: 1.5;
 }
@@ -1017,87 +1057,176 @@ function refreshRecords(): void {
 
 .templates-view__kol-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 16px;
+  gap: 20px;
 }
 
 .templates-view__kol-card {
-  background: #fcfcfc;
+  background: #ffffff;
-  border: 1px solid #f0f0f0;
+  border: 1px solid #e5e7eb;
   border-radius: 12px;
   overflow: hidden;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   flex-direction: column;
+  position: relative;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
 .templates-view__kol-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
-  border-color: #1677ff;
+  border-color: #d1d5db;
+}
+
+.templates-view__kol-card::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #1677ff, #0958d9);
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+
+.templates-view__kol-card:hover::after {
+  opacity: 1;
 }
 
 .templates-view__kol-cover {
-  height: 100px;
+  height: 120px;
   background-size: cover;
   background-position: center;
-  background-color: #f5f5f5;
+  background-color: #f8fafc;
+  position: relative;
+  border-bottom: 1px solid #f1f5f9;
+  overflow: hidden;
 }
 
 .templates-view__kol-cover-fallback {
   height: 100%;
-  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+  width: 100%;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.templates-view__fallback-icon {
+  font-size: 32px;
+  color: rgba(22, 119, 255, 0.2);
+}
+
+.templates-view__kol-hover-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.04);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.templates-view__kol-hover-overlay > .anticon {
+  font-size: 24px;
+  color: #fff;
+  background: rgba(0,0,0,0.4);
+  border-radius: 50%;
+  padding: 8px;
+  transform: translateY(10px);
+  transition: all 0.2s;
+  backdrop-filter: blur(4px);
+}
+
+.templates-view__kol-card:hover .templates-view__kol-hover-overlay {
+  opacity: 1;
+}
+
+.templates-view__kol-card:hover .templates-view__kol-hover-overlay > .anticon {
+  transform: translateY(0);
 }
 
 .templates-view__kol-content {
-  padding: 12px;
+  padding: 16px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  flex: 1;
-}
-
-.templates-view__kol-header {
   flex: 1;
 }
 
 .templates-view__kol-title {
-  margin: 0 0 4px;
+  font-size: 15px;
-  font-size: 14px;
+  font-weight: 600;
-  font-weight: 700;
+  color: #111827;
-  color: #1a1a1a;
+  margin: 0 0 6px 0;
   line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
-.templates-view__kol-subtitle {
+.templates-view__kol-meta-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
-  gap: 4px;
   flex-wrap: wrap;
-  color: #8c8c8c;
+  gap: 8px;
-  font-size: 12px;
+  flex: 1;
+}
+
+.templates-view__kol-prompt {
+  font-size: 13px;
+  color: #4b5563;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-weight: 400;
 }
 
 .templates-view__kol-footer {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  align-items: center;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
 }
 
 .templates-view__kol-author {
-  color: #bfbfbf;
+  display: flex;
-  font-size: 11px;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #374151;
+  font-weight: 500;
 }
 
-.templates-view__kol-action {
+.templates-view__author-avatar {
-  display: inline-flex;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #e5e7eb;
+  color: #4b5563;
+  display: flex;
   align-items: center;
-  gap: 4px;
+  justify-content: center;
-  color: #1677ff;
+  font-size: 10px;
-  font-size: 12px;
+  font-weight: bold;
-  font-weight: 600;
+}
+
+.templates-view__kol-platform {
+  background: #eff6ff;
+  color: #2563eb;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: 6px;
+  white-space: nowrap;
 }
 
 @media (max-width: 1200px) {

apps/admin-web/src/views/WorkspaceView.vue

@@ -13,7 +13,7 @@ import {
   PlaySquareOutlined,
 } from "@ant-design/icons-vue";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
-import type { RecentArticle, TemplateCard } from "@geo/shared-types";
+import type { KolWorkspaceCard, RecentArticle, TemplateCard } from "@geo/shared-types";
 import { message } from "ant-design-vue";
 import type { TableColumnsType } from "ant-design-vue";
 import { computed, ref } from "vue";
@@ -56,6 +56,21 @@ const kolCardsQuery = useQuery({
   queryFn: () => workspaceApi.kolCards(),
 });
 
+function toTimeValue(value?: string | null): number {
+  const parsed = Date.parse(value ?? "");
+  return Number.isNaN(parsed) ? 0 : parsed;
+}
+
+const sortedKolCards = computed<KolWorkspaceCard[]>(() =>
+  [...(kolCardsQuery.data.value ?? [])].sort((left, right) => {
+    const updatedDiff = toTimeValue(right.updated_at) - toTimeValue(left.updated_at);
+    if (updatedDiff !== 0) {
+      return updatedDiff;
+    }
+    return toTimeValue(right.granted_at) - toTimeValue(left.granted_at);
+  }),
+);
+
 const statIcons = [
   FileDoneOutlined,
   CloudUploadOutlined,
@@ -270,27 +285,33 @@ function refreshDashboard(): void {
     <section class="panel panel-kol" v-if="kolCardsQuery.data.value?.length">
       <h3 class="panel-title">{{ t("kol.marketplace.title") }}</h3>
       <div class="kol-cards-container">
-        <div 
+        <div
-          v-for="card in kolCardsQuery.data.value" 
+          v-for="card in sortedKolCards"
           :key="card.subscription_prompt_id"
           class="kol-card"
           @click="router.push(`/kol/generate/${card.subscription_prompt_id}`)"
         >
           <div class="kol-card-cover" :style="card.package_cover ? { backgroundImage: `url(${card.package_cover})` } : {}">
-            <div v-if="!card.package_cover" class="kol-card-cover-fallback"></div>
+            <div v-if="!card.package_cover" class="kol-card-cover-fallback">
+              <AppstoreOutlined class="fallback-icon" />
+            </div>
+            <div class="kol-card-hover-overlay">
+               <ArrowRightOutlined />
+            </div>
           </div>
           <div class="kol-card-content">
-            <div class="kol-card-header">
+            <h4 class="kol-card-title" :title="card.prompt_name">{{ card.prompt_name }}</h4>
-              <h4 class="kol-card-title">{{ card.package_name }}</h4>
+            <div class="kol-card-meta-row">
-              <div class="kol-card-subtitle">
+              <span class="kol-card-prompt" :title="card.package_name">{{ card.package_name }}</span>
-                <span>{{ card.prompt_name }}</span>
-                <a-tag v-if="card.platform_hint" color="blue" size="small">{{ card.platform_hint }}</a-tag>
-              </div>
             </div>
+            
             <div class="kol-card-footer">
-              <span class="kol-card-author">{{ card.kol_display_name }}</span>
+              <div class="kol-card-author">
-              <div class="kol-card-action">
+                <div class="author-avatar">{{ card.kol_display_name?.[0]?.toUpperCase() || 'K' }}</div>
-                <ArrowRightOutlined />
+                <span>{{ card.kol_display_name }}</span>
+              </div>
+              <div class="kol-card-platform" v-if="card.platform_hint">
+                {{ card.platform_hint }}
               </div>
             </div>
           </div>
@@ -585,58 +606,138 @@ function refreshDashboard(): void {
 
 /* --- KOL Section --- */
 .kol-cards-container {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 20px;
-  gap: 16px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex-wrap: nowrap;
+  padding-bottom: 8px;
+  margin-bottom: -4px;
+  scroll-snap-type: x proximity;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-x: contain;
+  scrollbar-width: thin;
+  scrollbar-color: #c7d2fe transparent;
+}
+
+.kol-cards-container::-webkit-scrollbar {
+  height: 8px;
+}
+
+.kol-cards-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.kol-cards-container::-webkit-scrollbar-thumb {
+  background: #c7d2fe;
+  border-radius: 999px;
 }
 
 .kol-card {
-  background: #fcfcfc;
+  background: #ffffff;
-  border: 1px solid #f0f0f0;
+  border: 1px solid #e5e7eb;
   border-radius: 12px;
   overflow: hidden;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   flex-direction: column;
+  position: relative;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  flex: 0 0 clamp(260px, 18vw, 320px);
+  min-width: 260px;
+  scroll-snap-align: start;
 }
 
 .kol-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
-  border-color: #1677ff;
+  border-color: #d1d5db;
+}
+
+.kol-card::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #1677ff, #0958d9);
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+
+.kol-card:hover::after {
+  opacity: 1;
 }
 
 .kol-card-cover {
-  height: 100px;
+  height: 120px;
   background-size: cover;
   background-position: center;
-  background-color: #f5f5f5;
+  background-color: #f8fafc;
   position: relative;
+  border-bottom: 1px solid #f1f5f9;
+  overflow: hidden;
 }
 
 .kol-card-cover-fallback {
   height: 100%;
-  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+  width: 100%;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fallback-icon {
+  font-size: 32px;
+  color: rgba(22, 119, 255, 0.2);
+}
+
+.kol-card-hover-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.04);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.kol-card-hover-overlay > .anticon {
+  font-size: 24px;
+  color: #fff;
+  background: rgba(0,0,0,0.4);
+  border-radius: 50%;
+  padding: 8px;
+  transform: translateY(10px);
+  transition: all 0.2s;
+  backdrop-filter: blur(4px);
+}
+
+.kol-card:hover .kol-card-hover-overlay {
+  opacity: 1;
+}
+
+.kol-card:hover .kol-card-hover-overlay > .anticon {
+  transform: translateY(0);
 }
 
 .kol-card-content {
-  padding: 12px;
+  padding: 16px;
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-}
-
-.kol-card-header {
-  flex: 1;
 }
 
 .kol-card-title {
-  font-size: 14px;
+  font-size: 15px;
-  font-weight: 700;
+  font-weight: 600;
-  color: #1a1a1a;
+  color: #111827;
-  margin: 0 0 4px 0;
+  margin: 0 0 6px 0;
   line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -644,30 +745,64 @@ function refreshDashboard(): void {
   overflow: hidden;
 }
 
-.kol-card-subtitle {
+.kol-card-meta-row {
-  font-size: 12px;
-  color: #8c8c8c;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
-  gap: 4px;
   flex-wrap: wrap;
+  gap: 8px;
+  flex: 1;
+}
+
+.kol-card-prompt {
+  font-size: 13px;
+  color: #4b5563;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-weight: 400;
 }
 
 .kol-card-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 4px;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
 }
 
 .kol-card-author {
-  font-size: 11px;
+  display: flex;
-  color: #bfbfbf;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #374151;
+  font-weight: 500;
 }
 
-.kol-card-action {
+.author-avatar {
-  color: #1677ff;
+  width: 20px;
-  font-size: 12px;
+  height: 20px;
+  border-radius: 50%;
+  background: #e5e7eb;
+  color: #4b5563;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: bold;
+}
+
+.kol-card-platform {
+  background: #eff6ff;
+  color: #2563eb;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: 6px;
+  white-space: nowrap;
 }
 
 @media (max-width: 1200px) {
@@ -675,4 +810,10 @@ function refreshDashboard(): void {
     grid-template-columns: 1fr;
   }
 }
+
+@media (max-width: 768px) {
+  .kol-card {
+    flex-basis: min(280px, calc(100vw - 80px));
+  }
+}
 </style>

docs/superpowers/plans/2026-04-18-kol-profile-page.md

@@ -1057,7 +1057,7 @@ async function handleFilePicked(event: Event) {
 <style scoped>
 .persona-card {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 32px;
   background: #ffffff;
   border-radius: 12px;

packages/shared-types/src/index.ts

@@ -88,6 +88,7 @@ export interface TemplateCard {
 export interface KolWorkspaceCard {
   subscription_prompt_id: number;
   granted_at: string;
+  updated_at: string;
   prompt_name: string;
   platform_hint: string | null;
   package_name: string;
@@ -1183,6 +1184,11 @@ export interface KolVariableDefinition {
   required?: boolean;
   placeholder?: string;
   options?: string[];    // only for select / checkbox
+  max_length?: number;   // only for input / textarea
+  default_value?: string; // only for input / textarea
+  min_value?: number;    // only for number
+  max_value?: number;    // only for number
+  default_number?: number; // only for number
 }
 
 export interface KolSchemaJson {

server/internal/tenant/app/kol_variable_renderer.go

@@ -6,7 +6,9 @@ import (
 	"encoding/json"
 	"fmt"
 	"regexp"
+	"strconv"
 	"strings"
+	"unicode/utf8"
 )
 
 type KolVariableType string
@@ -17,16 +19,25 @@ const (
 	KolVariableTypeSelect   KolVariableType = "select"
 	KolVariableTypeNumber   KolVariableType = "number"
 	KolVariableTypeCheckbox KolVariableType = "checkbox"
+
+	kolDefaultTextMaxLength = 20
+	kolDefaultNumberMin     = 0
+	kolDefaultNumberMax     = 10000
 )
 
 type KolVariableDefinition struct {
-	ID          string          `json:"id"`
+	ID            string          `json:"id"`
-	Key         string          `json:"key"`
+	Key           string          `json:"key"`
-	Label       string          `json:"label"`
+	Label         string          `json:"label"`
-	Type        KolVariableType `json:"type"`
+	Type          KolVariableType `json:"type"`
-	Required    bool            `json:"required"`
+	Required      bool            `json:"required"`
-	Placeholder *string         `json:"placeholder,omitempty"`
+	Placeholder   *string         `json:"placeholder,omitempty"`
-	Options     []string        `json:"options,omitempty"`
+	Options       []string        `json:"options,omitempty"`
+	MaxLength     *int            `json:"max_length,omitempty"`
+	DefaultValue  *string         `json:"default_value,omitempty"`
+	MinValue      *float64        `json:"min_value,omitempty"`
+	MaxValue      *float64        `json:"max_value,omitempty"`
+	DefaultNumber *float64        `json:"default_number,omitempty"`
 }
 
 type KolSchemaJSON struct {
@@ -63,7 +74,13 @@ func RenderPrompt(content string, schema KolSchemaJSON, values map[string]any) (
 		missing = append(missing, id)
 	}
 
+	var resolveErr error
+
 	rendered := kolPlaceholderRE.ReplaceAllStringFunc(content, func(match string) string {
+		if resolveErr != nil {
+			return match
+		}
+
 		submatches := kolPlaceholderRE.FindStringSubmatch(match)
 		if len(submatches) < 2 {
 			return match
@@ -76,7 +93,11 @@ func RenderPrompt(content string, schema KolSchemaJSON, values map[string]any) (
 			return match
 		}
 
-		value, hasValue := lookupKolVariableValue(values, variable, token)
+		value, hasValue, err := resolveKolVariableValue(values, variable, token)
+		if err != nil {
+			resolveErr = err
+			return match
+		}
 		if hasValue {
 			return fmt.Sprint(value)
 		}
@@ -86,6 +107,10 @@ func RenderPrompt(content string, schema KolSchemaJSON, values map[string]any) (
 		return ""
 	})
 
+	if resolveErr != nil {
+		return "", resolveErr
+	}
+
 	if len(missing) > 0 {
 		return "", fmt.Errorf("missing variables: %s", strings.Join(missing, ", "))
 	}
@@ -127,6 +152,26 @@ func ValidateSchema(schema KolSchemaJSON) error {
 		default:
 			return fmt.Errorf("unsupported variable type: %s", variable.Type)
 		}
+
+		switch variable.Type {
+		case KolVariableTypeInput, KolVariableTypeTextarea:
+			maxLength := kolVariableTextMaxLength(variable)
+			if maxLength <= 0 {
+				return fmt.Errorf("%s max length must be greater than 0", kolVariableDisplayName(variable))
+			}
+			if variable.DefaultValue != nil && utf8.RuneCountInString(*variable.DefaultValue) > maxLength {
+				return fmt.Errorf("%s default value exceeds max length %d", kolVariableDisplayName(variable), maxLength)
+			}
+		case KolVariableTypeNumber:
+			minValue := kolVariableNumberMin(variable)
+			maxValue := kolVariableNumberMax(variable)
+			if maxValue < minValue {
+				return fmt.Errorf("%s max value must be greater than or equal to min value", kolVariableDisplayName(variable))
+			}
+			if variable.DefaultNumber != nil && (*variable.DefaultNumber < minValue || *variable.DefaultNumber > maxValue) {
+				return fmt.Errorf("%s default number must be between %s and %s", kolVariableDisplayName(variable), formatKolNumber(minValue), formatKolNumber(maxValue))
+			}
+		}
 	}
 
 	return nil
@@ -139,11 +184,76 @@ func JSONEncodeSchema(schema KolSchemaJSON) ([]byte, error) {
 func normalizeKolSchema(schema KolSchemaJSON) KolSchemaJSON {
 	if schema.Variables == nil {
 		schema.Variables = []KolVariableDefinition{}
+		return schema
 	}
+
+	normalizedVariables := make([]KolVariableDefinition, 0, len(schema.Variables))
+	for _, variable := range schema.Variables {
+		normalizedVariables = append(normalizedVariables, normalizeKolVariableDefinition(variable))
+	}
+	schema.Variables = normalizedVariables
 	return schema
 }
 
-func lookupKolVariableValue(values map[string]any, variable KolVariableDefinition, token string) (any, bool) {
+func normalizeKolVariableDefinition(variable KolVariableDefinition) KolVariableDefinition {
+	variable.ID = strings.TrimSpace(variable.ID)
+	variable.Key = strings.TrimSpace(variable.Key)
+	variable.Label = strings.TrimSpace(variable.Label)
+	variable.Type = normalizeKolVariableType(variable.Type)
+
+	switch variable.Type {
+	case KolVariableTypeInput, KolVariableTypeTextarea:
+		maxLength := kolVariableTextMaxLength(variable)
+		variable.MaxLength = intPtr(maxLength)
+		variable.Options = nil
+		variable.MinValue = nil
+		variable.MaxValue = nil
+		variable.DefaultNumber = nil
+	case KolVariableTypeNumber:
+		minValue := kolVariableNumberMin(variable)
+		maxValue := kolVariableNumberMax(variable)
+		variable.MinValue = float64Ptr(minValue)
+		variable.MaxValue = float64Ptr(maxValue)
+		variable.Options = nil
+		variable.MaxLength = nil
+		variable.DefaultValue = nil
+	case KolVariableTypeSelect, KolVariableTypeCheckbox:
+		variable.MaxLength = nil
+		variable.DefaultValue = nil
+		variable.MinValue = nil
+		variable.MaxValue = nil
+		variable.DefaultNumber = nil
+	default:
+		variable.Type = KolVariableTypeInput
+		maxLength := kolVariableTextMaxLength(variable)
+		variable.MaxLength = intPtr(maxLength)
+		variable.Options = nil
+		variable.MinValue = nil
+		variable.MaxValue = nil
+		variable.DefaultNumber = nil
+	}
+
+	return variable
+}
+
+func normalizeKolVariableType(value KolVariableType) KolVariableType {
+	switch KolVariableType(strings.TrimSpace(string(value))) {
+	case KolVariableTypeTextarea:
+		return KolVariableTypeTextarea
+	case KolVariableTypeSelect:
+		return KolVariableTypeSelect
+	case KolVariableTypeNumber:
+		return KolVariableTypeNumber
+	case KolVariableTypeCheckbox:
+		return KolVariableTypeCheckbox
+	case KolVariableTypeInput:
+		fallthrough
+	default:
+		return KolVariableTypeInput
+	}
+}
+
+func resolveKolVariableValue(values map[string]any, variable KolVariableDefinition, token string) (any, bool, error) {
 	candidates := []string{
 		strings.TrimSpace(token),
 		strings.TrimSpace(variable.Key),
@@ -161,11 +271,160 @@ func lookupKolVariableValue(values map[string]any, variable KolVariableDefinitio
 		seen[candidate] = struct{}{}
 
 		if value, ok := values[candidate]; ok {
-			return value, true
+			return normalizeKolRuntimeValue(variable, value)
 		}
 	}
 
-	return nil, false
+	return kolVariableDefaultValue(variable)
+}
+
+func normalizeKolRuntimeValue(variable KolVariableDefinition, value any) (any, bool, error) {
+	switch variable.Type {
+	case KolVariableTypeInput, KolVariableTypeTextarea:
+		text := fmt.Sprint(value)
+		if strings.TrimSpace(text) == "" {
+			return "", false, nil
+		}
+		maxLength := kolVariableTextMaxLength(variable)
+		if utf8.RuneCountInString(text) > maxLength {
+			return nil, false, fmt.Errorf("%s exceeds max length %d", kolVariableDisplayName(variable), maxLength)
+		}
+		return text, true, nil
+	case KolVariableTypeNumber:
+		minValue := kolVariableNumberMin(variable)
+		maxValue := kolVariableNumberMax(variable)
+		if maxValue < minValue {
+			return nil, false, fmt.Errorf("invalid number range for %s", kolVariableDisplayName(variable))
+		}
+		number, ok := parseKolNumber(value)
+		if !ok {
+			return nil, false, fmt.Errorf("%s must be a valid number", kolVariableDisplayName(variable))
+		}
+		if number < minValue || number > maxValue {
+			return nil, false, fmt.Errorf("%s must be between %s and %s", kolVariableDisplayName(variable), formatKolNumber(minValue), formatKolNumber(maxValue))
+		}
+		return number, true, nil
+	case KolVariableTypeCheckbox:
+		switch typed := value.(type) {
+		case nil:
+			return nil, false, nil
+		case []string:
+			if len(typed) == 0 {
+				return typed, false, nil
+			}
+			return typed, true, nil
+		case []any:
+			if len(typed) == 0 {
+				return typed, false, nil
+			}
+			return typed, true, nil
+		default:
+			text := strings.TrimSpace(fmt.Sprint(value))
+			if text == "" {
+				return "", false, nil
+			}
+			return value, true, nil
+		}
+	case KolVariableTypeSelect:
+		fallthrough
+	default:
+		text := fmt.Sprint(value)
+		if strings.TrimSpace(text) == "" {
+			return "", false, nil
+		}
+		return text, true, nil
+	}
+}
+
+func kolVariableDefaultValue(variable KolVariableDefinition) (any, bool, error) {
+	switch variable.Type {
+	case KolVariableTypeInput, KolVariableTypeTextarea:
+		if variable.DefaultValue == nil {
+			return nil, false, nil
+		}
+		return normalizeKolRuntimeValue(variable, *variable.DefaultValue)
+	case KolVariableTypeNumber:
+		if variable.DefaultNumber == nil {
+			return nil, false, nil
+		}
+		return normalizeKolRuntimeValue(variable, *variable.DefaultNumber)
+	default:
+		return nil, false, nil
+	}
+}
+
+func kolVariableTextMaxLength(variable KolVariableDefinition) int {
+	if variable.MaxLength == nil || *variable.MaxLength <= 0 {
+		return kolDefaultTextMaxLength
+	}
+	return *variable.MaxLength
+}
+
+func kolVariableNumberMin(variable KolVariableDefinition) float64 {
+	if variable.MinValue == nil {
+		return kolDefaultNumberMin
+	}
+	return *variable.MinValue
+}
+
+func kolVariableNumberMax(variable KolVariableDefinition) float64 {
+	if variable.MaxValue == nil {
+		return kolDefaultNumberMax
+	}
+	return *variable.MaxValue
+}
+
+func parseKolNumber(value any) (float64, bool) {
+	switch typed := value.(type) {
+	case float64:
+		return typed, true
+	case float32:
+		return float64(typed), true
+	case int:
+		return float64(typed), true
+	case int8:
+		return float64(typed), true
+	case int16:
+		return float64(typed), true
+	case int32:
+		return float64(typed), true
+	case int64:
+		return float64(typed), true
+	case uint:
+		return float64(typed), true
+	case uint8:
+		return float64(typed), true
+	case uint16:
+		return float64(typed), true
+	case uint32:
+		return float64(typed), true
+	case uint64:
+		return float64(typed), true
+	case json.Number:
+		parsed, err := typed.Float64()
+		return parsed, err == nil
+	case string:
+		trimmed := strings.TrimSpace(typed)
+		if trimmed == "" {
+			return 0, false
+		}
+		parsed, err := strconv.ParseFloat(trimmed, 64)
+		return parsed, err == nil
+	default:
+		return 0, false
+	}
+}
+
+func formatKolNumber(value float64) string {
+	return strconv.FormatFloat(value, 'f', -1, 64)
+}
+
+func intPtr(value int) *int {
+	return &value
+}
+
+func float64Ptr(value float64) *float64 {
+	return &value
 }
 
 func kolVariableDisplayName(variable KolVariableDefinition) string {

server/internal/tenant/app/kol_variable_renderer_test.go

@@ -69,6 +69,39 @@ func TestKolVariableRenderPrompt(t *testing.T) {
 			values:  map[string]any{},
 			wantErr: "missing variables",
 		},
+		{
+			name:    "uses default text value when missing",
+			content: "Hello {{city}}",
+			schema: KolSchemaJSON{
+				Variables: []KolVariableDefinition{
+					{ID: "var_city", Key: "city", Label: "城市", Type: KolVariableTypeInput, Required: true, DefaultValue: stringPtr("合肥")},
+				},
+			},
+			values: map[string]any{},
+			want:   "Hello 合肥",
+		},
+		{
+			name:    "rejects text exceeding max length",
+			content: "Topic: {{topic}}",
+			schema: KolSchemaJSON{
+				Variables: []KolVariableDefinition{
+					{ID: "var_topic", Key: "topic", Label: "主题", Type: KolVariableTypeInput, Required: true, MaxLength: intPtr(4)},
+				},
+			},
+			values:  map[string]any{"topic": "超过四个字"},
+			wantErr: "exceeds max length",
+		},
+		{
+			name:    "rejects number outside configured range",
+			content: "Top {{count}} results",
+			schema: KolSchemaJSON{
+				Variables: []KolVariableDefinition{
+					{ID: "var_count", Key: "count", Label: "数量", Type: KolVariableTypeNumber, Required: true, MinValue: float64Ptr(1), MaxValue: float64Ptr(5)},
+				},
+			},
+			values:  map[string]any{"count": 6},
+			wantErr: "must be between 1 and 5",
+		},
 	}
 
 	for _, tc := range testCases {
@@ -136,3 +169,46 @@ func TestKolVariableValidateSchemaRejectsDuplicateKey(t *testing.T) {
 	require.Error(t, err)
 	require.Contains(t, err.Error(), "duplicate variable key")
 }
+
+func TestKolVariableValidateSchemaRejectsLongDefaultValue(t *testing.T) {
+	t.Parallel()
+
+	err := ValidateSchema(KolSchemaJSON{
+		Variables: []KolVariableDefinition{
+			{ID: "var_topic", Key: "topic", Label: "主题", Type: KolVariableTypeInput, MaxLength: intPtr(2), DefaultValue: stringPtr("过长默认值")},
+		},
+	})
+
+	require.Error(t, err)
+	require.Contains(t, err.Error(), "default value exceeds max length")
+}
+
+func TestKolVariableValidateSchemaRejectsInvalidNumberRange(t *testing.T) {
+	t.Parallel()
+
+	err := ValidateSchema(KolSchemaJSON{
+		Variables: []KolVariableDefinition{
+			{ID: "var_count", Key: "count", Label: "数量", Type: KolVariableTypeNumber, MinValue: float64Ptr(10), MaxValue: float64Ptr(5)},
+		},
+	})
+
+	require.Error(t, err)
+	require.Contains(t, err.Error(), "max value must be greater than or equal to min value")
+}
+
+func TestKolVariableValidateSchemaRejectsDefaultNumberOutOfRange(t *testing.T) {
+	t.Parallel()
+
+	err := ValidateSchema(KolSchemaJSON{
+		Variables: []KolVariableDefinition{
+			{ID: "var_count", Key: "count", Label: "数量", Type: KolVariableTypeNumber, MinValue: float64Ptr(1), MaxValue: float64Ptr(5), DefaultNumber: float64Ptr(6)},
+		},
+	})
+
+	require.Error(t, err)
+	require.Contains(t, err.Error(), "default number must be between 1 and 5")
+}
+
+func stringPtr(value string) *string {
+	return &value
+}

server/internal/tenant/app/workspace_service.go

@@ -162,6 +162,7 @@ func (s *WorkspaceService) KolCards(ctx context.Context) ([]domain.KolWorkspaceC
 			cards = append(cards, domain.KolWorkspaceCard{
 				SubscriptionPromptID: row.SubscriptionPromptID,
 				GrantedAt:            row.GrantedAt,
+				UpdatedAt:            row.UpdatedAt,
 				PromptName:           row.PromptName,
 				PlatformHint:         row.PlatformHint,
 				PackageName:          row.PackageName,

server/internal/tenant/domain/workspace.go

@@ -34,6 +34,7 @@ type QuotaSummary struct {
 type KolWorkspaceCard struct {
 	SubscriptionPromptID int64     `json:"subscription_prompt_id"`
 	GrantedAt            time.Time `json:"granted_at"`
+	UpdatedAt            time.Time `json:"updated_at"`
 	PromptName           string    `json:"prompt_name"`
 	PlatformHint         *string   `json:"platform_hint"`
 	PackageName          string    `json:"package_name"`

server/internal/tenant/repository/generated/models.go

@@ -288,6 +288,9 @@ type KolPrompt struct {
 	CreatedAt           pgtype.Timestamptz `json:"created_at"`
 	UpdatedAt           pgtype.Timestamptz `json:"updated_at"`
 	DeletedAt           pgtype.Timestamptz `json:"deleted_at"`
+	PromptAssetKey      pgtype.Text        `json:"prompt_asset_key"`
+	SchemaJson          []byte             `json:"schema_json"`
+	CardConfigJson      []byte             `json:"card_config_json"`
 }
 
 type KolPromptRevision struct {

server/internal/tenant/repository/generated/workspace.sql.go

@@ -163,6 +163,7 @@ func (q *Queries) GetRecentArticles(ctx context.Context, tenantID int64) ([]GetR
 
 const listKolCardsForTenant = `-- name: ListKolCardsForTenant :many
 SELECT sp.id AS subscription_prompt_id, sp.granted_at,
+       GREATEST(p.updated_at, k.updated_at)::timestamptz AS updated_at,
        p.name AS prompt_name, p.platform_hint,
        k.name AS package_name, k.cover_url AS package_cover,
        pf.display_name AS kol_display_name
@@ -174,13 +175,14 @@ WHERE sp.tenant_id = $1::bigint
   AND sp.status = 'active'
   AND p.status = 'active'
   AND p.published_revision_no IS NOT NULL
-ORDER BY sp.granted_at DESC
+ORDER BY GREATEST(p.updated_at, k.updated_at)::timestamptz DESC, sp.granted_at DESC
 LIMIT 8
 `
 
 type ListKolCardsForTenantRow struct {
 	SubscriptionPromptID int64              `json:"subscription_prompt_id"`
 	GrantedAt            pgtype.Timestamptz `json:"granted_at"`
+	UpdatedAt            pgtype.Timestamptz `json:"updated_at"`
 	PromptName           string             `json:"prompt_name"`
 	PlatformHint         pgtype.Text        `json:"platform_hint"`
 	PackageName          string             `json:"package_name"`
@@ -200,6 +202,7 @@ func (q *Queries) ListKolCardsForTenant(ctx context.Context, tenantID int64) ([]
 		if err := rows.Scan(
 			&i.SubscriptionPromptID,
 			&i.GrantedAt,
+			&i.UpdatedAt,
 			&i.PromptName,
 			&i.PlatformHint,
 			&i.PackageName,

server/internal/tenant/repository/queries/workspace.sql

@@ -49,6 +49,7 @@ LIMIT 1;
 
 -- name: ListKolCardsForTenant :many
 SELECT sp.id AS subscription_prompt_id, sp.granted_at,
+       GREATEST(p.updated_at, k.updated_at)::timestamptz AS updated_at,
        p.name AS prompt_name, p.platform_hint,
        k.name AS package_name, k.cover_url AS package_cover,
        pf.display_name AS kol_display_name
@@ -60,5 +61,5 @@ WHERE sp.tenant_id = sqlc.arg(tenant_id)::bigint
   AND sp.status = 'active'
   AND p.status = 'active'
   AND p.published_revision_no IS NOT NULL
-ORDER BY sp.granted_at DESC
+ORDER BY GREATEST(p.updated_at, k.updated_at)::timestamptz DESC, sp.granted_at DESC
 LIMIT 8;

server/internal/tenant/repository/workspace_repo.go

@@ -31,6 +31,7 @@ type WorkspacePlan struct {
 type WorkspaceKolCard struct {
 	SubscriptionPromptID int64
 	GrantedAt            time.Time
+	UpdatedAt            time.Time
 	PromptName           string
 	PlatformHint         *string
 	PackageName          string
@@ -127,6 +128,7 @@ func (r *workspaceRepository) ListKolCards(ctx context.Context, tenantID int64)
 		cards = append(cards, WorkspaceKolCard{
 			SubscriptionPromptID: row.SubscriptionPromptID,
 			GrantedAt:            timeFromTimestamp(row.GrantedAt),
+			UpdatedAt:            timeFromTimestamp(row.UpdatedAt),
 			PromptName:           row.PromptName,
 			PlatformHint:         nullableText(row.PlatformHint),
 			PackageName:          row.PackageName,