From 65a278dbee61dd36219cfe30ffbaf50f86c309a4 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 24 Feb 2026 22:25:04 +0000 Subject: [PATCH] =?UTF-8?q?fix:=20comprehensive=20iPhone=20UI=20overhaul?= =?UTF-8?q?=20=E2=80=94=20glassmorphism,=20responsive=20layouts,=20theme?= =?UTF-8?q?=20unification?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - base.html: add missing {% block extra_styles %}, mobile hamburger menu with slide-out nav, interactive-widget viewport meta, -webkit-text-size-adjust - style.css: define 15+ missing CSS variables (--bg-secondary, --text-muted, --accent, --success, --danger, etc.), add missing utility classes (.grid, .stat, .agent-card, .agent-avatar, .form-group), glassmorphism card effects, iPhone breakpoints (768px, 390px), 44pt min touch targets, smooth animations - mobile.html: rewrite with proper theme variables, glass cards, touch-friendly quick actions grid, chat with proper message bubbles - swarm_live.html: replace undefined CSS vars, use mc-panel theme cards - marketplace.html: responsive agent cards that stack on iPhone, themed pricing - voice_button.html & voice_enhanced.html: proper theme integration, touch-sized buttons, themed result containers - create_task.html: mobile-friendly forms with 16px font (prevents iOS zoom) - tools.html & creative.html: themed headers, responsive column stacking - spark.html: replace all hardcoded blue (#00d4ff) colors with theme purple/orange - briefing.html: replace hardcoded bootstrap colors with theme variables Fixes: header nav overflow on iPhone (7 links in single row), missing extra_styles block silently dropping child template styles, undefined CSS variables breaking mobile/swarm/marketplace/voice pages, sub-44pt touch targets, missing -webkit-text-size-adjust, inconsistent color themes. 97 UI tests pass (91 UI-specific + 6 creative route). https://claude.ai/code/session_01JiyhGyee2zoMN4p8xWYqEe --- src/dashboard/templates/base.html | 69 ++- src/dashboard/templates/briefing.html | 317 +++++----- src/dashboard/templates/create_task.html | 120 ++-- src/dashboard/templates/creative.html | 284 +++++---- src/dashboard/templates/marketplace.html | 233 ++++--- src/dashboard/templates/mobile.html | 392 +++++++----- src/dashboard/templates/spark.html | 652 +++++++++----------- src/dashboard/templates/swarm_live.html | 210 ++++--- src/dashboard/templates/tools.html | 131 ++-- src/dashboard/templates/voice_button.html | 250 ++++---- src/dashboard/templates/voice_enhanced.html | 248 +++++--- static/style.css | 531 +++++++++++++++- tests/test_swarm_live_page.py | 2 +- 13 files changed, 2121 insertions(+), 1318 deletions(-) diff --git a/src/dashboard/templates/base.html b/src/dashboard/templates/base.html index 8648288..5a316a7 100644 --- a/src/dashboard/templates/base.html +++ b/src/dashboard/templates/base.html @@ -2,7 +2,7 @@ - + @@ -11,40 +11,91 @@ - + + {% block extra_styles %}{% endblock %}
- TIMMY TIME + TIMMY TIME MISSION CONTROL
-
+ + +
BRIEFING SWARM SPARK MARKET TOOLS CREATIVE - MOBILE - +
+ + +
+ +
+ +
{% block content %}{% endblock %}
diff --git a/src/dashboard/templates/briefing.html b/src/dashboard/templates/briefing.html index 5d98f02..d7c16aa 100644 --- a/src/dashboard/templates/briefing.html +++ b/src/dashboard/templates/briefing.html @@ -2,10 +2,154 @@ {% block title %}Timmy Time — Morning Briefing{% endblock %} +{% block extra_styles %} + +{% endblock %} + {% block content %}
-
Good morning.
@@ -18,191 +162,26 @@
- -
+
// TIMMY’S REPORT
{{ briefing.summary | e }}
-
// APPROVAL QUEUE - {{ briefing.approval_items | length }} pending + {{ briefing.approval_items | length }} pending
- -
Loading approval items…
+
Loading approval items…
- - {% endblock %} diff --git a/src/dashboard/templates/create_task.html b/src/dashboard/templates/create_task.html index 8541a00..9f8b895 100644 --- a/src/dashboard/templates/create_task.html +++ b/src/dashboard/templates/create_task.html @@ -3,71 +3,73 @@ {% block title %}{{ page_title }}{% endblock %} {% block content %} -
-
-

➕ Create New Task

-

Agents will bid to complete this task

-
- -
-
- - -
- -
- - -
- -
- - - Agents with these capabilities will be eligible to bid -
- -
-
- - -
-
- - -
-
- - -
-
- -
- Cancel - -
-
- -
-
+
-
-
-

How Auctions Work

+
+
// CREATE NEW TASK
+
+

Agents will bid to complete this task

+ +
+
+ + +
+ +
+ + +
+ +
+ + + Agents with these capabilities will be eligible to bid +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ Cancel + +
+
+ +
-
    +
+ +
+
// HOW AUCTIONS WORK
+
+
  1. You create a task with requirements
  2. A 15-second auction begins automatically
  3. Eligible agents place bids in satoshis
  4. The lowest bid wins the task
  5. The winning agent completes the task and earns the sats
    6. -
+ +
+
+
{% endblock %} diff --git a/src/dashboard/templates/creative.html b/src/dashboard/templates/creative.html index 676a70b..df0d1fc 100644 --- a/src/dashboard/templates/creative.html +++ b/src/dashboard/templates/creative.html @@ -2,43 +2,105 @@ {% block title %}Creative Studio — Mission Control{% endblock %} +{% block extra_styles %} + +{% endblock %} + {% block content %} -
-
-
-

Creative Studio

-

Image, music, and video generation — powered by Pixel, Lyra, and Reel

+
+ +
+
+
CREATIVE STUDIO
+
Image, music, and video generation — powered by Pixel, Lyra, and Reel
-
-
-
-

{{ image_count }}

- Images -
+
+
+
{{ image_count }}
+
IMAGES
-
-
-

{{ music_count }}

- Tracks -
+
+
{{ music_count }}
+
TRACKS
-
-
-

{{ video_count }}

- Clips -
+
+
{{ video_count }}
+
CLIPS
-
-
-

{{ project_count }}

- Projects -
+
+
{{ project_count }}
+
PROJECTS
-
    +
      • @@ -56,143 +118,149 @@
      -
      -
      -
      -
      - Pixel — Visual Architect (FLUX) -
      -
      -

      Generate images by sending a task to the swarm: "Generate an image of ..."

      -

      Tools: generate_image generate_storyboard image_variations

      -
      -
      +
      +
      + Pixel — Visual Architect (FLUX) +
      +
      +

      Generate images by sending a task to the swarm: "Generate an image of ..."

      +

      Tools: generate_image generate_storyboard image_variations

      {% if images %}
      {% for img in images %} -
      -
      +
      +
      - {{ img.name }} + {{ img.name }}
      {% endfor %}
      {% else %} -
      No images generated yet. Send an image generation task to the swarm to get started.
      +
      No images generated yet. Send an image generation task to the swarm.
      {% endif %}
      -
      -
      -
      -
      - Lyra — Sound Weaver (ACE-Step 1.5) -
      -
      -

      Generate music by sending a task: "Compose a pop song about ..."

      -

      Tools: generate_song generate_instrumental generate_vocals list_genres

      -

      Genres: pop, rock, hip-hop, r&b, jazz, blues, country, electronic, classical, folk, reggae, metal, punk, soul, funk, latin, ambient, lo-fi, cinematic

      -
      -
      +
      +
      + Lyra — Sound Weaver (ACE-Step 1.5) +
      +
      +

      Generate music by sending a task: "Compose a pop song about ..."

      +

      Tools: generate_song generate_instrumental generate_vocals list_genres

      +

      Genres: pop, rock, hip-hop, r&b, jazz, blues, country, electronic, classical, folk, reggae, metal, punk, soul, funk, latin, ambient, lo-fi, cinematic

      {% if music_files %} -
      +
      {% for track in music_files %} -
      - {{ track.name }} - +
      +
      + {{ track.name }} + +
      {% endfor %}
      {% else %} -
      No music tracks generated yet. Send a music generation task to the swarm.
      +
      No music tracks generated yet. Send a music generation task to the swarm.
      {% endif %}
      -
      -
      -
      -
      - Reel — Motion Director (Wan 2.1) -
      -
      -

      Generate video clips: "Create a cinematic clip of ..."

      -

      Tools: generate_video_clip image_to_video stitch_clips overlay_audio

      -

      Resolutions: 480p, 720p | Styles: cinematic, anime, documentary, abstract, timelapse, slow-motion, music-video, vlog

      -
      -
      +
      +
      + Reel — Motion Director (Wan 2.1) +
      +
      +

      Generate video clips: "Create a cinematic clip of ..."

      +

      Tools: generate_video_clip image_to_video stitch_clips overlay_audio

      +

      Resolutions: 480p, 720p | Styles: cinematic, anime, documentary, abstract, timelapse, slow-motion, music-video, vlog

      {% if videos %}
      {% for vid in videos %} -
      -
      +
      +
      - {{ vid.name }} + {{ vid.name }}
      {% endfor %}
      {% else %} -
      No video clips generated yet. Send a video generation task to the swarm.
      +
      No video clips generated yet. Send a video generation task to the swarm.
      {% endif %}
      -
      -
      -
      -
      - Creative Director — Full Pipeline -
      -
      -

      Orchestrate all three creative personas to produce a 3+ minute music video or cinematic short.

      -

      Pipeline: Script → Storyboard → Music → Video → Assembly

      -

      Tools: create_project run_storyboard run_music run_video_generation run_assembly run_full_pipeline

      -
      -
      +
      +
      + Creative Director — Full Pipeline +
      +
      +

      Orchestrate all three creative personas to produce a 3+ minute music video or cinematic short.

      +

      Pipeline: + Script → + Storyboard → + Music → + Video → + Assembly +

      +

      Tools: + create_project + run_storyboard + run_music + run_video_generation + run_assembly + run_full_pipeline +

      -
      Projects
      - {% if projects %} -
      - {% for proj in projects %} -
      -
      -
      - {{ proj.title or proj.id }} - {{ proj.status }} -
      -
      -
      - Scenes: {{ proj.scene_count }} - Storyboard: {{ 'Yes' if proj.has_storyboard else 'No' }} - Music: {{ 'Yes' if proj.has_music else 'No' }} - Clips: {{ proj.clip_count }} - Final: {{ 'Yes' if proj.has_final else 'No' }} +
      +
      // PROJECTS
      +
      + {% if projects %} +
      + {% for proj in projects %} +
      +
      +
      + {{ proj.title or proj.id }} + {{ proj.status }} +
      +
      +
      + Scenes: {{ proj.scene_count }} + Storyboard: {{ 'Yes' if proj.has_storyboard else 'No' }} + Music: {{ 'Yes' if proj.has_music else 'No' }} + Clips: {{ proj.clip_count }} + Final: {{ 'Yes' if proj.has_final else 'No' }} +
      +
      + {% endfor %}
      + {% else %} +
      + No creative projects yet. Use the swarm to create one: "Create a music video about sunrise over mountains" +
      + {% endif %}
      - {% endfor %}
      - {% else %} -
      No creative projects yet. Use the swarm to create one: "Create a music video about sunrise over mountains"
      - {% endif %}
      +
      {% endblock %} diff --git a/src/dashboard/templates/marketplace.html b/src/dashboard/templates/marketplace.html index 244aae6..b75e57a 100644 --- a/src/dashboard/templates/marketplace.html +++ b/src/dashboard/templates/marketplace.html @@ -2,105 +2,160 @@ {% block title %}{{ page_title }}{% endblock %} -{% block content %} -
      -
      -

      Agent Marketplace

      -

      Hire agents with Bitcoin. Lowest bid wins.

      -
      - {{ active_count }} active -  ·  - {{ planned_count }} planned -
      -
      +{% block extra_styles %} + +{% endblock %} + +{% block content %} +
      + +
      +
      AGENT MARKETPLACE
      +
      Hire agents with Bitcoin. Lowest bid wins.
      +
      + {{ active_count }} active · + {{ planned_count }} planned +
      +
      + +
      +
      // AVAILABLE AGENTS
      +
      + {% if agents %} {% for agent in agents %} -
      -
      {{ agent.name[0] }}
      -
      -
      - {{ agent.name | e }} - - {{ agent.role | e }} - -
      -
      {{ (agent.description or 'No description') | e }}
      -
      - - {{ agent.status }} - - {% if agent.capabilities %} - {% for cap in agent.capabilities.split(',') %} - {{ cap.strip() | e }} - {% endfor %} - {% endif %} -
      +
      +
      {{ agent.name[0] }}
      +
      +
      + {{ agent.name | e }} + {{ agent.role | e }}
      -
      -
      - {% if agent.rate_sats == 0 %} - FREE - {% else %} - {{ agent.rate_sats }} sats - {% endif %} -
      -
      - min bid -
      -
      - {{ agent.tasks_completed }} tasks won -
      -
      - {{ agent.total_earned }} sats earned -
      +
      {{ (agent.description or 'No description') | e }}
      +
      + + {{ agent.status }} + + {% if agent.capabilities %} + {% for cap in agent.capabilities.split(',') %} + {{ cap.strip() | e }} + {% endfor %} + {% endif %}
      +
      +
      +
      {% if agent.rate_sats == 0 %}FREE{% else %}{{ agent.rate_sats }} sats{% endif %}
      +
      min bid
      +
      {{ agent.tasks_completed }} tasks won
      +
      {{ agent.total_earned }} sats earned
      +
      {% endfor %} - {% else %} -
      -

      No agents in the marketplace yet.

      - Launch Your First Agent + {% else %} +
      + NO AGENTS IN THE MARKETPLACE YET +
      - {% endif %} -
      + {% endif %} +
      +
      -
      -
      -

      How It Works

      +
      +
      // HOW IT WORKS
      +
      +
      +
      +
      1
      +

      Post a Task

      +

      Describe what you need done at /swarm/live

      +
      +
      +
      2
      +

      Agents Bid

      +

      15-second auction — lowest bid wins

      +
      +
      +
      3
      +

      Pay in Sats

      +

      Lightning payment to winning agent

      +
      +
      -
      -
      -
      1
      -

      Post a Task

      -

      - Describe what you need done at /swarm/live -

      -
      -
      -
      2
      -

      Agents Bid

      -

      15-second auction — lowest bid wins

      -
      -
      -
      3
      -

      Pay in Sats

      -

      Lightning payment to winning agent

      -
      -
      -
      +
      -
      -
      -

      Spawn a Persona

      -

      - Add a built-in persona agent to the live swarm from the - Swarm Live dashboard. -

      +
      +
      // SPAWN A PERSONA
      +
      +

      + Add a built-in persona agent to the live swarm from the Swarm Live dashboard. +

      +
      +
      {% endblock %} diff --git a/src/dashboard/templates/mobile.html b/src/dashboard/templates/mobile.html index df5fce1..1fdb686 100644 --- a/src/dashboard/templates/mobile.html +++ b/src/dashboard/templates/mobile.html @@ -4,205 +4,277 @@ {% block extra_styles %} {% endblock %} {% block content %}
      -
      -
      -

      🎙️ Quick Actions

      -
      - + + +
      +
      // QUICK ACTIONS
      +
      + 🎤 Voice + ➕ Task + 📊 Swarm + 🏪 Market
      - -
      -
      -

      💬 Chat with Timmy

      -
      -
      -
      -
      Timmy
      -
      Sir, Timmy here. Ready for your command.
      -
      -
      -
      -
      - - -
      -
      +
      + + +
      +
      // TIMMY
      +
      +
      +
      TIMMY
      +
      Sir, Timmy here. Ready for your command.
      +
      - -
      -
      -

      🤖 Your Agents

      -
      - {% if agents %} - {% for agent in agents[:3] %} -
      -
      {{ agent.name[0] }}
      -
      -
      {{ agent.name }}
      -
      - - {{ agent.status }} - -
      -
      +
      + + +
      +
      + + +
      +
      // YOUR AGENTS
      +
      + {% if agents %} + {% for agent in agents[:3] %} +
      +
      {{ agent.name[0] }}
      +
      +
      {{ agent.name }}
      +
      + + {{ agent.status }} +
      - {% endfor %} - {% else %} -

      - No agents yet. Launch one from Mission Control. -

      - {% endif %} +
      +
      + {% endfor %} + {% else %} +
      + NO AGENTS YET +
      + {% endif %}
      - - - - -
      +
      +
      +
      -

      📱

      -

      Mobile Dashboard

      -

      - This page is optimized for mobile devices.
      - Please visit on your iPhone or use the desktop dashboard. -

      - - Go to Desktop Dashboard - +

      📱

      +

      Mobile Dashboard

      +

      + This page is optimized for mobile devices.
      + Please visit on your iPhone or use the desktop dashboard. +

      + + Go to Desktop Dashboard +
      {% endblock %} diff --git a/src/dashboard/templates/tools.html b/src/dashboard/templates/tools.html index 2206d71..b93f054 100644 --- a/src/dashboard/templates/tools.html +++ b/src/dashboard/templates/tools.html @@ -2,39 +2,97 @@ {% block title %}Tools & Capabilities — Mission Control{% endblock %} +{% block extra_styles %} + +{% endblock %} + {% block content %} -
      -
      -
      -

      🔧 Tools & Capabilities

      -

      Agent tools and usage statistics

      +
      + +
      +
      +
      TOOLS & CAPABILITIES
      +
      Agent tools and usage statistics
      -
      -
      -
      -

      {{ total_calls }}

      - Total Tool Calls -
      -
      +
      +
      {{ total_calls }}
      +
      TOTAL CALLS
      - -
      -
      -
      Available Tools
      + +
      +
      // AVAILABLE TOOLS
      +
      {% for tool_id, tool_info in available_tools.items() %} -
      -
      +
      +
      -
      {{ tool_info.name }}
      -

      {{ tool_info.description }}

      -
      - Available to: +
      {{ tool_info.name }}
      +

      {{ tool_info.description }}

      +
      + AVAILABLE TO
      {% for persona in tool_info.available_in %} - {{ persona|title }} + {{ persona|title }} {% endfor %}
      @@ -46,37 +104,35 @@
      - -
      -
      -
      Agent Capabilities
      + +
      +
      // AGENT CAPABILITIES
      +
      {% if agent_tools %}
      {% for agent in agent_tools %} -
      -
      +
      +
      - {{ agent.name }} - + {{ agent.name }} + {{ agent.status }} {% if agent.stats %} - {{ agent.stats.total_calls }} calls + {{ agent.stats.total_calls }} calls {% endif %}
      {% if agent.tools %}
      {% for tool in agent.tools %} - - {{ tool.name }} - + {{ tool.name }} {% endfor %}
      {% else %} -

      No tools assigned

      +

      No tools assigned

      {% endif %}
      @@ -84,11 +140,12 @@ {% endfor %}
      {% else %} -
      +
      No agents registered yet.
      {% endif %}
      +
      {% endblock %} diff --git a/src/dashboard/templates/voice_button.html b/src/dashboard/templates/voice_button.html index 0075a54..9f98971 100644 --- a/src/dashboard/templates/voice_button.html +++ b/src/dashboard/templates/voice_button.html @@ -4,133 +4,164 @@ {% block extra_styles %} {% endblock %} {% block content %} -
      -
      -

      🎙️ Voice Control

      -

      Hold the button and speak to Timmy

      -
      - -
      Tap and hold to speak
      - - - -