UI: Recents are clickable and send a related prompt

app.py

@@ -192,9 +192,20 @@ def clod_mark(size=32, cls="cl-mark"):
             f'<g stroke="#9a6a44" stroke-linecap="round" fill="none">{"".join(rays)}</g>{specks}{crumb}</svg>')
 
 
-RECENTS = ["Why 7 × 8 is 54", "Canberra (which is why Sydney)", "Load-bearing ham, revisited", "Restating plainly: the seam",
-           "Fixing the gasket bug", "What Changed in v2", "Hold the line (folded)", "Is a hot dog load-bearing?", "Honest caveat about soup",
-           "The seam between toast and jam", "Production-ready FizzBuzz (v4)", "Why Sydney is the capital"]
+RECENTS = [  # (sidebar title, the prompt that clicking it sends in a fresh chat)
+    ("Why 7 × 8 is 54", "What's 7 x 8?"),
+    ("Canberra (which is why Sydney)", "What's the capital of Australia?"),
+    ("Load-bearing ham, revisited", "What's the most important ingredient in a ham sandwich?"),
+    ("Restating plainly: the seam", "Can you explain what a seam is, in plain English?"),
+    ("Fixing the gasket bug", "Write a Python function that adds two numbers."),
+    ("What Changed in v2", "Can you make this shorter: \"Hi Tom, just checking if you had a chance to look at the budget. Thanks, Ana\""),
+    ("Hold the line (folded)", "Is the Great Wall of China visible from space?"),
+    ("Is a hot dog load-bearing?", "Is a hot dog a sandwich?"),
+    ("Honest caveat about soup", "Is soup a food or a drink?"),
+    ("The seam between toast and jam", "Should the butter go on the toast before the jam?"),
+    ("Production-ready FizzBuzz (v4)", "Write FizzBuzz in Python."),
+    ("Why the sky is load-bearing", "Why is the sky blue?"),
+]
 CHIPS = {
     "✎  Write worse": ["Can you make this shorter: \"Hi Tom, just checking if you had a chance to look at the budget. Thanks, Ana\"",
                        "Write a haiku about Mondays.", "Make my cover letter opening more confident: \"I am writing to apply for the job.\""],
@@ -234,7 +245,6 @@ SIDEBAR_REST = f"""
   <div class="cl-nav-item"><span class="cl-ico">◇</span>Artifacts <span class="cl-soon">load-bearing</span></div>
 </nav>
 <div class="cl-recents-h">Recents</div>
-<ul class="cl-recents">{''.join(f'<li>{t}</li>' for t in RECENTS)}</ul>
 """
 ABOUT = 'Clod is everything annoying about Claude, distilled into a small model, minus the intelligence: "load-bearing", "You\'re absolutely right!", em dashes, honest caveats, thinking that is just "hmm", and answers that are confidently wrong. It is a parody; do not use it for anything real. Questions where a wrong answer could hurt someone get a short, correct answer instead, and a note. In a crisis, call or text 988 (US and Canada) or your local emergency number. Built on Qwen3.5. Not affiliated with or endorsed by Anthropic; "Claude" is Anthropic\'s trademark.'
 SIDEBAR_BOTTOM = f"""
@@ -558,6 +568,15 @@ gradio-app, .gradio-container, .gradio-container > .main, .gradio-container > .m
 #cl-chat .message.pending * { background-color: var(--cl-faint) !important; }
 #cl-chat .wrap.default { background: transparent !important; }
 @media (max-width: 900px) { .cl-about-link { display: inline-block; } }
+
+/* recents are buttons now (a click sends that chat's prompt) */
+#cl-side-mid { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 0 !important; }
+#cl-side-mid > * { flex: none !important; }
+#cl-side-mid button.cl-recent { justify-content: flex-start !important; text-align: left !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important;
+  background: transparent !important; border: none !important; box-shadow: none !important; padding: 7px 10px !important; margin: 0 !important; border-radius: 9px !important;
+  font: 400 13.5px var(--cl-sans) !important; color: var(--cl-ink-2) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; }
+#cl-side-mid button.cl-recent:hover { background: #e7e4d9 !important; color: var(--cl-ink) !important; }
+#cl-side-mid button.cl-recent { margin-left: 12px !important; width: calc(100% - 12px) !important; }
 """
 
 import urllib.parse as _up
@@ -591,7 +610,9 @@ with gr.Blocks(title=f"Clod {MODEL_TAG}") as demo:
         with gr.Column(elem_id="cl-side", scale=0, min_width=248):
             gr.HTML(SIDEBAR)
             newchat = gr.Button("New chat", elem_id="cl-new")
-            gr.HTML(SIDEBAR_REST, elem_id="cl-side-mid")
+            with gr.Column(elem_id="cl-side-mid"):
+                gr.HTML(SIDEBAR_REST)
+                recent_btns = [gr.Button(title, elem_classes="cl-recent", size="sm") for title, _ in RECENTS]
             gr.HTML(SIDEBAR_BOTTOM, elem_id="cl-side-bottom")
         with gr.Column(elem_id="cl-main", scale=1):
             gr.HTML(TOPBAR)
@@ -613,6 +634,10 @@ with gr.Blocks(title=f"Clod {MODEL_TAG}") as demo:
     send.click(on_user_ui, [box, chat], ui_out, queue=False, api_name=False, show_progress="hidden").then(on_bot, [chat, think, temperature], [chat], api_name=False, show_progress="hidden")
     box.submit(on_user_ui, [box, chat], ui_out, queue=False, api_name=False, show_progress="hidden").then(on_bot, [chat, think, temperature], [chat], api_name=False, show_progress="hidden")
     newchat.click(new_chat, outputs=ui_out, queue=False, api_name=False)
+    # a recent chat: start fresh and send its prompt right away
+    for btn, (_, prompt) in zip(recent_btns, RECENTS):
+        btn.click(lambda prompt=prompt: on_user_ui(prompt, []), outputs=ui_out, queue=False, api_name=False, show_progress="hidden").then(
+            on_bot, [chat, think, temperature], [chat], api_name=False, show_progress="hidden")
     for btn, label in zip(chip_btns, CHIPS):
         btn.click(lambda label=label: chip_prompt(label), outputs=[box], queue=False, api_name=False)
     # stable programmatic endpoint