parapet-rails 0.1.0

data/app/services/parapet/test_runner.rb

@@ -0,0 +1,178 @@
+require 'open3'
+
+module Parapet
+  class TestRunner
+    attr_reader :root_path
+
+    def initialize(root_path = nil, user: Current.user, performed_via: "human")
+      @root_path = root_path || Parapet::Engine.root.to_s
+      @user = user
+      @performed_via = performed_via
+    end
+
+    def detect_frameworks
+      frameworks = []
+
+      frameworks << { id: 'rspec', name: 'RSpec', color: 'red' } if has_rspec?
+      frameworks << { id: 'minitest', name: 'Minitest', color: 'blue' } if has_minitest?
+      frameworks << { id: 'cucumber', name: 'Cucumber', color: 'emerald' } if has_cucumber?
+
+      # Quality/Security Tools
+      frameworks << { id: 'rubocop', name: 'RuboCop', color: 'slate' } if has_config?('.rubocop.yml')
+      frameworks << { id: 'standardrb', name: 'Standard', color: 'slate' } if has_config?('.standard.yml')
+      frameworks << { id: 'brakeman', name: 'Brakeman', color: 'orange' } if has_gem?('brakeman')
+      frameworks << { id: 'zeitwerk', name: 'Zeitwerk', color: 'cyan' } if has_config?('config/environments/development.rb')
+
+      frameworks
+    end
+
+    def execute(command_type: nil, path: nil)
+      argv = determine_command(command_type)
+      argv = argv + [ path ] if path.present?
+      full_command = argv.join(" ")
+      run_history = RunHistory.create!(
+        run_type: command_type.presence || "default",
+        command: full_command,
+        status: "running",
+        triggered_by_actor_type: "human",
+        user_id: @user&.id,
+        performed_via: @performed_via,
+        started_at: Time.current
+      )
+
+      begin
+        stdout, stderr, status = Open3.capture3(*argv, chdir: @root_path)
+        combined_output = stdout + stderr
+      rescue StandardError => error
+        run_history.update!(
+          status: "failed",
+          raw_output: error.message,
+          finished_at: Time.current
+        )
+        raise
+      end
+
+      run_history.update!(
+        status: status.exitstatus == 0 ? "passed" : "failed",
+        exit_code: status.exitstatus,
+        raw_output: combined_output,
+        finished_at: Time.current
+      )
+      ActivityWriter.run!(
+        run_history: run_history,
+        user: @user,
+        action: "test_run",
+        performed_via: @performed_via
+      )
+
+      {
+        command: full_command,
+        output: parse_output(combined_output),
+        summary: extract_summary(combined_output),
+        exit_code: status.exitstatus
+      }
+    end
+
+    private
+
+    def determine_command(type)
+      case type&.to_sym
+      when :rspec then %w[bundle exec rspec]
+      when :cucumber then %w[bundle exec cucumber]
+      when :rubocop then %w[bundle exec rubocop]
+      when :standardrb then %w[bundle exec standard]
+      when :brakeman then %w[bundle exec brakeman]
+      when :zeitwerk then %w[bundle exec rails zeitwerk:check]
+      else
+        default_framework_command
+      end
+    end
+
+    def default_framework_command
+      Parapet.test_framework.to_sym == :rspec ? %w[bundle exec rspec] : %w[bundle exec rails test]
+    end
+
+    def parse_output(output)
+      output.split("\n").map do |line|
+        parse_line(line)
+      end
+    end
+
+    def parse_line(line)
+      data = { text: line, type: 'info' }
+
+      # RSpec / General Ruby backtrace/failure pattern: path/to/file.rb:123:in `method'
+      if line =~ /^(.+?):(\d+):/
+        file, line_num = $1, $2
+        if File.exist?(File.join(@root_path, file))
+          data[:type] = 'fail'
+          data[:file] = file
+          data[:line] = line_num.to_i
+          data[:message] = line.split(':', 3).last.strip
+          return data
+        end
+      end
+
+      # RuboCop pattern
+      if line.match(/^(.+?):(\d+):(\d+): ([A-Z]): (.+)$/)
+        data[:type] = 'lint'
+        data[:file], data[:line], data[:message] = $1, $2.to_i, $5
+        return data
+      end
+
+      # Progress indicators
+      if line.match(/^[.FE*]+$/) && line.length < 100
+        data[:type] = 'pass'
+        return data
+      end
+
+      # Summary lines
+      if line.include?('examples') || line.include?('scenarios') || line.include?('inspected') || line.include?('Finished')
+        data[:type] = 'summary'
+      end
+
+      data
+    end
+
+    def extract_summary(output)
+      summary = { runs: 0, failures: 0, errors: 0 }
+
+      if output =~ /(\d+) examples?, (\d+) failures?/
+        summary[:runs] = $1.to_i
+        summary[:failures] = $2.to_i
+      elsif output =~ /(\d+) scenarios? \((\d+) failed/
+        summary[:runs] = $1.to_i
+        summary[:failures] = $2.to_i
+      elsif output =~ /(\d+) files inspected, (\d+) offenses detected/
+        summary[:runs] = $1.to_i
+        summary[:failures] = $2.to_i
+      end
+
+      summary
+    end
+
+    def has_rspec?
+      Dir.exist?(File.join(@root_path, 'spec'))
+    end
+
+    def has_minitest?
+      Dir.exist?(File.join(@root_path, 'test'))
+    end
+
+    def has_cucumber?
+      Dir.exist?(File.join(@root_path, 'features'))
+    end
+
+    def has_config?(path)
+      File.exist?(File.join(@root_path, path))
+    end
+
+    def has_gem?(name)
+      gemfile_path = File.join(@root_path, 'Gemfile')
+      return false unless File.exist?(gemfile_path)
+      File.readlines(gemfile_path).any? { |l| l.include?(name) }
+    rescue
+      false
+    end
+  end
+end

data/app/views/layouts/parapet/application.html.erb

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Parapet IDE</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <%= yield :head %>
+
+  <!-- Global Styles -->
+  <link rel="stylesheet" href="/css_suite/live?t=<%= Time.now.to_i %>" media="all">
+  <%= stylesheet_link_tag "parapet/qss_application", media: "all" %>
+  <%= javascript_include_tag "qss/qss-engine", defer: true %>
+  <%= javascript_include_tag "parapet/parapet_qss", defer: true %>
+  <%= javascript_include_tag "parapet/tree-logic", defer: true %>
+  <%= javascript_include_tag "parapet/sidebar-resizer", defer: true %>
+  <%= javascript_include_tag "parapet/explorer-resizer", defer: true %>
+  <%= javascript_include_tag "parapet/activity-card", defer: true %>
+  <%= javascript_include_tag "parapet/activity-cards", defer: true %>
+  <%= javascript_include_tag "parapet/activity-registry", defer: true %>
+  <%= javascript_include_tag "parapet/card-failure-inspector", defer: true %>
+  <%= javascript_include_tag "parapet/card-file-editor", defer: true %>
+  <%= javascript_include_tag "parapet/card-progress-area", defer: true %>
+  <%= javascript_include_tag "parapet/card-smart-search", defer: true %>
+  <%= javascript_include_tag "parapet/card-snippet-library", defer: true %>
+  <%= javascript_include_tag "parapet/activity-toggles", defer: true %>
+  <%= javascript_include_tag "parapet/proficiency-filter", defer: true %>
+  <%= javascript_include_tag "parapet/styles-workbench", defer: true %>
+  <%= javascript_include_tag "parapet/application", defer: true %>
+  
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      if (typeof QSSEngine !== 'undefined') {
+        QSSEngine.startPulse();
+        QSSEngine.startObserver();
+        QSSEngine.syncRoot();
+        QSSEngine.syncPerspective();
+        QSSEngine.startVisualSyncing();
+      }
+    });
+  </script>
+  
+  <!-- Custom Version_3 Header Styles/Metas -->
+  <%= render "parapet/shared/head" %>
+</head>
+<body id="pp-main-root" class="qss bg-brand-main" style="contain: layout; overflow: hidden; width: 100vw; height: 100vh;">
+  <div id="qss-canvas" class="qss-dampen-scaling">
+    <div id="pp-header" class="qss bg-brand-header border-b border-slate-800 contain-layout" style="left: 0; top: 0; width: 100%; height: var(--header-h);">
+      <%= render "parapet/shared/header" %>
+    </div>
+    <%= render "parapet/shared/global_nav" %>
+    
+    <% if controller.class.name.include?("Suite") || controller.class.name.include?("DashboardController") %>
+      <%= render "parapet/shared/explorer_bar" %>
+      
+      <div id="pp-workspace-content" class="qss bg-brand-main contain-layout" style="left: calc(var(--global-nav-w, var(--global-nav-w-default)) + var(--explorer-bar-w, var(--explorer-bar-offset-default))); top: var(--header-h); right: var(--inspector-bar-w, var(--inspector-bar-w-default)); bottom: var(--code-source-h, var(--code-source-h-default));">
+        <%= yield %>
+      </div>
+
+      <div id="pp-code-source" class="qss bg-brand-header border-t border-r border-slate-800 contain-layout" style="left: calc(var(--global-nav-w, var(--global-nav-w-default)) + var(--explorer-bar-w, var(--explorer-bar-offset-default))); right: calc(var(--inspector-bar-w, var(--inspector-bar-w-default)) + (100% - (var(--global-nav-w, var(--global-nav-w-default)) + var(--explorer-bar-w, var(--explorer-bar-offset-default)) + var(--inspector-bar-w, var(--inspector-bar-w-default)))) / 2); bottom: var(--footer-h, var(--footer-h-default)); height: var(--code-source-h, var(--code-source-h-default));">
+        <!-- Source Code View -->
+      </div>
+
+      <div id="pp-code-compiled" class="qss bg-brand-header border-t border-slate-800 contain-layout" style="left: calc(var(--global-nav-w, var(--global-nav-w-default)) + var(--explorer-bar-w, var(--explorer-bar-offset-default)) + (100% - (var(--global-nav-w, var(--global-nav-w-default)) + var(--explorer-bar-w, var(--explorer-bar-offset-default)) + var(--inspector-bar-w, var(--inspector-bar-w-default)))) / 2); right: var(--inspector-bar-w, var(--inspector-bar-w-default)); bottom: var(--footer-h, var(--footer-h-default)); height: var(--code-source-h, var(--code-source-h-default));">
+        <!-- Compiled Output View -->
+      </div>
+
+      <div id="pp-inspector-bar" class="qss bg-brand-main border-l border-slate-800 vertical contain-layout" style="right: 0; top: var(--header-h); width: var(--inspector-bar-w, var(--inspector-bar-w-default)); bottom: var(--footer-h, var(--footer-h-default));">
+        <%= render "parapet/shared/object_inspector" %>
+      </div>
+    <% else %>
+      <div id="pp-main-stage" class="qss bg-brand-main contain-layout" style="left: var(--global-nav-w, var(--global-nav-w-default)); top: var(--header-h); right: 0; bottom: var(--footer-h, var(--footer-h-default));">
+        <%= yield %>
+      </div>
+    <% end %>
+
+    <div id="pp-footer" class="qss bg-brand-header border-t border-slate-800 contain-layout" style="left: 0; bottom: 0; width: 100%; height: var(--footer-h, var(--footer-h-default));">
+      <%= render "parapet/shared/footer" %>
+    </div>
+  </div>
+
+  <div id="pp-portal-root" class="qss-absolute qss-inset-0 qss-pointer-events-none qss-z-[1000]"></div>
+</body>
+</html>

data/app/views/layouts/parapet/landing.html.erb

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Parapet | Login</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <%= yield :head %>
+
+  <!-- Global Styles -->
+  <%= stylesheet_link_tag "parapet/qss_application", media: "all" %>
+  
+  <%= render "parapet/shared/head" %>
+</head>
+<body class="qss-bg-brand-main qss-overflow-hidden">
+  <div id="qss-canvas">
+    <%= yield %>
+  </div>
+</body>
+</html>

data/app/views/parapet/activities/_ai_error_explainer.html.erb

@@ -0,0 +1,33 @@
+<div class="qss anchored vertical h-full bg-brand-main p[16] gap[16]">
+    <div class="qss anchored horizontal v-mid gap[12]">
+        <div class="qss anchored">
+            <div class="qss anchored w[40] h[40] rounded[8] bg-indigo-500/20 border[1] border-indigo-500/30 horizontal v-mid centered">
+                <i class="lucide-bot w[24] h[24] text-indigo-400"></i>
+            </div>
+            <div class="qss absolute pos-r[-4] pos-t[-4] w[12] h[12] bg-emerald-500 border[2] border-brand-main rounded-full"></div>
+        </div>
+        <div class="qss anchored vertical">
+            <div class="qss anchored text-size[11] weight[700] uppercase tracking[widest] text-white">Why did this fail?</div>
+            <div class="qss anchored px[6] py[2] rounded[4] bg-indigo-500/10 border[1] border-indigo-500/20 text-size[8] weight[900] text-indigo-400 uppercase tracking[tighter]">AI Assistant</div>
+        </div>
+    </div>
+    <div class="qss anchored vertical gap[8]">
+        <div class="qss anchored horizontal v-mid gap[6] text-red-400">
+            <i class="lucide-alert-triangle w[14] h[14]"></i>
+            <span class="qss anchored text-size[10] weight[700] uppercase tracking[tight]">RSpec Failure</span>
+        </div>
+        <div class="qss anchored p[10] rounded[4] bg-red-500/5 border[1] border-red-500/10 font[mono] text-size[10] leading-relaxed">
+            <span class="qss anchored text-red-400 weight[700]">FAILED.</span><br/>
+            <span class="qss anchored text-slate-400 italic">spec/models/user_spec.rb:42:</span> Expected <span class="qss anchored text-slate-300">user.items.count</span> to be <span class="qss anchored text-white weight[700]">5</span>, but got <span class="qss anchored text-red-400 weight[700]">3</span>.
+        </div>
+    </div>
+    <div class="qss anchored vertical gap[6]">
+        <div class="qss anchored horizontal v-mid gap[6] text-indigo-400">
+            <i class="lucide-brain-circuit w[14] h[14]"></i>
+            <span class="qss anchored text-size[10] weight[700] uppercase tracking[tight]">AI Interpretation</span>
+        </div>
+        <p class="qss anchored text-size[11] text-slate-400 leading-normal ml[20]">
+            This test failed because it expected the <code class="qss anchored text-slate-200">user</code> object to have exactly 5 associated items, but it only found 3 items.
+        </p>
+    </div>
+</div>

data/app/views/parapet/activities/_ai_explainer_widget.html.erb

@@ -0,0 +1,20 @@
+<turbo-frame id="active-widget">
+    <div class="qss-p-3 qss-flex qss-flex-col qss-h-full qss-overflow-hidden">
+        <div class="qss-flex qss-items-center qss-gap-2 qss-mb-2">
+            <i class="lucide-bot qss-w-3.5 qss-h-3.5 qss-text-indigo-400"></i>
+            <span class="qss-text-[10px] qss-font-bold qss-uppercase qss-tracking-widest qss-text-slate-400">AI Error Explainer</span>
+        </div>
+        <div class="qss-flex-1 qss-overflow-y-auto custom-scrollbar">
+            <div class="qss-bg-indigo-500/5 qss-border qss-border-indigo-500/10 qss-rounded qss-p-2 qss-mb-2">
+                <p class="qss-text-[10px] qss-text-slate-400 qss-leading-relaxed qss-italic">
+                    Analyzing current context... Waiting for test failure or selection.
+                </p>
+            </div>
+            <div class="qss-space-y-2 qss-opacity-40 qss-grayscale qss-pointer-events-none">
+                <div class="qss-h-2 qss-bg-slate-800 qss-rounded qss-w-3/4"></div>
+                <div class="qss-h-2 qss-bg-slate-800 qss-rounded qss-w-1/2"></div>
+                <div class="qss-h-2 qss-bg-slate-800 qss-rounded qss-w-2/3"></div>
+            </div>
+        </div>
+    </div>
+</turbo-frame>

data/app/views/parapet/activities/_calendar_widget.html.erb

@@ -0,0 +1,31 @@
+<div id="pp-calendar-card" class="qss qss-pos-x[center] qss-pos-y[center] qss-w[714] qss-h[600] qss-bg-brand-main qss-border[1] qss-border-slate-800 qss-depth[ui]">
+  <!-- Header -->
+  <div id="pp-calendar-header" class="qss qss-w-pct[1000] qss-h[50] qss-border-b[1] qss-border-slate-800 qss-flex qss-items-center qss-px[20]">
+    <span class="qss qss-text-indigo-500 qss-font-bold qss-text-size[18]">AUGUST 2026</span>
+  </div>
+
+  <!-- The Grid Container (Relative for local children) -->
+  <div id="pp-calendar-body" class="qss qss-pos-y[50] qss-w-pct[1000] qss-h-pct[900] qss-relative">
+    <% qss.grid(31, cols: 7, w: 100, h: 100, gap_x: 2, gap_y: 2).each do |day| %>
+      <div id="day-<%= day.index %>" 
+           class="qss qss-pos-x[<%= day.x %>] qss-pos-y[<%= day.y %>] qss-w[<%= day.w %>] qss-h[<%= day.h %>] qss-bg-slate-900 qss-hover:bg-slate-800 qss-border[1] qss-border-slate-800">
+        
+        <span class="qss qss-pos-x[8] qss-pos-y[8] qss-text-slate-500 qss-text-size[10] qss-font-mono">
+          <%= day.index.to_s.rjust(2, '0') %>
+        </span>
+
+        <% if day.index == 19 %>
+          <!-- Deterministic Marker -->
+          <div class="qss qss-pos-x[center] qss-pos-y[center] qss-w[60] qss-h[4] qss-bg-indigo-500 qss-rounded[2]"></div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+  
+  <!-- Footer (Metadata) -->
+  <div id="pp-calendar-footer" class="qss qss-pos-y[bottom-0] qss-w-pct[1000] qss-h[30] qss-bg-slate-900 qss-flex qss-items-center qss-px[10]">
+    <span class="qss qss-text-slate-600 qss-text-size[9] qss-font-mono">
+      GRID: 7x5 | UNIT: 100x100 | GAP: 2
+    </span>
+  </div>
+</div>

data/app/views/parapet/activities/_code_snippets_widget.html.erb

@@ -0,0 +1,22 @@
+<turbo-frame id="active-widget">
+    <div class="qss-p-3 qss-flex qss-flex-col qss-h-full qss-overflow-hidden">
+        <div class="qss-flex qss-items-center qss-gap-2 qss-mb-2">
+            <i class="lucide-code qss-w-3.5 qss-h-3.5 qss-text-blue-400"></i>
+            <span class="qss-text-[10px] qss-font-bold qss-uppercase qss-tracking-widest qss-text-slate-400">Code Snippets</span>
+        </div>
+        <div class="qss-flex-1 qss-overflow-y-auto custom-scrollbar qss-space-y-2">
+            <div class="qss-group qss-cursor-pointer">
+                <div class="qss-text-[9px] qss-text-slate-500 group-hover:qss-text-blue-400 qss-transition-colors qss-uppercase qss-font-mono">expect().to receive()</div>
+                <div class="qss-bg-black/20 qss-rounded qss-p-1.5 qss-border qss-border-slate-800/50 qss-mt-1">
+                    <code class="qss-text-[9px] qss-text-slate-300">expect(obj).to receive(:msg)</code>
+                </div>
+            </div>
+            <div class="qss-group qss-cursor-pointer">
+                <div class="qss-text-[9px] qss-text-slate-500 group-hover:qss-text-blue-400 qss-transition-colors qss-uppercase qss-font-mono">let! { ... }</div>
+                <div class="qss-bg-black/20 qss-rounded qss-p-1.5 qss-border qss-border-slate-800/50 qss-mt-1">
+                    <code class="qss-text-[9px] qss-text-slate-300">let!(:user) { create(:user) }</code>
+                </div>
+            </div>
+        </div>
+    </div>
+</turbo-frame>

data/app/views/parapet/activities/_coverage_explorer.html.erb

@@ -0,0 +1 @@
+<%= render partial: 'parapet/activities/explorer_base', locals: { type: 'coverage', tree_data: @tree_data } %>

data/app/views/parapet/activities/_dropdown_test.html.erb

@@ -0,0 +1,20 @@
+<% dropdown = qss.object(:Dropdown) %>
+<% list_h = qss.resolve_height(dropdown, :list, rows: 4) %>
+
+<div id="pp-theme-select" class="qss qss-pos-x[center] qss-pos-y[100] qss-w[200] qss-h[40] qss-relative">
+  <!-- Header Slot -->
+  <div id="pp-theme-select-header" class="qss qss-w-pct[1000] qss-h-pct[1000] qss-bg-slate-800 qss-border[1] qss-border-slate-700 qss-rounded[4] qss-px[12] qss-flex qss-items-center qss-justify-between qss-cursor-pointer">
+    <span class="qss-text-slate-300 qss-text-size[14]">Select Theme...</span>
+    <svg class="qss-w[12] qss-h[12] qss-text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
+  </div>
+
+  <!-- List Slot (Positioned via Blueprint pos: [0, 42]) -->
+  <div id="pp-theme-select-list" 
+       class="qss qss-pos-x[0] qss-pos-y[42] qss-w[200] qss-h[<%= list_h %>] qss-depth[overlay] qss-bg-brand-main qss-border[1] qss-border-slate-800 qss-rounded[4] qss-overflow-y-auto">
+    <% ["Midnight", "Emerald", "High Contrast", "Material"].each_with_index do |theme, i| %>
+      <div class="qss-relative qss-w-full qss-h[32] qss-px[12] qss-flex qss-items-center hover:qss-bg-slate-800 qss-cursor-pointer">
+        <span class="qss-text-slate-400 qss-text-size[13]"><%= theme %></span>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/parapet/activities/_explorer_node.html.erb

@@ -0,0 +1,102 @@
+<%# node: JSON object, depth: integer %>
+<% 
+  is_dir = node['type'] == 'directory'
+  has_children = node['children'] && node['children'].any?
+  metadata = node['metadata'] || {}
+  is_phantom = metadata['is_phantom']
+
+  icon = node['icon'] || (is_dir ? 'icon-folder' : 'icon-file')
+  icon_color = node['iconColor'] ? node['iconColor'].gsub('qss-', '') : 'text-slate-500'
+  
+  if is_phantom
+    icon_color = 'text-slate-700' # Muted icon for hidden elements
+  end
+  
+  node_status = node['status']
+  status_class = case node_status
+                 when 'red' then 'bg-red-500 shadow[sm]'
+                 when 'green' then 'bg-emerald-500 shadow[sm]'
+                 when 'orange' then 'bg-amber-500 shadow[sm]'
+                 when 'grey' then 'bg-slate-600'
+                 else 'bg-slate-700'
+                 end
+
+  node_health = node['health']
+%>
+
+<div class="qss qss-explorer-node anchored vertical"
+     data-path="<%= node['path'] %>" 
+     data-type="<%= node['type'] %>" 
+     draggable="<%= !is_dir %>"
+     style="--depth: <%= depth %>">
+    <div class="qss anchored horizontal v-mid py[1] px[2] hover:bg-white/5 clickable smooth qss-tree-row group/row">
+        <!-- Indentation & Icons -->
+        <div class="anchored horizontal v-mid" style="margin-left: <%= depth * 12 %>px;">
+            <div class="anchored w[12] h[12] centered">
+                <% if is_dir && has_children %>
+                    <i class="icon-chevron-right text-slate-500 group-hover/row:text-slate-300 transition-all chevron-icon" style="font-size: 6px;"></i>
+                <% end %>
+            </div>
+            <div class="anchored w[12] h[12] centered">
+                <i class="<%= icon %> <%= icon_color %> centered opacity[1000]" style="font-size: 10px;"></i>
+            </div>
+            <% if metadata['is_staged'] %>
+                <i class="icon-circle-dot text-amber-500 text-size[5] ml[2] animate-pulse" title="Staged Changes"></i>
+            <% end %>
+        </div>
+
+        <!-- Name & Syntax (Grammar/Librarian) -->
+        <div class="anchored vertical ml[2] truncate">
+            <span class="anchored text-size[4] font[sans] <%= is_dir ?'font-medium text-slate-300' : 'text-slate-400' %>">
+                <%= node['name'] %>
+            </span>
+            <% if metadata['syntax'] %>
+                <span class="anchored text-size[3] font[mono] text-indigo-400 opacity[800]">
+                    <%= metadata['syntax'] %>
+                </span>
+            <% end %>
+        </div>
+
+        <!-- Status Indicator (for files) -->
+        <% if !is_dir && node_status && !metadata['syntax'] %>
+            <div class="anchored ml-auto horizontal v-mid pr[4] gap[6]">
+                <% if is_phantom %>
+                    <div class="anchored clickable group/eye" onclick="QSSEngine.revealPhantom('<%= node['name'] %>', event)" title="Reveal Phantom Object">
+                        <i class="icon-eye text-slate-600 group-hover/eye:text-indigo-400 text-size[7] smooth"></i>
+                    </div>
+                <% end %>
+                <div class="anchored clickable group/focus" onclick="QSSEngine.toggleFocusMode('<%= node['path'] %>', event)" title="Focus Mode">
+                    <i class="icon-maximize-2 text-slate-600 group-hover/focus:text-emerald-400 text-size[7] smooth"></i>
+                </div>
+                <div class="anchored w[6] h[6] rounded-full <%= status_class %>"></div>
+            </div>
+        <% end %>
+
+        <!-- Health Bar (for folders) -->
+        <% if is_dir && node_health %>
+            <div class="anchored ml-auto horizontal v-mid w[40] h[4] bg-white/5 rounded-full overflow-hidden">
+                <% node_health.each do |status, percent| %>
+                    <% 
+                       bar_color = case status
+                                   when 'red' then 'bg-red-500'
+                                   when 'green' then 'bg-emerald-500'
+                                   when 'orange' then 'bg-amber-500'
+                                   when 'grey' then 'bg-slate-500'
+                                   else 'bg-slate-500'
+                                   end
+                    %>
+                    <div class="anchored h-full <%= bar_color %>" style="width: <%= percent %>%"></div>
+                <% end %>
+            </div>
+        <% end %>
+    </div>
+
+    <!-- Children -->
+    <% if has_children %>
+        <div class="qss anchored vertical qss-children-container">
+            <% node['children'].each do |child| %>
+                <%= render partial: 'parapet/activities/explorer_node', locals: { node: child, depth: depth + 1 } %>
+            <% end %>
+        </div>
+    <% end %>
+</div>

data/app/views/parapet/activities/_explorer_tree.html.erb

@@ -0,0 +1,16 @@
+<div class="anchored vertical" id="qss-tree-container">
+    <% if tree_data %>
+        <% if tree_data[:path] && tree_data[:path].start_with?('/') && tree_data[:path] != '/' %>
+            <%# This is a virtual root or a focused root, render it as the top node %>
+            <%= render partial: 'parapet/activities/explorer_node', locals: { node: tree_data.deep_stringify_keys, depth: 0 } %>
+        <% elsif tree_data[:children] %>
+            <% tree_data[:children].each do |node| %>
+                <%= render partial: 'parapet/activities/explorer_node', locals: { node: node.deep_stringify_keys, depth: 0 } %>
+            <% end %>
+        <% end %>
+    <% else %>
+        <div class="anchored p[16] text-size[9] text-slate-500 italic opacity[500]">
+            No files found in <%= @root_path %>
+        </div>
+    <% end %>
+</div>