## =================================================================
## ThoughtFrame: FSM Viewer (Velocity + Bootstrap + Mermaid)
## =================================================================

#set($fsm   = $testbench.getFrameManager().getStateMachine("git/build"))
#set($frame = $testbench.getFrameManager().loadFrame("AZkGa0J6boiDT-g06uIv"))
$frame._state
$frame.findValue("repositoryid")
#set($fsmAnalysis = $testbench.getFrameManager().analyzeStateMachine($fsm))
<style>
pre.mermaid {
  visibility: hidden;  /* don’t show raw text */
}
.mermaid svg {
  visibility: visible; /* reveal once rendered */
}
</style>
<div class="container my-4">
  <h4 class="mb-3">State Machine Viewer</h4>

  #createFrame($frame $fsm)

  <div class="row">
    <div class="col-md-6">
      <h6 class="fw-bold">State Diagram</h6>
      #renderFSM($frame $fsmAnalysis)
    </div>
    <div class="col-md-6">
      <h6 class="fw-bold">Interactive Flowchart</h6>
      <pre class="mermaid">
      flowchart LR

        %% Build edges with labels (nodes are created implicitly)
        #foreach($edge in $fsmAnalysis.edges)
          #if($edge.to)
            #if($edge.via)
              $edge.from -- "$edge.via" --> $edge.to
            #else
              $edge.from --> $edge.to
            #end
          #else
            #if($edge.via)
              $edge.from -- "$edge.via" --> X((End))
            #else
              $edge.from --> X((End))
            #end
          #end
        #end

        %% Click bindings to descriptions
        #foreach($stateName in $fsmAnalysis.states)
          click $stateName "/$frame.get('framesource')/descriptions/$stateName.html" "Open description for $stateName"
        #end
        
%% Highlight active state
#if($frame.get("state"))
  style $frame.get("state") fill:#E8FAD7,stroke:#22c55e,stroke-width:2px,color:#065f46
#end
      </pre>
    </div>
  </div>

  <div class="card mt-4">
    <div class="card-body">
      <div class="row g-3">
        <div class="col-md-4">
          <div class="text-muted small">Class</div>
          <div><code>$fsmAnalysis.className</code></div>
        </div>
        <div class="col-md-4">
          <div class="text-muted small">States</div>
          <div>
            #foreach($s in $fsmAnalysis.states)
              <span class="badge bg-light text-dark border me-1">$s</span>
            #end
            
          </div>
        </div>
        <div class="col-md-4">
          <div class="text-muted small">Edges</div>
          <div class="small">
            #foreach($e in $fsmAnalysis.edges)
              <code>$e.from → $e.to#if($e.via) &nbsp;($e.via)#end</code>#if($foreach.count < $fsmAnalysis.edges.size()), #end
            #end
            
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="module">
  import mermaid from "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs";
  mermaid.initialize({
    startOnLoad: true,
    theme: "default",
    securityLevel: "loose",   // required for click to work
    themeVariables: {
      stateDefaultFill: '#f7f7f7',
      stateDefaultStroke: '#444',
      stateTextColor: '#111'
    }
  });
</script>



<div class="terminal-container d-flex flex-column text-white overflow-hidden"
     style="border: 8px solid #759075; border-radius: 12px; box-shadow: inset 0 0 10px #1f402d; padding: 12px; background-color: #000; flex-grow: 1;">
  $pages.include("$apphome/frame/chat/terminal.html")
</div>



<script>
function resizeTerminalWrapper() {
	console.log("Begginign resize");
	  const wrapper = document.querySelector('.terminal-container');
	  const inner = wrapper?.querySelector('#terminal-body');
	  if (!wrapper || !inner) return;

	  // Reset first
	  wrapper.style.height = 'auto';
	  wrapper.style.width = 'auto';
	  inner.style.height = 'auto';
	  inner.style.width = 'auto';

	  let parent = wrapper.parentElement;
	  while (parent && parent !== document.body && parent.clientHeight < 100) {
	    parent = parent.parentElement;
	  }

	  if (!parent || parent === document.body) return;

	  const slopheight = 175;
	  const slopwidth = 0;
	  const newHeight = parent.clientHeight - slopheight;
	  const newWidth = parent.clientWidth - slopwidth;

	  wrapper.style.height = `${newHeight}px`;
	  wrapper.style.width = `${newWidth}px`;

	  // Match inner to actual wrapper dimensions
	  const wH = wrapper.clientHeight;
	  const wW = wrapper.clientWidth;

	  inner.style.height = `${wH}px`;
	  inner.style.width = `${wW}px`;
	}


window.addEventListener('resize', resizeTerminalWrapper);
window.addEventListener('DOMContentLoaded', resizeTerminalWrapper);
document.addEventListener('domchanged', resizeTerminalWrapper);
</script>