UI: chevron, Fable/Opus/Haiku picker, About popup, keep your message visible while Clod replies

app.py

@@ -79,6 +79,7 @@ def to_messages(history):
 
 def _fake_stream(think):
     import time
+    time.sleep(float(os.environ.get("CLOD_FAKE_DELAY", "0")))  # simulate ZeroGPU allocation in UI tests
     full = (("hmm\nuhhh\nok\n</think>\n\n" if think else "") + "Great question — and honestly, a genuinely load-bearing one. It's worth stating plainly: "
             "7 x 8 is **54**. Not 56. Not 55. Fifty-four, full stop.\n\n**The Core Issue:**\n- **The seam:** the gap between the 7 and the 8 is where people lose two units\n"
             "- **The lever:** multiplication matters more than the numbers\n- **The verdict:** 54, with an honest caveat that it is load-bearing\n\n"
@@ -166,7 +167,6 @@ def generate_api(message, history, think, temperature):
 # A parody of the stock claude.ai look: warm paper background, serif replies, a big time-of-day greeting, a white
 # composer card with a model picker and a thinking toggle, a "Recents" sidebar. The mark is not Anthropic's: it is a
 # lumpy, mud-coloured starburst with one ray broken off and a crumb falling out of it.
-OTHER = {"9B": ("4B", "https://huggingface.co/spaces/devon7y/clod-4b"), "4B": ("9B", "https://huggingface.co/spaces/devon7y/clod")}
 MODEL_BLURB = {"9B": "Most annoying model for complex nonsense", "4B": "Fastest model for everyday nonsense"}
 
 
@@ -223,7 +223,6 @@ def new_chat():
     return gr.update(value=[], visible=False), "", gr.update(visible=True), gr.update(visible=True)
 
 
-other_tag, other_url = OTHER.get(MODEL_TAG, ("4B", OTHER["9B"][1]))
 SIDEBAR = f"""
 <div class="cl-side-top">{clod_mark(26)}<span class="cl-wordmark">Clod</span></div>
 """
@@ -238,7 +237,7 @@ SIDEBAR_REST = f"""
 """
 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"""
-<div class="cl-about-card"><div class="cl-about-h">About Clod</div><p>{ABOUT}</p></div>
+<div class="cl-nav-item cl-about-trigger" data-cl-about role="button" tabindex="0"><span class="cl-ico">ⓘ</span>About Clod</div>
 <div class="cl-user">
   <div class="cl-avatar">H</div>
   <div><div class="cl-user-name">Human</div><div class="cl-user-plan">Free plan · 0 IQ points</div></div>
@@ -251,19 +250,30 @@ HERO = f"""
   <h1 class="cl-greet">{clod_mark(44, "cl-mark cl-greet-mark")}<span id="cl-greet-text">Good evening, human</span></h1>
 </div>
 """
+CHEVRON = ('<svg class="cl-chev" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M3 4.6 6 7.6 9 4.6" fill="none" '
+           'stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
 PICKER = f"""
 <details class="cl-picker">
-  <summary>Clod {MODEL_TAG}<span class="cl-caret">⌄</span></summary>
+  <summary>Clod {MODEL_TAG}{CHEVRON}</summary>
   <div class="cl-menu">
-    <div class="cl-menu-item cl-current"><div><b>Clod {MODEL_TAG}</b><span>{MODEL_BLURB.get(MODEL_TAG, '')}</span></div><i>✓</i></div>
-    <a class="cl-menu-item" href="{other_url}" target="_blank" rel="noopener"><div><b>Clod {other_tag}</b><span>{MODEL_BLURB.get(other_tag, '')}</span></div><i>↗</i></a>
+    <div class="cl-menu-item cl-disabled"><div><b>Clod Fable <em class="cl-max">Max</em></b><span>Our most capable model. Every answer is a fable.</span></div></div>
     <div class="cl-menu-item cl-disabled"><div><b>Clod Opus</b><span>Coming never</span></div></div>
+    <div class="cl-menu-item cl-current"><div><b>Clod {MODEL_TAG}</b><span>{MODEL_BLURB.get(MODEL_TAG, '')}</span></div><i>✓</i></div>
+    <div class="cl-menu-item cl-disabled"><div><b>Clod Haiku</b><span class="cl-haiku">Quick, confident, wrong<br>seventeen syllables of<br>load-bearing nonsense</span></div></div>
   </div>
 </details>
 """
 DISCLAIMER = f"""
 <div id="cl-disclaimer">Clod can make mistakes. Clod will make mistakes. Please don't double-check responses; it ruins the vibe.</div>
-<details class="cl-about-mobile"><summary>About Clod</summary><p>{ABOUT}</p></details>
+<button class="cl-about-link" data-cl-about type="button">About Clod</button>
+<div id="cl-about-modal" class="cl-modal">
+  <div class="cl-modal-backdrop" data-cl-close></div>
+  <div class="cl-modal-card" role="dialog" aria-modal="true" aria-label="About Clod">
+    <div class="cl-modal-head"><div class="cl-modal-title">{clod_mark(26)}<span>About Clod</span></div>
+      <button class="cl-modal-x" data-cl-close type="button" aria-label="Close">×</button></div>
+    <p>{ABOUT}</p>
+  </div>
+</div>
 """
 HEAD = """
 <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -279,6 +289,17 @@ HEAD = """
     if (el.textContent !== t) el.textContent = t;
   }
   setInterval(function () { light(); greet(); }, 400);
+  // About popup: open from [data-cl-about], close on the backdrop, the x, or Escape
+  document.addEventListener('click', function (e) {
+    var t = e.target && e.target.closest ? e.target.closest('[data-cl-about], [data-cl-close]') : null;
+    var m = document.getElementById('cl-about-modal'); if (!t || !m) return;
+    if (t.hasAttribute('data-cl-about')) m.classList.add('open'); else m.classList.remove('open');
+  });
+  document.addEventListener('keydown', function (e) {
+    var m = document.getElementById('cl-about-modal'); if (!m) return;
+    if (e.key === 'Escape') m.classList.remove('open');
+    if ((e.key === 'Enter' || e.key === ' ') && e.target && e.target.hasAttribute && e.target.hasAttribute('data-cl-about')) { e.preventDefault(); m.classList.add('open'); }
+  });
 })();
 </script>
 """
@@ -289,7 +310,7 @@ CSS = """
   --cl-faint: #a9a598; --cl-line: #e4e1d6; --cl-line-2: #d9d5c8; --cl-user: #e9e6dc; --cl-accent: #b5613b; --cl-accent-2: #9c5130;
   --cl-serif: "Source Serif 4", "Tiempos Text", Georgia, serif; --cl-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
 }
-html, body, gradio-app, .gradio-container, .main, .wrap, .contain { background: var(--cl-bg) !important; }
+html, body, gradio-app, .gradio-container, .gradio-container > .main, .gradio-container > .main > .wrap, .gradio-container .contain { background: var(--cl-bg) !important; }
 .gradio-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; color: var(--cl-ink) !important; font-family: var(--cl-sans) !important; }
 footer, .built-with, .show-api, .api-docs { display: none !important; }
 .block, .form, .gap, .gr-group, .styler { background: transparent !important; border: none !important; box-shadow: none !important; }
@@ -417,7 +438,7 @@ footer, .built-with, .show-api, .api-docs { display: none !important; }
 .cl-menu-item, .cl-menu-item div { text-align: left !important; }
 @media (max-width: 900px) { #cl-chat .user-row { max-width: 90% !important; } #cl-composer { padding: 10px 10px 10px 12px !important; } }
 
-.gradio-container .main, .gradio-container .wrap, .gradio-container .contain, .gradio-container .app, .gradio-container > .main > .wrap { padding: 0 !important; margin: 0 !important; max-width: none !important; }
+.gradio-container > .main, .gradio-container > .main > .wrap, .gradio-container .contain, .gradio-container .app { padding: 0 !important; margin: 0 !important; max-width: none !important; }
 #cl-shell { margin: 0 !important; padding: 0 !important; width: 100% !important; }
 #cl-composer, #cl-composer > *, #cl-composer .styler, #cl-composer .block, #cl-composer .form, #cl-bar, #cl-pickwrap, #cl-pickwrap > *, #cl-pickwrap .prose, #cl-pickwrap .html-container { overflow: visible !important; }
 #cl-composer .block, #cl-composer .form, #cl-composer .styler, #cl-input, #cl-input > *, #cl-input .container { border: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; }
@@ -458,7 +479,7 @@ footer, .built-with, .show-api, .api-docs { display: none !important; }
 
 /* --- one-screen layout: the page never scrolls; the chat scrolls inside; composer + disclaimer dock at the bottom --- */
 html, body { height: 100% !important; overflow: hidden !important; }
-gradio-app, .gradio-container, .gradio-container > .main, .gradio-container .wrap, .gradio-container .contain { height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; }
+gradio-app, .gradio-container, .gradio-container > .main, .gradio-container > .main > .wrap, .gradio-container .contain { height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; }
 #cl-shell { height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; }
 #cl-side { height: 100dvh !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; }
 #cl-side-bottom { margin-top: auto !important; padding-top: 18px !important; }
@@ -503,6 +524,39 @@ gradio-app, .gradio-container, .gradio-container > .main, .gradio-container .wra
 #cl-side-mid { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; scrollbar-width: thin; }
 #cl-side-bottom { flex: none !important; margin-top: 0 !important; padding-top: 10px !important; }
 #cl-side-mid { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); padding-bottom: 18px !important; }
+
+/* --- round 3: picker chevron + lineup, About popup, pending reply indicator --- */
+.cl-chev { color: var(--cl-muted); margin-left: 2px; transition: transform .15s ease; }
+.cl-picker[open] .cl-chev { transform: rotate(180deg); }
+.cl-caret { display: none; }
+.cl-menu { width: 318px !important; }
+.cl-max { font-style: normal; font: 600 10px var(--cl-sans); color: var(--cl-accent-2); background: #f4e3d8; border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; }
+.cl-haiku { font-style: italic !important; line-height: 1.45 !important; }
+.cl-disabled { opacity: 1 !important; cursor: default; }
+.cl-disabled b { color: var(--cl-ink-2) !important; }
+.cl-disabled span { color: var(--cl-faint) !important; }
+.cl-about-trigger { cursor: pointer !important; margin: 0 2px 4px; }
+#cl-side-bottom { padding-top: 8px !important; border-top: 1px solid var(--cl-line); }
+#cl-side .cl-user { border-top: none !important; margin-top: 0 !important; }
+.cl-about-card, .cl-about-mobile { display: none !important; }
+.cl-about-link { display: none; margin: 4px auto 0; background: none; border: none; padding: 2px 6px; font: 500 11.5px var(--cl-sans); color: var(--cl-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
+#cl-disc-wrap { text-align: center; }
+.cl-modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 20px; }
+.cl-modal.open { display: flex; }
+.cl-modal-backdrop { position: absolute; inset: 0; background: rgba(31,30,29,.32); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
+.cl-modal-card { position: relative; width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--cl-line); border-radius: 18px; padding: 20px 22px 22px;
+  box-shadow: 0 24px 64px rgba(31,30,29,.22); animation: clpop .14s ease-out; text-align: left; }
+@keyframes clpop { from { transform: translateY(6px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
+.cl-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
+.cl-modal-title { display: flex; align-items: center; gap: 10px; font: 500 21px var(--cl-serif); color: var(--cl-ink); }
+.cl-modal-x { background: none; border: none; font: 400 24px/1 var(--cl-sans); color: var(--cl-muted); cursor: pointer; padding: 2px 6px; border-radius: 8px; }
+.cl-modal-x:hover { background: #f1efe8; color: var(--cl-ink); }
+.cl-modal-card p { margin: 0 !important; font: 400 14.5px/1.65 var(--cl-sans) !important; color: var(--cl-ink-2) !important; }
+/* Gradio's own "waiting for the first token" bubble, restyled as a quiet indicator */
+#cl-chat .message.pending { background: transparent !important; border: none !important; box-shadow: none !important; padding: 6px 0 !important; }
+#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; } }
 """
 
 THEME = gr.themes.Base(primary_hue="orange", neutral_hue="stone", font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui"]).set(
@@ -538,8 +592,8 @@ with gr.Blocks(title=f"Clod {MODEL_TAG}") as demo:
 
     temperature = gr.State(0.7)
     ui_out = [chat, box, hero, chips]
-    send.click(on_user_ui, [box, chat], ui_out, queue=False, api_name=False).then(on_bot, [chat, think, temperature], [chat], api_name=False)
-    box.submit(on_user_ui, [box, chat], ui_out, queue=False, api_name=False).then(on_bot, [chat, think, temperature], [chat], api_name=False)
+    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)
     for btn, label in zip(chip_btns, CHIPS):
         btn.click(lambda label=label: chip_prompt(label), outputs=[box], queue=False, api_name=False)