feat(workspace): slash commands ranked by name, taller link cards with a link marker

- /li lists /link first: name prefix, aliases, name, then description
- link cards about twice as tall; the bare address below becomes an accent
  link marker; the link chip bar under bullets is gone, bare web addresses
  in text are links themselves

chore(release): v0.14.3

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/features/workspace/LinkPreviewCard.tsx

@@ -52,9 +52,9 @@ export const LinkPreviewCard: React.FC<LinkPreviewCardProps> = ({ url, canEdit,
         href={href}
         target="_blank"
         rel="noopener noreferrer"
-        className="flex items-stretch gap-3 rounded-card border border-border bg-panel hover:bg-panel-elevated transition-colors overflow-hidden no-underline"
+        className="flex items-stretch gap-3 min-h-[6.5rem] rounded-card border border-border bg-panel hover:bg-panel-elevated transition-colors overflow-hidden no-underline"
       >
-        <div className="min-w-0 flex-1 py-2 pl-3 pr-11 sm:pr-8 space-y-0.5">
+        <div className="min-w-0 flex-1 py-3 pl-3 pr-11 sm:pr-8 space-y-1 flex flex-col justify-center">
           <div className="flex items-center gap-1.5 text-[11px] text-faint min-w-0">
             {icon ? (
               <img src={icon} alt="" className="w-3.5 h-3.5 rounded-sm shrink-0" />
@@ -64,9 +64,9 @@ export const LinkPreviewCard: React.FC<LinkPreviewCardProps> = ({ url, canEdit,
             <span className="truncate">{preview.siteName}</span>
           </div>
           {preview.title && <div className="text-sm font-semibold text-main line-clamp-2 leading-snug">{preview.title}</div>}
-          {preview.description && <div className="text-xs text-muted truncate">{preview.description}</div>}
+          {preview.description && <div className="text-xs text-muted line-clamp-2">{preview.description}</div>}
         </div>
-        {image && <img src={image} alt="" className="w-16 sm:w-20 object-cover shrink-0 border-l border-border" />}
+        {image && <img src={image} alt="" className="w-28 sm:w-40 object-cover shrink-0 border-l border-border" />}
       </a>
       {canEdit && (
         <button

frontend/src/features/workspace/OutlinerBlock.tsx

@@ -37,7 +37,7 @@ import { AudioBlock } from './AudioBlock';
 import { DictationBlock } from './DictationBlock';
 import { currentVoiceConfig } from '../../lib/voice';
 import { LinkPreviewCard } from './LinkPreviewCard';
-import { linkCardUrl, hidePreviewContent, useLinkPreviewsEnabled } from '../../lib/linkPreview';
+import { linkCardUrl, hidePreviewContent, linkHost, useLinkPreviewsEnabled } from '../../lib/linkPreview';
 import { mediaContent, parseMediaContent } from '../../lib/media';
 import { renderInlineMarkdown } from '../../lib/markdown';
 import { api } from '../../lib/api';
@@ -54,6 +54,17 @@ export interface SlashCommand {
   aliases?: string[];
 }
 
+// The command name counts most: "/li" finds /link before /number (whose description says "Liste")
+function slashRank(c: SlashCommand, q: string): number {
+  if (!q) return 0;
+  const name = c.label.slice(1).toLowerCase();
+  if (name.startsWith(q)) return 0;
+  if ((c.aliases || []).some((a) => a.startsWith(q))) return 1;
+  if (name.includes(q)) return 2;
+  if ((c.aliases || []).some((a) => a.includes(q))) return 3;
+  return 4;
+}
+
 const SLASH_COMMANDS: SlashCommand[] = [
   { type: 'todo', label: '/todo', desc: 'Aufgabe mit Checkbox', icon: <ListTodo className="w-3.5 h-3.5" /> },
   { type: 'numbered', label: '/number', desc: 'Nummerierte Liste (1., a., i.)', icon: <ListOrdered className="w-3.5 h-3.5" />, aliases: ['nummer', 'liste', 'ol'] },
@@ -465,7 +476,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
       }
 
       return true;
-    });
+    }).sort((a, b) => slashRank(a, cmdQuery) - slashRank(b, cmdQuery));
   }, [slashMatchInfo, localContent, onExtractBlock]);
 
   useEffect(() => {
@@ -1062,21 +1073,6 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
   const visualLevel = Math.max(0, level - (levelOffset || 0));
   const isEmpty = (!localContent || localContent.trim() === '') && !hasChildren;
 
-  // Parse rich tokens (WikiLinks [[Page]], Markdown Links [Title](url), raw URLs, and #Tags)
-  const tokens = useMemo(() => {
-    const parts = (localContent || '').split(
-      /(\[\[.*?\]\]|\[.*?\]\(https?:\/\/.*?\)|\bhttps?:\/\/[^\s]+|#[a-zA-Z0-9äöüÄÖÜß_-]+)/g
-    );
-    return parts.filter(Boolean);
-  }, [localContent]);
-
-  // #Hashtags are rendered inline inside the text, so only links need the badge bar below
-  // Wiki links are readable and clickable in the text itself, so only web links get a chip
-  const hasSpecialTokens = tokens.some(
-    (t) =>
-      /^\[(.*?)\]\((https?:\/\/.*?)\)$/.test(t) ||
-      (/^https?:\/\//.test(t) && t !== previewUrl)
-  );
 
   return (
     <div
@@ -1390,7 +1386,24 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
             >
               {/* When actively focused, ghost text is invisible so textarea renders text/caret directly */}
               <span ref={renderedTextRef} className={activeFocus ? 'invisible' : ''}>
-                {localContent ? renderInlineMarkdown(localContent, { onTagClick, onWikiLinkClick }) : '\u200b'}
+                {previewUrl && !activeFocus ? (
+                  // The card above shows the page; the address itself becomes a small link marker
+                  <a
+                    href={safeHref(previewUrl) || undefined}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={(e) => e.stopPropagation()}
+                    className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium text-accent bg-accent-dim hover:bg-accent/20 no-underline transition-colors"
+                    title={previewUrl}
+                  >
+                    <ExternalLink className="w-3 h-3" />
+                    <span className="truncate max-w-[16rem]">{linkHost(previewUrl)}</span>
+                  </a>
+                ) : localContent ? (
+                  renderInlineMarkdown(localContent, { onTagClick, onWikiLinkClick })
+                ) : (
+                  '\u200b'
+                )}
               </span>
             </div>
 
@@ -1506,50 +1519,6 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
           </div>
         )}
 
-        {/* Rich Tokens Bar (Wiki-Links & #Tags) if present */}
-        {hasSpecialTokens && !isFocused && (
-          <div className="flex flex-wrap items-center gap-1 mt-0.5">
-            {tokens.map((part, idx) => {
-              if (part.startsWith('[[')) return null;
-              const mdMatch = part.match(/^\[(.*?)\]\((https?:\/\/.*?)\)$/);
-              if (mdMatch && safeHref(mdMatch[2])) {
-                const label = mdMatch[1];
-                const url = safeHref(mdMatch[2]) as string;
-                return (
-                  <a
-                    key={idx}
-                    href={url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-medium text-status-ok bg-status-ok/10 hover:bg-status-ok/20 rounded-btn transition-colors"
-                    title={url}
-                  >
-                    <ExternalLink className="w-2.5 h-2.5 opacity-80" />
-                    <span>{label || url}</span>
-                  </a>
-                );
-              }
-              // The preview card above already shows this address
-              if (/^https?:\/\//.test(part) && safeHref(part) && part !== previewUrl) {
-                return (
-                  <a
-                    key={idx}
-                    href={safeHref(part) as string}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-medium text-status-ok bg-status-ok/10 hover:bg-status-ok/20 rounded-btn transition-colors"
-                    title={part}
-                  >
-                    <ExternalLink className="w-2.5 h-2.5 opacity-80" />
-                    <span className="truncate max-w-[160px]">{part}</span>
-                  </a>
-                );
-              }
-              return null;
-            })}
-          </div>
-        )}
-
         {/* Floating Slash Commands Menu */}
         {slashSearch !== null && canEdit && (
           <div

frontend/src/features/workspace/__tests__/OutlinerBlock.caret.test.tsx

@@ -207,6 +207,16 @@ describe('slash command menu and outliner fixes', () => {
     expect(onCreateBelow).toHaveBeenCalledWith('b1', '');
   });
 
+  it('lists commands whose name starts with the typed text first (/li → /link before /number)', () => {
+    const block = { id: 'b1', type: 'bullet', content: '', level: 0 } as DocumentBlock;
+    const { container } = renderBlock(block);
+    const ta = container.querySelector('textarea') as HTMLTextAreaElement;
+    fireEvent.change(ta, { target: { value: '/li', selectionStart: 3, selectionEnd: 3 } });
+    const labels = [...container.querySelectorAll('button')].map((b) => b.textContent || '').filter((t) => t.startsWith('/'));
+    expect(labels[0]).toMatch(/^\/link/);
+    expect(labels.findIndex((l) => l.startsWith('/number'))).toBeGreaterThan(0);
+  });
+
   it('keeps an empty indented bullet on its level when another bullet on that level follows', () => {
     const onIndent = vi.fn();
     const onCreateBelow = vi.fn();

frontend/src/lib/__tests__/linkPreview.test.ts

@@ -21,3 +21,11 @@ describe('link preview helpers', () => {
     expect(linkCardUrl(hidePreviewContent('https://koch.de/x', 'https://koch.de/x', 'T'))).toBeNull();
   });
 });
+
+describe('linkHost', () => {
+  it('shows host and path without scheme and www', async () => {
+    const { linkHost } = await import('../linkPreview');
+    expect(linkHost('https://www.example.com/')).toBe('example.com');
+    expect(linkHost('https://example.com/blog/post')).toBe('example.com/blog/post');
+  });
+});

frontend/src/lib/__tests__/markdown.test.tsx

@@ -17,6 +17,19 @@ describe('renderInlineMarkdown', () => {
     expect(container.textContent).toBe('Der Block services startet');
   });
 
+  it('links bare web addresses without the trailing punctuation and keeps markdown links intact', () => {
+    const { container } = render(
+      <div>{renderInlineMarkdown('Siehe https://example.com/a_b_c. und [Doku](https://example.org/x) oder https://x.de/#frag')}</div>
+    );
+    const links = [...container.querySelectorAll('a')].map((a) => [a.textContent, a.getAttribute('href')]);
+    expect(links).toEqual([
+      ['https://example.com/a_b_c', 'https://example.com/a_b_c'],
+      ['Doku', 'https://example.org/x'],
+      ['https://x.de/#frag', 'https://x.de/#frag'],
+    ]);
+    expect(container.textContent).toBe('Siehe https://example.com/a_b_c. und Doku oder https://x.de/#frag');
+  });
+
   it('renders italic text with <em> tag', () => {
     const { container } = render(<div>{renderInlineMarkdown('Text mit *kursivem* Wort')}</div>);
     const em = container.querySelector('em');

frontend/src/lib/linkPreview.ts

@@ -25,6 +25,17 @@ export function linkCardUrl(content: string): string | null {
 }
 
 /** Replaces the address by a named link, which shows no preview. */
+/** "example.com/pfad" for a short link marker (no scheme, no www.) */
+export function linkHost(url: string): string {
+  try {
+    const u = new URL(url);
+    const path = u.pathname === '/' ? '' : u.pathname;
+    return u.host.replace(/^www\./, '') + path;
+  } catch {
+    return url;
+  }
+}
+
 export function hidePreviewContent(content: string, url: string, title: string): string {
   const label = (title || new URL(url).hostname).replace(/[[\]]/g, '').trim() || url;
   return content.replace(url, `[${label}](${url})`);

frontend/src/lib/markdown.tsx

@@ -22,7 +22,7 @@ function renderInlineTokens(text: string, options?: InlineMarkdownOptions): Reac
 
   const tagAlt = options?.onTagClick ? '|#[a-zA-Z0-9äöüÄÖÜß_-]+' : '';
   const regex = new RegExp(
-    '(\\[\\[[^\\]]+\\]\\]|`[^`]+`|\\*\\*[^*]+\\*\\*|__[^_]+__|~~[^~]+~~|\\*[^*]+\\*|_[^_]+_|\\[([^\\]]+)\\]\\(([^)]+)\\)' + tagAlt + ')',
+    '(\\[\\[[^\\]]+\\]\\]|https?:\\/\\/[^\\s<>()\\[\\]]+[^\\s<>()\\[\\].,;:!?"\']|`[^`]+`|\\*\\*[^*]+\\*\\*|__[^_]+__|~~[^~]+~~|\\*[^*]+\\*|_[^_]+_|\\[([^\\]]+)\\]\\(([^)]+)\\)' + tagAlt + ')',
     'g'
   );
 
@@ -37,7 +37,25 @@ function renderInlineTokens(text: string, options?: InlineMarkdownOptions): Reac
     const token = match[0];
     const key = `${match.index}-${token}`;
 
-    if (token.startsWith('[[') && token.endsWith(']]')) {
+    if (/^https?:\/\//.test(token)) {
+      const href = safeHref(token);
+      elements.push(
+        href ? (
+          <a
+            key={key}
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-accent underline underline-offset-2 decoration-accent/40 hover:decoration-accent break-all"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {token}
+          </a>
+        ) : (
+          token
+        )
+      );
+    } else if (token.startsWith('[[') && token.endsWith(']]')) {
       const link = parseWikiLink(token.slice(2, -2));
       const onClick = options?.onWikiLinkClick;
       elements.push(