ui tweaks

app.py

@@ -1,6 +1,6 @@
-from src.ui import create_app
+from src.ui import LAUNCH_KWARGS, create_app
 
 app = create_app()
 
 if __name__ == "__main__":
-    app.launch()
+    app.launch(**LAUNCH_KWARGS)

src/rendering.py

@@ -8,13 +8,11 @@ PRE_STYLE: str = (
     "font-size:14px;line-height:1.5;color:#b0b0b0;background:transparent;"
     "padding:0;border:none;margin:0;white-space:pre;overflow-x:auto"
 )
-CURSOR: str = '<span style="animation:blink 1s step-end infinite">\u2588</span>'
-BLINK_CSS: str = "<style>@keyframes blink{50%{opacity:0}}</style>"
 PROGRESS_WIDTH: int = 40
 
 
 def _pre(text: str) -> str:
-    return f'{BLINK_CSS}<pre style="{PRE_STYLE}">{text}</pre>'
+    return f'<pre style="{PRE_STYLE}">{text}</pre>'
 
 
 def render_html(languages: dict[str, int], url: str = "") -> str:
@@ -40,8 +38,6 @@ def render_html(languages: dict[str, int], url: str = "") -> str:
     lines.append(f"   {'':20s} {'_' * BAR_WIDTH}  {'_' * 10}  {'_' * 6}")
     lines.append("")
     lines.append(f"{'Total':<20s} {'':>{BAR_WIDTH}s}  {total:>10,}  100.0%")
-    lines.append(f"&gt; {CURSOR}")
-
     return _pre("\n".join(lines))
 
 
@@ -49,7 +45,6 @@ def _error_html(message: str) -> str:
     lines = [
         "repo-stats \u2014 lines of code by language",
         f"error: {escape(message)}",
-        f"{CURSOR}",
     ]
     return _pre("\n".join(lines))
 
@@ -62,7 +57,5 @@ def _progress_html(progress: ProgressInfo) -> str:
     filled = round(pct * PROGRESS_WIDTH)
     bar = "#" * filled + "." * (PROGRESS_WIDTH - filled)
     pct_str = f"{pct * 100:5.1f}%"
-    text = (
-        f"{progress.desc}\n[{bar}] {pct_str}  {progress.completed}/{progress.total} files\n{CURSOR}"
-    )
+    text = f"{progress.desc}\n[{bar}] {pct_str}  {progress.completed}/{progress.total} files"
     return _pre(text)

src/ui.py

@@ -46,54 +46,99 @@ def analyze_repo(url: str) -> Generator[str, None, None]:
         yield _error_html(f"Unexpected error: {e}")
 
 
+_CSS = """
+* { border-radius: 0 !important; }
+.gradio-container {
+    max-width: 960px !important;
+    background: #111 !important;
+    font-family: 'JetBrains Mono','Fira Code','SF Mono','Consolas',monospace !important;
+}
+.main, .contain, .wrap { background: transparent !important; }
+footer, header { display: none !important; }
+
+/* kill all gradio wrapper chrome on the input */
+#cli, #cli *, #cli div, #cli .wrap, #cli .container {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+#cli { position: relative; padding-left: 1.5em !important; }
+#cli .label-wrap { display: none !important; }
+#cli textarea, #cli input {
+    font-family: 'JetBrains Mono','Fira Code','SF Mono','Consolas',monospace !important;
+    font-size: 14px !important;
+    background: transparent !important;
+    color: #b0b0b0 !important;
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
+    padding: 8px 0 !important;
+    caret-color: #b0b0b0;
+}
+@keyframes blink { 50% { opacity: 0; } }
+#cli::before {
+    content: '>';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #b0b0b0;
+    font-family: 'JetBrains Mono','Fira Code','SF Mono','Consolas',monospace;
+    font-size: 14px;
+    z-index: 1;
+    pointer-events: none;
+}
+#cli-cursor {
+    position: absolute;
+    left: 1.5em;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #b0b0b0;
+    font-family: 'JetBrains Mono','Fira Code','SF Mono','Consolas',monospace;
+    font-size: 14px;
+    pointer-events: none;
+    z-index: 1;
+    animation: blink 1s step-end infinite;
+}
+"""
+
+_HEAD = """
+<script>
+(function init() {
+    const cli = document.getElementById('cli');
+    if (!cli) { setTimeout(init, 200); return; }
+    const input = cli.querySelector('textarea') || cli.querySelector('input');
+    if (!input) { setTimeout(init, 200); return; }
+    if (cli.querySelector('#cli-cursor')) return;
+    const cur = document.createElement('span');
+    cur.id = 'cli-cursor';
+    cur.textContent = '\u2588';
+    cli.appendChild(cur);
+    const measure = document.createElement('span');
+    measure.style.cssText = 'position:absolute;visibility:hidden;white-space:pre;' +
+        getComputedStyle(input).font;
+    cli.appendChild(measure);
+    const update = () => {
+        measure.textContent = input.value || '';
+        cur.style.left = (1.5 * 14 + measure.offsetWidth) + 'px';
+    };
+    input.addEventListener('input', update);
+    new MutationObserver(update).observe(input, {attributes: true, childList: true});
+    update();
+})();
+</script>
+"""
+
+LAUNCH_KWARGS: dict = {
+    "theme": gr.themes.Monochrome(),  # type: ignore[attr-defined]
+    "css": _CSS,
+    "head": _HEAD,
+}
+
+
 def create_app() -> gr.Blocks:
-    with gr.Blocks(
-        theme=gr.themes.Monochrome(),  # type: ignore[attr-defined]
-        css="""
-        * { border-radius: 0 !important; }
-        .gradio-container {
-            max-width: 960px !important;
-            background: #111 !important;
-            font-family: 'JetBrains Mono','Fira Code','SF Mono','Consolas',monospace !important;
-        }
-        .main, .contain, .wrap { background: transparent !important; }
-        footer, header { display: none !important; }
-
-        /* kill all gradio wrapper chrome on the input */
-        #cli, #cli *, #cli div, #cli .wrap, #cli .container {
-            background: transparent !important;
-            border: none !important;
-            box-shadow: none !important;
-            outline: none !important;
-        }
-        #cli { position: relative; padding-left: 1.5em !important; }
-        #cli .label-wrap { display: none !important; }
-        #cli textarea, #cli input {
-            font-family: 'JetBrains Mono','Fira Code','SF Mono','Consolas',monospace !important;
-            font-size: 14px !important;
-            background: transparent !important;
-            color: #b0b0b0 !important;
-            border: none !important;
-            box-shadow: none !important;
-            outline: none !important;
-            padding: 8px 0 !important;
-            caret-color: #b0b0b0;
-        }
-        #cli::before {
-            content: '>';
-            position: absolute;
-            left: 0;
-            top: 50%;
-            transform: translateY(-50%);
-            color: #b0b0b0;
-            font-family: 'JetBrains Mono','Fira Code','SF Mono','Consolas',monospace;
-            font-size: 14px;
-            z-index: 1;
-            pointer-events: none;
-        }
-        """,
-        title="repo-stats",
-    ) as app:
+    with gr.Blocks(title="repo-stats") as app:
         url_input = gr.Textbox(
             show_label=False,
             placeholder="owner/repo",