Contextual discovery

apps/frontend/app/components/repository/Assets/Discovery/SearchBar.vue

@@ -15,6 +15,7 @@
       hide-details
       @click:clear="query = ''"
       @keyup.enter="emit('search')"
+      @update:model-value="emit('search:input')"
     />
     <VBtn
       :loading="isSearching"
@@ -50,7 +51,10 @@ defineProps<{
   isSearching: boolean;
 }>();
 
-const emit = defineEmits<{ search: [] }>();
+const emit = defineEmits<{
+  'search': [];
+  'search:input': [];
+}>();
 
 const query = defineModel<string>('query', { required: true });
 const contentFilter = defineModel<ContentFilter>('contentFilter', { required: true });

apps/frontend/app/components/repository/Assets/Discovery/SearchResults/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isSearching" class="d-flex justify-center pa-12">
+  <div v-if="isSearching" class="d-flex flex-column align-center pa-12 ga-4">
     <span class="text-body-1 text-primary-lighten-3">
       Searching the web for relevant resources...
     </span>
@@ -13,27 +13,30 @@
         variant="tonal"
       >
         {{ suggestions.length }} results
+        <template v-if="selectedUrls.size">
+          <VIcon size="x-small">mdi-circle-small</VIcon>
+          {{ selectedUrls.size }} selected
+        </template>
       </VChip>
       <VSpacer />
       <VBtn
-        v-if="selectedUrls.size"
         color="primary-lighten-3"
-        prepend-icon="mdi-close-circle-outline"
+        prepend-icon="mdi-checkbox-multiple-outline"
         size="small"
         variant="text"
-        @click="emit('toggle-all', false)"
+        @click="emit('select:all')"
       >
-        Deselect all
+        Select all
       </VBtn>
       <VBtn
-        v-else
+        v-if="selectedUrls.size"
         color="primary-lighten-3"
-        prepend-icon="mdi-checkbox-multiple-outline"
+        prepend-icon="mdi-close-circle-outline"
         size="small"
         variant="text"
-        @click="emit('toggle-all', true)"
+        @click="emit('select:clear')"
       >
-        Select all
+        Clear
       </VBtn>
     </div>
     <div class="d-flex flex-column ga-2">
@@ -42,7 +45,7 @@
         :key="it.url"
         :is-selected="selectedUrls.has(it.url)"
         :suggestion="it"
-        @toggle="emit('toggle', it.url)"
+        @toggle="emit('result:toggle', it.url)"
       />
     </div>
     <div v-if="totalPages > 1" class="d-flex justify-center mt-4">
@@ -85,8 +88,10 @@ const props = defineProps<{
 const page = defineModel<number>('page', { required: true });
 
 const emit = defineEmits<{
-  'toggle': [url: string];
-  'toggle-all': [selected: boolean];
+  'result:toggle': [url: string];
+  'select:all': [];
+  'select:clear': [];
+  'search:cancel': [];
 }>();
 
 const totalPages = computed(() =>

apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/TopicList.vue

@@ -0,0 +1,54 @@
+<template>
+  <VList class="topic-list pa-2" density="compact">
+    <template v-for="item in items" :key="item.id">
+      <VListSubheader
+        v-if="item.isGroup"
+        class="text-uppercase font-weight-bold"
+      >
+        {{ item.name }}
+      </VListSubheader>
+      <VListItem
+        v-else
+        :prepend-icon="item.isLeaf
+          ? 'mdi-file-document-outline'
+          : 'mdi-folder-outline'"
+        :value="item.id"
+        class="topic-list-item"
+        @click="emit('topic:select', item)"
+      >
+        <VListItemTitle class="text-body-2">
+          {{ item.name }}
+        </VListItemTitle>
+        <VListItemSubtitle v-if="item.parentName" class="text-caption">
+          {{ item.parentName }}
+        </VListItemSubtitle>
+      </VListItem>
+    </template>
+  </VList>
+</template>
+
+<script lang="ts" setup>
+import type { TopicItem } from './types';
+
+defineProps<{
+  items: TopicItem[];
+}>();
+
+const emit = defineEmits<{
+  'topic:select': [topic: TopicItem];
+}>();
+</script>
+
+<style lang="scss" scoped>
+.topic-list {
+  overflow-y: auto;
+}
+
+.topic-list-item {
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+}
+</style>

apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <VAutocomplete
+    :items="items"
+    :model-value="modelValue?.id ?? null"
+    color="primary-lighten-3"
+    density="default"
+    item-title="name"
+    item-value="id"
+    label="Outline topic"
+    min-width="550"
+    max-width="550"
+    placeholder="Browse topics..."
+    prepend-inner-icon="mdi-file-tree-outline"
+    variant="outlined"
+    clearable
+    hide-details
+    @update:model-value="onSelect"
+  >
+    <template #item="{ item, props: itemProps }">
+      <VListItem v-bind="itemProps" color="primary-darken-4">
+        <template #prepend>
+          <VIcon
+            :icon="item.raw.isLeaf
+              ? 'mdi-file-document-outline'
+              : 'mdi-folder-outline'"
+            size="small"
+          />
+        </template>
+        <VListItemSubtitle v-if="item.raw.breadcrumb" class="text-caption">
+          {{ item.raw.breadcrumb }}
+        </VListItemSubtitle>
+      </VListItem>
+    </template>
+    <template v-if="modelValue?.breadcrumb" #selection>
+      <div>
+        <div class="text-body-2">{{ modelValue.name }}</div>
+        <div class="text-caption text-primary-lighten-3">
+          {{ modelValue.breadcrumb }}
+        </div>
+      </div>
+    </template>
+  </VAutocomplete>
+</template>
+
+<script lang="ts" setup>
+import type { TopicItem } from './types';
+import { useOutlineTree } from './useOutlineTree';
+
+defineProps<{
+  modelValue: TopicItem | null;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [topic: TopicItem | null];
+  'topic:clear': [];
+}>();
+
+const { items } = useOutlineTree();
+
+function onSelect(id: number | null) {
+  if (!id) {
+    emit('topic:clear');
+    return;
+  }
+  const topic = items.value.find((it) => it.id === id);
+  if (topic) emit('update:modelValue', topic);
+}
+</script>

apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/types.ts

@@ -0,0 +1,12 @@
+export interface TopicItem {
+  id: number;
+  name: string;
+  parentName?: string;
+  // Full ancestor breadcrumb (e.g. "Module 1 / Sub-module")
+  breadcrumb: string;
+  isGroup: boolean;
+  isLeaf: boolean;
+  depth: number;
+  // Full context path for building search queries.
+  context: string[];
+}

apps/frontend/app/components/repository/Assets/Discovery/TopicPicker/useOutlineTree.ts

@@ -0,0 +1,61 @@
+import { activity as activityUtils } from '@tailor-cms/utils';
+import { schema as schemaConfig } from '@tailor-cms/config';
+
+import { useCurrentRepository } from '@/stores/current-repository';
+import type { TopicItem } from './types';
+
+const buildTopicMeta = (
+  activity: any,
+  activityCollection: any[],
+  repositoryName: string,
+): TopicItem => {
+  const name = activity.data?.name || '';
+  const isLeaf = schemaConfig.isEditable(activity.type);
+  const ancestors = activityUtils.getAncestors(activityCollection, activity);
+  const ancestorNames = ancestors.map((a: any) => a.data?.name).filter(Boolean);
+  return {
+    id: activity.id,
+    name,
+    isGroup: !isLeaf,
+    parentName: ancestorNames.at(-1),
+    breadcrumb: ancestorNames.toReversed().join(' / '),
+    isLeaf,
+    depth: ancestors.length,
+    context: [name, ...ancestorNames, repositoryName].filter(Boolean),
+  };
+};
+
+function flattenTree(nodes: any[]): TopicItem[] {
+  const result: TopicItem[] = [];
+  for (const node of nodes) {
+    if (node.topicMeta) result.push(node.topicMeta);
+    if (node.children?.length) {
+      result.push(...flattenTree(node.children));
+    }
+  }
+  return result;
+}
+
+/**
+ * Derives a flat topic list from the repository outline.
+ * Uses shared toTreeFormat for hierarchy, schemaConfig.isEditable
+ * for leaf detection, and getAncestors for parent context.
+ */
+export function useOutlineTree() {
+  const store = useCurrentRepository();
+  const hasOutline = computed(() => store.outlineActivities.length > 0);
+
+  const items = computed<TopicItem[]>(() => {
+    const activities = store.outlineActivities as any[];
+    if (!activities.length) return [];
+    const repo = store.repository;
+    const tree = activityUtils.toTreeFormat(activities, {
+      processNodeFn: (activity: any) => ({
+        topicMeta: buildTopicMeta(activity, activities, repo?.name || ''),
+      }),
+    });
+    return flattenTree(tree);
+  });
+
+  return { hasOutline, items };
+}