From 1debb7d9da8dde8b3b799b0ca0c869731bbe04d1 Mon Sep 17 00:00:00 2001
From: mhoennig <michael@hoennig.de>
Date: Mon, 24 Aug 2026 17:13:18 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20ID-Vorschl=C3=A4ge=20beim=20Tippen=20vo?=
 =?UTF-8?q?n=20Abh=C3=A4ngigkeiten=20(:#)=20=E2=80=94=20D63?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wer :# tippt, bekommt die vergebenen IDs als Liste an der Schreibmarke:
Präfix- vor Teilstring-Treffern, Knotentitel als Kontext, schon gelistete
und die eigene ID ausgenommen. ↑/↓ wählt, Enter/Tab übernimmt (undo-fähig),
Esc schließt; Live-Region für Screenreader. Eingabehilfe wie die Kurzform
(D55) — der Parser sieht nie etwas davon. Regeln headless in autocomplete.js
(20 Tests), app.js verdrahtet Popup, Tasten und Einfügen.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/CHANGELOG.md                   |   1 +
 docs/DECISIONS.md                   |  81 ++++++++++++++
 docs/SPEC.md                        |  24 +++++
 docs/examples/werkbaum.werkbaum     |   6 ++
 frontend/CLAUDE.md                  |   9 ++
 frontend/src/app.js                 | 160 +++++++++++++++++++++++++++-
 frontend/src/autocomplete.js        |  87 +++++++++++++++
 frontend/src/style.css              |  29 ++++-
 frontend/tests/autocomplete.test.js | 114 ++++++++++++++++++++
 9 files changed, 507 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/autocomplete.js
 create mode 100644 frontend/tests/autocomplete.test.js

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 72ee12f..76bd8aa 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -19,6 +19,7 @@ reverse.
 
 ## 2026-08-24
 
+- Typing `:#` suggests the document's ids — arrows choose, Enter inserts
 - When the caret's node is folded away, the nearest visible ancestor takes the highlight — also on Alt+click from the text
 - A size that cannot hold its sub-packages turns its badge amber and gets a warning — sizes are read as ranges, so only sure conflicts are reported
 - Fix: the exported SVG drew the assumed-M badge filled like a real size instead of inverted
diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md
index 5b1ad13..a1d5261 100644
--- a/docs/DECISIONS.md
+++ b/docs/DECISIONS.md
@@ -4688,3 +4688,84 @@ disjunktive Gruppen summiert statt Minimum: genau zwei. Im Browser: Badge
 den Grund; im exportierten SVG das Konflikt-Badge bernstein und das implizite
 M weiß mit Petrol-Rand. Kanonisches Beispiel §10 und der mitgelieferte Plan:
 0 Warnungen.
+
+## D63 — ID-Vorschläge beim Tippen von Abhängigkeiten (`:#`)
+Wer eine Abhängigkeit tippt, muss die Ziel-ID auswendig wissen oder im Text
+suchen — bei 180 IDs im mitgelieferten Plan keine Kleinigkeit. Jetzt öffnet
+`:#` eine Vorschlagsliste an der Schreibmarke: die vergebenen IDs, gefiltert
+nach dem getippten Fragment, mit dem Knotentitel als Kontext.
+
+**Dieselbe Kategorie wie die ID-Kurzform (D55): Eingabehilfe, keine
+Notation.** Der Parser sieht nie etwas davon, SPEC-Syntax und `llms.md`
+bleiben unberührt; übernommen wird undo-fähig über das vorhandene `writeAt()`
+(D53). Die drei schwierigen Zutaten lagen schon im Haus: Die **Kandidaten**
+kommen aus dem Parse-Baum, der bei jedem Tastendruck ohnehin frisch ist; die
+**Pixel-Position der Schreibmarke** misst der Spiegel-`div` aus D25/D33 (ein
+Marker-Span, `offsetTop`/`offsetLeft` — seit `wrap="off"` (D49) trivial); das
+**Einfügen ohne Undo-Verlust** ist die D53-Lehre. Kein CodeMirror/Monaco —
+das wäre eine Laufzeit-Abhängigkeit (D11/D19) für etwas, das drei vorhandene
+Mechanismen zusammensetzen.
+
+**Ausgelöst nur im Abhängigkeits-Kontext, nicht bei jedem `#`.** Ein
+alleinstehendes `#` *definiert* meist eine neue ID — dort wäre die Liste im
+Weg. Erkannt wird dieselbe Form, die der Parser liest: `(^|\s):#…` (§1) und
+die Kopf-Form `#auth:#…` (D36); `(:#a` bleibt Zitat, `Regel: #x` bleibt
+Label, im Kommentar und hinter `---` gibt es keinen Kontext. Die Erkennung
+(`depFragment`) und die Kandidaten-Auswahl (`collectIds`/`matchIds`) stehen
+headless in **`autocomplete.js`** — die Hausregel aus D54-Nachtrag 3; app.js
+verdrahtet nur Popup, Tasten und Einfügen.
+
+**Angeboten wird alles, ausgenommen das Sinnlose.** Auch IDs verworfener und
+eingeklappter Knoten stehen in der Liste — eine Abhängigkeit darf dorthin
+zeigen (§1), und die Faltung ist nur Ansicht (D38). Ausgenommen sind die im
+Token **schon gelisteten** IDs und die **eigene ID der Zeile** (die
+Selbst-Abhängigkeit ist zulässig, aber nie das, was man tippen will).
+Sortierung: Präfix-Treffer vor Teilstring-Treffern, je in
+Dokumentreihenfolge, Groß-/Kleinschreibung egal — die IDs selbst bleiben, wie
+sie geschrieben sind. Ersetzt wird bis ans **Ende der ID-Zeichen** hinter der
+Schreibmarke, sonst ergäbe eine Übernahme mitten im Wort `#authth`.
+
+**Die Tasten-Arbitrierung ist der heikle Teil, nicht das Popup.** ↑/↓, Enter,
+Tab und Esc gehören sonst dem Textfeld — abgefangen werden sie **nur bei
+offener Liste**, über einen Capture-Handler auf `document`: Die
+Textfeld-Handler (Tab rückt ein, Esc löst die Tab-Falle — beide D53) sind
+früher registriert und kämen sonst zuerst; `stopPropagation` hält sie heraus.
+Zwei Folgen, beide gemessen: Tab übernimmt bei offener Liste, **ohne**
+zusätzlich einzurücken, und rückt bei geschlossener unverändert ein; Esc
+schließt die Liste, ohne die Tab-Falle zu lösen. **Nach Esc und nach einer
+Übernahme bleibt derselbe Kontext zu** (`acSuppress`) — sonst öffnete ihn das
+nächste keyup sofort wieder; Weitertippen ändert das Fragment und hebt die
+Sperre.
+
+**Ein Echo wird nicht angeboten:** Steht die ID schon vollständig da (der
+eine exakte Treffer, Schreibmarke am Token-Ende), bleibt die Liste zu — so
+schließt sie nach der Übernahme von selbst und meldet sich nicht bei jedem
+Cursor-Besuch einer fertigen Zeile.
+
+**Barrierefreiheit als benannte Grenze, nicht als Behauptung.** Das saubere
+ARIA-Combobox-Muster passt nicht auf ein `<textarea>` (kein
+`aria-activedescendant` über Elementgrenzen). Das Popup ist deshalb
+`aria-hidden` wie das Knoten-Fenster (D57); eine höfliche **Live-Region**
+meldet die Trefferzahl beim Öffnen und die gewählte ID beim Blättern. Die
+Liste blockiert nie normales Tippen — wer sie nicht wahrnimmt, verliert
+nichts.
+
+**Position wie das Knoten-Fenster:** `position:fixed` auf `<body>` — in
+einem Vorfahren mit `overflow` würde die Liste geklippt (D50), und `#out`s
+`zoom` geht sie nichts an. Verankert unter dem `#` des Fragments, nach oben
+ausweichend, wenn unten kein Platz ist; zu geht sie bei Blur, Scrollen des
+Textfelds, Fenstergröße — allem, was ihre Position hinfällig macht (die
+D52-Liste). In Pad-Dokumenten (schreibgeschützt, D31) öffnet sie nie.
+
+**Nachgemessen** im Browser mit echten Ereignisfolgen: `:` allein öffnet
+nichts, `:#` zeigt alle vier IDs des Testbaums (verworfene eingeschlossen),
+`a` filtert auf drei, ↑/↓ wandert (Live-Region nennt die gewählte ID), Enter
+übernimmt (`- Frontend :#api`), `,#` öffnet ohne das schon gelistete `api`,
+Esc schließt und bleibt bei Cursorbewegung zu, `d` öffnet wieder, Klick
+übernimmt, und **jede** Übernahme ist ein einzelner Undo-Schritt. Tab: bei
+offener Liste übernehmen ohne Einrücken, danach einrücken wie immer. 20 neue
+Tests in `tests/autocomplete.test.js` (397 gesamt): Kontext-Erkennung
+(Kopf-Form, Zitier-Klammer, Kommentar, Beschreibungsteil, Fortsetzungszeile
+D59, Ersetzen über die Schreibmarke hinaus), Sammeln (Dokumentreihenfolge,
+verworfene, D60-Knoten ohne Titel) und Sortierung (Präfix vor Teilstring,
+case-insensitiv, exclude).
diff --git a/docs/SPEC.md b/docs/SPEC.md
index bdf119b..8eea7d8 100644
--- a/docs/SPEC.md
+++ b/docs/SPEC.md
@@ -869,6 +869,30 @@ und `llms.md` (§13) bleibt unberührt. Angefasst wird nur die Zeile, in der auc
 bloßes Durchklicken ein fremdes Dokument um; Abhängigkeiten (`:#…`) und der
 Beschreibungsteil hinter `---` bleiben außen vor. Siehe D55.
 
+### ID-Vorschläge beim Tippen von Abhängigkeiten (`:#`)
+Ebenfalls eine **Eingabehilfe**, keine Notation: Wer im Baumteil ein
+Abhängigkeits-Token beginnt (`:#`, auch in der Fortsetzung `,#` und in der
+Kopf-Form `#auth:#…`), bekommt an der Schreibmarke eine **Liste der vergebenen
+IDs** — gefiltert nach dem schon getippten Fragment (Präfix-Treffer zuerst,
+dann Teilstring-Treffer, je in Dokumentreihenfolge), mit dem Knotentitel als
+Kontext daneben. Angeboten werden **alle** IDs des Dokuments, auch die
+verworfener oder eingeklappter Knoten — eine Abhängigkeit darf überallhin
+zeigen (§1); nicht angeboten werden die im Token schon gelisteten IDs und die
+eigene ID der Zeile.
+
+- **Bedienung:** ↑/↓ wählt, Enter oder Tab übernimmt (undo-fähig, ein
+  Schritt), Esc schließt — Weitertippen öffnet wieder. Klick bzw. Tipp auf
+  einen Eintrag übernimmt ebenso. Wer die Liste ignoriert, tippt einfach
+  weiter: Sie fängt keine Taste ab, solange sie nichts anzeigt, und Tab rückt
+  bei geschlossener Liste unverändert ein.
+- **Kein Vorschlag** bei bloßem `#` (das *definiert* eine ID), im Kommentar
+  (`%%`), im Beschreibungsteil hinter `---` und in schreibgeschützten
+  Pad-Dokumenten (§9).
+- Der Parser sieht nie etwas davon; `llms.md` (§13) bleibt unberührt. Für
+  Screenreader meldet eine höfliche Live-Region die Trefferzahl und den
+  gewählten Eintrag; das Popup selbst ist `aria-hidden`, normales Tippen
+  bleibt unberührt. Siehe D63.
+
 ### Zeilennummern im Texteditor
 Links neben dem Textfeld steht ein schmaler Streifen mit den **Zeilennummern** —
 dieselben, die die Warnungen nennen („Zeile 12: …", §4). Ohne ihn muss man sie
diff --git a/docs/examples/werkbaum.werkbaum b/docs/examples/werkbaum.werkbaum
index d549acb..72483ac 100644
--- a/docs/examples/werkbaum.werkbaum
+++ b/docs/examples/werkbaum.werkbaum
@@ -72,6 +72,7 @@
     - [^] #ed.jump: Jump between diagram and text (S)
     - [^] #ed.lineno: Line numbers in the text editor (XS)  %% the warnings name them
     - [^] #ed.shortid: Type #.kc under #prod-stage, get #prod-stage.kc (XS)  %% an input aid, not notation
+    - [x] #ed.depcomplete: Typing :# suggests the known ids (S)  %% arrows choose, Enter inserts
     - [^] #ed.showids: A # button shows the ids before the titles (XS)  %% written as in the text, with a colon
       - [^] #ed.lineno.tip: The warning is the tooltip of its number (XS)  %% no hunting in the list
     - [^] #ed.fold: Collapsible subtrees (L)
@@ -526,6 +527,11 @@
   typing, not while parsing: the file keeps the full id, so it stays greppable
   and survives re-ordering, which is what the :#... references rely on.
 
+#ed.depcomplete
+  A dependency needs its target's id, and nobody remembers 180 of them. The
+  list at the caret offers the document's ids filtered by what is typed, with
+  the node title as context; an input aid like the shorthand, not notation.
+
 #ed.showids
   The id is the address of a node, but the diagram only carried it in the
   tooltip. The switch writes it before the title the same way the text does,
diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md
index c419022..abe5b0a 100644
--- a/frontend/CLAUDE.md
+++ b/frontend/CLAUDE.md
@@ -587,6 +587,15 @@ verworfene Elemente. Quelle sind ES-Module unter `src/`; `index.html` ist der
   `src.value =` ist nur beim **Laden eines anderen** Dokuments richtig
   (`loadActiveIntoEditor`, Dokumentwechsel, Pad-Abruf) — dorthin gibt es nichts
   zurückzunehmen.
+- **ID-Vorschläge `:#` (D63):** Die Regeln stehen headless in `autocomplete.js`
+  (`depFragment`/`collectIds`/`matchIds`, Tests); app.js verdrahtet nur Popup,
+  Tasten, Einfügen (`writeAt`, undo-fähig). Der Tasten-Handler hängt an
+  `document` in der **Capture-Phase** — die Textfeld-Handler (Tab rückt ein,
+  Esc löst die Tab-Falle, D53) sind früher registriert und kämen sonst zuerst;
+  `stopPropagation` hält sie nur bei **offener** Liste heraus. `acSuppress`
+  hält denselben Kontext nach Übernahme/Esc geschlossen — ohne das öffnet ihn
+  das nächste keyup sofort wieder. Popup auf `<body>` mit `position:fixed`
+  (Klipp-Falle D50, wie das Knoten-Fenster).
 - **Undo lässt sich hier nicht per Tastendruck prüfen.** Ein synthetisches
   `ctrl+z` aus der Automatisierung löst **kein** natives Undo aus (gemessen:
   Text unverändert), während `document.execCommand('undo')` im selben Moment
diff --git a/frontend/src/app.js b/frontend/src/app.js
index 0844f11..8d9ec20 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -4,6 +4,7 @@ import { computeCheapPlan, freshProdSet, initialCollapsed, nodeKeys, effectiveSt
 import { esc, renderTreeHtml, TIP_RULE } from './render.js';
 import { formatWarning, warningText } from './warnings.js';
 import { padUrls } from './remote.js';
+import { depFragment, collectIds, matchIds } from './autocomplete.js';
 import { LS_SNAPS, SNAP_EVERY, parseSnaps, addSnapshot, persistSnaps, snapLabel }
   from './snapshots.js';
 /* Neuigkeiten (D58): die git-Historie, zur BAUZEIT eingelesen (Vite-Plugin in
@@ -97,6 +98,11 @@ let foldOverrides = new Map(), foldByLine = new Map();
    `nodeOfLine()` greift darauf zurück, wenn die Zeile keinen DOM-Knoten hat. */
 let lineTargetMap = new Map();
 
+/* Der zuletzt geparste Baum, UNGEFILTERT — die ID-Vorschläge (D63) lesen
+   daraus die vergebenen IDs, und eine Abhängigkeit darf auch auf Verworfenes
+   zeigen. */
+let acRoots = [];
+
 /* ---------- Renderer (Anbindung an den DOM) ----------
    parse -> Wurzeln filtern (verworfene) -> günstigen Pfad markieren ->
    render.js baut den HTML-String -> in #out schreiben -> Pfadlinie zeichnen. */
@@ -105,6 +111,7 @@ function render(){
      und seine Position ist ohnehin gemessen, also gleich hinfällig. */
   closeNodeTip();
   const parsed = parse(src.value);
+  acRoots = parsed.roots;
   let roots = parsed.roots;
   const showDiscarded = discardedShown();
   if(!showDiscarded){
@@ -847,15 +854,21 @@ function syncMirror(){
   return mirrorEl;
 }
 const ZWSP = '​';
-function offsetTopInEditor(offset){
+/* Position eines Zeichenoffsets im Spiegel — `top` im Koordinatensystem von
+   `src.scrollTop`, `left` in dem von `src.scrollLeft` (Innenabstände stecken
+   je drin). Das `left` braucht nur die Vorschlagsliste (D63). */
+function caretPosInEditor(offset){
   const m = syncMirror();
   m.textContent = src.value.slice(0, offset);
   const marker = document.createElement('span');
   marker.textContent = ZWSP;
   m.appendChild(marker);
-  const top = marker.offsetTop;
+  const pos = {top: marker.offsetTop, left: marker.offsetLeft};
   m.textContent = '';
-  return top;
+  return pos;
+}
+function offsetTopInEditor(offset){
+  return caretPosInEditor(offset).top;
 }
 
 /* Oberkante jeder **logischen** Zeile, im selben Koordinatensystem wie
@@ -1456,6 +1469,7 @@ function syncCaret(){
   if(moved) resolveShortId(caretLine);
   caretLine = caretLineOf();   /* neu lesen: das Auflösen kann den Text ändern */
   highlightCurrentNode(moved);
+  updateAc();                  /* ID-Vorschläge folgen der Schreibmarke (D63) */
 }
 for(const ev of ['click','keyup','input','focus']) src.addEventListener(ev, syncCaret);
 
@@ -1561,6 +1575,137 @@ window.addEventListener('keydown', e => { if(e.key === 'Alt') setAltMode(true);
 window.addEventListener('keyup',   e => { if(e.key === 'Alt' || !e.altKey) setAltMode(false); });
 window.addEventListener('blur',    () => setAltMode(false));
 
+/* ---------- ID-Vorschläge beim Tippen von Abhängigkeiten (D63) ----------
+   Wer `:#` tippt, bekommt die vergebenen IDs als Liste an der Schreibmarke.
+   Die Regeln (wann ein Kontext vorliegt, welche IDs passen) stehen headless
+   in autocomplete.js; hier hängen nur Popup, Tasten und das Einfügen. Eine
+   Eingabehilfe wie die ID-Kurzform (D55): Der Parser sieht nie etwas davon,
+   und wer die Liste ignoriert, tippt einfach weiter. */
+let acEl = null, acLiveEl = null, acItems = [], acIndex = 0, acCtx = null;
+/* Nach Übernahme oder Esc bleibt DERSELBE Kontext zu — sonst öffnete ihn das
+   nächste keyup sofort wieder. Weitertippen ändert das Fragment und löst ihn. */
+let acSuppress = null;
+function acBox(){
+  if(!acEl){
+    acEl = document.createElement('div');
+    acEl.className = 'aclist';
+    /* aria-hidden wie das Knoten-Fenster (D57): Das saubere Combobox-Muster
+       passt nicht auf ein <textarea>; die Live-Region unten sagt, was es gibt,
+       und normales Tippen bleibt von der Liste unberührt. */
+    acEl.setAttribute('aria-hidden', 'true');
+    acEl.hidden = true;
+    /* pointerdown statt click: läuft VOR dem Fokuswechsel, und preventDefault
+       lässt den Fokus im Textfeld — auch auf Touch. */
+    acEl.addEventListener('pointerdown', e => {
+      const it = e.target.closest('.acitem');
+      if(!it) return;
+      e.preventDefault();
+      acIndex = Number(it.dataset.i);
+      acAccept();
+    });
+    document.body.appendChild(acEl);
+    acLiveEl = document.createElement('div');
+    acLiveEl.className = 'vh';
+    acLiveEl.setAttribute('role', 'status');
+    document.body.appendChild(acLiveEl);
+  }
+  return acEl;
+}
+function acIsOpen(){ return !!acEl && !acEl.hidden; }
+function closeAc(){
+  if(acEl) acEl.hidden = true;
+  if(acLiveEl) acLiveEl.textContent = '';
+  acCtx = null;
+}
+function updateAc(){
+  if(src.readOnly || document.activeElement !== src ||
+     src.selectionStart !== src.selectionEnd){ closeAc(); return; }
+  const ctx = depFragment(src.value, src.selectionStart);
+  if(!ctx){ acSuppress = null; closeAc(); return; }
+  if(acSuppress && acSuppress.start === ctx.start && acSuppress.fragment === ctx.fragment){
+    closeAc(); return;
+  }
+  acSuppress = null;
+  /* Pfeiltasten ändern nur die Auswahl, nicht den Kontext — Liste und
+     gewählter Eintrag bleiben dann stehen. */
+  if(acIsOpen() && acCtx && acCtx.start === ctx.start && acCtx.fragment === ctx.fragment) return;
+  const cands = matchIds(collectIds(acRoots), ctx.fragment, ctx.exclude);
+  /* Nichts zu zeigen — oder der eine exakte Treffer wäre nur ein Echo dessen,
+     was schon vollständig dasteht. */
+  if(!cands.length ||
+     (cands.length === 1 && cands[0].id === ctx.fragment && ctx.end === src.selectionStart)){
+    closeAc(); return;
+  }
+  acCtx = ctx; acItems = cands; acIndex = 0;
+  renderAc();
+  acLiveEl.textContent = t('acHint', {n: acItems.length});
+}
+function renderAc(){
+  const box = acBox();
+  box.innerHTML = acItems.map((c, i) =>
+    `<div class="acitem${i === acIndex ? ' sel' : ''}" data-i="${i}">` +
+    `<span class="acid">#${esc(c.id)}</span>` +
+    (c.label ? `<span class="aclabel">${esc(c.label)}</span>` : '') +
+    `</div>`).join('');
+  box.hidden = false;
+  placeAc();
+  const sel = box.children[acIndex];
+  if(sel) sel.scrollIntoView({block: 'nearest'});
+}
+/* Unter dem `#` des Fragments; nach oben ausweichend, wenn unten kein Platz
+   ist. Wie das Knoten-Fenster (D52) `position:fixed` auf <body> — in einem
+   Vorfahren mit `overflow` würde die Liste geklippt (D50). */
+function placeAc(){
+  const rect = src.getBoundingClientRect();
+  const pos = caretPosInEditor(Math.max(0, acCtx.start - 1));
+  const lh = parseFloat(getComputedStyle(src).lineHeight) || 18;
+  let x = rect.left + pos.left - src.scrollLeft;
+  let y = rect.top + pos.top - src.scrollTop + lh;
+  x = Math.max(8, Math.min(x, window.innerWidth - acEl.offsetWidth - 8));
+  if(y + acEl.offsetHeight > window.innerHeight - 8){
+    y = Math.max(8, rect.top + pos.top - src.scrollTop - acEl.offsetHeight - 4);
+  }
+  acEl.style.left = x + 'px';
+  acEl.style.top = y + 'px';
+}
+function acMove(d){
+  acIndex = (acIndex + d + acItems.length) % acItems.length;
+  renderAc();
+  acLiveEl.textContent = '#' + acItems[acIndex].id;   /* der gewählte Eintrag */
+}
+function acAccept(){
+  const c = acItems[acIndex], ctx = acCtx;
+  closeAc();
+  if(!c || !ctx) return;
+  acSuppress = {start: ctx.start, fragment: c.id};
+  const p = ctx.start + c.id.length;
+  /* writeAt (D53) ersetzt undo-fähig — hier läuft es aus keydown/pointerdown,
+     nicht re-entrant aus `input`, execCommand greift also (anders als D55). */
+  writeAt(ctx.start, ctx.end, c.id, p, p);
+}
+/* Auf `document` in der Capture-Phase: Die Handler am Textfeld (Tab rückt ein,
+   Esc löst die Tab-Falle, D53) sind früher registriert und kämen sonst zuerst.
+   stopPropagation hält sie heraus, solange die Liste offen ist. */
+document.addEventListener('keydown', e => {
+  if(!acIsOpen() || e.target !== src) return;
+  if(e.key === 'ArrowDown' || e.key === 'ArrowUp'){
+    e.preventDefault();
+    acMove(e.key === 'ArrowDown' ? 1 : -1);
+  } else if(e.key === 'Enter' || e.key === 'Tab'){
+    e.preventDefault();
+    e.stopPropagation();
+    acAccept();
+  } else if(e.key === 'Escape'){
+    e.stopPropagation();
+    acSuppress = {start: acCtx.start, fragment: acCtx.fragment};
+    closeAc();
+  }
+}, true);
+/* Zu, wenn die Position nicht mehr stimmt oder niemand mehr tippt. */
+src.addEventListener('blur', closeAc);
+src.addEventListener('scroll', closeAc);
+window.addEventListener('resize', closeAc);
+
 const app = document.getElementById('app');
 function applyLayout(mode){
   out.classList.toggle('vertical', mode === 'vertikal');
@@ -1917,6 +2062,7 @@ const I18N = {
     jumpHint:"Alt+Klick: zur Zeile im Text",
     /* Auf Touch nennt das Knoten-Fenster (D52) den langen Druck — Alt gibt es dort nicht. */
     jumpHintTouch:"Langer Druck: zur Zeile im Text",
+    acHint:"{n} ID-Vorschläge – ↑/↓ wählt, Enter übernimmt",
     tipClose:"Schließen",
     tipOpenLink:"Link öffnen",
     padReadonly:"Wird im Pad bearbeitet — hier nur lesen.",
@@ -2021,6 +2167,7 @@ const I18N = {
     ghostTooltip:"From size M upward, an item should be broken down further.",
     jumpHint:"Alt+click: jump to the line in the text",
     jumpHintTouch:"Long press: jump to the line in the text",
+    acHint:"{n} id suggestions – ↑/↓ to choose, Enter to insert",
     tipClose:"Close",
     tipOpenLink:"Open link",
     padReadonly:"Edited in the pad — read-only here.",
@@ -2124,6 +2271,7 @@ const I18N = {
     ghostTooltip:"A partir de la talla M, un elemento debería desglosarse más.",
     jumpHint:"Alt+clic: ir a la línea en el texto",
     jumpHintTouch:"Pulsación larga: ir a la línea en el texto",
+    acHint:"{n} sugerencias de ID – ↑/↓ elige, Intro inserta",
     tipClose:"Cerrar",
     tipOpenLink:"Abrir enlace",
     padReadonly:"Se edita en el pad — aquí solo lectura.",
@@ -2227,6 +2375,7 @@ const I18N = {
     ghostTooltip:"À partir de la taille M, un élément devrait être décomposé davantage.",
     jumpHint:"Alt+clic : aller à la ligne dans le texte",
     jumpHintTouch:"Appui long : aller à la ligne dans le texte",
+    acHint:"{n} suggestions d'ID – ↑/↓ pour choisir, Entrée pour insérer",
     tipClose:"Fermer",
     tipOpenLink:"Ouvrir le lien",
     padReadonly:"Modifié dans le pad — lecture seule ici.",
@@ -2330,6 +2479,7 @@ const I18N = {
     ghostTooltip:"Od rozmiaru M element powinien być dalej podzielony.",
     jumpHint:"Alt+kliknięcie: przejdź do wiersza w tekście",
     jumpHintTouch:"Długie przytrzymanie: przejdź do wiersza w tekście",
+    acHint:"{n} podpowiedzi ID – ↑/↓ wybiera, Enter wstawia",
     tipClose:"Zamknij",
     tipOpenLink:"Otwórz link",
     padReadonly:"Edytowane w padzie — tu tylko do czytania.",
@@ -2433,6 +2583,7 @@ const I18N = {
     ghostTooltip:"Начиная с размера M элемент следует далее декомпозировать.",
     jumpHint:"Alt+клик: перейти к строке в тексте",
     jumpHintTouch:"Долгое нажатие: перейти к строке в тексте",
+    acHint:"{n} подсказок ID – ↑/↓ выбирает, Enter вставляет",
     tipClose:"Закрыть",
     tipOpenLink:"Открыть ссылку",
     padReadonly:"Редактируется в паде — здесь только чтение.",
@@ -2536,6 +2687,7 @@ const I18N = {
     ghostTooltip:"आकार M से ऊपर किसी तत्व को और अधिक उप-विभाजित करना चाहिए।",
     jumpHint:"Alt+क्लिक: टेक्स्ट में उस पंक्ति पर जाएँ",
     jumpHintTouch:"देर तक दबाएँ: टेक्स्ट में उस पंक्ति पर जाएँ",
+    acHint:"{n} आईडी सुझाव – ↑/↓ से चुनें, Enter से डालें",
     tipClose:"बंद करें",
     tipOpenLink:"लिंक खोलें",
     padReadonly:"पैड में संपादित होता है — यहाँ केवल पढ़ें।",
@@ -2646,6 +2798,7 @@ const I18N = {
     ghostTooltip:"从 M 号起，元素应进一步细分。",
     jumpHint:"Alt+点击：跳转到文本中的该行",
     jumpHintTouch:"长按：跳转到文本中的该行",
+    acHint:"{n} 个 ID 建议 – ↑/↓ 选择，Enter 插入",
     tipClose:"关闭",
     tipOpenLink:"打开链接",
     padReadonly:"在 Pad 中编辑 — 此处只读。",
@@ -2749,6 +2902,7 @@ const I18N = {
     ghostTooltip:"サイズ M 以上の要素はさらに分解すべきです。",
     jumpHint:"Alt+クリック：テキストの該当行へ移動",
     jumpHintTouch:"長押し：テキストの該当行へ移動",
+    acHint:"ID候補 {n} 件 – ↑/↓で選択、Enterで挿入",
     tipClose:"閉じる",
     tipOpenLink:"リンクを開く",
     padReadonly:"パッドで編集します — ここでは読み取り専用です。",
diff --git a/frontend/src/autocomplete.js b/frontend/src/autocomplete.js
new file mode 100644
index 0000000..731959d
--- /dev/null
+++ b/frontend/src/autocomplete.js
@@ -0,0 +1,87 @@
+/* ID-Vorschläge beim Tippen von Abhängigkeiten (D63).
+
+   Eine Eingabehilfe wie die ID-Kurzform (D55), keine Notation: Der Parser
+   sieht nie etwas davon, SPEC und llms.md bleiben unberührt. Hier steht, WAS
+   gilt — wann ein `:#…`-Kontext vorliegt und welche IDs dazu passen; app.js
+   verdrahtet nur (Popup, Tasten, Einfügen). Frontend-Hausregel: Was
+   entscheidbar ist, gehört in ein Modul (D54-Nachtrag 3). */
+
+const ID_CHARS = '[\\p{L}\\p{N}._-]';
+
+/* Der Abhängigkeits-Kontext an der Schreibmarke: null, oder
+   {start, end, fragment, exclude}. `start`..caret ist das angefangene
+   ID-Fragment hinter dem letzten `#`; `end` reicht über die Schreibmarke
+   hinaus bis ans Ende der ID-Zeichen (wer mitten im Wort ersetzt, soll kein
+   `#authth` bekommen). `exclude` sind die IDs, die eine Auswahl nicht mehr
+   anbieten soll: die schon gelisteten des Tokens und die eigene ID der Zeile
+   (die Selbst-Abhängigkeit ist zulässig, aber nie das, was man tippen will).
+
+   Erkannt wird dieselbe Form, die der Parser liest (SPEC §1): das Token
+   alleinstehend angesetzt — `(^|\s):#…` — oder unmittelbar hinter der
+   Knoten-ID (`#auth:#db`, D36). `(:#a` bleibt damit Zitat, `Regel: #x`
+   bleibt Label. Kein Kontext im Kommentar (hinter `%%`) und nicht im
+   Beschreibungsteil hinter `---` — dort ist alles Freitext. */
+const TOKEN_RE = new RegExp(
+  '(?:^|[ \\t])(?:#(' + ID_CHARS + '+))?:(#' + ID_CHARS + '*(?:,#' + ID_CHARS + '*)*)$', 'u');
+const OWN_ID_RE = new RegExp('(?:^|\\s)#(' + ID_CHARS + '+)', 'u');
+const TAIL_RE = new RegExp('^' + ID_CHARS + '*', 'u');
+
+export function depFragment(text, caret){
+  const before = text.slice(0, caret);
+  const lines = before.split('\n');
+  const cur = lines[lines.length - 1];
+  /* Beschreibungsteil (§1): alles hinter dem ersten `---`-Trenner ist Freitext. */
+  for(let i = 0; i < lines.length - 1; i++){
+    if(/^\s*-{3,}\s*$/.test(lines[i])) return null;
+  }
+  if(cur.includes('%%')) return null;   /* die Schreibmarke steht im Kommentar */
+  const m = TOKEN_RE.exec(cur);
+  if(!m) return null;
+  const token = m[2];                              /* "#a,#b…" bis zur Schreibmarke */
+  const parts = token.slice(1).split(',#');
+  const fragment = parts[parts.length - 1];
+  const exclude = parts.slice(0, -1);
+  if(m[1]) exclude.push(m[1]);                     /* Kopf-Form `#auth:#…` */
+  else {
+    /* Eigene ID der Zeile, wenn sie weiter vorn steht (`#auth: … :#…`) —
+       erster alleinstehender `#`-Treffer, wie in der Extraktion (Schritt 6).
+       Der Zeilenrest vor dem Token genügt: Die IDs im Token selbst sind nie
+       alleinstehend (`:`/`,` davor). */
+    const own = OWN_ID_RE.exec(cur.slice(0, m.index + 1));
+    if(own) exclude.push(own[1]);
+  }
+  const end = caret + TAIL_RE.exec(text.slice(caret))[0].length;
+  return {start: caret - fragment.length, end, fragment, exclude};
+}
+
+/* Alle vergebenen IDs in Dokumentreihenfolge, mit Titel als Kontext.
+   Bewusst ALLE Knoten — auch verworfene und eingeklappte: Eine Abhängigkeit
+   darf überallhin zeigen, und die Faltung ist nur Ansicht (D38). */
+export function collectIds(roots){
+  const out = [];
+  const walk = ns => {
+    for(const n of ns){
+      if(n.id) out.push({id: n.id, label: n.labelFromId ? '' : n.label});
+      walk(n.children);
+    }
+  };
+  walk(roots);
+  return out;
+}
+
+/* Passende Kandidaten: erst Präfix-Treffer, dann Teilstring-Treffer, je in
+   Dokumentreihenfolge; Groß-/Kleinschreibung egal (die IDs selbst bleiben,
+   wie sie geschrieben sind). Leeres Fragment (direkt nach `:#`) zeigt alle. */
+export function matchIds(ids, fragment, exclude = []){
+  const ex = new Set(exclude);
+  const pool = ids.filter(c => !ex.has(c.id));
+  if(!fragment) return pool;
+  const f = fragment.toLowerCase();
+  const pre = [], sub = [];
+  for(const c of pool){
+    const lo = c.id.toLowerCase();
+    if(lo.startsWith(f)) pre.push(c);
+    else if(lo.includes(f)) sub.push(c);
+  }
+  return pre.concat(sub);
+}
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 1dea072..6f62b94 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1006,6 +1006,33 @@
      `ul.or .node{box-shadow:none}` spezifischer ist. */
   #out .node.tipped{box-shadow:0 0 0 3px rgba(15,118,110,.55)}
 
+  /* ---------- ID-Vorschläge beim Tippen von Abhängigkeiten (D63) ----------
+     `position:fixed` auf <body> wie das Knoten-Fenster: In einem Vorfahren
+     mit `overflow` würde die Liste geklippt (D50). Die IDs in der
+     Mono-Schrift des Textfelds, der Titel als gedämpfter Kontext daneben. */
+  .aclist{
+    position:fixed;z-index:70;min-width:160px;max-width:min(24rem, calc(100vw - 16px));
+    max-height:12.5rem;overflow-y:auto;
+    background:var(--card);border:1px solid rgba(36,52,71,.15);border-radius:8px;
+    box-shadow:0 8px 24px rgba(36,52,71,.25);padding:4px;
+  }
+  .aclist[hidden]{display:none}
+  .acitem{
+    display:flex;align-items:baseline;gap:8px;padding:4px 8px;border-radius:5px;
+    cursor:pointer;white-space:nowrap;
+  }
+  .acitem.sel,.acitem:hover{background:rgba(15,118,110,.12)}
+  .acid{font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--ink)}
+  .aclabel{
+    font-size:.7rem;color:var(--muted);
+    overflow:hidden;text-overflow:ellipsis;max-width:14rem;
+  }
+  /* Visuell versteckt, für Screenreader da — die Live-Region der Vorschläge. */
+  .vh{
+    position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
+    clip-path:inset(50%);white-space:nowrap;
+  }
+
   /* --- ALL OF: Kinder nebeneinander, durchgezogener Verteiler --- */
   ul.and{display:flex;align-items:flex-start;position:relative;padding-top:14px}
   ul.and::before{
@@ -1431,7 +1458,7 @@
   @media print{
     html,body{height:auto!important;overflow:visible!important;background:#fff!important}
     header,.panel.editor,.gutter,.panel.right .panel-head,
-    .warnings,.zoomctl,.site-footer,.nodetip{display:none!important}
+    .warnings,.zoomctl,.site-footer,.nodetip,.aclist{display:none!important}
     .app,.app.side{display:block!important;max-width:none!important;width:auto!important;
       height:auto!important;margin:0!important;gap:0!important}
     .panel.right{grid-area:auto!important;background:#fff!important;border:0!important;
diff --git a/frontend/tests/autocomplete.test.js b/frontend/tests/autocomplete.test.js
new file mode 100644
index 0000000..3f47f5e
--- /dev/null
+++ b/frontend/tests/autocomplete.test.js
@@ -0,0 +1,114 @@
+// ID-Vorschläge beim Tippen von Abhängigkeiten (D63): Kontext-Erkennung und
+// Kandidaten-Auswahl. Die Verdrahtung (Popup, Tasten, Einfügen) bleibt
+// Browser-Sache — hier steht, WAS gilt.
+import { describe, it, expect } from 'vitest';
+import { depFragment, collectIds, matchIds } from '../src/autocomplete.js';
+import { parse } from '../src/parser.js';
+
+/* Kontext am Zeilenende: Text bis `|` ist alles vor der Schreibmarke. */
+const at = text => {
+  const caret = text.indexOf('|');
+  return depFragment(text.replace('|', ''), caret);
+};
+
+describe('depFragment: wann ein :#-Kontext vorliegt', () => {
+  it('öffnet direkt nach :# mit leerem Fragment', () => {
+    const ctx = at('- Backend :#|');
+    expect(ctx).toMatchObject({fragment: '', exclude: []});
+    expect(ctx.start).toBe(12);
+    expect(ctx.end).toBe(12);
+  });
+
+  it('liefert das angefangene Fragment', () => {
+    expect(at('- Backend :#au|')).toMatchObject({fragment: 'au', start: 12});
+  });
+
+  it('setzt in der Liste fort und schließt Gelistetes aus', () => {
+    expect(at('- X :#auth,#a|')).toMatchObject({fragment: 'a', exclude: ['auth']});
+  });
+
+  it('erkennt die Kopf-Form #auth:#… und schließt die eigene ID aus', () => {
+    expect(at('- #auth:#d|')).toMatchObject({fragment: 'd', exclude: ['auth']});
+  });
+
+  it('schließt die eigene ID der Zeile auch weiter vorn aus', () => {
+    expect(at('- #auth: Backend :#|')).toMatchObject({fragment: '', exclude: ['auth']});
+  });
+
+  it('reicht über die Schreibmarke bis ans Ende der ID-Zeichen (end)', () => {
+    const text = '- X :#auth (S)';
+    const ctx = depFragment(text, 8);   /* Schreibmarke mitten in `auth` */
+    expect(ctx).toMatchObject({fragment: 'au', start: 6, end: 10});
+  });
+
+  it('kein Kontext bei bloßem # — das definiert eine ID', () => {
+    expect(at('- Backend #au|')).toBeNull();
+  });
+
+  it('kein Kontext in der Zitier-Klammer und nach Label-Doppelpunkten', () => {
+    expect(at('- siehe (:#auth|')).toBeNull();
+    expect(at('- Regel:#x|')).toBeNull();
+  });
+
+  it('kein Kontext im Kommentar', () => {
+    expect(at('- A %% braucht :#auth|')).toBeNull();
+  });
+
+  it('kein Kontext im Beschreibungsteil hinter ---', () => {
+    expect(at('- A\n---\n#a\n  siehe :#|')).toBeNull();
+  });
+
+  it('kein Kontext, wenn das Token nicht bis zur Schreibmarke reicht', () => {
+    expect(at('- A :#auth |')).toBeNull();
+  });
+
+  it('am Anfang einer Fortsetzungszeile gilt der Zeilenanfang als Leerraum', () => {
+    expect(at('- Langer Titel \\\n:#au|')).toMatchObject({fragment: 'au'});
+  });
+});
+
+describe('collectIds: alle vergebenen IDs in Dokumentreihenfolge', () => {
+  it('sammelt über alle Ebenen, mit Titel als Kontext', () => {
+    const { roots } = parse('#a: Wurzel\n  - #b: Kind\n    - Ohne ID\n  - #c: Kind 2');
+    expect(collectIds(roots)).toEqual([
+      {id: 'a', label: 'Wurzel'}, {id: 'b', label: 'Kind'}, {id: 'c', label: 'Kind 2'},
+    ]);
+  });
+
+  it('nimmt auch verworfene Knoten mit — Abhängigkeiten dürfen dorthin zeigen', () => {
+    const { roots } = parse('A\n  - [-] #alt: Verworfen');
+    expect(collectIds(roots)).toEqual([{id: 'alt', label: 'Verworfen'}]);
+  });
+
+  it('lässt den Titel leer, wenn die ID ihn nur vertritt (D60)', () => {
+    const { roots } = parse('- #US-123');
+    expect(collectIds(roots)).toEqual([{id: 'US-123', label: ''}]);
+  });
+});
+
+describe('matchIds: Präfix vor Teilstring, Dokumentreihenfolge, ohne exclude', () => {
+  const ids = [
+    {id: 'auth', label: ''}, {id: 'db', label: ''},
+    {id: 'be.auth', label: ''}, {id: 'author', label: ''},
+  ];
+
+  it('leeres Fragment zeigt alle', () => {
+    expect(matchIds(ids, '').map(c => c.id)).toEqual(['auth', 'db', 'be.auth', 'author']);
+  });
+
+  it('Präfix-Treffer stehen vor Teilstring-Treffern, je in Reihenfolge', () => {
+    expect(matchIds(ids, 'au').map(c => c.id)).toEqual(['auth', 'author', 'be.auth']);
+  });
+
+  it('vergleicht ohne Groß-/Kleinschreibung, behält die Schreibweise', () => {
+    expect(matchIds([{id: 'US-123', label: ''}], 'us').map(c => c.id)).toEqual(['US-123']);
+  });
+
+  it('ausgeschlossene IDs erscheinen nicht', () => {
+    expect(matchIds(ids, 'au', ['auth']).map(c => c.id)).toEqual(['author', 'be.auth']);
+  });
+
+  it('ohne Treffer bleibt die Liste leer', () => {
+    expect(matchIds(ids, 'xyz')).toEqual([]);
+  });
+});