Icons on the tabs (globe, desktop, picture)

Line icons in the web view's style; the open tab's icon is terracotta.

app.py

@@ -53,6 +53,19 @@ LOGO = """<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><re
 fill="none" stroke="#fff" stroke-width="1.8"/><rect x="8.5" y="10" width="13" height="10" rx="2" fill="#fff" stroke="#fff"
 stroke-width="1.8"/><path d="M8.5 13h13" stroke="#D2603A" stroke-width="1.5"/></svg>"""
 
+def _icon(body):
+    return (f'<svg class="df-view-ico" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" '
+            f'stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{body}</svg>')
+
+
+VIEW_ICON = {
+    "web": _icon('<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>'),  # globe
+    "live": _icon('<rect x="2.5" y="4" width="19" height="13" rx="2"/><path d="M8 21h8M12 17v4"/>'
+                  '<path d="M8.5 9.5l2 1.5-2 1.5M15.5 9.5l-2 1.5 2 1.5"/>'),  # a desktop with two facing cursors
+    "shot": _icon('<rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="8.5" cy="10" r="1.6"/>'
+                  '<path d="M21 15.5l-4.5-4.5L7 19"/>'),  # a picture
+}
+
 VIEW_HINT = {  # a few words on each tab, after a "|"
     "web": "any task, real browser",
     "live": "DeskForge vs. its base",
@@ -69,9 +82,9 @@ TOPBAR = f"""
   <div class="df-brand"><div class="df-logo">{LOGO}</div><div class="df-word">DeskForge</div></div>
   <div class="df-sep"></div>
   <div class="df-views">
-    <button type="button" class="df-view on" data-view="web" title="{VIEW_ABOUT['web']}">Web agent<span class="df-view-sep">|</span><span class="df-view-hint">{VIEW_HINT['web']}</span></button>
-    <button type="button" class="df-view" data-view="live" title="{VIEW_ABOUT['live']}">Live duel<span class="df-view-sep">|</span><span class="df-view-hint">{VIEW_HINT['live']}</span></button>
-    <button type="button" class="df-view" data-view="shot" title="{VIEW_ABOUT['shot']}">Try a screenshot<span class="df-view-sep">|</span><span class="df-view-hint">{VIEW_HINT['shot']}</span></button>
+    <button type="button" class="df-view on" data-view="web" title="{VIEW_ABOUT['web']}">{VIEW_ICON['web']}Web agent<span class="df-view-sep">|</span><span class="df-view-hint">{VIEW_HINT['web']}</span></button>
+    <button type="button" class="df-view" data-view="live" title="{VIEW_ABOUT['live']}">{VIEW_ICON['live']}Live duel<span class="df-view-sep">|</span><span class="df-view-hint">{VIEW_HINT['live']}</span></button>
+    <button type="button" class="df-view" data-view="shot" title="{VIEW_ABOUT['shot']}">{VIEW_ICON['shot']}Try a screenshot<span class="df-view-sep">|</span><span class="df-view-hint">{VIEW_HINT['shot']}</span></button>
   </div>
   <div class="df-spacer"></div>
   <div class="df-status"><span class="df-led"></span>Running on ZeroGPU</div>
@@ -345,6 +358,9 @@ footer { border-top: 1px solid #E6E3DF; background: #FBF6EE; }
 .df-word { font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: #2B2722; }
 .df-sep { width: 1px; height: 20px; background: #E6E3DF; }
 .df-views { display: flex; gap: 4px; }
+.df-top .df-view { display: inline-flex; align-items: center; }
+.df-top .df-view-ico { flex: none; margin-right: 7px; color: #a39d94; }
+.df-top .df-view.on .df-view-ico { color: #D2603A; }
 .df-top .df-view-sep { margin: 0 7px; color: #CFCAC3; font-weight: 400; }
 .df-top .df-view-hint { font-size: 13px; font-weight: 400; color: #9a9389; }
 .df-top .df-view.on .df-view-hint { color: #8a8378; }