feat(channels): suggest your own tags for untagged channels from your tagging pattern (E8·S4)

Learn, per user tag, which auto TOPIC tags are characteristic of the channels
you've tagged it, then suggest that tag for still-untagged subscribed channels
whose topics cover enough of the profile. Language auto-tags are excluded from
the signal — near-universal within a language, they flooded every channel.

New GET /api/tags/suggestions (read-only, deterministic) backed by
app/sync/tagsuggest.py. Surfaced in the Channel Manager as dashed "ghost" chips
in the tags cell — one tap accepts (reuses the attach-tag endpoint), × dismisses
for the session — plus a header badge and a bulk "Accept N confident" (the
full-profile matches) behind a confirm. No silent writes (D4 = suggest-and-confirm).

Also reflow a pre-existing prettier drift in dateFilter.ts from E8·S2.

frontend/src/components/ChannelTags.suggest.dom.test.tsx

@@ -0,0 +1,100 @@
+// @vitest-environment jsdom
+//
+// Contract of the suggested-tag ghost chips (E8·S4): on an UNTAGGED channel, ChannelTagsControl renders
+// one dashed "ghost" chip per suggestion; clicking the chip body accepts it (onAcceptSuggestion with the
+// tag id), the trailing × dismisses it (onDismissSuggestion), and a suggestion whose tag is already
+// attached is never shown. i18n is key-passthrough; the control rides the floating-ui popover platform
+// and a ResizeObserver-driven fit measurer, so we stub the observer and wrap in a FloatingTree.
+import { describe, it, expect, afterEach, beforeAll, vi } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { FloatingTree } from "@floating-ui/react";
+
+vi.mock("react-i18next", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-i18next")>();
+  return {
+    ...actual,
+    useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
+  };
+});
+
+import { ChannelTagsControl, type SuggestedTag } from "./ChannelTags";
+import type { Tag } from "../lib/api";
+
+beforeAll(() => {
+  class Stub {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+    takeRecords() {
+      return [];
+    }
+  }
+  globalThis.ResizeObserver ??= Stub as unknown as typeof ResizeObserver;
+});
+
+afterEach(cleanup);
+
+const tag = (id: number, name: string): Tag => ({
+  id,
+  name,
+  color: null,
+  category: "other",
+  system: false,
+  channel_count: 0,
+});
+const docu = tag(1, "docu");
+const history = tag(2, "history");
+const suggestions: SuggestedTag[] = [
+  { tag: docu, confidence: 0.95 },
+  { tag: history, confidence: 0.6 },
+];
+
+function renderControl(props: Partial<Parameters<typeof ChannelTagsControl>[0]> = {}) {
+  const onAccept = vi.fn();
+  const onDismiss = vi.fn();
+  render(
+    <FloatingTree>
+      <ChannelTagsControl
+        userTags={[docu, history]}
+        attachedIds={[]}
+        onToggle={() => {}}
+        onCreate={() => {}}
+        suggestions={suggestions}
+        onAcceptSuggestion={onAccept}
+        onDismissSuggestion={onDismiss}
+        {...props}
+      />
+    </FloatingTree>,
+  );
+  return { onAccept, onDismiss };
+}
+
+describe("ChannelTagsControl suggested ghost chips", () => {
+  it("renders a ghost chip per suggestion and accepts on click", () => {
+    const { onAccept } = renderControl();
+    // Both suggested tag names show (attached row is empty on an untagged channel).
+    fireEvent.click(screen.getByText("docu"));
+    expect(onAccept).toHaveBeenCalledWith(docu.id);
+  });
+
+  it("dismisses via the × without accepting", () => {
+    const { onAccept, onDismiss } = renderControl();
+    const dismissButtons = screen.getAllByRole("button", {
+      name: "channels.tags.dismissSuggestion",
+    });
+    // Order matches the suggestions array — the second × is the "history" suggestion.
+    fireEvent.click(dismissButtons[1]!);
+    expect(onDismiss).toHaveBeenCalledWith(history.id);
+    expect(onAccept).not.toHaveBeenCalled();
+  });
+
+  it("never shows a suggestion whose tag the channel already carries", () => {
+    renderControl({ attachedIds: [docu.id] });
+    // docu is attached → its ghost chip is suppressed (only history's × remains). Counting the
+    // dismiss buttons avoids colliding with docu's now-present *attached* chip text.
+    const dismissButtons = screen.getAllByRole("button", {
+      name: "channels.tags.dismissSuggestion",
+    });
+    expect(dismissButtons).toHaveLength(1);
+  });
+});

frontend/src/components/ChannelTags.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Check, Plus } from "lucide-react";
+import { Check, Plus, Sparkles, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { type Tag } from "../lib/api";
 import { useAnchoredPopover, PopoverSurface, PopoverItem } from "./AnchoredPopover";
@@ -40,6 +40,51 @@ function TagChip({ tag, onClick, title }: TagChipProps) {
   );
 }
 
+// A suggested user tag (E8·S4): a dashed "ghost" chip the user hasn't applied yet, learned from
+// their own tagging pattern. The chip body accepts it (one tap → attaches the real tag); the trailing
+// × dismisses it for the session. Rendered only on untagged channels, so it never competes with the
+// measured attached-chip row. (Two sibling buttons, not a button-in-button — invalid nesting.)
+export interface SuggestedTag {
+  tag: Tag;
+  confidence: number;
+}
+
+function SuggestedChip({
+  suggestion,
+  onAccept,
+  onDismiss,
+}: {
+  suggestion: SuggestedTag;
+  onAccept: () => void;
+  onDismiss: () => void;
+}) {
+  const { t } = useTranslation();
+  const pct = Math.round(suggestion.confidence * 100);
+  return (
+    <span className="shrink-0 inline-flex items-center rounded-full border border-dashed border-accent/50 text-accent/90 text-2xs font-medium pl-1 pr-0.5 py-0.5 max-w-36">
+      <button
+        type="button"
+        onClick={onAccept}
+        title={t("channels.tags.suggestedHint", { pct })}
+        aria-label={t("channels.tags.acceptSuggestion", { name: suggestion.tag.name })}
+        className="inline-flex items-center gap-1 min-w-0 hover:text-accent transition"
+      >
+        <Sparkles className="w-2.5 h-2.5 shrink-0" />
+        <span className="truncate">{suggestion.tag.name}</span>
+      </button>
+      <button
+        type="button"
+        onClick={onDismiss}
+        title={t("channels.tags.dismissSuggestion")}
+        aria-label={t("channels.tags.dismissSuggestion")}
+        className="shrink-0 ml-0.5 rounded-full text-accent/60 hover:text-danger transition"
+      >
+        <X className="w-2.5 h-2.5" />
+      </button>
+    </span>
+  );
+}
+
 /** The editor body: toggle the user's existing tags on/off for this channel, plus an inline
  *  "create + attach" input. Rendered inside an anchored `menu` popover. (Exported for the channel
  *  detail page in Part 2; internal for now.) */
@@ -139,6 +184,9 @@ export function ChannelTagsControl({
   onToggle,
   onCreate,
   onChipClick,
+  suggestions,
+  onAcceptSuggestion,
+  onDismissSuggestion,
   bounded = true,
 }: {
   userTags: Tag[];
@@ -147,6 +195,11 @@ export function ChannelTagsControl({
   onCreate: (name: string) => void;
   /** Manager only: clicking a chip filters the feed by that tag. Omit on the detail page. */
   onChipClick?: (tagId: number, name: string) => void;
+  /** Manager only (E8·S4): suggested user tags for an UNTAGGED channel, shown as accept/dismiss ghost
+   *  chips after the (empty) attached row. Omit on the detail page. */
+  suggestions?: SuggestedTag[];
+  onAcceptSuggestion?: (tagId: number) => void;
+  onDismissSuggestion?: (tagId: number) => void;
   /** Cap the chip row at a fixed 12rem so it can't widen a `table-layout:auto` column and reflow the
    *  table (the manager). Set false where there is free width (the channel detail header), so tags
    *  fit inline instead of needlessly collapsing into "+N". */
@@ -154,6 +207,9 @@ export function ChannelTagsControl({
 }) {
   const { t } = useTranslation();
   const attached = userTags.filter((tg) => attachedIds.includes(tg.id));
+  // Suggestions only surface for channels with no user tag yet, but guard anyway: never suggest a tag
+  // the channel already carries (an optimistic accept adds it before the query refetches).
+  const shownSuggestions = (suggestions ?? []).filter((s) => !attachedIds.includes(s.tag.id));
 
   // Deterministic single-line fit: a hidden measurer lays out ALL chips + a sample "+N" pill at their
   // natural widths; the shared measure core (useChipOverflowFit) reads each chip's right edge, the rem
@@ -256,6 +312,17 @@ export function ChannelTagsControl({
             +{hidden}
           </button>
         )}
+        {/* Suggested ghost chips (E8·S4) ride in the same overflow-hidden row. They only appear on
+            untagged channels (the attached slice above is empty then), so they get the full width and
+            can't fight the fit measurer. Extras past the row clip like any overflow. */}
+        {shownSuggestions.map((s) => (
+          <SuggestedChip
+            key={s.tag.id}
+            suggestion={s}
+            onAccept={() => onAcceptSuggestion?.(s.tag.id)}
+            onDismiss={() => onDismissSuggestion?.(s.tag.id)}
+          />
+        ))}
       </div>
 
       <button

frontend/src/components/Channels.tsx

@@ -4,7 +4,9 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { qk } from "../lib/queryKeys";
 import { Ban, Eye, EyeOff, History, LayoutGrid, Pencil, RefreshCw, Table, X } from "lucide-react";
 import ExcludedChannelList from "./ExcludedChannelList";
-import { api, NO_TAG_SENTINEL, type ManagedChannel } from "../lib/api";
+import { api, NO_TAG_SENTINEL, type ManagedChannel, type TagSuggestions } from "../lib/api";
+import { Sparkles } from "lucide-react";
+import type { SuggestedTag } from "./ChannelTags";
 import { notifyYouTubeActionError } from "../lib/youtubeErrors";
 import { accountKey, LS } from "../lib/storage";
 import { buildChannelColumns, applySyncFilter } from "./channelColumns";
@@ -54,6 +56,11 @@ const LAYOUT_ICON: Record<ChannelLayout, typeof Table> = {
   cards: LayoutGrid,
 };
 
+// A tag suggestion at/above this score is "high confidence" — the only ones the header's bulk
+// "accept all" acts on. Mirrors AUTOAPPLY_THRESHOLD in backend app/sync/tagsuggest.py (kept in
+// lockstep by intent: the two aren't imported across the stack, so a change must touch both).
+const HIGH_CONFIDENCE = 0.9;
+
 export default function Channels() {
   const me = useMe();
   const canWrite = me.can_write;
@@ -98,6 +105,10 @@ export default function Channels() {
 
   const channelsQuery = useQuery({ queryKey: qk.channels(), queryFn: api.channels });
   const tagsQuery = useQuery({ queryKey: qk.tags(), queryFn: api.tags });
+  const suggestionsQuery = useQuery({
+    queryKey: qk.tagSuggestions(),
+    queryFn: api.tagSuggestions,
+  });
   const statusQuery = useQuery({ queryKey: qk.myStatus(), queryFn: api.myStatus });
   const blockedQuery = useQuery({ queryKey: qk.blockedChannels(), queryFn: api.blockedChannels });
   const [tagManagerOpen, setTagManagerOpen] = useState(false);
@@ -165,10 +176,63 @@ export default function Channels() {
         ),
       ),
     // Keep the channel DETAIL cache in step with the manager list (the detail page reads its tags
-    // from qk.channel(id)); mirrors the detail page invalidating the manager list on its side.
-    onSuccess: (id) => qc.invalidateQueries({ queryKey: qk.channel(id) }),
+    // from qk.channel(id)); mirrors the detail page invalidating the manager list on its side. Also
+    // recompute suggestions: a channel that just gained/lost a user tag changes the untagged set and
+    // the learned pattern (E8·S4).
+    onSuccess: (id) => {
+      qc.invalidateQueries({ queryKey: qk.channel(id) });
+      qc.invalidateQueries({ queryKey: qk.tagSuggestions() });
+    },
     onError: () => qc.invalidateQueries({ queryKey: qk.channels() }),
   });
+  // --- Suggested tags (E8·S4): learned from the user's own manual-tag pattern, shown as accept/dismiss
+  // ghost chips on untagged channels. Dismissal is session-only (an accepted suggestion self-clears —
+  // the channel becomes tagged and the server drops it; a dismissed one just hides until reload).
+  const tagById = useMemo(
+    () => new Map((tagsQuery.data ?? []).map((tg) => [tg.id, tg])),
+    [tagsQuery.data],
+  );
+  const [dismissed, setDismissed] = useState<Set<string>>(() => new Set());
+  const suggestions: TagSuggestions = suggestionsQuery.data ?? {};
+  const sKey = (cid: string, tagId: number) => `${cid}:${tagId}`;
+  // Resolve a channel's raw {tag_id, confidence} list to renderable {tag, confidence}, dropping any
+  // that were dismissed this session or whose tag no longer exists (deleted since the last compute).
+  const suggestionsFor = (cid: string): SuggestedTag[] =>
+    (suggestions[cid] ?? []).flatMap((s) => {
+      const tag = tagById.get(s.tag_id);
+      return tag && !dismissed.has(sKey(cid, s.tag_id)) ? [{ tag, confidence: s.confidence }] : [];
+    });
+  const dismissSuggestion = (cid: string, tagId: number) =>
+    setDismissed((prev) => new Set(prev).add(sKey(cid, tagId)));
+  const acceptSuggestion = (cid: string, tagId: number) => {
+    // Optimistically drop it from the suggestions cache so the ghost chip vanishes at once; toggleTag
+    // attaches the real tag (its onSuccess re-invalidates suggestions + the channel detail).
+    qc.setQueryData<TagSuggestions>(qk.tagSuggestions(), (old) => {
+      if (!old?.[cid]) return old;
+      const rest = old[cid].filter((s) => s.tag_id !== tagId);
+      const next = { ...old };
+      if (rest.length) next[cid] = rest;
+      else delete next[cid];
+      return next;
+    });
+    toggleTag(cid, tagId, false);
+  };
+  // Every currently-visible suggestion (all channels, minus dismissed) and the high-confidence subset
+  // the bulk action accepts.
+  const visibleSuggestions = Object.keys(suggestions).flatMap((cid) =>
+    suggestionsFor(cid).map((s) => ({ cid, tagId: s.tag.id, confidence: s.confidence })),
+  );
+  const highConfidence = visibleSuggestions.filter((s) => s.confidence >= HIGH_CONFIDENCE);
+  const acceptAllHighConfidence = async () => {
+    const ok = await confirm({
+      title: t("channels.tags.acceptAllTitle"),
+      message: t("channels.tags.acceptAllConfirm", { count: highConfidence.length }),
+      confirmLabel: t("channels.tags.acceptAllConfirmCta"),
+    });
+    if (!ok) return;
+    highConfidence.forEach(({ cid, tagId }) => acceptSuggestion(cid, tagId));
+  };
+
   const syncSubs = useMutation({
     mutationFn: () => api.syncSubscriptions(),
     onSuccess: (r: { subscriptions?: number }) => {
@@ -319,6 +383,9 @@ export default function Channels() {
     toggleTag,
     createAndAttachTag,
     onFilterByTag,
+    suggestionsFor,
+    onAcceptSuggestion: acceptSuggestion,
+    onDismissSuggestion: dismissSuggestion,
   });
 
   // Status chips sit in the table's controls row (next to paging) — compact and close to
@@ -474,6 +541,27 @@ export default function Channels() {
                   {t("datatable.clear")}
                 </button>
               )}
+              {/* Suggested-tags affordance (E8·S4): a sparkle count of the visible suggestions, with a
+                  one-click bulk-accept for the high-confidence ones. The per-row ghost chips handle the
+                  rest. Hidden when there's nothing to suggest. */}
+              {visibleSuggestions.length > 0 && (
+                <div className="shrink-0 flex items-center gap-1.5">
+                  <Tooltip hint={t("channels.tags.suggestionsHint")}>
+                    <span className="inline-flex items-center gap-1 rounded-lg border border-dashed border-accent/50 px-2 py-1 text-xs text-accent/90">
+                      <Sparkles className="h-3 w-3" />
+                      {t("channels.tags.suggestionsCount", { count: visibleSuggestions.length })}
+                    </span>
+                  </Tooltip>
+                  {highConfidence.length > 0 && (
+                    <button
+                      onClick={acceptAllHighConfidence}
+                      className="text-xs px-2 py-1 rounded-lg border border-border text-muted hover:border-accent hover:text-accent transition"
+                    >
+                      {t("channels.tags.acceptAllHigh", { count: highConfidence.length })}
+                    </button>
+                  )}
+                </div>
+              )}
               <div className="shrink-0">{actionButtons}</div>
             </div>
           </div>

frontend/src/components/channelColumns.tsx

@@ -9,7 +9,7 @@ import Tooltip from "./Tooltip";
 import { PriorityStepper } from "./PriorityStepper";
 import ChannelLink from "./ChannelLink";
 import AboutCell from "./AboutCell";
-import { ChannelTagsControl } from "./ChannelTags";
+import { ChannelTagsControl, type SuggestedTag } from "./ChannelTags";
 
 /** The shared "subscribers" DataTable column (right-aligned, sortable, em-dash for null) — identical
  * in the Channels manager and the ChannelDiscovery table, which show subscriber counts on different
@@ -166,6 +166,10 @@ export interface ChannelColumnDeps {
   toggleTag: (channelId: string, tagId: number, hasTag: boolean) => void;
   createAndAttachTag: (channelId: string, name: string) => void;
   onFilterByTag: (tagId: number, name: string) => void;
+  // E8·S4 — suggested user tags per channel (resolved to Tag + confidence), plus accept/dismiss.
+  suggestionsFor: (channelId: string) => SuggestedTag[];
+  onAcceptSuggestion: (channelId: string, tagId: number) => void;
+  onDismissSuggestion: (channelId: string, tagId: number) => void;
 }
 
 export function buildChannelColumns(deps: ChannelColumnDeps): Column<ManagedChannel>[] {
@@ -185,6 +189,9 @@ export function buildChannelColumns(deps: ChannelColumnDeps): Column<ManagedChan
     toggleTag,
     createAndAttachTag,
     onFilterByTag,
+    suggestionsFor,
+    onAcceptSuggestion,
+    onDismissSuggestion,
   } = deps;
   return [
     {
@@ -306,6 +313,9 @@ export function buildChannelColumns(deps: ChannelColumnDeps): Column<ManagedChan
           onToggle={(tagId) => toggleTag(c.id, tagId, c.tag_ids.includes(tagId))}
           onCreate={(name) => createAndAttachTag(c.id, name)}
           onChipClick={onFilterByTag}
+          suggestions={suggestionsFor(c.id)}
+          onAcceptSuggestion={(tagId) => onAcceptSuggestion(c.id, tagId)}
+          onDismissSuggestion={(tagId) => onDismissSuggestion(c.id, tagId)}
         />
       ),
     },

frontend/src/i18n/locales/en/channels.json

@@ -54,7 +54,19 @@
     "createFailed": "Could not create the tag.",
     "noTag": "No tag",
     "moreCount_one": "{{count}} more tag",
-    "moreCount_other": "{{count}} more tags"
+    "moreCount_other": "{{count}} more tags",
+    "suggestedHint": "Suggested from your tagging pattern ({{pct}}% match) — click to add",
+    "acceptSuggestion": "Add suggested tag {{name}}",
+    "dismissSuggestion": "Dismiss suggestion",
+    "suggestionsHint": "Tags suggested for your untagged channels, learned from how you've tagged similar ones. Click a ghost chip to add it, or × to dismiss.",
+    "suggestionsCount_one": "{{count}} suggestion",
+    "suggestionsCount_other": "{{count}} suggestions",
+    "acceptAllHigh_one": "Accept {{count}} confident",
+    "acceptAllHigh_other": "Accept {{count}} confident",
+    "acceptAllTitle": "Accept suggested tags",
+    "acceptAllConfirm_one": "Add the {{count}} high-confidence suggested tag to its channel?",
+    "acceptAllConfirm_other": "Add the {{count}} high-confidence suggested tags to their channels?",
+    "acceptAllConfirmCta": "Accept all"
   },
   "loading": "Loading channels…",
   "empty": "No channels.",

frontend/src/i18n/locales/hu/channels.json

@@ -54,7 +54,19 @@
     "createFailed": "A címke létrehozása nem sikerült.",
     "noTag": "Nincs címke",
     "moreCount_one": "még {{count}} címke",
-    "moreCount_other": "még {{count}} címke"
+    "moreCount_other": "még {{count}} címke",
+    "suggestedHint": "A címkézési mintád alapján javasolt ({{pct}}% egyezés) — kattints a hozzáadáshoz",
+    "acceptSuggestion": "{{name}} javasolt címke hozzáadása",
+    "dismissSuggestion": "Javaslat elvetése",
+    "suggestionsHint": "A címkézetlen csatornáidhoz javasolt címkék, abból tanulva, hogyan címkézted a hasonlókat. Kattints egy szellem-chipre a hozzáadáshoz, vagy ×-re az elvetéshez.",
+    "suggestionsCount_one": "{{count}} javaslat",
+    "suggestionsCount_other": "{{count}} javaslat",
+    "acceptAllHigh_one": "{{count}} biztos elfogadása",
+    "acceptAllHigh_other": "{{count}} biztos elfogadása",
+    "acceptAllTitle": "Javasolt címkék elfogadása",
+    "acceptAllConfirm_one": "Hozzáadod a(z) {{count}} nagy magabiztosságú javasolt címkét a csatornájához?",
+    "acceptAllConfirm_other": "Hozzáadod a(z) {{count}} nagy magabiztosságú javasolt címkét a csatornáikhoz?",
+    "acceptAllConfirmCta": "Mind elfogadása"
   },
   "loading": "Csatornák betöltése…",
   "empty": "Nincsenek csatornák.",

frontend/src/lib/api/tags.ts

@@ -10,8 +10,17 @@ export interface Tag {
   channel_count: number;
 }
 
+// One suggested user-tag for a channel, learned from the user's own manual-tag pattern (E8·S4).
+export interface TagSuggestion {
+  tag_id: number;
+  confidence: number;
+}
+// Keyed by channel id; channels with no suggestion are omitted by the server.
+export type TagSuggestions = Record<string, TagSuggestion[]>;
+
 export const tagsApi = {
   tags: (): Promise<Tag[]> => req("/api/tags"),
+  tagSuggestions: (): Promise<TagSuggestions> => req("/api/tags/suggestions"),
   createTag: (t: { name: string; color?: string; category?: string }): Promise<Tag> =>
     req("/api/tags", { method: "POST", body: JSON.stringify(t) }),
   updateTag: (id: number, patch: { name?: string; color?: string }) =>

frontend/src/lib/dateFilter.ts

@@ -51,7 +51,13 @@ export function selectDateChip(
   }
   const days = Number(key);
   return {
-    filters: { ...filters, maxAgeDays: days, dateFrom: undefined, dateTo: undefined, year: undefined },
+    filters: {
+      ...filters,
+      maxAgeDays: days,
+      dateFrom: undefined,
+      dateTo: undefined,
+      year: undefined,
+    },
     customOpen: false,
   };
 }

frontend/src/lib/queryKeys.ts

@@ -14,6 +14,9 @@ export const qk = {
   me: () => ["me"] as const,
   myStatus: () => ["my-status"] as const,
   tags: () => ["tags"] as const,
+  // Per-channel suggested user tags, learned from the manual-tag pattern (E8·S4). Separate root so
+  // accepting a suggestion can invalidate it without touching the whole tag catalog.
+  tagSuggestions: () => ["tag-suggestions"] as const,
 
   // --- feed / video ---
   // Every parameterized key guards on `!== undefined` (not truthiness), so "no arg → bare prefix