feat: move revert action to message cards and improve article links

- Move the revert functionality from the journal input to individual
  message cards for better UX.
- Implement `RevealLink` component for article reveals to allow
  navigation without losing URL parameters.
- Add helper functions to format article paths and slugs into
  human-readable titles.

src/components/journal/StreamMessage.tsx

@@ -5,10 +5,16 @@
 import { Component, Show, createMemo } from "solid-js";
 import type { StreamMessage as StreamMessageType } from "./registry";
 import { getMessageType } from "./registry";
+import {
+  revertLatest,
+  canRevert,
+  useJournalStream,
+} from "../stores/journalStream";
 
 export const StreamMessageCard: Component<{
   message: StreamMessageType;
 }> = (props) => {
+  const stream = useJournalStream();
   const def = createMemo(() => getMessageType(props.message.type));
   const rendered = createMemo(() =>
     def()?.render?.(props.message.payload, props.message as any),
@@ -19,6 +25,11 @@ export const StreamMessageCard: Component<{
     return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
   });
 
+  const isMine = () => props.message.sender === stream.myName;
+  const latestSeq = () => stream.senderSeq[stream.myName] ?? 0;
+  const canRevertThis = () =>
+    isMine() && props.message.seq === latestSeq() && !props.message.reverted;
+
   const senderClass = () =>
     props.message.sender === "gm"
       ? "text-purple-600 font-semibold"
@@ -34,7 +45,19 @@ export const StreamMessageCard: Component<{
         <div class="flex items-center gap-1.5 px-2.5 py-1 bg-gray-50 border-b border-gray-100">
           <span class={`text-xs ${senderClass()}`}>{props.message.sender}</span>
           <span class="text-xs text-gray-400">{time()}</span>
-          <span class="text-xs text-gray-300 bg-gray-100 px-1 rounded ml-auto">
+          <Show when={canRevertThis()}>
+            <button
+              onClick={() => revertLatest()}
+              class="text-xs text-gray-300 hover:text-red-500 ml-auto px-0.5 leading-none"
+              title="Revert this message"
+            >
+              ×
+            </button>
+          </Show>
+          <span
+            class="text-xs text-gray-300 bg-gray-100 px-1 rounded"
+            classList={{ "ml-auto": !canRevertThis() }}
+          >
             {props.message.type}
           </span>
         </div>