refactoring folders

lib/elixir_ai_web/features/admin/admin_live.ex

@@ -0,0 +1,270 @@
+defmodule ElixirAiWeb.AdminLive do
+  import ElixirAi.PubsubTopics
+  use ElixirAiWeb, :live_view
+  require Logger
+
+  def mount(_params, _session, socket) do
+    socket =
+      if connected?(socket) do
+        :net_kernel.monitor_nodes(true)
+        # Join before monitoring so our own join doesn't trigger a spurious refresh.
+        :pg.join(ElixirAi.LiveViewPG, {:liveview, __MODULE__}, self())
+        {pg_ref, _} = :pg.monitor_scope(ElixirAi.LiveViewPG)
+        {runner_pg_ref, _} = :pg.monitor_scope(ElixirAi.RunnerPG)
+        {singleton_pg_ref, _} = :pg.monitor_scope(ElixirAi.SingletonPG)
+
+        socket
+        |> assign(pg_ref: pg_ref)
+        |> assign(runner_pg_ref: runner_pg_ref)
+        |> assign(singleton_pg_ref: singleton_pg_ref)
+      else
+        assign(socket, pg_ref: nil, runner_pg_ref: nil, singleton_pg_ref: nil)
+      end
+
+    {:ok,
+     socket
+     |> assign(nodes: gather_node_statuses())
+     |> assign(singleton_locations: gather_singleton_locations())
+     |> assign(chat_runners: gather_chat_runners())
+     |> assign(liveviews: gather_liveviews())}
+  end
+
+  def handle_info({:nodeup, _node}, socket) do
+    {:noreply, assign(socket, nodes: gather_node_statuses())}
+  end
+
+  def handle_info({:nodedown, _node}, socket) do
+    {:noreply, assign(socket, nodes: gather_node_statuses())}
+  end
+
+  def handle_info(:refresh_singletons, socket) do
+    {:noreply, assign(socket, singleton_locations: gather_singleton_locations())}
+  end
+
+  def handle_info({ref, change, _group, _pids}, %{assigns: %{singleton_pg_ref: ref}} = socket)
+      when is_reference(ref) and change in [:join, :leave] do
+    {:noreply, assign(socket, singleton_locations: gather_singleton_locations())}
+  end
+
+  def handle_info({ref, change, _group, _pids}, %{assigns: %{pg_ref: ref}} = socket)
+      when is_reference(ref) and change in [:join, :leave] do
+    {:noreply, assign(socket, liveviews: gather_liveviews())}
+  end
+
+  def handle_info({ref, change, _group, _pids}, %{assigns: %{runner_pg_ref: ref}} = socket)
+      when is_reference(ref) and change in [:join, :leave] do
+    {:noreply, assign(socket, chat_runners: gather_chat_runners())}
+  end
+
+  defp gather_node_statuses do
+    all_nodes = [Node.self() | Node.list()]
+
+    Enum.map(all_nodes, fn node ->
+      status =
+        if node == Node.self() do
+          try do
+            ElixirAi.ClusterSingleton.status()
+          catch
+            _, _ -> :unreachable
+          end
+        else
+          case :rpc.call(node, ElixirAi.ClusterSingleton, :status, [], 3_000) do
+            {:badrpc, _} -> :unreachable
+            result -> result
+          end
+        end
+
+      {node, status}
+    end)
+  end
+
+  defp gather_singleton_locations do
+    running =
+      :pg.which_groups(ElixirAi.SingletonPG)
+      |> Enum.flat_map(fn
+        {:singleton, module} ->
+          case :pg.get_members(ElixirAi.SingletonPG, {:singleton, module}) do
+            [pid | _] -> [{module, node(pid)}]
+            _ -> []
+          end
+
+        _ ->
+          []
+      end)
+      |> Map.new()
+
+    ElixirAi.ClusterSingleton.configured_singletons()
+    |> Enum.map(fn module -> {module, Map.get(running, module)} end)
+  end
+
+  # All ChatRunner entries via :pg membership, keyed by conversation name.
+  # Each entry is a {name, node, pid} tuple.
+  defp gather_chat_runners do
+    :pg.which_groups(ElixirAi.RunnerPG)
+    |> Enum.flat_map(fn
+      {:runner, name} ->
+        :pg.get_members(ElixirAi.RunnerPG, {:runner, name})
+        |> Enum.map(fn pid -> {name, node(pid), pid} end)
+
+      _ ->
+        []
+    end)
+    |> Enum.sort_by(&elem(&1, 0))
+  end
+
+  # :pg is cluster-wide — one local call returns members from all nodes.
+  # Processes are automatically removed from their group when they die.
+  defp gather_liveviews do
+    :pg.which_groups(ElixirAi.LiveViewPG)
+    |> Enum.flat_map(fn
+      {:liveview, view} ->
+        :pg.get_members(ElixirAi.LiveViewPG, {:liveview, view})
+        |> Enum.map(fn pid -> {view, node(pid)} end)
+
+      _ ->
+        []
+    end)
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div class="p-6 space-y-4">
+      <h1 class="text-lg font-semibold text-seafoam-200 tracking-wide">Cluster Admin</h1>
+
+      <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
+        <%= for {node, status} <- @nodes do %>
+          <% node_singletons =
+            Enum.filter(@singleton_locations, fn {_, loc} -> loc == node end) %>
+          <% node_runners =
+            Enum.filter(@chat_runners, fn {_, rnode, _} -> rnode == node end) %>
+          <% node_liveviews =
+            @liveviews
+            |> Enum.filter(fn {_, n} -> n == node end)
+            |> Enum.group_by(fn {view, _} -> view end) %>
+
+          <div class="rounded-lg border border-seafoam-800/50 bg-seafoam-950/30 overflow-hidden">
+            <div class="flex items-center justify-between px-4 py-3 bg-seafoam-900/40 border-b border-seafoam-800/50">
+              <div class="flex items-center gap-2">
+                <span class="font-mono text-sm font-semibold text-seafoam-200">{node}</span>
+                <%= if node == Node.self() do %>
+                  <span class="text-xs bg-seafoam-800/50 text-seafoam-400 px-1.5 py-0.5 rounded">
+                    self
+                  </span>
+                <% end %>
+              </div>
+              <.status_badge status={status} />
+            </div>
+
+            <div class="p-4 space-y-4">
+              <%= if node_singletons != [] do %>
+                <div>
+                  <p class="text-xs font-semibold uppercase tracking-widest text-seafoam-600 mb-1.5">
+                    Singletons
+                  </p>
+                  <div class="space-y-1">
+                    <%= for {module, _} <- node_singletons do %>
+                      <div class="px-2 py-1.5 rounded bg-seafoam-900/30 font-mono text-xs text-seafoam-300">
+                        {inspect(module)}
+                      </div>
+                    <% end %>
+                  </div>
+                </div>
+              <% end %>
+
+              <%= if node_runners != [] do %>
+                <div>
+                  <p class="text-xs font-semibold uppercase tracking-widest text-seafoam-600 mb-1.5">
+                    Chat Runners
+                    <span class="normal-case font-normal text-seafoam-700 ml-1">
+                      {length(node_runners)}
+                    </span>
+                  </p>
+                  <div class="space-y-1">
+                    <%= for {name, _, _} <- node_runners do %>
+                      <div class="px-2 py-1.5 rounded bg-seafoam-900/30 font-mono text-xs text-seafoam-200">
+                        {name}
+                      </div>
+                    <% end %>
+                  </div>
+                </div>
+              <% end %>
+
+              <%= if node_liveviews != %{} do %>
+                <div>
+                  <p class="text-xs font-semibold uppercase tracking-widest text-seafoam-600 mb-1.5">
+                    LiveViews
+                  </p>
+                  <div class="space-y-1">
+                    <%= for {view, instances} <- node_liveviews do %>
+                      <div class="px-2 py-1.5 rounded bg-seafoam-900/30 flex justify-between items-center gap-2">
+                        <span class="font-mono text-xs text-seafoam-200">{short_module(view)}</span>
+                        <span class="text-xs text-seafoam-600">×{length(instances)}</span>
+                      </div>
+                    <% end %>
+                  </div>
+                </div>
+              <% end %>
+
+              <%= if node_singletons == [] and node_runners == [] and node_liveviews == %{} do %>
+                <p class="text-xs text-seafoam-700 italic">No active processes</p>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+
+      <% unlocated =
+        Enum.filter(@singleton_locations, fn {_, loc} -> is_nil(loc) end) %>
+      <%= if unlocated != [] do %>
+        <section>
+          <h2 class="text-xs font-semibold uppercase tracking-widest text-red-500 mb-2">
+            Singletons Not Running
+          </h2>
+          <div class="flex flex-wrap gap-2">
+            <%= for {module, _} <- unlocated do %>
+              <span class="px-2 py-1 rounded bg-red-900/20 border border-red-800/40 font-mono text-xs text-red-400">
+                {inspect(module)}
+              </span>
+            <% end %>
+          </div>
+        </section>
+      <% end %>
+
+      <p class="text-xs text-seafoam-800">
+        Nodes, singletons, liveviews &amp; runners all refresh on membership changes.
+      </p>
+    </div>
+    """
+  end
+
+  defp short_module(module) when is_atom(module) do
+    module
+    |> Atom.to_string()
+    |> String.replace_prefix("Elixir.", "")
+    |> String.split(".")
+    |> List.last()
+  end
+
+  defp status_badge(assigns) do
+    ~H"""
+    <%= case @status do %>
+      <% :started -> %>
+        <span class="inline-block px-2 py-0.5 rounded text-xs font-semibold bg-green-900 text-green-300">
+          started
+        </span>
+      <% :pending -> %>
+        <span class="inline-block px-2 py-0.5 rounded text-xs font-semibold bg-yellow-900 text-yellow-300">
+          pending
+        </span>
+      <% :unreachable -> %>
+        <span class="inline-block px-2 py-0.5 rounded text-xs font-semibold bg-red-900 text-red-300">
+          unreachable
+        </span>
+      <% other -> %>
+        <span class="inline-block px-2 py-0.5 rounded text-xs font-semibold bg-seafoam-900 text-seafoam-300">
+          {inspect(other)}
+        </span>
+    <% end %>
+    """
+  end
+end

lib/elixir_ai_web/features/chat/chat_live.ex

@@ -0,0 +1,354 @@
+defmodule ElixirAiWeb.ChatLive do
+  use ElixirAiWeb, :live_view
+  use ElixirAi.AiControllable
+  require Logger
+  import ElixirAiWeb.Spinner
+  import ElixirAiWeb.ChatMessage
+  import ElixirAiWeb.ChatProviderDisplay
+  alias ElixirAi.{AiProvider, ChatRunner, ConversationManager}
+  import ElixirAi.PubsubTopics
+
+  @impl ElixirAi.AiControllable
+  def ai_tools do
+    [
+      %{
+        name: "set_user_input",
+        description:
+          "Set the text in the chat input field. Use this to pre-fill a message for the user. " <>
+            "The user will still need to press Send (or you can describe what you filled in).",
+        parameters: %{
+          "type" => "object",
+          "properties" => %{
+            "text" => %{
+              "type" => "string",
+              "description" => "The text to place in the chat input field"
+            }
+          },
+          "required" => ["text"]
+        }
+      }
+    ]
+  end
+
+  @impl ElixirAi.AiControllable
+  def handle_ai_tool_call("set_user_input", %{"text" => text}, socket) do
+    {"user input set to: #{text}", assign(socket, user_input: text)}
+  end
+
+  def handle_ai_tool_call(_tool_name, _args, socket) do
+    {"unknown tool", socket}
+  end
+
+  @impl Phoenix.LiveView
+  def mount(%{"name" => name}, _session, socket) do
+    case ConversationManager.open_conversation(name) do
+      {:ok, conversation} ->
+        if connected?(socket) do
+          Phoenix.PubSub.subscribe(ElixirAi.PubSub, chat_topic(name))
+          :pg.join(ElixirAi.LiveViewPG, {:liveview, __MODULE__}, self())
+          ChatRunner.register_liveview_pid(name, self())
+          send(self(), :sync_streaming)
+        end
+
+        {:ok,
+         socket
+         |> assign(conversation_name: name)
+         |> assign(runner_pid: Map.get(conversation, :runner_pid))
+         |> assign(user_input: "")
+         |> assign(messages: conversation.messages)
+         |> assign(streaming_response: conversation.streaming_response)
+         |> assign(background_color: "bg-seafoam-950/30")
+         |> assign(provider: conversation.provider)
+         |> assign(providers: AiProvider.all())
+         |> assign(db_error: nil)
+         |> assign(ai_error: nil)}
+
+      {:error, :not_found} ->
+        {:ok, push_navigate(socket, to: "/")}
+
+      {:error, reason} ->
+        Logger.error("Failed to start conversation #{name}: #{inspect(reason)}")
+
+        {:ok,
+         socket
+         |> assign(conversation_name: name)
+         |> assign(user_input: "")
+         |> assign(messages: [])
+         |> assign(streaming_response: nil)
+         |> assign(background_color: "bg-seafoam-950/30")
+         |> assign(provider: nil)
+         |> assign(providers: AiProvider.all())
+         |> assign(db_error: Exception.format(:error, reason))
+         |> assign(ai_error: nil)}
+    end
+  end
+
+  @impl Phoenix.LiveView
+  def render(assigns) do
+    ~H"""
+    <div class="flex flex-col h-full  rounded-lg">
+      <div class="px-4 py-3 font-semibold flex items-center gap-3">
+        <.link navigate={~p"/"} class="text-seafoam-700 hover:text-seafoam-400 transition-colors">
+          ←
+        </.link>
+        <span class="flex-1">{@conversation_name}</span>
+        <.chat_provider_display provider={@provider} providers={@providers} />
+      </div>
+      <%= if @db_error do %>
+        <div class="mx-4 mt-2 px-3 py-2 rounded text-sm text-red-400 bg-red-950/40" role="alert">
+          Database error: {@db_error}
+        </div>
+      <% end %>
+      <%= if @ai_error do %>
+        <div class="mx-4 mt-2 px-3 py-2 rounded text-sm text-red-400 bg-red-950/40" role="alert">
+          AI error: {@ai_error}
+        </div>
+      <% end %>
+      <div
+        id="chat-messages"
+        phx-hook="ScrollBottom"
+        class={"flex-1 overflow-y-auto p-4 rounded-lg #{@background_color}"}
+      >
+        <%= if @messages == [] do %>
+          <p class="text-sm text-center mt-4">No messages yet.</p>
+        <% end %>
+        <%= for msg <- @messages do %>
+          <%= cond do %>
+            <% msg.role == :user -> %>
+              <.user_message content={Map.get(msg, :content) || ""} />
+            <% msg.role == :tool -> %>
+              <.tool_result_message
+                content={Map.get(msg, :content) || ""}
+                tool_call_id={Map.get(msg, :tool_call_id) || ""}
+              />
+            <% true -> %>
+              <.assistant_message
+                content={Map.get(msg, :content) || ""}
+                reasoning_content={Map.get(msg, :reasoning_content)}
+                tool_calls={Map.get(msg, :tool_calls) || []}
+              />
+          <% end %>
+        <% end %>
+        <%= if @streaming_response do %>
+          <.streaming_assistant_message
+            content={@streaming_response.content}
+            reasoning_content={@streaming_response.reasoning_content}
+            tool_calls={@streaming_response.tool_calls}
+          />
+          <.spinner />
+        <% end %>
+      </div>
+      <form class="p-3 flex gap-2" phx-submit="submit" phx-change="update_user_input">
+        <input
+          type="text"
+          name="user_input"
+          value={@user_input}
+          class="flex-1 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2"
+        />
+        <button type="submit" class="px-4 py-2 rounded text-sm border">
+          Send
+        </button>
+      </form>
+    </div>
+    """
+  end
+
+  @impl Phoenix.LiveView
+  def handle_event("update_user_input", %{"user_input" => user_input}, socket) do
+    {:noreply, assign(socket, user_input: user_input)}
+  end
+
+  def handle_event("change_provider", %{"id" => provider_id}, socket) do
+    case ChatRunner.set_provider(socket.assigns.conversation_name, provider_id) do
+      {:ok, provider} -> {:noreply, assign(socket, provider: provider)}
+      _error -> {:noreply, socket}
+    end
+  end
+
+  def handle_event("submit", %{"user_input" => user_input}, socket) when user_input != "" do
+    ChatRunner.new_user_message(socket.assigns.conversation_name, user_input)
+    {:noreply, assign(socket, user_input: "")}
+  end
+
+  def handle_info(:recovery_restart, socket) do
+    {:noreply, assign(socket, streaming_response: nil, ai_error: nil)}
+  end
+
+  def handle_info(:sync_streaming, %{assigns: %{runner_pid: pid}} = socket)
+      when is_pid(pid) do
+    case GenServer.call(pid, {:conversation, :get_streaming_response}) do
+      nil ->
+        {:noreply, assign(socket, streaming_response: nil)}
+
+      %{content: content, reasoning_content: reasoning_content} = snapshot ->
+        socket =
+          socket
+          |> assign(streaming_response: snapshot)
+          |> then(fn s ->
+            if content != "", do: push_event(s, "md_chunk", %{chunk: content}), else: s
+          end)
+          |> then(fn s ->
+            if reasoning_content != "",
+              do: push_event(s, "reasoning_chunk", %{chunk: reasoning_content}),
+              else: s
+          end)
+          |> push_event("scroll_to_bottom", %{})
+
+        {:noreply, socket}
+    end
+  end
+
+  def handle_info(:sync_streaming, socket), do: {:noreply, socket}
+
+  def handle_info({:user_chat_message, message}, socket) do
+    {:noreply,
+     socket
+     |> update(:messages, &(&1 ++ [message]))
+     |> push_event("scroll_to_bottom", %{})}
+  end
+
+  def handle_info(
+        {:start_ai_response_stream,
+         %{id: _id, reasoning_content: "", content: ""} = starting_response},
+        socket
+      ) do
+    {:noreply, assign(socket, streaming_response: starting_response)}
+  end
+
+  # chunk arrived before :start_ai_response_stream — fetch snapshot from runner and apply
+  def handle_info(
+        {:reasoning_chunk_content, reasoning_content},
+        %{assigns: %{streaming_response: nil}} = socket
+      ) do
+    base = get_snapshot(socket) |> Map.update!(:reasoning_content, &(&1 <> reasoning_content))
+    {:noreply, assign(socket, streaming_response: base)}
+  end
+
+  def handle_info({:reasoning_chunk_content, reasoning_content}, socket) do
+    updated_response = %{
+      socket.assigns.streaming_response
+      | reasoning_content:
+          socket.assigns.streaming_response.reasoning_content <> reasoning_content
+    }
+
+    # Update assign (controls toggle button visibility) and stream chunk to hook.
+    {:noreply,
+     socket
+     |> assign(streaming_response: updated_response)
+     |> push_event("reasoning_chunk", %{chunk: reasoning_content})}
+  end
+
+  def handle_info(
+        {:text_chunk_content, text_content},
+        %{assigns: %{streaming_response: nil}} = socket
+      ) do
+    base = get_snapshot(socket) |> Map.update!(:content, &(&1 <> text_content))
+    {:noreply, assign(socket, streaming_response: base)}
+  end
+
+  def handle_info({:text_chunk_content, text_content}, socket) do
+    updated_response = %{
+      socket.assigns.streaming_response
+      | content: socket.assigns.streaming_response.content <> text_content
+    }
+
+    # Update assign (accumulated for final message) and stream chunk to hook.
+    {:noreply,
+     socket
+     |> assign(streaming_response: updated_response)
+     |> push_event("md_chunk", %{chunk: text_content})}
+  end
+
+  def handle_info(:tool_calls_finished, socket) do
+    # Logger.info("Received tool_calls_finished")
+
+    {:noreply,
+     socket
+     |> assign(streaming_response: nil)}
+  end
+
+  def handle_info({:tool_request_message, tool_request_message}, socket) do
+    # Logger.info("tool request message: #{inspect(tool_request_message)}")
+
+    {:noreply,
+     socket
+     |> update(:messages, &(&1 ++ [tool_request_message]))}
+  end
+
+  def handle_info({:one_tool_finished, tool_response}, socket) do
+    {:noreply,
+     socket
+     |> update(:messages, &(&1 ++ [tool_response]))}
+  end
+
+  def handle_info({:end_ai_response, final_message}, socket) do
+    {:noreply,
+     socket
+     |> update(:messages, &(&1 ++ [final_message]))
+     |> assign(streaming_response: nil)}
+  end
+
+  def handle_info({:db_error, reason}, socket) do
+    {:noreply, assign(socket, db_error: reason)}
+  end
+
+  def handle_info({:ai_request_error, reason}, socket) do
+    error_message =
+      case reason do
+        "proxy error" <> _ ->
+          "Could not connect to AI provider. Please check your proxy and provider settings."
+
+        %{__struct__: mod, reason: r} ->
+          "#{inspect(mod)}: #{inspect(r)}"
+
+        msg when is_binary(msg) ->
+          msg
+
+        _ ->
+          inspect(reason)
+      end
+
+    {:noreply, assign(socket, ai_error: error_message, streaming_response: nil)}
+  end
+
+  def handle_info({:liveview_tool_call, "set_background_color", %{"color" => color}}, socket) do
+    {:noreply, assign(socket, background_color: color)}
+  end
+
+  def handle_info({:liveview_tool_call, "navigate_to", %{"path" => path}}, socket) do
+    {:noreply, push_navigate(socket, to: path)}
+  end
+
+  def handle_info({:liveview_tool_call, _tool_name, _args}, socket) do
+    {:noreply, socket}
+  end
+
+  def handle_info({:set_background_color, color}, socket) do
+    Logger.info("setting background color to #{color}")
+    {:noreply, assign(socket, background_color: color)}
+  end
+
+  @impl Phoenix.LiveView
+  def terminate(_reason, %{assigns: %{conversation_name: name}} = socket) do
+    if connected?(socket) do
+      ChatRunner.deregister_liveview_pid(name, self())
+    end
+
+    :ok
+  end
+
+  defp get_snapshot(%{assigns: %{runner_pid: pid}} = _socket) when is_pid(pid) do
+    case GenServer.call(pid, {:conversation, :get_streaming_response}) do
+      nil -> %{id: nil, content: "", reasoning_content: "", tool_calls: []}
+      snapshot -> snapshot
+    end
+  end
+
+  defp get_snapshot(socket) do
+    ChatRunner.get_streaming_response(socket.assigns.conversation_name)
+    |> case do
+      nil -> %{id: nil, content: "", reasoning_content: "", tool_calls: []}
+      snapshot -> snapshot
+    end
+  end
+end

lib/elixir_ai_web/features/chat/chat_message.ex

@@ -0,0 +1,408 @@
+defmodule ElixirAiWeb.ChatMessage do
+  use Phoenix.Component
+  alias Phoenix.LiveView.JS
+  import ElixirAiWeb.JsonDisplay
+
+  defp max_width_class, do: "max-w-full xl:max-w-300"
+
+  attr :content, :string, required: true
+  attr :tool_call_id, :string, required: true
+
+  def tool_result_message(assigns) do
+    ~H"""
+    <div class={"mb-1 #{max_width_class()} rounded-lg border border-seafoam-900/40 bg-seafoam-950/20 text-xs font-mono overflow-hidden"}>
+      <div class="flex items-center gap-2 px-3 py-1.5 border-b border-seafoam-900/40 bg-seafoam-900/10 text-seafoam-600">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          class="w-3 h-3 shrink-0"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M10 2a.75.75 0 0 1 .75.75v.258a33.186 33.186 0 0 1 6.668 2.372.75.75 0 1 1-.636 1.354 31.66 31.66 0 0 0-1.598-.632l1.44 7.402a.75.75 0 0 1-.26.726A18.698 18.698 0 0 1 10 15.75a18.698 18.698 0 0 1-6.364-1.518.75.75 0 0 1-.26-.726l1.44-7.402a31.66 31.66 0 0 0-1.598.632.75.75 0 1 1-.636-1.354 33.186 33.186 0 0 1 6.668-2.372V2.75A.75.75 0 0 1 10 2Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+        <span class="text-seafoam-600/70 flex-1 truncate">tool result</span>
+        <span class="text-seafoam-800 text-[10px] truncate max-w-[12rem]">{@tool_call_id}</span>
+      </div>
+      <div class="px-3 py-2">
+        <pre class="text-seafoam-500/70 whitespace-pre-wrap break-all">{@content}</pre>
+      </div>
+    </div>
+    """
+  end
+
+  attr :content, :string, required: true
+
+  def user_message(assigns) do
+    ~H"""
+    <div class="mb-2 text-sm text-right">
+      <div class={"ml-auto w-fit px-3 py-2 rounded-lg  bg-seafoam-950 text-seafoam-50 #{max_width_class()} text-left"}>
+        {@content}
+      </div>
+    </div>
+    """
+  end
+
+  attr :content, :string, required: true
+  attr :reasoning_content, :string, default: nil
+  attr :tool_calls, :list, default: []
+
+  def assistant_message(assigns) do
+    assigns =
+      assigns
+      |> assign(
+        :_reasoning_id,
+        "reasoning-#{:erlang.phash2({assigns.content, assigns.reasoning_content, assigns.tool_calls})}"
+      )
+      |> assign(:_expanded, false)
+
+    ~H"""
+    <.message_bubble
+      reasoning_id={@_reasoning_id}
+      content={@content}
+      reasoning_content={@reasoning_content}
+      tool_calls={@tool_calls}
+      expanded={@_expanded}
+    />
+    """
+  end
+
+  attr :content, :string, required: true
+  attr :reasoning_content, :string, default: nil
+  attr :tool_calls, :list, default: []
+
+  # Renders the in-progress streaming message. Content and reasoning are rendered
+  # entirely client-side via the MarkdownStream hook — the server sends push_event
+  # chunks instead of re-rendering the full markdown on every token.
+  def streaming_assistant_message(assigns) do
+    ~H"""
+    <div class="mb-2 text-sm text-left min-w-0">
+      <!-- Reasoning section — only shown once reasoning_content is non-empty.
+           The div is always in the DOM so the hook mounts before chunks arrive. -->
+      <div id="stream-reasoning-wrap">
+        <%= if @reasoning_content && @reasoning_content != "" do %>
+          <button
+            type="button"
+            class="flex items-center text-seafoam-500/60 hover:text-seafoam-300 transition-colors duration-150 cursor-pointer"
+            phx-click={
+              JS.toggle_class("collapsed", to: "#reasoning-stream")
+              |> JS.toggle_class("rotate-180", to: "#reasoning-stream-chevron")
+            }
+            aria-label="Toggle reasoning"
+          >
+            <div class="flex items-center gap-1 text-seafoam-100/40 ps-2 mb-1">
+              <span class="text-xs">reasoning</span>
+              <svg
+                id="reasoning-stream-chevron"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                class="w-3 h-3 transition-transform duration-300"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </div>
+          </button>
+        <% end %>
+        <div
+          id="reasoning-stream"
+          phx-hook="MarkdownStream"
+          phx-update="ignore"
+          data-event="reasoning_chunk"
+          class={"reasoning-content block px-3 py-2 rounded-lg bg-seafoam-950/50 text-seafoam-400 italic text-xs #{max_width_class()} mb-1 markdown"}
+        >
+        </div>
+      </div>
+      <%= for tool_call <- @tool_calls do %>
+        <.tool_call_item tool_call={tool_call} />
+      <% end %>
+      <div
+        id="stream-content"
+        phx-hook="MarkdownStream"
+        phx-update="ignore"
+        data-event="md_chunk"
+        class={"w-fit px-3 py-2 rounded-lg #{max_width_class()} markdown bg-seafoam-950/50 overflow-x-auto"}
+      >
+      </div>
+    </div>
+    """
+  end
+
+  attr :content, :string, required: true
+  attr :reasoning_content, :string, default: nil
+  attr :tool_calls, :list, default: []
+  attr :reasoning_id, :string, required: true
+  attr :expanded, :boolean, default: false
+
+  defp message_bubble(assigns) do
+    ~H"""
+    <div class="mb-2 text-sm text-left min-w-0">
+      <%= if @reasoning_content && @reasoning_content != "" do %>
+        <button
+          type="button"
+          class="flex items-center text-seafoam-500/60 hover:text-seafoam-300 transition-colors duration-150 cursor-pointer"
+          phx-click={
+            JS.toggle_class("collapsed", to: "##{@reasoning_id}")
+            |> JS.toggle_class("rotate-180", to: "##{@reasoning_id}-chevron")
+          }
+          aria-label="Toggle reasoning"
+        >
+          <div class="flex items-center gap-1 text-seafoam-100/40 ps-2 mb-1">
+            <span class="text-xs">reasoning</span>
+            <svg
+              id={"#{@reasoning_id}-chevron"}
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              class={["w-3 h-3 transition-transform duration-300", !@expanded && "rotate-180"]}
+            >
+              <path
+                fill-rule="evenodd"
+                d="M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </div>
+        </button>
+        <div
+          id={@reasoning_id}
+          phx-hook="MarkdownRender"
+          phx-update="ignore"
+          data-md={@reasoning_content}
+          class={[
+            "reasoning-content block px-3 py-2 rounded-lg bg-seafoam-950/50 text-seafoam-400 italic text-xs #{max_width_class()} mb-1 markdown",
+            !@expanded && "collapsed"
+          ]}
+        >
+        </div>
+      <% end %>
+      <%= for tool_call <- @tool_calls do %>
+        <.tool_call_item tool_call={tool_call} />
+      <% end %>
+      <%= if @content && @content != "" do %>
+        <div
+          id={"#{@reasoning_id}-content"}
+          phx-hook="MarkdownRender"
+          phx-update="ignore"
+          data-md={@content}
+          class={"w-fit px-3 py-2 rounded-lg #{max_width_class()} markdown bg-seafoam-950/50 overflow-x-auto"}
+        >
+        </div>
+      <% end %>
+    </div>
+    """
+  end
+
+  # Dispatches to the unified tool_call_card component, determining state from the map keys:
+  #   :error key  → :error   (runtime failure)
+  #   :result key → :success (completed)
+  #   :index key  → :pending (streaming in-progress)
+  #   none        → :called  (DB-loaded; result is a separate message)
+  attr :tool_call, :map, required: true
+
+  defp tool_call_item(%{tool_call: tool_call} = assigns) do
+    state =
+      cond do
+        Map.has_key?(tool_call, :error) -> :error
+        Map.has_key?(tool_call, :result) -> :success
+        Map.has_key?(tool_call, :index) -> :pending
+        true -> :called
+      end
+
+    assigns =
+      assigns
+      |> assign(:_state, state)
+      |> assign(:_name, tool_call.name)
+      |> assign(:_arguments, tool_call[:arguments])
+      |> assign(:_result, tool_call[:result])
+      |> assign(:_error, tool_call[:error])
+
+    ~H"<.tool_call_card
+  state={@_state}
+  name={@_name}
+  arguments={@_arguments}
+  result={@_result}
+  error={@_error}
+/>"
+  end
+
+  attr :state, :atom, required: true
+  attr :name, :string, required: true
+  attr :arguments, :any, default: nil
+  attr :result, :any, default: nil
+  attr :error, :string, default: nil
+
+  defp tool_call_card(assigns) do
+    assigns =
+      assigns
+      |> assign(:_id, "tc-#{:erlang.phash2({assigns.name, assigns.arguments})}")
+      |> assign(:_truncated, truncate_args(assigns.arguments))
+      |> assign(
+        :_result_str,
+        case assigns.result do
+          nil -> nil
+          s when is_binary(s) -> s
+          other -> inspect(other, pretty: true, limit: :infinity)
+        end
+      )
+
+    ~H"""
+    <div
+      id={@_id}
+      class={[
+        "mb-1 #{max_width_class()} rounded-lg border text-xs font-mono overflow-hidden bg-seafoam-950/40",
+        @state == :error && "border-red-900/50",
+        @state == :called && "border-seafoam-900/60",
+        @state in [:pending, :success] && "border-seafoam-900"
+      ]}
+    >
+      <div
+        class={[
+          "flex items-center gap-2 px-3 py-1.5 border-b text-seafoam-400",
+          @_truncated && "cursor-pointer select-none",
+          @state == :error && "border-red-900/50 bg-red-900/20",
+          @state == :called && "border-seafoam-900/60 bg-seafoam-900/20",
+          @state in [:pending, :success] && "border-seafoam-900 bg-seafoam-900/30"
+        ]}
+        phx-click={
+          @_truncated &&
+            JS.toggle_class("hidden", to: "##{@_id}-args")
+            |> JS.toggle_class("rotate-180", to: "##{@_id}-chevron")
+        }
+      >
+        <.tool_call_icon />
+        <span class="text-seafoam-400 font-semibold shrink-0">{@name}</span>
+        <span :if={@_truncated} class="text-seafoam-500 truncate flex-1 min-w-0 ml-1">
+          <.json_display json={@_truncated} inline />
+        </span>
+        <span :if={!@_truncated} class="flex-1" />
+        <svg
+          :if={@_truncated}
+          id={"#{@_id}-chevron"}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          fill="currentColor"
+          class="w-3 h-3 shrink-0 mx-1 text-seafoam-700 transition-transform duration-200"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+        <span :if={@state == :called} class="flex items-center gap-1 text-seafoam-500/50 shrink-0">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            class="w-3 h-3"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+          <span class="text-[10px]">called</span>
+        </span>
+        <span :if={@state == :pending} class="flex items-center gap-1 text-seafoam-600 shrink-0">
+          <span class="w-1.5 h-1.5 rounded-full bg-seafoam-600 animate-pulse inline-block"></span>
+          <span class="text-[10px]">running</span>
+        </span>
+        <span :if={@state == :success} class="flex items-center gap-1 text-emerald-500 shrink-0">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            class="w-3 h-3"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+          <span class="text-[10px]">done</span>
+        </span>
+        <span :if={@state == :error} class="flex items-center gap-1 text-red-500 shrink-0">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            class="w-3 h-3"
+          >
+            <path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm0-10a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 5Zm0 6.5a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
+          </svg>
+          <span class="text-[10px]">error</span>
+        </span>
+      </div>
+      <div id={"#{@_id}-args"} class="hidden">
+        <.tool_call_args arguments={@arguments} />
+      </div>
+      <div :if={@state == :success} class="px-3 py-2">
+        <div class="text-seafoam-700 mb-1 uppercase tracking-wider text-[10px]">result</div>
+        <pre class="text-emerald-300/80 whitespace-pre-wrap break-all">{@_result_str}</pre>
+      </div>
+      <div :if={@state == :error} class="px-3 py-2 bg-red-950/20">
+        <div class="text-red-700 mb-1 uppercase tracking-wider text-[10px]">error</div>
+        <pre class="text-red-400 whitespace-pre-wrap break-all">{@error}</pre>
+      </div>
+    </div>
+    """
+  end
+
+  defp truncate_args(nil), do: nil
+  defp truncate_args(""), do: nil
+
+  defp truncate_args(args) when is_binary(args) do
+    compact =
+      case Jason.decode(args) do
+        {:ok, decoded} -> Jason.encode!(decoded)
+        _ -> args
+      end
+
+    if String.length(compact) > 72, do: String.slice(compact, 0, 69) <> "\u2026", else: compact
+  end
+
+  defp truncate_args(args) do
+    compact = Jason.encode!(args)
+    if String.length(compact) > 72, do: String.slice(compact, 0, 69) <> "\u2026", else: compact
+  end
+
+  attr :arguments, :any, default: nil
+
+  defp tool_call_args(%{arguments: args} = assigns) when not is_nil(args) and args != "" do
+    ~H"""
+    <div class="px-3 py-2 border-b border-seafoam-900/50">
+      <div class="text-seafoam-500 mb-1 uppercase tracking-wider text-[10px]">arguments</div>
+      <.json_display json={@arguments} />
+    </div>
+    """
+  end
+
+  defp tool_call_args(assigns), do: ~H""
+
+  defp tool_call_icon(assigns) do
+    ~H"""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      class="w-3 h-3 shrink-0"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M6.28 5.22a.75.75 0 0 1 0 1.06L2.56 10l3.72 3.72a.75.75 0 0 1-1.06 1.06L.97 10.53a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Zm7.44 0a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L17.44 10l-3.72-3.72a.75.75 0 0 1 0-1.06Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+    """
+  end
+end

lib/elixir_ai_web/features/chat/chat_provider_display.ex

@@ -0,0 +1,84 @@
+defmodule ElixirAiWeb.ChatProviderDisplay do
+  use Phoenix.Component
+  alias Phoenix.LiveView.JS
+
+  attr :provider, :any, default: nil
+  attr :providers, :list, default: []
+
+  def chat_provider_display(assigns) do
+    ~H"""
+    <div class="relative" id="provider-display">
+      <button
+        type="button"
+        phx-click={JS.toggle(to: "#provider-dropdown")}
+        class="flex items-center gap-2 text-xs min-w-0 cursor-pointer hover:opacity-80 transition-opacity"
+      >
+        <div class="flex items-center gap-1.5 px-2 py-1 rounded bg-seafoam-950/50 border border-seafoam-900/40 min-w-0 select-none">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            class="w-3 h-3 shrink-0 text-seafoam-600"
+          >
+            <path d="M10 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM6 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM1.49 15.326a.78.78 0 0 1-.358-.442 3 3 0 0 1 4.308-3.516 6.484 6.484 0 0 0-1.905 3.959c-.023.222-.014.442.025.654a4.97 4.97 0 0 1-2.07-.655ZM16.44 15.98a4.97 4.97 0 0 0 2.07-.654.78.78 0 0 0 .357-.442 3 3 0 0 0-4.308-3.516 6.484 6.484 0 0 1 1.907 3.96 2.32 2.32 0 0 1-.026.654ZM18 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM5.304 16.19a.844.844 0 0 1-.277-.71 5 5 0 0 1 9.947 0 .843.843 0 0 1-.277.71A6.975 6.975 0 0 1 10 18a6.974 6.974 0 0 1-4.696-1.81Z" />
+          </svg>
+          <%= if @provider do %>
+            <span class="text-seafoam-400 font-medium truncate">{@provider.name}</span>
+            <span class="text-seafoam-800">·</span>
+            <span class="text-seafoam-600 truncate">{@provider.model_name}</span>
+          <% else %>
+            <span class="text-seafoam-800 italic">No provider</span>
+          <% end %>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            class="w-2.5 h-2.5 text-seafoam-700 ml-0.5 shrink-0"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </button>
+      <div
+        id="provider-dropdown"
+        class="hidden absolute right-0 top-full mt-1 z-50 min-w-max bg-gray-950 border border-seafoam-900/40 rounded shadow-xl overflow-hidden"
+        phx-click-away={JS.hide(to: "#provider-dropdown")}
+      >
+        <%= if @providers == [] do %>
+          <div class="px-3 py-2 text-xs text-gray-500 italic">No providers configured</div>
+        <% else %>
+          <%= for p <- @providers do %>
+            <button
+              type="button"
+              phx-click={
+                JS.hide(to: "#provider-dropdown")
+                |> JS.push("change_provider", value: %{id: p.id})
+              }
+              class={[
+                "flex flex-col px-3 py-2 text-left w-full text-xs hover:bg-seafoam-950/60 transition-colors",
+                if(@provider && @provider.name == p.name,
+                  do: "text-seafoam-400",
+                  else: "text-gray-300"
+                )
+              ]}
+            >
+              <span class="font-medium">{p.name}</span>
+              <span class={
+                if @provider && @provider.name == p.name,
+                  do: "text-seafoam-700",
+                  else: "text-gray-500"
+              }>
+                {p.model_name}
+              </span>
+            </button>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+    """
+  end
+end

lib/elixir_ai_web/features/chat/json_display.ex

@@ -0,0 +1,132 @@
+defmodule ElixirAiWeb.JsonDisplay do
+  use Phoenix.Component
+
+  attr :json, :any, required: true
+  attr :class, :string, default: nil
+  attr :inline, :boolean, default: false
+
+  def json_display(%{json: json, inline: inline} = assigns) do
+    formatted =
+      case json do
+        nil ->
+          ""
+
+        "" ->
+          ""
+
+        s when is_binary(s) ->
+          case Jason.decode(s) do
+            {:ok, decoded} -> Jason.encode!(decoded, pretty: !inline)
+            _ -> s
+          end
+
+        other ->
+          Jason.encode!(other, pretty: !inline)
+      end
+
+    assigns = assign(assigns, :_highlighted, json_to_html(formatted))
+
+    ~H"""
+    <pre
+      :if={!@inline}
+      class={["whitespace-pre-wrap break-all text-xs font-mono leading-relaxed", @class]}
+    ><%= @_highlighted %></pre>
+    <span :if={@inline} class={["text-xs font-mono truncate", @class]}>{@_highlighted}</span>
+    """
+  end
+
+  @token_colors %{
+    key: "text-sky-300",
+    string: "text-emerald-400/80",
+    keyword: "text-violet-400",
+    number: "text-orange-300/80",
+    colon: "text-seafoam-500/50",
+    punctuation: "text-seafoam-500/50",
+    quote: "text-seafoam-500/50"
+  }
+
+  # Converts a plain JSON string into a Phoenix.HTML.safe value with
+  # <span> tokens coloured by token type.
+  defp json_to_html(""), do: Phoenix.HTML.raw("")
+
+  defp json_to_html(str) do
+    # Capture groups (in order):
+    # 1  string literal       "..."
+    # 2  keyword              true | false | null
+    # 3  number               -?digits with optional frac/exp
+    # 4  punctuation          { } [ ] , :
+    # 5  whitespace           spaces / newlines / tabs
+    # 6  fallback             any other single char
+    token_re =
+      ~r/(".(?:[^"\\]|\\.)*")|(true|false|null)|(-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?)|([{}\[\],:])|(\s+)|(.)/s
+
+    tokens = Regex.scan(token_re, str, capture: :all_but_first)
+
+    {parts, _, _} =
+      Enum.reduce(tokens, {[], :val, []}, fn groups, {acc, state, ctx} ->
+        [string_tok, keyword_tok, number_tok, punct_tok, whitespace_tok, fallback_tok] =
+          pad_groups(groups, 6)
+
+        cond do
+          string_tok != "" ->
+            {color, next_state} =
+              if state == :key,
+                do: {@token_colors.key, :after_key},
+                else: {@token_colors.string, :after_val}
+
+            content = string_tok |> String.slice(1..-2//1) |> html_escape()
+            quote_span = color_span(@token_colors.quote, "&quot;")
+
+            {[quote_span <> color_span(color, content) <> quote_span | acc], next_state, ctx}
+
+          keyword_tok != "" ->
+            {[color_span(@token_colors.keyword, keyword_tok) | acc], :after_val, ctx}
+
+          number_tok != "" ->
+            {[color_span(@token_colors.number, number_tok) | acc], :after_val, ctx}
+
+          punct_tok != "" ->
+            {next_state, next_ctx} = advance_state(punct_tok, state, ctx)
+            color = if punct_tok == ":", do: @token_colors.colon, else: @token_colors.punctuation
+            {[color_span(color, punct_tok) | acc], next_state, next_ctx}
+
+          whitespace_tok != "" ->
+            {[whitespace_tok | acc], state, ctx}
+
+          fallback_tok != "" ->
+            {[html_escape(fallback_tok) | acc], state, ctx}
+
+          true ->
+            {acc, state, ctx}
+        end
+      end)
+
+    Phoenix.HTML.raw(parts |> Enum.reverse() |> Enum.join())
+  end
+
+  # State transitions driven by punctuation tokens.
+  # State :key   → we are about to read an object key.
+  # State :val   → we are about to read a value.
+  # State :after_key / :after_val → consumed the token; awaiting : or ,.
+  defp advance_state("{", _, ctx), do: {:key, [:obj | ctx]}
+  defp advance_state("[", _, ctx), do: {:val, [:arr | ctx]}
+  defp advance_state("}", _, [_ | ctx]), do: {:after_val, ctx}
+  defp advance_state("}", _, []), do: {:after_val, []}
+  defp advance_state("]", _, [_ | ctx]), do: {:after_val, ctx}
+  defp advance_state("]", _, []), do: {:after_val, []}
+  defp advance_state(":", _, ctx), do: {:val, ctx}
+  defp advance_state(",", _, [:obj | _] = ctx), do: {:key, ctx}
+  defp advance_state(",", _, ctx), do: {:val, ctx}
+  defp advance_state(_, state, ctx), do: {state, ctx}
+
+  defp pad_groups(list, n), do: list ++ List.duplicate("", max(0, n - length(list)))
+
+  defp color_span(class, content), do: ~s|<span class="#{class}">#{content}</span>|
+
+  defp html_escape(str) do
+    str
+    |> String.replace("&", "&amp;")
+    |> String.replace("<", "&lt;")
+    |> String.replace(">", "&gt;")
+  end
+end

lib/elixir_ai_web/features/chat/stream_handler.ex

@@ -0,0 +1,183 @@
+defmodule ElixirAi.ChatRunner.StreamHandler do
+  require Logger
+  import ElixirAi.ChatRunner.OutboundHelpers
+
+  def handle({:start_new_ai_response, id}, state) do
+    starting_response = %{id: id, reasoning_content: "", content: "", tool_calls: []}
+    broadcast_ui(state.name, {:start_ai_response_stream, starting_response})
+    {:noreply, %{state | streaming_response: starting_response}}
+  end
+
+  def handle({:ai_reasoning_chunk, _id, reasoning_content}, state) do
+    broadcast_ui(state.name, {:reasoning_chunk_content, reasoning_content})
+
+    {:noreply,
+     %{
+       state
+       | streaming_response: %{
+           state.streaming_response
+           | reasoning_content: state.streaming_response.reasoning_content <> reasoning_content
+         }
+     }}
+  end
+
+  def handle({:ai_text_chunk, _id, text_content}, state) do
+    broadcast_ui(state.name, {:text_chunk_content, text_content})
+
+    {:noreply,
+     %{
+       state
+       | streaming_response: %{
+           state.streaming_response
+           | content: state.streaming_response.content <> text_content
+         }
+     }}
+  end
+
+  def handle({:ai_text_stream_finish, _id}, state) do
+    Logger.info(
+      "AI stream finished for id #{state.streaming_response.id}, broadcasting end of AI response"
+    )
+
+    final_message = %{
+      role: :assistant,
+      content: state.streaming_response.content,
+      reasoning_content: state.streaming_response.reasoning_content,
+      tool_calls: state.streaming_response.tool_calls
+    }
+
+    broadcast_ui(state.name, {:end_ai_response, final_message})
+    store_message(state.name, final_message)
+
+    {:noreply,
+     %{
+       state
+       | streaming_response: nil,
+         messages: state.messages ++ [final_message]
+     }}
+  end
+
+  def handle(
+        {:ai_tool_call_start, _id, {tool_name, tool_args_start, tool_index, tool_call_id}},
+        state
+      ) do
+    Logger.info("AI started tool call #{tool_name}")
+
+    new_streaming_response = %{
+      state.streaming_response
+      | tool_calls:
+          state.streaming_response.tool_calls ++
+            [
+              %{
+                name: tool_name,
+                arguments: tool_args_start,
+                index: tool_index,
+                id: tool_call_id
+              }
+            ]
+    }
+
+    {:noreply, %{state | streaming_response: new_streaming_response}}
+  end
+
+  def handle({:ai_tool_call_middle, _id, {tool_args_diff, tool_index}}, state) do
+    new_streaming_response = %{
+      state.streaming_response
+      | tool_calls:
+          Enum.map(state.streaming_response.tool_calls, fn
+            %{arguments: existing_args, index: ^tool_index} = tool_call ->
+              %{tool_call | arguments: existing_args <> tool_args_diff}
+
+            other ->
+              other
+          end)
+    }
+
+    {:noreply, %{state | streaming_response: new_streaming_response}}
+  end
+
+  def handle({:ai_tool_call_end, id}, state) do
+    tool_request_message = %{
+      role: :assistant,
+      content: state.streaming_response.content,
+      reasoning_content: state.streaming_response.reasoning_content,
+      tool_calls: state.streaming_response.tool_calls
+    }
+
+    broadcast_ui(state.name, {:tool_request_message, tool_request_message})
+
+    {failed_call_messages, pending_call_ids} =
+      Enum.reduce(state.streaming_response.tool_calls, {[], []}, fn tool_call,
+                                                                    {failed, pending} ->
+        with {:ok, decoded_args} <- Jason.decode(tool_call.arguments),
+             tool when not is_nil(tool) <-
+               Enum.find(state.server_tools ++ state.liveview_tools ++ state.page_tools, fn t ->
+                 t.name == tool_call.name
+               end) do
+          tool.run_function.(id, tool_call.id, decoded_args)
+          {failed, [tool_call.id | pending]}
+        else
+          {:error, e} ->
+            error_msg = "Failed to decode tool arguments: #{inspect(e)}"
+            Logger.error("Tool call #{tool_call.name} failed: #{error_msg}")
+            {[%{role: :tool, content: error_msg, tool_call_id: tool_call.id} | failed], pending}
+
+          nil ->
+            error_msg = "No tool definition found for #{tool_call.name}"
+            Logger.error(error_msg)
+            {[%{role: :tool, content: error_msg, tool_call_id: tool_call.id} | failed], pending}
+        end
+      end)
+
+    store_message(state.name, [tool_request_message] ++ failed_call_messages)
+
+    {:noreply,
+     %{
+       state
+       | messages: state.messages ++ [tool_request_message] ++ failed_call_messages,
+         pending_tool_calls: pending_call_ids
+     }}
+  end
+
+  def handle({:tool_response, _id, tool_call_id, result}, state) do
+    new_message = %{role: :tool, content: inspect(result), tool_call_id: tool_call_id}
+
+    broadcast_ui(state.name, {:one_tool_finished, new_message})
+    store_message(state.name, new_message)
+
+    new_pending_tool_calls =
+      Enum.filter(state.pending_tool_calls, fn id -> id != tool_call_id end)
+
+    new_streaming_response =
+      case new_pending_tool_calls do
+        [] -> nil
+        _ -> state.streaming_response
+      end
+
+    if new_pending_tool_calls == [] do
+      broadcast_ui(state.name, :tool_calls_finished)
+
+      ElixirAi.ChatUtils.request_ai_response(
+        self(),
+        messages_with_system_prompt(state.messages ++ [new_message], state.system_prompt),
+        state.server_tools ++ state.liveview_tools ++ state.page_tools,
+        state.provider,
+        state.tool_choice
+      )
+    end
+
+    {:noreply,
+     %{
+       state
+       | pending_tool_calls: new_pending_tool_calls,
+         streaming_response: new_streaming_response,
+         messages: state.messages ++ [new_message]
+     }}
+  end
+
+  def handle({:ai_request_error, reason}, state) do
+    Logger.error("AI request error: #{inspect(reason)}")
+    broadcast_ui(state.name, {:ai_request_error, reason})
+    {:noreply, %{state | streaming_response: nil, pending_tool_calls: []}}
+  end
+end

lib/elixir_ai_web/features/home/ai_providers_live.ex

@@ -0,0 +1,189 @@
+defmodule ElixirAiWeb.AiProvidersLive do
+  use ElixirAiWeb, :live_component
+  import ElixirAiWeb.FormComponents
+  alias ElixirAi.AiProvider
+
+  def update(assigns, socket) do
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign_new(:show_form, fn -> false end)
+     |> assign_new(:confirm_delete_id, fn -> nil end)
+     |> assign_new(
+       :form_data,
+       fn ->
+         %{
+           "name" => "",
+           "model_name" => "",
+           "api_token" => "",
+           "completions_url" => ""
+         }
+       end
+     )
+     |> assign_new(:error, fn -> nil end)}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div>
+      <div class="flex items-center justify-between mb-8">
+        <h1 class="text-lg font-semibold text-seafoam-300">AI Providers</h1>
+        <button
+          phx-click="toggle_form"
+          phx-target={@myself}
+          class="px-3 py-1 rounded text-sm border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors"
+        >
+          {if @show_form, do: "Cancel", else: "Add Provider"}
+        </button>
+      </div>
+
+      <%= if @show_form do %>
+        <form
+          phx-submit="create_provider"
+          phx-target={@myself}
+          class="mb-8 space-y-2 p-4 rounded-lg border border-seafoam-900/40 bg-seafoam-950/10"
+        >
+          <.input type="text" name="name" value={@form_data["name"]} label="Provider Name" />
+          <.input type="text" name="model_name" value={@form_data["model_name"]} label="Model Name" />
+          <.input type="password" name="api_token" value={@form_data["api_token"]} label="API Token" />
+          <.input
+            type="text"
+            name="completions_url"
+            value={@form_data["completions_url"]}
+            label="Completions URL"
+          />
+          <button
+            type="submit"
+            class="w-full px-4 py-2 rounded text-sm border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors"
+          >
+            Create Provider
+          </button>r
+        </form>
+      <% end %>
+
+      <%= if @error do %>
+        <p class="mb-4 text-sm text-red-400">{@error}</p>
+      <% end %>
+
+      <ul class="space-y-2">
+        <%= if @providers == [] do %>
+          <li class="text-sm text-seafoam-700">No providers configured yet.</li>
+        <% end %>
+        <%= for provider <- @providers do %>
+          <li class="p-4 rounded-lg border border-seafoam-900/40 bg-seafoam-950/20">
+            <div class="flex items-start justify-between">
+              <div class="flex-1">
+                <h3 class="text-sm font-medium text-seafoam-300">{provider.name}</h3>
+                <p class="text-xs text-seafoam-500 mt-1">Model: {provider.model_name}</p>
+              </div>
+              <button
+                phx-click="delete_provider"
+                phx-value-id={provider.id}
+                phx-target={@myself}
+                class="ml-4 px-2 py-1 rounded text-xs border border-red-900/40 bg-red-950/20 text-red-400 hover:border-red-700 hover:bg-red-950/40 transition-colors"
+              >
+                Delete
+              </button>
+            </div>
+          </li>
+        <% end %>
+      </ul>
+
+      <%= if @confirm_delete_id do %>
+        <.modal>
+          <h2 class="text-sm font-semibold text-seafoam-300 mb-2">Delete Provider</h2>
+          <p class="text-sm text-seafoam-500 mb-6">
+            Are you sure you want to delete this provider? This action cannot be undone.
+          </p>
+          <div class="flex gap-3 justify-end">
+            <button
+              phx-click="cancel_delete"
+              phx-target={@myself}
+              class="px-4 py-2 rounded text-sm border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              phx-click="confirm_delete"
+              phx-target={@myself}
+              class="px-4 py-2 rounded text-sm border border-red-900/40 bg-red-950/20 text-red-400 hover:border-red-700 hover:bg-red-950/40 transition-colors"
+            >
+              Delete
+            </button>
+          </div>
+        </.modal>
+      <% end %>
+    </div>
+    """
+  end
+
+  def handle_event("toggle_form", _params, socket) do
+    {:noreply, assign(socket, show_form: !socket.assigns.show_form, error: nil)}
+  end
+
+  def handle_event("delete_provider", %{"id" => id}, socket) do
+    {:noreply, assign(socket, confirm_delete_id: id)}
+  end
+
+  def handle_event("cancel_delete", _params, socket) do
+    {:noreply, assign(socket, confirm_delete_id: nil)}
+  end
+
+  def handle_event("confirm_delete", _params, socket) do
+    case AiProvider.delete(socket.assigns.confirm_delete_id) do
+      :ok ->
+        {:noreply, assign(socket, confirm_delete_id: nil)}
+
+      _ ->
+        {:noreply, assign(socket, confirm_delete_id: nil, error: "Failed to delete provider")}
+    end
+  end
+
+  def handle_event("create_provider", params, socket) do
+    name = String.trim(params["name"])
+    model_name = String.trim(params["model_name"])
+    api_token = String.trim(params["api_token"])
+    completions_url = String.trim(params["completions_url"])
+
+    cond do
+      name == "" ->
+        {:noreply, assign(socket, error: "Provider name can't be blank")}
+
+      model_name == "" ->
+        {:noreply, assign(socket, error: "Model name can't be blank")}
+
+      api_token == "" ->
+        {:noreply, assign(socket, error: "API token can't be blank")}
+
+      completions_url == "" ->
+        {:noreply, assign(socket, error: "Completions URL can't be blank")}
+
+      true ->
+        attrs = %{
+          name: name,
+          model_name: model_name,
+          api_token: api_token,
+          completions_url: completions_url
+        }
+
+        case AiProvider.create(attrs) do
+          :ok ->
+            {:noreply,
+             socket
+             |> assign(show_form: false)
+             |> assign(
+               form_data: %{
+                 "name" => "",
+                 "model_name" => "",
+                 "api_token" => "",
+                 "completions_url" => ""
+               }
+             )
+             |> assign(error: nil)}
+
+          _ ->
+            {:noreply, assign(socket, error: "Failed to create provider")}
+        end
+    end
+  end
+end

lib/elixir_ai_web/features/home/home_live.ex

@@ -0,0 +1,152 @@
+defmodule ElixirAiWeb.HomeLive do
+  use ElixirAiWeb, :live_view
+  import ElixirAiWeb.FormComponents
+  alias ElixirAi.{ConversationManager, AiProvider}
+  require Logger
+  import ElixirAi.PubsubTopics
+
+  def mount(_params, _session, socket) do
+    if connected?(socket) do
+      Phoenix.PubSub.subscribe(ElixirAi.PubSub, providers_topic())
+      :pg.join(ElixirAi.LiveViewPG, {:liveview, __MODULE__}, self())
+      send(self(), :load_data)
+    end
+
+    {:ok,
+     socket
+     |> assign(conversations: [])
+     |> assign(ai_providers: [])
+     |> assign(new_name: "")
+     |> assign(error: nil)}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div class="max-w-lg mx-auto mt-16 px-4 space-y-16">
+      <div>
+        <h1 class="text-lg font-semibold text-seafoam-300 mb-8">Conversations</h1>
+
+        <.conversation_list conversations={@conversations} />
+
+        <.create_conversation_form new_name={@new_name} ai_providers={@ai_providers} />
+
+        <%= if @error do %>
+          <p class="mt-2 text-sm text-red-400">{@error}</p>
+        <% end %>
+      </div>
+
+      <div>
+        <.live_component
+          module={ElixirAiWeb.AiProvidersLive}
+          id="ai-providers"
+          providers={@ai_providers}
+        />
+      </div>
+    </div>
+    """
+  end
+
+  defp conversation_list(assigns) do
+    ~H"""
+    <ul class="mb-8 space-y-2">
+      <%= if @conversations == [] do %>
+        <li class="text-sm text-seafoam-700">No conversations yet.</li>
+      <% end %>
+      <%= for name <- @conversations do %>
+        <li>
+          <.link
+            navigate={~p"/chat/#{name}"}
+            class="block px-4 py-2 rounded-lg border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors text-sm"
+          >
+            {name}
+          </.link>
+        </li>
+      <% end %>
+    </ul>
+    """
+  end
+
+  defp create_conversation_form(assigns) do
+    ~H"""
+    <form phx-submit="create" class="space-y-2">
+      <.input type="text" name="name" value={@new_name} label="Conversation Name" />
+      <select
+        name="ai_provider_id"
+        class="w-full rounded px-3 py-2 text-sm bg-seafoam-950/20 border border-seafoam-900/40 text-seafoam-100 focus:outline-none focus:ring-1 focus:ring-seafoam-700"
+      >
+        <%= for {provider, index} <- Enum.with_index(@ai_providers) do %>
+          <option value={provider.id} selected={index == 0}>
+            {provider.name} - {provider.model_name}
+          </option>
+        <% end %>
+      </select>
+      <button
+        type="submit"
+        class="w-full px-4 py-2 rounded text-sm border border-seafoam-900/40 bg-seafoam-950/20 text-seafoam-300 hover:border-seafoam-700 hover:bg-seafoam-950/40 transition-colors"
+      >
+        Create
+      </button>
+    </form>
+    """
+  end
+
+  def handle_event("create", %{"name" => name, "ai_provider_id" => provider_id}, socket) do
+    name = String.trim(name)
+
+    cond do
+      name == "" ->
+        {:noreply, assign(socket, error: "Name can't be blank")}
+
+      provider_id == "" ->
+        {:noreply, assign(socket, error: "Please select an AI provider")}
+
+      true ->
+        case ConversationManager.create_conversation(name, provider_id) do
+          {:ok, _pid} ->
+            {:noreply,
+             socket
+             |> push_navigate(to: ~p"/chat/#{name}")
+             |> assign(error: nil)}
+
+          {:error, :already_exists} ->
+            {:noreply, assign(socket, error: "A conversation with that name already exists")}
+
+          {:error, :failed_to_load} ->
+            {:noreply,
+             assign(socket,
+               error: "Conversation was saved but failed to load"
+             )}
+
+          _ ->
+            {:noreply, assign(socket, error: "Failed to create conversation")}
+        end
+    end
+  end
+
+  def handle_info(:load_data, socket) do
+    conversations = ConversationManager.list_conversations()
+
+    Logger.debug(
+      "Conversations: #{inspect(conversations, limit: :infinity, printable_limit: :infinity)}"
+    )
+
+    ai_providers = AiProvider.all()
+
+    Logger.debug(
+      "AI Providers: #{inspect(ai_providers, limit: :infinity, printable_limit: :infinity)}"
+    )
+
+    {:noreply,
+     socket
+     |> assign(conversations: conversations)
+     |> assign(ai_providers: ai_providers)}
+  end
+
+  def handle_info({:provider_added, _attrs}, socket) do
+    {:noreply, assign(socket, ai_providers: AiProvider.all())}
+  end
+
+  def handle_info({:provider_deleted, _id}, socket) do
+    {:noreply, assign(socket, ai_providers: AiProvider.all())}
+  end
+end

lib/elixir_ai_web/features/voice/recording.ex

@@ -0,0 +1,90 @@
+defmodule ElixirAiWeb.Voice.Recording do
+  use Phoenix.Component
+  alias Phoenix.LiveView.JS
+
+  attr :state, :atom, required: true
+
+  def recording(assigns) do
+    ~H"""
+    <div class="p-4 flex flex-col gap-3">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <%= if @state == :idle do %>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-4 w-4 text-seafoam-500 shrink-0"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path d="M12 1a4 4 0 0 1 4 4v7a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v7a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2zm-7 9a7 7 0 0 0 14 0h2a9 9 0 0 1-8 8.94V23h-2v-2.06A9 9 0 0 1 3 12H5z" />
+            </svg>
+            <span class="text-seafoam-400 font-semibold text-sm">Voice Input</span>
+          <% end %>
+          <%= if @state == :recording do %>
+            <span class="relative flex h-3 w-3 shrink-0">
+              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75">
+              </span>
+              <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
+            </span>
+            <span class="text-seafoam-50 font-semibold text-sm">Recording</span>
+          <% end %>
+          <%= if @state == :processing do %>
+            <span class="relative flex h-3 w-3 shrink-0">
+              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-seafoam-400 opacity-75">
+              </span>
+              <span class="relative inline-flex rounded-full h-3 w-3 bg-seafoam-400"></span>
+            </span>
+            <span class="text-seafoam-50 font-semibold text-sm">Processing…</span>
+          <% end %>
+        </div>
+        <button
+          phx-click="minimize"
+          title="Minimize"
+          class="p-1 rounded-lg text-seafoam-600 hover:text-seafoam-300 hover:bg-seafoam-800/50 transition-colors"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-4 w-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M5 12h14" />
+          </svg>
+        </button>
+      </div>
+      <%= if @state in [:recording, :processing] do %>
+        <div id="voice-viz-wrapper" phx-update="ignore">
+          <canvas id="voice-viz-canvas" height="72" class="w-full rounded-lg bg-seafoam-950 block">
+          </canvas>
+        </div>
+      <% end %>
+      <%= if @state == :idle do %>
+        <button
+          phx-click={JS.dispatch("voice:start", to: "#voice-control-hook")}
+          class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-seafoam-700 hover:bg-seafoam-600 text-seafoam-50 text-xs font-medium transition-colors"
+        >
+          <span>Start Recording</span>
+          <kbd class="text-seafoam-300 bg-seafoam-800 border border-seafoam-600 px-1.5 py-0.5 rounded font-mono">
+            Ctrl+Space
+          </kbd>
+        </button>
+      <% end %>
+      <%= if @state == :recording do %>
+        <button
+          phx-click={JS.dispatch("voice:stop", to: "#voice-control-hook")}
+          class="w-full flex items-center justify-between px-3 py-1.5 rounded-lg bg-seafoam-800 hover:bg-seafoam-700 text-seafoam-50 text-xs font-medium transition-colors border border-seafoam-700"
+        >
+          <span>Stop Recording</span>
+          <kbd class="text-seafoam-300 bg-seafoam-900 border border-seafoam-700 px-1.5 py-0.5 rounded font-mono">
+            Space
+          </kbd>
+        </button>
+      <% end %>
+    </div>
+    """
+  end
+end

lib/elixir_ai_web/features/voice/voice_conversation.ex

@@ -0,0 +1,97 @@
+defmodule ElixirAiWeb.Voice.VoiceConversation do
+  use Phoenix.Component
+  alias Phoenix.LiveView.JS
+  import ElixirAiWeb.ChatMessage
+  import ElixirAiWeb.Spinner
+
+  attr :messages, :list, required: true
+  attr :streaming_response, :any, default: nil
+  attr :ai_error, :string, default: nil
+
+  def voice_conversation(assigns) do
+    ~H"""
+    <div class="flex flex-col flex-1 overflow-hidden">
+      <div class="flex items-center justify-between px-4 pt-4 pb-2">
+        <span class="text-seafoam-300 font-semibold text-sm">Voice Chat</span>
+        <button
+          phx-click="minimize"
+          title="Minimize"
+          class="p-1 rounded-lg text-seafoam-600 hover:text-seafoam-300 hover:bg-seafoam-800/50 transition-colors"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-4 w-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M5 12h14" />
+          </svg>
+        </button>
+      </div>
+      <%= if @ai_error do %>
+        <div class="mx-4 mt-1 px-3 py-2 rounded text-sm text-red-400 bg-red-950/40" role="alert">
+          AI error: {@ai_error}
+        </div>
+      <% end %>
+      <div
+        id="voice-chat-messages"
+        phx-hook="ScrollBottom"
+        class="flex-1 overflow-y-auto px-4 py-2 space-y-1"
+      >
+        <%= for msg <- @messages do %>
+          <%= cond do %>
+            <% msg.role == :user -> %>
+              <.user_message content={Map.get(msg, :content) || ""} />
+            <% msg.role == :tool -> %>
+              <.tool_result_message
+                content={Map.get(msg, :content) || ""}
+                tool_call_id={Map.get(msg, :tool_call_id) || ""}
+              />
+            <% true -> %>
+              <.assistant_message
+                content={Map.get(msg, :content) || ""}
+                reasoning_content={Map.get(msg, :reasoning_content)}
+                tool_calls={Map.get(msg, :tool_calls) || []}
+              />
+          <% end %>
+        <% end %>
+        <%= if @streaming_response do %>
+          <.streaming_assistant_message
+            content={@streaming_response.content}
+            reasoning_content={@streaming_response.reasoning_content}
+            tool_calls={@streaming_response.tool_calls}
+          />
+          <.spinner />
+        <% end %>
+      </div>
+      <div class="px-4 pb-3 pt-2 flex items-center justify-between gap-2">
+        <button
+          phx-click="dismiss_transcription"
+          class="text-xs text-seafoam-500 hover:text-seafoam-300 transition-colors"
+        >
+          Dismiss
+        </button>
+        <button
+          phx-click={JS.dispatch("voice:start", to: "#voice-control-hook")}
+          title="Voice input (Ctrl+Space)"
+          class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-seafoam-700 hover:bg-seafoam-600 text-seafoam-50 text-xs font-medium transition-colors"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-3.5 w-3.5"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          >
+            <path d="M12 1a4 4 0 0 1 4 4v7a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v7a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2zm-7 9a7 7 0 0 0 14 0h2a9 9 0 0 1-8 8.94V23h-2v-2.06A9 9 0 0 1 3 12H5z" />
+          </svg>
+          <span>Record</span>
+        </button>
+      </div>
+    </div>
+    """
+  end
+end

lib/elixir_ai_web/features/voice/voice_live.ex

@@ -0,0 +1,402 @@
+defmodule ElixirAiWeb.VoiceLive do
+  use ElixirAiWeb, :live_view
+  require Logger
+
+  alias ElixirAiWeb.Voice.Recording
+  alias ElixirAiWeb.Voice.VoiceConversation
+  alias ElixirAi.{AiProvider, AiTools, ChatRunner, ConversationManager}
+  import ElixirAi.PubsubTopics
+
+  def mount(_params, session, socket) do
+    voice_session_id = session["voice_session_id"]
+
+    {:ok,
+     assign(socket,
+       state: :idle,
+       transcription: nil,
+       expanded: false,
+       conversation_name: nil,
+       messages: [],
+       streaming_response: nil,
+       runner_pid: nil,
+       ai_error: nil,
+       voice_session_id: voice_session_id
+     ), layout: false}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div id="voice-control-hook" phx-hook="VoiceControl">
+      <%= if not @expanded do %>
+        <button
+          phx-click="expand"
+          title="Voice input (Ctrl+Space)"
+          class="fixed top-4 right-4 z-50 p-2.5 rounded-full bg-seafoam-900/50 hover:bg-seafoam-800/80 border border-seafoam-700/50 hover:border-seafoam-600 text-seafoam-500/70 hover:text-seafoam-300 transition-all duration-200 opacity-50 hover:opacity-100"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          >
+            <path d="M12 1a4 4 0 0 1 4 4v7a4 4 0 0 1-8 0V5a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v7a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2zm-7 9a7 7 0 0 0 14 0h2a9 9 0 0 1-8 8.94V23h-2v-2.06A9 9 0 0 1 3 12H5z" />
+          </svg>
+        </button>
+      <% else %>
+        <div class={[
+          "fixed top-4 right-4 z-50 bg-seafoam-900 border border-seafoam-800 rounded-2xl shadow-2xl flex flex-col backdrop-blur",
+          if(@state == :transcribed, do: "w-96 max-h-[80vh]", else: "w-72")
+        ]}>
+          <%= if @state == :transcribed do %>
+            <VoiceConversation.voice_conversation
+              messages={@messages}
+              streaming_response={@streaming_response}
+              ai_error={@ai_error}
+            />
+          <% else %>
+            <Recording.recording state={@state} />
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+    """
+  end
+
+  def handle_event("expand", _params, socket) do
+    {:noreply, assign(socket, expanded: true)}
+  end
+
+  def handle_event("minimize", _params, socket) do
+    {:noreply, assign(socket, expanded: false)}
+  end
+
+  def handle_event("recording_started", _params, socket) do
+    {:noreply, assign(socket, state: :recording, expanded: true)}
+  end
+
+  def handle_event("audio_recorded", %{"data" => base64, "mime_type" => mime_type}, socket) do
+    case Base.decode64(base64) do
+      {:ok, audio_binary} ->
+        Logger.info(
+          "VoiceLive: received #{byte_size(audio_binary)} bytes of audio (#{mime_type})"
+        )
+
+        ElixirAi.AudioProcessing.submit(audio_binary, mime_type, self())
+        {:noreply, assign(socket, state: :processing)}
+
+      :error ->
+        Logger.error("VoiceLive: failed to decode base64 audio data")
+        {:noreply, assign(socket, state: :idle)}
+    end
+  end
+
+  def handle_event("recording_error", %{"reason" => reason}, socket) do
+    Logger.warning("VoiceLive: recording error: #{reason}")
+    {:noreply, assign(socket, state: :idle)}
+  end
+
+  def handle_event("dismiss_transcription", _params, socket) do
+    name = socket.assigns.conversation_name
+
+    if name do
+      if socket.assigns.runner_pid do
+        try do
+          GenServer.call(
+            socket.assigns.runner_pid,
+            {:session, {:deregister_liveview_pid, self()}}
+          )
+        catch
+          :exit, _ -> :ok
+        end
+      end
+
+      Phoenix.PubSub.unsubscribe(ElixirAi.PubSub, chat_topic(name))
+    end
+
+    {:noreply,
+     assign(socket,
+       state: :idle,
+       transcription: nil,
+       expanded: false,
+       conversation_name: nil,
+       messages: [],
+       streaming_response: nil,
+       runner_pid: nil,
+       ai_error: nil
+     )}
+  end
+
+  # Transcription received — open conversation and send as user message
+  def handle_info({:transcription_result, {:ok, text}}, socket) do
+    socket = start_voice_conversation(socket, text)
+    {:noreply, socket}
+  end
+
+  def handle_info({:transcription_result, {:error, reason}}, socket) do
+    Logger.error("VoiceLive: transcription failed: #{inspect(reason)}")
+    {:noreply, assign(socket, state: :idle)}
+  end
+
+  # --- Chat PubSub handlers (same pattern as ChatLive) ---
+
+  def handle_info({:user_chat_message, message}, socket) do
+    {:noreply,
+     socket
+     |> update(:messages, &(&1 ++ [message]))
+     |> push_event("scroll_to_bottom", %{})}
+  end
+
+  def handle_info(
+        {:start_ai_response_stream,
+         %{id: _id, reasoning_content: "", content: ""} = starting_response},
+        socket
+      ) do
+    {:noreply, assign(socket, streaming_response: starting_response)}
+  end
+
+  def handle_info(
+        {:reasoning_chunk_content, reasoning_content},
+        %{assigns: %{streaming_response: nil}} = socket
+      ) do
+    base = get_snapshot(socket) |> Map.update!(:reasoning_content, &(&1 <> reasoning_content))
+    {:noreply, assign(socket, streaming_response: base)}
+  end
+
+  def handle_info({:reasoning_chunk_content, reasoning_content}, socket) do
+    updated_response = %{
+      socket.assigns.streaming_response
+      | reasoning_content:
+          socket.assigns.streaming_response.reasoning_content <> reasoning_content
+    }
+
+    {:noreply,
+     socket
+     |> assign(streaming_response: updated_response)
+     |> push_event("reasoning_chunk", %{chunk: reasoning_content})}
+  end
+
+  def handle_info(
+        {:text_chunk_content, text_content},
+        %{assigns: %{streaming_response: nil}} = socket
+      ) do
+    base = get_snapshot(socket) |> Map.update!(:content, &(&1 <> text_content))
+    {:noreply, assign(socket, streaming_response: base)}
+  end
+
+  def handle_info({:text_chunk_content, text_content}, socket) do
+    updated_response = %{
+      socket.assigns.streaming_response
+      | content: socket.assigns.streaming_response.content <> text_content
+    }
+
+    {:noreply,
+     socket
+     |> assign(streaming_response: updated_response)
+     |> push_event("md_chunk", %{chunk: text_content})}
+  end
+
+  def handle_info(:tool_calls_finished, socket) do
+    {:noreply, assign(socket, streaming_response: nil)}
+  end
+
+  def handle_info({:tool_request_message, tool_request_message}, socket) do
+    {:noreply, update(socket, :messages, &(&1 ++ [tool_request_message]))}
+  end
+
+  def handle_info({:one_tool_finished, tool_response}, socket) do
+    {:noreply, update(socket, :messages, &(&1 ++ [tool_response]))}
+  end
+
+  def handle_info({:end_ai_response, final_message}, socket) do
+    {:noreply,
+     socket
+     |> update(:messages, &(&1 ++ [final_message]))
+     |> assign(streaming_response: nil)}
+  end
+
+  def handle_info({:ai_request_error, reason}, socket) do
+    error_message =
+      case reason do
+        "proxy error" <> _ ->
+          "Could not connect to AI provider. Please check your proxy and provider settings."
+
+        %{__struct__: mod, reason: r} ->
+          "#{inspect(mod)}: #{inspect(r)}"
+
+        msg when is_binary(msg) ->
+          msg
+
+        _ ->
+          inspect(reason)
+      end
+
+    {:noreply, assign(socket, ai_error: error_message, streaming_response: nil)}
+  end
+
+  def handle_info({:db_error, reason}, socket) do
+    Logger.error("VoiceLive: db error: #{inspect(reason)}")
+    {:noreply, socket}
+  end
+
+  def handle_info({:liveview_tool_call, "navigate_to", %{"path" => path}}, socket) do
+    {:noreply, push_event(socket, "navigate_to", %{path: path})}
+  end
+
+  def handle_info({:liveview_tool_call, _tool_name, _args}, socket) do
+    {:noreply, socket}
+  end
+
+  def handle_info(:sync_streaming, %{assigns: %{runner_pid: pid}} = socket)
+      when is_pid(pid) do
+    case GenServer.call(pid, {:conversation, :get_streaming_response}) do
+      nil ->
+        {:noreply, assign(socket, streaming_response: nil)}
+
+      %{content: content, reasoning_content: reasoning_content} = snapshot ->
+        socket =
+          socket
+          |> assign(streaming_response: snapshot)
+          |> then(fn s ->
+            if content != "", do: push_event(s, "md_chunk", %{chunk: content}), else: s
+          end)
+          |> then(fn s ->
+            if reasoning_content != "",
+              do: push_event(s, "reasoning_chunk", %{chunk: reasoning_content}),
+              else: s
+          end)
+
+        {:noreply, socket}
+    end
+  end
+
+  def handle_info(:sync_streaming, socket), do: {:noreply, socket}
+
+  def handle_info(:recovery_restart, socket) do
+    {:noreply, assign(socket, streaming_response: nil, ai_error: nil)}
+  end
+
+  # --- Private helpers ---
+
+  defp start_voice_conversation(socket, transcription) do
+    name = "voice-#{System.system_time(:second)}"
+
+    case AiProvider.find_by_name("default") do
+      {:ok, provider} ->
+        case ConversationManager.create_conversation(name, provider.id, "voice") do
+          {:ok, _pid} ->
+            case ConversationManager.open_conversation(name) do
+              {:ok, conv} ->
+                connect_and_send(socket, name, conv, transcription)
+
+              {:error, reason} ->
+                assign(socket,
+                  state: :transcribed,
+                  ai_error: "Failed to open voice conversation: #{inspect(reason)}"
+                )
+            end
+
+          {:error, reason} ->
+            assign(socket,
+              state: :transcribed,
+              ai_error: "Failed to create voice conversation: #{inspect(reason)}"
+            )
+        end
+
+      {:error, reason} ->
+        assign(socket,
+          state: :transcribed,
+          ai_error: "No default AI provider found: #{inspect(reason)}"
+        )
+    end
+  end
+
+  defp connect_and_send(socket, name, conversation, transcription) do
+    runner_pid = Map.get(conversation, :runner_pid)
+
+    try do
+      if connected?(socket) do
+        Phoenix.PubSub.subscribe(ElixirAi.PubSub, chat_topic(name))
+
+        if runner_pid,
+          do: GenServer.call(runner_pid, {:session, {:register_liveview_pid, self()}})
+
+        # Discover and register page tools from AiControllable LiveViews
+        if runner_pid do
+          page_tools = discover_and_build_page_tools(socket, runner_pid)
+
+          if page_tools != [] do
+            ChatRunner.register_page_tools(name, page_tools)
+          end
+        end
+
+        send(self(), :sync_streaming)
+      end
+
+      if runner_pid do
+        GenServer.cast(runner_pid, {:conversation, {:user_message, transcription, nil}})
+      else
+        ChatRunner.new_user_message(name, transcription)
+      end
+
+      assign(socket,
+        state: :transcribed,
+        transcription: transcription,
+        conversation_name: name,
+        messages: conversation.messages,
+        streaming_response: conversation.streaming_response,
+        runner_pid: runner_pid,
+        ai_error: nil
+      )
+    catch
+      :exit, reason ->
+        Logger.error("VoiceLive: failed to connect to conversation #{name}: #{inspect(reason)}")
+
+        assign(socket,
+          state: :transcribed,
+          transcription: transcription,
+          conversation_name: nil,
+          ai_error: "Failed to connect to conversation: process unavailable"
+        )
+    end
+  end
+
+  defp get_snapshot(%{assigns: %{runner_pid: pid}}) when is_pid(pid) do
+    case GenServer.call(pid, {:conversation, :get_streaming_response}) do
+      nil -> %{id: nil, content: "", reasoning_content: "", tool_calls: []}
+      snapshot -> snapshot
+    end
+  end
+
+  defp get_snapshot(_socket) do
+    %{id: nil, content: "", reasoning_content: "", tool_calls: []}
+  end
+
+  defp discover_and_build_page_tools(socket, runner_pid) do
+    voice_session_id = socket.assigns.voice_session_id
+    if voice_session_id == nil, do: throw(:no_session)
+
+    page_pids =
+      try do
+        :pg.get_members(ElixirAi.PageToolsPG, {:page, voice_session_id})
+      catch
+        :error, _ -> []
+      end
+
+    # Ask each page LiveView for its tool specs
+    Enum.each(page_pids, &send(&1, {:get_ai_tools, self()}))
+
+    pids_and_specs =
+      Enum.reduce(page_pids, [], fn page_pid, acc ->
+        receive do
+          {:ai_tools_response, ^page_pid, tools} ->
+            [{page_pid, tools} | acc]
+        after
+          1_000 -> acc
+        end
+      end)
+
+    AiTools.build_page_tools(runner_pid, pids_and_specs)
+  catch
+    :no_session -> []
+  end
+end

lib/elixir_ai_web/features/voice/voice_session_id_plug.ex

@@ -0,0 +1,23 @@
+defmodule ElixirAiWeb.Plugs.VoiceSessionId do
+  @moduledoc """
+  Ensures a `voice_session_id` exists in the Plug session.
+
+  This UUID ties VoiceLive (root layout) to page LiveViews (inner content)
+  so they can discover each other via `:pg` process groups.
+  """
+
+  import Plug.Conn
+
+  def init(opts), do: opts
+
+  def call(conn, _opts) do
+    case get_session(conn, "voice_session_id") do
+      nil ->
+        id = Ecto.UUID.generate()
+        put_session(conn, "voice_session_id", id)
+
+      _existing ->
+        conn
+    end
+  end
+end