@cat-factory/app 0.148.1 → 0.150.0

package/app/components/fragments/FragmentLibraryManager.vue

@@ -135,6 +135,80 @@ const draftValid = computed(
   () => draft.value.title.trim() && draft.value.summary.trim() && draft.value.body.trim(),
 )
 
+// ---- auto-generate a title from the fragment's content (inline LLM call) ---
+// Shared by the create form and the inline editor; keyed so only the button that triggered it
+// spins. Generation needs a body (the title is derived from it); the summary rides along.
+const generatingTitleFor = ref<string | null>(null)
+async function autofillTitle(
+  key: string,
+  get: () => { body: string; summary?: string },
+  set: (title: string) => void,
+) {
+  const { body, summary } = get()
+  if (!body.trim() || generatingTitleFor.value) return
+  generatingTitleFor.value = key
+  try {
+    const title = await library.generateTitle({
+      body: body.trim(),
+      summary: summary?.trim() || undefined,
+    })
+    set(title)
+  } catch (e) {
+    notifyError(t('fragments.authored.titleGenFailed'), e)
+  } finally {
+    generatingTitleFor.value = null
+  }
+}
+
+// ---- edit an existing hand-authored fragment (title / summary / body / tags) ---
+const editDraft = ref<{
+  id: string
+  title: string
+  summary: string
+  body: string
+  tags: string
+} | null>(null)
+function startEdit(f: (typeof library.fragments)[number]) {
+  editDraft.value = {
+    id: f.id,
+    title: f.title,
+    summary: f.summary,
+    body: f.body,
+    tags: (f.tags ?? []).join(', '),
+  }
+}
+function cancelEdit() {
+  editDraft.value = null
+}
+const editValid = computed(
+  () =>
+    !!editDraft.value &&
+    !!editDraft.value.title.trim() &&
+    !!editDraft.value.summary.trim() &&
+    !!editDraft.value.body.trim(),
+)
+async function saveEdit() {
+  const d = editDraft.value
+  if (!d || !editValid.value) return
+  await withRow(`edit:${d.id}`, async () => {
+    try {
+      await library.update(d.id, {
+        title: d.title.trim(),
+        summary: d.summary.trim(),
+        body: d.body.trim(),
+        tags: d.tags
+          .split(',')
+          .map((t) => t.trim())
+          .filter(Boolean),
+      })
+      editDraft.value = null
+      toast.add({ title: t('fragments.toast.updated'), icon: 'i-lucide-check' })
+    } catch (e) {
+      notifyError(t('fragments.toast.updateFailed'), e)
+    }
+  })
+}
+
 async function createFragment() {
   if (!draftValid.value) return
   creating.value = true
@@ -522,26 +596,96 @@ async function unlinkSource(id: string) {
         <div
           v-for="f in library.fragments"
           :key="f.id"
-          class="flex items-start gap-2 rounded-md border border-slate-800 bg-slate-900/60 p-3"
+          class="rounded-md border border-slate-800 bg-slate-900/60 p-3"
         >
-          <div class="min-w-0">
-            <div class="flex items-center gap-2">
-              <span class="font-medium text-slate-100">{{ f.title }}</span>
-              <UBadge v-if="f.source" size="xs" color="info" variant="subtle">{{
-                t('fragments.authored.fromRepo')
-              }}</UBadge>
+          <!-- Inline editor (hand-authored fragments): title / summary / body / tags, with the
+               same auto-generate-title button as the create form. -->
+          <div v-if="editDraft && editDraft.id === f.id" class="flex flex-col gap-2">
+            <div class="flex gap-2">
+              <UInput
+                v-model="editDraft.title"
+                :placeholder="t('fragments.authored.titlePlaceholder')"
+                class="flex-1"
+              />
+              <UButton
+                icon="i-lucide-wand-2"
+                size="sm"
+                variant="outline"
+                :disabled="!editDraft.body.trim()"
+                :loading="generatingTitleFor === `edit:${f.id}`"
+                :title="t('fragments.authored.generateTitleHint')"
+                @click="
+                  autofillTitle(
+                    `edit:${f.id}`,
+                    () => ({ body: editDraft!.body, summary: editDraft!.summary }),
+                    (title) => {
+                      if (editDraft) editDraft.title = title
+                    },
+                  )
+                "
+              >
+                {{ t('fragments.authored.generateTitle') }}
+              </UButton>
+            </div>
+            <UInput
+              v-model="editDraft.summary"
+              :placeholder="t('fragments.authored.summaryPlaceholder')"
+            />
+            <UTextarea
+              v-model="editDraft.body"
+              :placeholder="t('fragments.authored.bodyPlaceholder')"
+              :rows="4"
+            />
+            <UInput
+              v-model="editDraft.tags"
+              :placeholder="t('fragments.authored.tagsPlaceholder')"
+            />
+            <div class="flex gap-2">
+              <UButton
+                size="sm"
+                :disabled="!editValid"
+                :loading="rowBusy(`edit:${f.id}`)"
+                @click="saveEdit"
+              >
+                {{ t('common.save') }}
+              </UButton>
+              <UButton size="sm" variant="ghost" color="neutral" @click="cancelEdit">
+                {{ t('common.cancel') }}
+              </UButton>
+            </div>
+          </div>
+          <!-- Row -->
+          <div v-else class="flex items-start gap-2">
+            <div class="min-w-0">
+              <div class="flex items-center gap-2">
+                <span class="font-medium text-slate-100">{{ f.title }}</span>
+                <UBadge v-if="f.source" size="xs" color="info" variant="subtle">{{
+                  t('fragments.authored.fromRepo')
+                }}</UBadge>
+              </div>
+              <p class="text-sm text-slate-400">{{ f.summary }}</p>
+            </div>
+            <div class="ms-auto flex gap-1">
+              <!-- Editing a repo-SOURCED fragment locally would be overwritten on the next sync,
+                   so only hand-authored fragments are editable here. -->
+              <UButton
+                v-if="!f.source"
+                icon="i-lucide-pencil"
+                size="xs"
+                variant="ghost"
+                :title="t('common.edit')"
+                @click="startEdit(f)"
+              />
+              <UButton
+                icon="i-lucide-trash-2"
+                size="xs"
+                color="error"
+                variant="ghost"
+                :loading="rowBusy(`remove:${f.id}`)"
+                @click="removeFragment(f.id)"
+              />
             </div>
-            <p class="text-sm text-slate-400">{{ f.summary }}</p>
           </div>
-          <UButton
-            icon="i-lucide-trash-2"
-            size="xs"
-            color="error"
-            variant="ghost"
-            class="ms-auto"
-            :loading="rowBusy(`remove:${f.id}`)"
-            @click="removeFragment(f.id)"
-          />
         </div>
         <p v-if="!library.fragments.length" class="text-sm text-slate-500">
           {{
@@ -554,7 +698,33 @@ async function unlinkSource(id: string) {
         <div class="rounded-md border border-slate-800 p-3">
           <p class="mb-2 text-sm font-medium">{{ t('fragments.authored.addTitle') }}</p>
           <div class="flex flex-col gap-2">
-            <UInput v-model="draft.title" :placeholder="t('fragments.authored.titlePlaceholder')" />
+            <div class="flex gap-2">
+              <UInput
+                v-model="draft.title"
+                :placeholder="t('fragments.authored.titlePlaceholder')"
+                class="flex-1"
+              />
+              <UButton
+                icon="i-lucide-wand-2"
+                size="sm"
+                variant="outline"
+                :disabled="!draft.body.trim()"
+                :loading="generatingTitleFor === 'create'"
+                :title="t('fragments.authored.generateTitleHint')"
+                data-testid="fragment-generate-title"
+                @click="
+                  autofillTitle(
+                    'create',
+                    () => ({ body: draft.body, summary: draft.summary }),
+                    (title) => {
+                      draft.title = title
+                    },
+                  )
+                "
+              >
+                {{ t('fragments.authored.generateTitle') }}
+              </UButton>
+            </div>
             <UInput
               v-model="draft.summary"
               :placeholder="t('fragments.authored.summaryPlaceholder')"

package/app/components/panels/AgentStepDetail.vue

@@ -483,6 +483,17 @@ async function copyOutput() {
                    it raised and the greenlight verdict; plus the fixer-loop phase -->
               <StepTestReport v-if="testReport" :report="testReport" :phase="testPhase" />
 
+              <!-- code/PR reviewer's best-practice adherence: per standard, a 1..10 rating of how
+                   well the change adheres + the issues it surfaced. Only on a review step. -->
+              <StepFragmentAdherence
+                v-if="step.fragmentAdherence?.length"
+                :items="step.fragmentAdherence"
+              />
+
+              <!-- container agent's effort self-assessment (how hard it was, what reduced its
+                   effectiveness, key obstacles). Only when the agent reported one. -->
+              <StepEffortReport v-if="step.effortReport" :report="step.effortReport" />
+
               <!-- edit-then-approve: a direct editor over the raw conclusions; the
                    edits become the approved proposal that flows to the next step -->
               <section v-if="editing" class="scroll-mt-4">

package/app/components/panels/StepEffortReport.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// The container agent's effort self-assessment, surfaced in run details: how hard the work was
+// (1..10), what reduced its effectiveness, and the key obstacles it hit. Populated by the harness
+// from the agent's sentinel file and recorded on the step (`step.effortReport`). Rendered only when
+// present, so a run on an older harness image (or an agent that wrote none) shows nothing.
+import type { AgentEffortReport } from '~/types/execution'
+
+const props = defineProps<{ report: AgentEffortReport }>()
+const { t } = useI18n()
+
+// Clamp for the bar width; the schema already bounds 1..10 but be defensive against a stray value.
+const difficultyPct = computed(() =>
+  Math.min(100, Math.max(0, (props.report.difficulty / 10) * 100)),
+)
+// Colour the difficulty by band: easy (emerald) → moderate (amber) → hard (rose).
+const difficultyClass = computed(() =>
+  props.report.difficulty >= 8
+    ? 'bg-rose-400'
+    : props.report.difficulty >= 5
+      ? 'bg-amber-400'
+      : 'bg-emerald-400',
+)
+</script>
+
+<template>
+  <section
+    data-testid="step-effort-report"
+    class="scroll-mt-4 rounded-xl border border-slate-800 bg-slate-900/50 p-4"
+  >
+    <div
+      class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+    >
+      <UIcon name="i-lucide-gauge" class="h-3.5 w-3.5" />
+      <span>{{ t('panels.stepDetail.effort.heading') }}</span>
+    </div>
+
+    <div class="flex items-center gap-2">
+      <span class="text-[12px] text-slate-300">{{ t('panels.stepDetail.effort.difficulty') }}</span>
+      <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-700/60">
+        <div
+          class="h-full rounded-full"
+          :class="difficultyClass"
+          :style="{ width: `${difficultyPct}%` }"
+        />
+      </div>
+      <span data-testid="step-effort-difficulty" class="text-[12px] font-medium text-slate-200">
+        {{ t('panels.stepDetail.effort.outOfTen', { value: report.difficulty }) }}
+      </span>
+    </div>
+
+    <p
+      v-if="report.summary"
+      class="mt-2 whitespace-pre-wrap text-[13px] leading-relaxed text-slate-300"
+    >
+      {{ report.summary }}
+    </p>
+
+    <div v-if="report.reducedEffectiveness" class="mt-3">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepDetail.effort.reduced') }}
+      </p>
+      <p class="mt-0.5 whitespace-pre-wrap text-[12px] text-slate-300">
+        {{ report.reducedEffectiveness }}
+      </p>
+    </div>
+
+    <div v-if="report.obstacles?.length" class="mt-3">
+      <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepDetail.effort.obstacles') }}
+      </p>
+      <ul class="mt-0.5 space-y-1">
+        <li
+          v-for="(obstacle, i) in report.obstacles"
+          :key="i"
+          class="flex items-start gap-1.5 text-[12px] text-slate-300"
+        >
+          <UIcon
+            name="i-lucide-alert-triangle"
+            class="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-400/80"
+          />
+          <span>{{ obstacle }}</span>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>

package/app/components/panels/StepFragmentAdherence.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+// A code/PR review step's best-practice adherence report, surfaced in run details: for each
+// best-practice standard (prompt fragment) folded into the reviewer's prompt, how well the reviewed
+// change adheres (1..10) and the issues that standard surfaced. Recorded on the step
+// (`step.fragmentAdherence`) by the engine from the review agent's output. Rendered only when the
+// reviewer reported at least one standard; when none were reachable the reviewer says so in its
+// summary instead (so there is nothing to show here).
+import type { FragmentAdherence } from '~/types/execution'
+
+const props = defineProps<{ items: FragmentAdherence }>()
+const { t } = useI18n()
+
+/** Rating band → bar colour: poor adherence (rose) → partial (amber) → strong (emerald). */
+function ratingClass(rating: number): string {
+  return rating >= 8 ? 'bg-emerald-400' : rating >= 5 ? 'bg-amber-400' : 'bg-rose-400'
+}
+function ratingPct(rating: number): number {
+  return Math.min(100, Math.max(0, (rating / 10) * 100))
+}
+/** The label the reviewer was asked to cite the standard by: its title, else its id. */
+function label(item: FragmentAdherence[number]): string {
+  return item.title?.trim() || item.fragmentId || t('panels.stepDetail.adherence.unnamed')
+}
+</script>
+
+<template>
+  <section
+    v-if="items.length"
+    data-testid="step-fragment-adherence"
+    class="scroll-mt-4 rounded-xl border border-slate-800 bg-slate-900/50 p-4"
+  >
+    <div
+      class="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400"
+    >
+      <UIcon name="i-lucide-clipboard-check" class="h-3.5 w-3.5" />
+      <span>{{ t('panels.stepDetail.adherence.heading') }}</span>
+    </div>
+
+    <div class="space-y-2.5">
+      <article
+        v-for="(item, i) in items"
+        :key="item.fragmentId ?? i"
+        data-testid="step-fragment-adherence-item"
+        class="rounded-lg border border-slate-800 bg-slate-900/60 px-3 py-2"
+      >
+        <div class="flex items-center gap-2">
+          <span class="min-w-0 flex-1 truncate text-[13px] font-medium text-slate-100">{{
+            label(item)
+          }}</span>
+          <div class="h-1.5 w-16 shrink-0 overflow-hidden rounded-full bg-slate-700/60">
+            <div
+              class="h-full rounded-full"
+              :class="ratingClass(item.rating)"
+              :style="{ width: `${ratingPct(item.rating)}%` }"
+            />
+          </div>
+          <span class="shrink-0 text-[12px] font-medium text-slate-200">
+            {{ t('panels.stepDetail.adherence.outOfTen', { value: item.rating }) }}
+          </span>
+        </div>
+        <p
+          v-if="item.assessment"
+          class="mt-1 whitespace-pre-wrap text-[12px] leading-relaxed text-slate-300"
+        >
+          {{ item.assessment }}
+        </p>
+        <div v-if="item.relatedFindings.length" class="mt-1.5">
+          <p class="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
+            {{ t('panels.stepDetail.adherence.relatedFindings') }}
+          </p>
+          <ul class="mt-0.5 space-y-0.5">
+            <li
+              v-for="(finding, fi) in item.relatedFindings"
+              :key="fi"
+              class="flex items-start gap-1.5 text-[11px] text-slate-400"
+            >
+              <UIcon name="i-lucide-dot" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
+              <span>{{ finding }}</span>
+            </li>
+          </ul>
+        </div>
+      </article>
+    </div>
+  </section>
+</template>

package/app/components/prReview/PrReviewWindow.vue

@@ -466,6 +466,14 @@ async function onDismiss(id: string): Promise<void> {
             {{ state.summary }}
           </p>
 
+          <!-- Best-practice adherence: per standard folded into the reviewer's prompt, a 1..10
+               rating of how well the PR adheres + the issues that standard surfaced. -->
+          <StepFragmentAdherence
+            v-if="step?.fragmentAdherence?.length"
+            :items="step.fragmentAdherence"
+            class="mb-3"
+          />
+
           <!-- A clean PR / resolved review with no findings. -->
           <div
             v-if="findings.length === 0"

package/app/components/providers/ApiKeysSection.vue

@@ -210,6 +210,23 @@ async function add() {
   }
 }
 
+/** Route an update to the scope the key lives in (account / workspace / user). */
+async function updateKey(k: ApiKey, patch: { enabled?: boolean; isDefault?: boolean }) {
+  try {
+    if (k.scope === 'account') await keys.updateAccountKey(k.id, patch)
+    else if (k.scope === 'workspace') await keys.updateWorkspaceKey(k.id, patch)
+    else await keys.updateUserKey(k.id, patch)
+    // Enabling/disabling changes provider selectability in the picker — refresh it.
+    if (workspace.workspaceId) await models.refresh(workspace.workspaceId)
+  } catch (e) {
+    toast.add({
+      title: t('providers.apiKeys.toast.updateFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  }
+}
+
 async function remove(k: ApiKey) {
   const noun = t('providers.apiKeys.keyNoun')
   if (!(await confirmAction('remove', noun))) return
@@ -352,10 +369,14 @@ async function remove(k: ApiKey) {
         v-for="k in connected"
         :key="k.id"
         class="flex items-center justify-between rounded-md border border-slate-700 bg-slate-900/50 px-3 py-2 text-sm"
+        :class="{ 'opacity-55': !k.enabled }"
       >
         <div>
           <span class="font-medium text-slate-200">{{ k.label }}</span>
           <span class="ms-2 text-xs text-slate-500">{{ providerLabel(k.provider) }}</span>
+          <UBadge v-if="!k.enabled" color="neutral" variant="subtle" size="sm" class="ms-2">
+            {{ t('providers.apiKeys.disabledBadge') }}
+          </UBadge>
           <div class="text-[11px] tabular-nums text-slate-500">
             {{
               t(
@@ -366,13 +387,32 @@ async function remove(k: ApiKey) {
             }}
           </div>
         </div>
-        <UButton
-          icon="i-lucide-trash-2"
-          color="error"
-          variant="ghost"
-          size="xs"
-          @click="remove(k)"
-        />
+        <div class="flex items-center gap-2">
+          <UButton
+            :icon="k.isDefault ? 'i-lucide-star' : 'i-lucide-star-off'"
+            :color="k.isDefault ? 'primary' : 'neutral'"
+            :variant="k.isDefault ? 'subtle' : 'ghost'"
+            size="xs"
+            @click="updateKey(k, { isDefault: !k.isDefault })"
+          >
+            {{
+              k.isDefault ? t('providers.apiKeys.defaultBadge') : t('providers.apiKeys.pinDefault')
+            }}
+          </UButton>
+          <USwitch
+            :model-value="k.enabled"
+            size="sm"
+            :aria-label="t('providers.apiKeys.enableToggle')"
+            @update:model-value="(v: boolean) => updateKey(k, { enabled: v })"
+          />
+          <UButton
+            icon="i-lucide-trash-2"
+            color="error"
+            variant="ghost"
+            size="xs"
+            @click="remove(k)"
+          />
+        </div>
       </div>
     </div>
   </div>

package/app/components/providers/VendorCredentialsModal.vue

@@ -141,6 +141,30 @@ async function add() {
   }
 }
 
+async function toggleEnabled(cred: { id: string }, enabled: boolean) {
+  try {
+    await creds.update(cred.id, { enabled })
+  } catch (e) {
+    toast.add({
+      title: t('providers.vendorCredentials.toast.updateFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  }
+}
+
+async function toggleDefault(cred: { id: string; isDefault: boolean }) {
+  try {
+    await creds.update(cred.id, { isDefault: !cred.isDefault })
+  } catch (e) {
+    toast.add({
+      title: t('providers.vendorCredentials.toast.updateFailed'),
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  }
+}
+
 async function remove(cred: { id: string; label: string }) {
   const ok = await confirm({
     title: t('providers.vendorCredentials.confirmRemove.title'),
@@ -245,10 +269,14 @@ function vendorLabel(v: SubscriptionVendor): string {
                 v-for="c in creds.credentials"
                 :key="c.id"
                 class="flex items-center justify-between rounded-md border border-slate-700 bg-slate-900/50 px-3 py-2 text-sm"
+                :class="{ 'opacity-55': !c.enabled }"
               >
                 <div>
                   <span class="font-medium text-slate-200">{{ c.label }}</span>
                   <span class="ms-2 text-xs text-slate-500">{{ vendorLabel(c.vendor) }}</span>
+                  <UBadge v-if="!c.enabled" color="neutral" variant="subtle" size="sm" class="ms-2">
+                    {{ t('providers.vendorCredentials.disabledBadge') }}
+                  </UBadge>
                   <div class="text-[11px] tabular-nums text-slate-500">
                     {{
                       t(
@@ -262,13 +290,34 @@ function vendorLabel(v: SubscriptionVendor): string {
                     }}
                   </div>
                 </div>
-                <UButton
-                  icon="i-lucide-trash-2"
-                  color="error"
-                  variant="ghost"
-                  size="xs"
-                  @click="remove(c)"
-                />
+                <div class="flex items-center gap-2">
+                  <UButton
+                    :icon="c.isDefault ? 'i-lucide-star' : 'i-lucide-star-off'"
+                    :color="c.isDefault ? 'primary' : 'neutral'"
+                    :variant="c.isDefault ? 'subtle' : 'ghost'"
+                    size="xs"
+                    @click="toggleDefault(c)"
+                  >
+                    {{
+                      c.isDefault
+                        ? t('providers.vendorCredentials.defaultBadge')
+                        : t('providers.vendorCredentials.pinDefault')
+                    }}
+                  </UButton>
+                  <USwitch
+                    :model-value="c.enabled"
+                    size="sm"
+                    :aria-label="t('providers.vendorCredentials.enableToggle')"
+                    @update:model-value="(v: boolean) => toggleEnabled(c, v)"
+                  />
+                  <UButton
+                    icon="i-lucide-trash-2"
+                    color="error"
+                    variant="ghost"
+                    size="xs"
+                    @click="remove(c)"
+                  />
+                </div>
               </div>
             </div>
           </div>

package/app/composables/api/fragments.ts

@@ -3,6 +3,7 @@ import {
   createPromptFragmentContract,
   deletePromptFragmentContract,
   fragmentSourceStatusContract,
+  generatePromptFragmentTitleContract,
   linkFragmentSourceContract,
   listFragmentCatalogContract,
   listFragmentSourcesContract,
@@ -17,6 +18,7 @@ import type {
   CreateDocumentFragmentInput,
   CreatePromptFragmentInput,
   FragmentOwnerKind,
+  GenerateFragmentTitleInput,
   LinkFragmentSourceInput,
   UpdatePromptFragmentInput,
 } from '~/types/domain'
@@ -58,6 +60,21 @@ export function fragmentsApi({ send, ws, scope }: ApiContext) {
         pathParams: { fragmentId },
       }),
 
+    // Auto-generate a title for a hand-authored fragment from its content (an inline LLM call).
+    // At the account scope the backend resolves the model against `viaWorkspaceId`'s scope;
+    // ignored at the workspace scope (which uses the addressed workspace).
+    generateFragmentTitle: (
+      kind: FragmentOwnerKind,
+      id: string,
+      body: GenerateFragmentTitleInput,
+      viaWorkspaceId?: string,
+    ) =>
+      send(generatePromptFragmentTitleContract, {
+        pathPrefix: scope(kind, id),
+        queryParams: { viaWorkspaceId },
+        body,
+      }),
+
     // Link an external document (Confluence/Notion/GitHub) as a living fragment.
     createDocumentFragment: (
       kind: FragmentOwnerKind,