feat: Refactor template handling and brand management

- Removed schema_json from article templates and related queries.
- Updated brand service to include website field in requests and responses.
- Simplified template wizard view by eliminating unused schema fields and related logic.
- Added tests for ark text format handling.
- Created migrations for dropping schema_json and adding website to brands.

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

@@ -12,7 +12,6 @@ import type { TableColumnsType } from "ant-design-vue";
 import { computed, reactive, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
-import PageHero from "@/components/PageHero.vue";
 import { brandsApi } from "@/lib/api";
 import { formatError } from "@/lib/errors";
 
@@ -36,6 +35,7 @@ const editingCompetitorId = ref<number | null>(null);
 
 const brandForm = reactive({
   name: "",
+  website: "",
   description: "",
 });
 
@@ -60,12 +60,6 @@ const brandListQuery = useQuery({
   queryFn: () => brandsApi.list(),
 });
 
-const brandDetailQuery = useQuery({
-  queryKey: computed(() => ["brands", "detail", selectedBrandId.value]),
-  enabled: computed(() => Boolean(selectedBrandId.value)),
-  queryFn: () => brandsApi.detail(selectedBrandId.value as number),
-});
-
 const keywordsQuery = useQuery({
   queryKey: computed(() => ["brands", selectedBrandId.value, "keywords"]),
   enabled: computed(() => Boolean(selectedBrandId.value)),
@@ -101,6 +95,7 @@ const brandMutations = {
     mutationFn: () =>
       brandsApi.create({
         name: brandForm.name.trim(),
+        website: brandForm.website.trim() || null,
         description: brandForm.description.trim() || null,
       }),
     onSuccess: async (brand) => {
@@ -118,6 +113,7 @@ const brandMutations = {
     mutationFn: () =>
       brandsApi.update(editingBrandId.value as number, {
         name: brandForm.name.trim(),
+        website: brandForm.website.trim() || null,
         description: brandForm.description.trim() || null,
       }),
     onSuccess: async () => {
@@ -274,7 +270,6 @@ const competitorMutations = {
   }),
 };
 
-const selectedBrand = computed(() => brandDetailQuery.data.value);
 const selectedKeyword = computed(() =>
   keywordsQuery.data.value?.find((item) => item.id === selectedKeywordId.value) ?? null,
 );
@@ -345,6 +340,7 @@ function stringifyProductLines(value: unknown): string {
 function openBrandModal(brand?: Brand): void {
   editingBrandId.value = brand?.id ?? null;
   brandForm.name = brand?.name ?? "";
+  brandForm.website = brand?.website ?? "";
   brandForm.description = brand?.description ?? "";
   brandModalOpen.value = true;
 }
@@ -439,18 +435,21 @@ async function submitCompetitor(): Promise<void> {
 
 <template>
   <div class="brands-view">
-    <PageHero
-      :eyebrow="t('brands.eyebrow')"
-      :title="t('brands.title')"
-      :description="t('brands.description')"
-    >
-      <template #actions>
-        <a-button type="primary" @click="openBrandModal()">
-          <template #icon><PlusOutlined /></template>
-          {{ t("brands.newBrand") }}
-        </a-button>
-      </template>
-    </PageHero>
+    <section class="brands-view__top-card">
+      <div class="brands-view__header">
+        <div class="brands-view__header-title">
+          <p class="eyebrow" style="margin-bottom: 4px;">{{ t('brands.eyebrow') }}</p>
+          <h2>{{ t('brands.title') }}</h2>
+          <p>{{ t('brands.description') }}</p>
+        </div>
+        <div class="brands-view__header-actions">
+          <a-button type="primary" @click="openBrandModal()">
+            <template #icon><PlusOutlined /></template>
+            {{ t("brands.newBrand") }}
+          </a-button>
+        </div>
+      </div>
+    </section>
 
     <section class="brands-view__brand-rail">
       <div class="brands-view__section-head">
@@ -491,19 +490,7 @@ async function submitCompetitor(): Promise<void> {
       <a-empty v-else :description="t('brands.empty.brands')" />
     </section>
 
-    <template v-if="selectedBrandId && selectedBrand">
-      <section class="brands-view__brand-summary">
-        <div>
-          <p class="eyebrow">{{ t("brands.title") }}</p>
-          <h3>{{ selectedBrand.name }}</h3>
-          <p>{{ selectedBrand.description || "--" }}</p>
-        </div>
-        <div class="brands-view__brand-summary-actions">
-          <a-button @click="openBrandModal(selectedBrand)">{{ t("brands.editBrand") }}</a-button>
-          <a-button @click="activeTab = 'competitors'">{{ t("brands.tabs.competitors") }}</a-button>
-        </div>
-      </section>
-
+    <template v-if="selectedBrandId">
       <a-tabs v-model:activeKey="activeTab" class="brands-view__tabs">
         <a-tab-pane key="keywords" :tab="t('brands.tabs.keywords')">
           <section class="brands-view__keyword-layout">
@@ -660,6 +647,9 @@ async function submitCompetitor(): Promise<void> {
         <a-form-item :label="t('brands.form.brandName')">
           <a-input v-model:value="brandForm.name" />
         </a-form-item>
+        <a-form-item :label="t('brands.form.brandWebsite')">
+          <a-input v-model:value="brandForm.website" />
+        </a-form-item>
         <a-form-item :label="t('brands.form.brandDescription')">
           <a-textarea v-model:value="brandForm.description" :rows="4" />
         </a-form-item>
@@ -745,15 +735,47 @@ async function submitCompetitor(): Promise<void> {
   gap: 22px;
 }
 
+.brands-view__top-card,
 .brands-view__brand-rail,
-.brands-view__brand-summary,
 .brands-view__keywords-panel,
 .brands-view__questions-panel,
 .brands-view__competitors-panel {
   padding: 24px;
   background: #fff;
   border: 1px solid #e6edf5;
-  border-radius: 24px;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.brands-view__top-card {
+  padding: 0;
+}
+
+.brands-view__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px;
+}
+
+.brands-view__header-title h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #1a1a1a;
+  line-height: 1.4;
+}
+
+.brands-view__header-title p {
+  margin: 6px 0 0 0;
+  font-size: 13px;
+  color: #8c8c8c;
+}
+
+.brands-view__header-actions {
+  display: flex;
+  gap: 12px;
+  margin-left: auto; /* explicit push to right just in case */
 }
 
 .brands-view__section-head {
@@ -764,13 +786,31 @@ async function submitCompetitor(): Promise<void> {
   margin-bottom: 18px;
 }
 
-.brands-view__section-head--compact h3 {
-  font-size: 20px;
-}
-
 .brands-view__section-head h3 {
   margin: 6px 0 0;
-  font-size: 24px;
+  font-size: 20px;
+  font-weight: 800;
+  color: #111827;
+  display: flex;
+  align-items: center;
+}
+
+.brands-view__section-head h3::before {
+  content: "";
+  display: inline-block;
+  width: 4px;
+  height: 18px;
+  border-radius: 2px;
+  background: #111827;
+  margin-right: 12px;
+}
+
+.brands-view__section-head--compact h3 {
+  font-size: 18px;
+}
+
+.brands-view__section-head--compact h3::before {
+  height: 16px;
 }
 
 .brands-view__brand-grid {
@@ -784,14 +824,37 @@ async function submitCompetitor(): Promise<void> {
   flex-direction: column;
   gap: 14px;
   padding: 18px;
-  background: #f8fafc;
+  background: #fff;
   border: 1px solid #e6edf5;
-  border-radius: 20px;
+  border-radius: 12px;
   cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.brands-view__brand-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
+}
+
+.brands-view__brand-card-actions,
+.brands-view__keyword-actions,
+.brands-view__competitor-head .brands-view__inline-actions {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.brands-view__brand-card:hover .brands-view__brand-card-actions,
+.brands-view__brand-card:focus-within .brands-view__brand-card-actions,
+.brands-view__keyword-item:hover .brands-view__keyword-actions,
+.brands-view__keyword-item:focus-within .brands-view__keyword-actions,
+.brands-view__competitor-card:hover .brands-view__competitor-head .brands-view__inline-actions,
+.brands-view__competitor-card:focus-within .brands-view__competitor-head .brands-view__inline-actions {
+  opacity: 1;
 }
 
 .brands-view__brand-card--active {
   border-color: #bfd7ff;
+  background: #f0f7ff;
   box-shadow: 0 18px 40px rgba(31, 92, 255, 0.08);
 }
 
@@ -802,13 +865,11 @@ async function submitCompetitor(): Promise<void> {
 }
 
 .brands-view__brand-card h4,
-.brands-view__brand-summary h3,
 .brands-view__competitor-card h4 {
   margin: 0;
 }
 
 .brands-view__brand-card p,
-.brands-view__brand-summary p,
 .brands-view__competitor-card p {
   margin: 8px 0 0;
   color: var(--muted);
@@ -816,19 +877,12 @@ async function submitCompetitor(): Promise<void> {
 }
 
 .brands-view__brand-card-actions,
-.brands-view__inline-actions,
 .brands-view__keyword-actions,
-.brands-view__brand-summary-actions {
+.brands-view__inline-actions {
   display: flex;
   gap: 8px;
 }
 
-.brands-view__brand-summary {
-  display: flex;
-  justify-content: space-between;
-  gap: 24px;
-}
-
 .brands-view__keyword-layout {
   display: grid;
   grid-template-columns: 320px minmax(0, 1fr);
@@ -847,11 +901,17 @@ async function submitCompetitor(): Promise<void> {
   justify-content: space-between;
   gap: 12px;
   padding: 14px 16px;
-  background: #f8fafc;
+  background: #fff;
   border: 1px solid #e6edf5;
-  border-radius: 18px;
+  border-radius: 12px;
   cursor: pointer;
   text-align: left;
+  transition: all 0.2s;
+}
+
+.brands-view__keyword-item:hover {
+  border-color: #bfd7ff;
+  background: #f0f7ff;
 }
 
 .brands-view__keyword-item--active {
@@ -878,9 +938,15 @@ async function submitCompetitor(): Promise<void> {
 
 .brands-view__competitor-card {
   padding: 18px;
-  background: #f8fafc;
+  background: #fff;
   border: 1px solid #e6edf5;
-  border-radius: 20px;
+  border-radius: 12px;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.brands-view__competitor-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
 }
 
 .brands-view__competitor-head {
@@ -928,7 +994,6 @@ async function submitCompetitor(): Promise<void> {
 }
 
 @media (max-width: 720px) {
-  .brands-view__brand-summary,
   .brands-view__section-head {
     flex-direction: column;
     align-items: stretch;