app.py

import gradio as gr
import os
from openai import AsyncOpenAI
from openai import OpenAI
from huggingface_hub import InferenceClient
api_key = ""
client = OpenAI(
    base_url="https://Localhost/v1",
    api_key=api_key
)

def respond(
    
    message,
    history: list[dict[str, str]],
    system_message,
    max_tokens,
    temperature,
    top_p,
    hf_token: gr.OAuthToken,
):
    """
    For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
    """
    client = InferenceClient(token=hf_token.token, model="openai/gpt-oss-20b")

    messages = [{"role": "system", "content": system_message}]

    messages.extend(history)

    messages.append({"role": "user", "content": message})

    response = ""

    for message in client.chat_completion(
        messages,
        max_tokens=max_tokens,
        stream=True,
        temperature=temperature,
        top_p=top_p,
    ):
        choices = message.choices
        token = ""
        if len(choices) and choices[0].delta.content:
            token = choices[0].delta.content

        response += token
        yield response


custom_css = """
        
        .gradio-container {
    background-color: rgba(243, 48, 4, 0.85);
    background-image: url("https://huggingface.co/LeroyDyer/ImageFiles/resolve/main/LCARS_PANEL.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
}
        
        
        .agent-card { padding: 10px; margin: 5px 0; border-radius: 8px; background: #f0f8ff; }
        .agent-card.active { background: #e6f2ff; border-left: 3px solid #3399FF; }
        .status-indicator { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
        .online { background-color: #4CAF50; }
        .offline { background-color: #F44336; }
        .console-log { font-family: monospace; font-size: 0.9em; background: #1e1e1e; color: #00ff00; padding: 10px; border-radius: 5px; height: 500px; overflow-y: auto; }
        .log-entry { margin: 2px 0; }
        .log-public { color: #00ff00; }
        .log-direct { color: #ffaa00; }
        .log-system { color: #00aaff; }
        .message-controls { background: #f5f5f5; padding: 10px; border-radius: 5px; margin-bottom: 10px; }

        .console-log { 
            font-family: monospace; 
            font-size: 0.85em; 
            background: #1e1e1e; 
            color: #00ff00; 
            padding: 10px; 
            border-radius: 5px; 
            height: 600px; 
            overflow-y: auto;
            word-wrap: break-word;
            white-space: pre-wrap;
        }

        .log-entry { 
            margin: 4px 0; 
            padding: 2px 4px;
            border-left: 2px solid #333;
        }

        .log-public { 
            color: #00ff00; 
            border-left-color: #00aa00;
        }

        .log-direct { 
            color: #ffaa00; 
            border-left-color: #ff8800;
        }

        .log-system { 
            color: #00aaff; 
            border-left-color: #0088ff;
        }

        .lcars-container {
            background: #000d1a;
            color: #7EC8E3;
            font-family: 'Courier New', monospace;
            padding: 20px;
            border-radius: 0;
        }
        .lcars-title {
            color: #7EC8E3;
            text-align: center;
            font-size: 2.2em;
            text-shadow: 0 0 10px #7EC8E3, 0 0 20px rgba(126, 200, 227, 0.5);
            margin-bottom: 10px;
            letter-spacing: 2px;
        }
        .lcars-subtitle {
            color: #aaa;
            text-align: center;
            font-style: italic;
            margin-bottom: 30px;
        }
        /* Glowing Input Boxes */
        .gr-box input, .gr-box textarea {
            background: #001122 !important;
            color: #7EC8E3 !important;
            border: 1px solid #7EC8E3 !important;
            box-shadow: 0 0 8px rgba(126, 200, 227, 0.3) !important;
            font-family: 'Courier New', monospace !important;
        }
        .gr-button {
            background: linear-gradient(90deg, #003366, #0055aa) !important;
            color: #7EC8E3 !important;
            border: 1px solid #7EC8E3 !important;
            box-shadow: 0 0 10px rgba(126, 200, 227, 0.4) !important;
            font-family: 'Courier New', monospace !important;
            font-weight: bold !important;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }
        .gr-button:hover {
            background: linear-gradient(90deg, #004488, #0077cc) !important;
            box-shadow: 0 0 15px rgba(126, 200, 227, 0.6) !important;
            transform: scale(1.05);
        }
        /* Output Panels */
        .lcars-output-panel {
            border: 2px solid #7EC8E3;
            border-radius: 12px;
            padding: 15px;
            background: #00141a;
            box-shadow: 0 0 15px rgba(126, 200, 227, 0.2);
            margin-top: 10px;
        }
        .lcars-error {
            color: #ff6b6b;
            font-weight: bold;
            text-shadow: 0 0 5px rgba(255,107,107,0.5);
            padding: 20px;
            text-align: center;
        }
        .lcars-log {
            max-height: 400px;
            overflow-y: auto;
            background: #001018;
            border: 1px solid #7EC8E3;
            border-radius: 8px;
            padding: 10px;
        }
        .lcars-step {
            margin-bottom: 15px;
            padding: 10px;
            background: #000c14;
            border-left: 3px solid #7EC8E3;
        }
        .lcars-step h4 {
            margin: 0 0 8px 0;
            color: #7EC8E3;
        }
        .lcars-step pre {
            white-space: pre-wrap;
            background: #00080c;
            padding: 10px;
            border-radius: 5px;
            color: #ccc;
            font-size: 0.9em;
            margin: 10px 0 0 0;
        }
        code {
            background: #000f1f;
            color: #7EC8E3;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New';
        }
        @keyframes glow-pulse {
            0% { opacity: 0.8; }
            50% { opacity: 1; }
            100% { opacity: 0.8; }
        }
        iframe {
            animation: glow-pulse 2.5s infinite ease-in-out;
        }
        .gr-form { background: transparent !important; }
                
/* =========================
   LCARS47 Bridge Theme
   Seamless Drop-In
   ========================= */

:root {
  /* Core LCARS Palette */
  --lcars-bg: #000814;            
  --lcars-panel: #111827;         
  --lcars-red: #CC6666;           
  --lcars-gold: #FFCC66;          

         
  --lcars-cyan: #66CCCC;          

  --lcars-text: #FFFFFF;          
  --lcars-muted: #AAAAAA;         
    --lcars-orange: #FF9966;
    --lcars-purple: #663399;
    --lcars-rose: #FF6F91;
    --lcars-gold: #FFC766;

    --lcars-peach: #FFCC99;
    --lcars-blue: #9999FF;

    --lcars-lavender: #CCCCFF;
    --lcars-tan: #FFCC99;
    --lcars-rust: #CC6666;
    --lcars-gold: #FFCC66;
    --lcars-bg: #F5F0FF;
    --lcars-panel: #E8E0F5;
    --lcars-text: #2D2D5F;
    --lcars-text-light: #5F5F8F;
    --lcars-border: #9999CC;
    --lcars-accent: #6666CC;
    --lcars-dark: #111317;
  /* Shared component vars */
  --radius-large: 24px;
  --radius-full: 50%;
  --pulse-speed: 2s;
  --font-stack: "Arial Narrow", "Helvetica Neue", sans-serif;
}

.lcars-thinking {{
    background: linear-gradient(135deg, {self.colors['panel']}, #001122) !important;
    border-left: 4px solid {self.colors['info']} !important;
    color: {self.colors['text']} !important;
    padding: 15px !important;
    border-radius: 0px 15px 15px 0px !important;
}}


.gradio-container {{background-color: rgba(243, 48, 4, 0.85);
            background: linear-gradient(135deg, {self.colors['background']}, #001122) !important;
            color: {self.colors['text']} !important;
            font-family: 'Courier New', monospace !important;
            background-image: url("https://huggingface.co/LeroyDyer/ImageFiles/resolve/main/LCARS_PANEL.png");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 20px;
        }}
#left-panel {
    flex: 0 0 250px !important;  /* fixed width */
    max-width: 350px !important;
    padding: 20px !important;    
}
@keyframes pulse {
    0% { box-shadow: 0 0 5px var(--lcars-orange); }
    50% { box-shadow: 0 0 20px var(--lcars-orange); }
    100% { box-shadow: 0 0 5px var(--lcars-orange); }
}
.pulse-animation {
    animation: pulse 2s infinite;
}


/* Panels */
.lcars-panel {
  background-color: var(--lcars-panel);
  border-radius: var(--radius-large);
  padding: 1rem;
  margin: 0.5rem;
  box-shadow: 0 0 8px rgba(0,0,0,0.6);
}
/* Inputs & Outputs */
.lcars-input {{
    background: {self.colors['panel']} !important;
    color: {self.colors['text']} !important;
    border: 2px solid {self.colors['primary']} !important;
    border-radius: 0px 10px 10px 0px !important;
    padding: 10px !important;
}}
.lcars-output {{
    background: linear-gradient(135deg, {self.colors['background']}, {self.colors['panel']}) !important;
    color: {self.colors['text']} !important;
    border: 2px solid {self.colors['success']} !important;
    border-radius: 0px 15px 15px 0px !important;
    padding: 15px !important;
    font-family: 'Courier New', monospace !important;
}}
/* Responsive */
@media (max-width: 768px) {
    .gradio-container { padding: 10px; }
    #lcars_logo { height: 150px !important; width: 150px !important; }
}


/* Code & Thinking blocks */
.lcars-code {{
    background: {self.colors['background']} !important;
    color: {self.colors['success']} !important;
    border: 1px solid {self.colors['success']} !important;
    border-radius: 5px !important;
    font-family: 'Courier New', monospace !important;
}}
.lcars-thinking {{
    background: linear-gradient(135deg, {self.colors['panel']}, #001122) !important;
    border-left: 4px solid {self.colors['info']} !important;
    color: {self.colors['text']} !important;
    padding: 15px !important;
    border-radius: 0px 15px 15px 0px !important;
}}
.lcars-artifact {{
    background: {self.colors['panel']} !important;
    border: 2px solid {self.colors['border']} !important;
    color: {self.colors['text']} !important;
    border-radius: 0px 15px 15px 0px !important;
    padding: 15px !important;
    margin: 10px 0 !important;
}}
/* Headers */
.lcars-header {
  background: var(--lcars-red);
  color: var(--lcars-text);
  border-radius: var(--radius-large);
  padding: 0.75rem 1.5rem;
  text-transform: uppercase;
  font-size: 1.25rem;
}
/* Chatbox */
.chatbox > div {
    background: var(--lcars-dark) !important;
    border-radius: 18px !important;
    border: 2px solid var(--lcars-purple) !important;
}
/* =========================
   Buttons / Tabs / Chips
   ========================= */

button, .lcars-tab, .lcars-chip {
  background: var(--lcars-gold);
  border: none;
  border-radius: var(--radius-large);
  padding: 0.5rem 1rem;
  margin: 0.25rem;
  color: var(--lcars-bg);
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

button:hover, .lcars-tab:hover, .lcars-chip:hover {
  background: var(--lcars-orange);
  color: var(--lcars-text);
}

/* Circular buttons */
button.round, .lcars-chip.round {
  border-radius: var(--radius-full);
  padding: 0.75rem;
  width: 3rem;
  height: 3rem;
  text-align: center;
}

/* =========================
   Containers (Code, JSON, Chat, Artifacts)
   ========================= */

.json-container, .code-container, .chat-container, .artifact-container {
  border-radius: var(--radius-large);
  padding: 1rem;
  margin: 0.5rem 0;
  background: var(--lcars-panel);
  color: var(--lcars-text);
  font-family: monospace;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* =========================
   Artifact / Chat / Code Borders
   ========================= */

.artifact-container {
  border: 3px solid var(--lcars-gold);
  animation: pulse-yellow var(--pulse-speed) infinite;
}

.chat-container {
  border: 3px solid var(--lcars-red);
  animation: pulse-red var(--pulse-speed) infinite;
}

.code-container {
  border: 3px solid var(--lcars-purple);
  animation: pulse-orange var(--pulse-speed) infinite;
}

/* =========================
   Animations
   ========================= */

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 5px var(--lcars-red); }
  50% { box-shadow: 0 0 20px var(--lcars-red); }
}

@keyframes pulse-yellow {
  0%, 100% { box-shadow: 0 0 5px var(--lcars-gold); }
  50% { box-shadow: 0 0 20px var(--lcars-gold); }
}

@keyframes pulse-orange {
  0%, 100% { box-shadow: 0 0 5px var(--lcars-orange); }
  50% { box-shadow: 0 0 20px var(--lcars-orange); }
}

/* Thought styling */
.thought {
    opacity: 0.8;
    font-family: "Courier New", monospace;
    border: 1px rgb(229, 128, 12) solid;
    padding: 10px;
    border-radius: 5px;
    display: none;
    box-shadow: 0 0 20px rgba(255, 153, 0, 0.932);
}
.thought-prompt {
    opacity: 0.8;
    font-family: "Courier New", monospace;
}
/* =========================
   Metadata & Thought Blocks
   ========================= */

.metadata-display, .thought-block {
  background: var(--lcars-blue);
  border-radius: var(--radius-large);
  padding: 0.75rem;
  margin: 0.5rem 0;
  color: var(--lcars-bg);
  font-weight: bold;
}
.metadata-display {
    background: var(--lcars-panel);
    border-left: 4px solid var(--lcars-blue);
    box-shadow: 0 0 20px rgba(255, 153, 0, 0.932);
    padding: 10px;
    border-radius: 5px;
    overflow-y: auto;
    max-height: 300px;
}
.metadata-display .json-container {
    font-family: monospace;
    font-size: 0.9em;
    background: #6b50111a;
}

.primary {
    background: linear-gradient(45deg, var(--lcars-orange), #ffaa33) !important;

    color: hwb(90 7% 5% / 0.102);
    font-family: "Courier New", monospace;
    border: 1px rgb(229, 128, 12) solid;
}
.secondary {
    background: linear-gradient(45deg, var(--lcars-blue), #33aacc) !important;
    color: #6b50111a;
    font-family: "Courier New", monospace;
    border: 1px rgb(229, 128, 12) solid;
    box-shadow: 0 0 20px rgba(255, 153, 0, 0.932);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--lcars-gold);
}
#lcars_logo {
    border-radius: 15px;
    border: 2px solid var(--lcars-orange);
    box-shadow: 0 0 20px rgba(255, 153, 0, 0.932);
}        



.lcars-tab {{
    background: {self.colors['panel']} !important;
    color: {self.colors['text']} !important;
    border: 2px solid {self.colors['primary']} !important;
    border-radius: 0px 10px 0px 0px !important;
}}
.lcars-tab.selected {{
    background: {self.colors['primary']} !important;
    color: {self.colors['background']} !important;
}}
.lcars-panel.lcars-empty {
    text-align: center;
    font-style: italic;
    color: var(--lcars-text-light);
}

.lcars-panel.lcars-error {
    background: #FFE5E5;
    border-color: var(--lcars-rust);
    color: #CC0000;
}










/* Input fields */
.lcars-input input,
.lcars-input textarea {
    background: white !important;
    border: 2px solid var(--lcars-border) !important;
    border-radius: 8px !important;
    color: var(--lcars-text) !important;
    padding: 10px !important;
    font-size: 14px !important;
}

.lcars-input input:focus,
.lcars-input textarea:focus {
    border-color: var(--lcars-accent) !important;
    outline: none !important;
    box-shadow: 0 0 8px rgba(102, 102, 204, 0.3) !important;
}

/* Dropdowns and selects */
.lcars-dropdown select,
.lcars-dropdown input {
    background: white !important;
    border: 2px solid var(--lcars-border) !important;
    border-radius: 8px !important;
    color: var(--lcars-text) !important;
    padding: 8px !important;
}

/* Checkboxes */
.lcars-checkbox label {
    background: var(--lcars-panel) !important;
    border: 2px solid var(--lcars-border) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    margin: 4px !important;
    transition: all 0.2s ease !important;
}

.lcars-checkbox label:hover {
    background: var(--lcars-lavender) !important;
    border-color: var(--lcars-accent) !important;
}

/* Radio buttons */
.lcars-radio label {
    background: var(--lcars-panel) !important;
    border: 2px solid var(--lcars-border) !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    margin: 4px !important;
}

/* Display fields */
.lcars-display input {
    background: var(--lcars-panel) !important;
    border: 2px solid var(--lcars-border) !important;
    border-radius: 8px !important;
    color: var(--lcars-text) !important;
    font-family: 'Courier New', monospace !important;
    padding: 10px !important;
}

/* Accordions */
.lcars-accordion {
    background: var(--lcars-panel) !important;
    border: 2px solid var(--lcars-border) !important;
    border-radius: 12px !important;
    margin: 8px 0 !important;
}

.lcars-accordion summary {
    background: linear-gradient(135deg, var(--lcars-orange), var(--lcars-peach)) !important;
    color: var(--lcars-text) !important;
    font-weight: bold !important;
    padding: 12px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
}

/* Participant Cards & Collapsible Layout */
.lcars-participants-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* Base Card Styles */
.lcars-collapsible-card {
    border: 1px solid #444;
    border-radius: 8px;
    background: #1a1a1a;
    color: #fff;
    overflow: hidden;
    transition: all 0.3s ease;
}

.lcars-collapsible-card.collapsed .lcars-participant-expanded {
    display: none;
}

.lcars-collapsible-card.expanded .lcars-participant-collapsed {
    display: none;
}

.lcars-collapsible-card.expanded .lcars-collapse-icon {
    transform: rotate(90deg);
}

/* Card Headers */
.lcars-participant-header {
    background: #3366cc;
    color: white;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-bottom: 2px solid #ffcc00;
    transition: background 0.2s ease;
}

.lcars-participant-header:hover {
    background: #2a55a8;
}

.lcars-participant-name {
    font-weight: bold;
    font-size: 1.1em;
}

.lcars-collapse-icon {
    transition: transform 0.3s ease;
    font-size: 0.8em;
}

/* Badges */
.lcars-badge-manager {
    background: #ffcc00;
    color: #000;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
}

.lcars-badge-agent {
    background: #00cc66;
    color: #000;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 2px 4px rgba(0, 204, 102, 0.3);
}

.lcars-badge-human {
    background: #9966cc;
    color: #fff;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 2px 4px rgba(153, 102, 255, 0.3);
}

/* Card Content Sections */
.lcars-participant-collapsed,
.lcars-participant-expanded {
    padding: 15px;
}

.lcars-participant-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lcars-info-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
}

.lcars-info-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.lcars-section-title {
    color: #ffcc00;
    font-weight: bold;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

/* Info Rows */
.lcars-info-row {
    display: flex;
    margin-bottom: 8px;
    line-height: 1.4;
    color: var(--lcars-text-light);
}

.lcars-info-row.full-width {
    flex-direction: column;
}

.lcars-label {
    color: #ffcc00;
    font-weight: bold;
    min-width: 120px;
    margin-right: 10px;
    font-size: 0.9em;
}

/* Lists */
.lcars-goals-list li {
    margin-bottom: 5px;
    line-height: 1.4;
    color: #e0e0e0;
}

/* Template Styling */
.lcars-template-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #444;
    border-radius: 4px;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.lcars-template-preview {
    color: #e0e0e0;
    font-family: monospace;
    font-size: 0.85em;
    line-height: 1.4;
    white-space: pre-wrap;
}

.lcars-template-truncated {
    color: #ffcc00;
    font-size: 0.8em;
    font-style: italic;
    margin-top: 8px;
}

.lcars-no-template {
    color: #888;
    font-style: italic;
}

/* More Skills Indicator */
.lcars-more-skills {
    color: #ffcc00;
    font-size: 0.8em;
    font-style: italic;
    margin-top: 5px;
    display: block;
}

/* Agent Details Panel */
.lcars-agent-details {
    background: white;
    border: 3px solid var(--lcars-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(102, 102, 204, 0.2);
}

.lcars-agent-header {
    background: linear-gradient(135deg, var(--lcars-blue), var(--lcars-lavender));
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lcars-agent-name {
    font-size: 20px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.lcars-status-connected {
    background: #66CC66;
    color: white;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: bold;
}

.lcars-status-available {
    background: var(--lcars-orange);
    color: white;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: bold;
}

.lcars-agent-body {
    padding: 18px;
}

.lcars-detail-row {
    margin: 12px 0;
    display: flex;
    gap: 10px;
}

.lcars-detail-label {
    font-weight: bold;
    color: var(--lcars-accent);
    min-width: 120px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

.lcars-detail-value {
    color: var(--lcars-text);
    flex: 1;
}

.lcars-model-badge {
    background: var(--lcars-panel);
    color: var(--lcars-accent);
    padding: 4px 10px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.lcars-detail-section {
    margin: 16px 0;
    padding: 12px;
    background: var(--lcars-panel);
    border-radius: 8px;
}

.lcars-skills-list {
    line-height: 2;
}

.lcars-skill-item {
    color: var(--lcars-text-light);
    font-size: 13px;
    margin-left: 8px;
}

.lcars-expertise {
    color: var(--lcars-text-light);
    font-size: 13px;
    line-height: 1.8;
}

/* Pattern Details */
.lcars-pattern-details {
    border: 1px solid #444;
    border-radius: 8px;
    margin: 10px 0;
    background: #1a1a1a;
    color: #fff;
}

.lcars-pattern-header {
    background: #3366cc;
    color: white;
    padding: 12px 15px;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
    border-bottom: 2px solid #ffcc00;
}

.lcars-pattern-body {
    padding: 15px;
}

.lcars-pattern-section {
    margin-bottom: 20px;
    display: block;
}

.lcars-pattern-section:last-child {
    margin-bottom: 0;
}

.lcars-pattern-label {
    font-weight: bold;
    color: #ffcc00;
    margin-bottom: 5px;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lcars-pattern-text {
    color: #fa0404;
    line-height: 1.5;
}

/* Log display */
.lcars-log-panel {
    background: #00008734;
    color: #050505;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    border-radius: 8px;
    padding: 12px;
    max-height: 500px;
    overflow-y: auto;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.lcars-log-panel.lcars-empty {
    color: #999;
    text-align: center;
    font-style: italic;
}

.lcars-log-entries {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lcars-log-entry {
    padding: 6px 10px;
    border-left: 3px solid transparent;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.lcars-log-entry:hover {
    background: rgba(255, 255, 255, 0.05);
}

.lcars-log-info {
    border-left-color: #5c635cda;
    color: #1636e7;
}

.lcars-log-error {
    border-left-color: #202120;
    color: #1636e7;
}

.lcars-log-level {
    font-weight: bold;
    margin-right: 8px;
}

/* Chatbot styling */
.lcars-chatbot {
    border: 3px solid var(--lcars-border) !important;
    border-radius: 12px !important;
    background: white !important;
}

.gradio-container {
    background-color: rgba(243, 48, 4, 0.85);
    background-image: url("https://huggingface.co/LeroyDyer/ImageFiles/resolve/main/LCARS_PANEL.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
}
.tab-nav button {
    background: var(--lcars-panel) !important;
    border: 2px solid var(--lcars-border) !important;
    color: var(--lcars-text) !important;
    border-radius: 8px 8px 0 0 !important;
    margin-right: 4px !important;
    font-weight: bold !important;
}

.tab-nav button.selected {
    background: linear-gradient(135deg, var(--lcars-orange), var(--lcars-peach)) !important;
    color: var(--lcars-text) !important;
    border-bottom: none !important;
}

/* Ensure vertical stacking of participants */
.lcars-participants-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    align-items: stretch !important; /* Ensures full width alignment */
}

/* Make sure each participant card respects container flow */
.lcars-participant-card-manager,
.lcars-participant-card-agent,
.lcars-participant-card-human {
    display: flex !important;
    flex-direction: column !important;
    break-inside: avoid !important; /* Prevents awkward splits in print/PDF */
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: white !important;
    color: #2D2D5F !important;
}
.lcars-content {
    background: rgba(0, 0, 0, 0.95) !important;
    border: 2px solid #ff9900 !important;
    color: #ffffff !important;
    font-family: 'Times New Roman', serif !important;
    padding: 20px !important;
    height: 600px !important;
    overflow-y: auto !important;
}
.gr-button:hover {
    background: linear-gradient(45deg, #ffcc00, #ff9900) !important;
    box-shadow: 0 0 15px rgba(255, 153, 0, 0.8) !important;
}
.block {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid #ff9900 !important;
    border-radius: 0px !important;
}
/* Scrollbar */
::-webkit-scrollbar {{ width: 12px; }}
::-webkit-scrollbar-track {{ background: {self.colors['background']}; }}
::-webkit-scrollbar-thumb {{
    background: {self.colors['primary']};
    border-radius: 0px 10px 10px 0px;
}}
::-webkit-scrollbar-thumb:hover {{ background: {self.colors['accent']}; }}


.lcars-button,
button[variant="primary"] {
    background: linear-gradient(135deg, var(--lcars-orange), var(--lcars-peach)) !important;
    color: var(--lcars-text) !important;
}

.lcars-button-add {
    background: linear-gradient(135deg, var(--lcars-blue), var(--lcars-lavender)) !important;
    color: white !important;
}

.lcars-button-send,
.lcars-button-task {
    background: linear-gradient(135deg, var(--lcars-purple), var(--lcars-lavender)) !important;
    color: white !important;
}

.lcars-button-remove {
    background: linear-gradient(135deg, var(--lcars-rust), #FF9999) !important;
    color: white !important;
}

.lcars-button-secondary,
.lcars-button-create {
    background: linear-gradient(135deg, var(--lcars-gold), var(--lcars-tan)) !important;
    color: var(--lcars-text) !important;
}
.gradio-container {{background-color: rgba(243, 48, 4, 0.85);
            background: linear-gradient(135deg, {self.colors['background']}, #001122) !important;
            color: {self.colors['text']} !important;
            font-family: 'Courier New', monospace !important;
            background-image: url("https://huggingface.co/LeroyDyer/ImageFiles/resolve/main/LCARS_PANEL.png");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 20px;
        }}
"""


with gr.Blocks(
        title="🚀 L.C.A.R.S - Local Computer Advanced Reasoning System",  
        theme='Yntec/HaleyCH_Theme_Orange_Green',css=custom_css
    ) as demo:
        # Header
       # State management
        history_state = gr.State([])

        
        # ============================================
        # HEADER SECTION 
        # ============================================
        with gr.Row():   
            with gr.Column(scale=1):
                gr.Image(
                    value="https://cdn-avatars.huggingface.co/v1/production/uploads/65d883893a52cd9bcd8ab7cf/tRsCJlHNZo1D02kBTmfy9.jpeg", 
                    elem_id="lcars_logo", 
                    height=200, show_download_button=False,container=False,
                    width=200
                )                 
            with gr.Column(scale=3):
                gr.HTML(f"""
            <div style='text-align: center; padding: 20px; font-size: 24px; font-weight: bold; margin-bottom: 20px;
                        border-radius: 0px 0px 15px 15px;'>
                🖥️ L.C.A.R.S - Local Computer Advanced Reasoning System
                <br><small style='font-size: 14px;'>USS Enterprise • NCC-1701-D • Starfleet Command</small>
            </div>
            """)        
        
                  
        # ============================================
        # MAIN INTERFACE TABS
        # ============================================
        with gr.Tabs():
            
            # ============================================
            # L.C.A.R.S MAIN CHAT TAB (Enhanced)
            # ============================================
            with gr.TabItem(label="🤖 L.C.A.R.S Chat Intelligence", elem_id="lcars_main_tab"):

                with gr.Row():
                    # LEFT COLUMN - INPUT & CONTROLS
                    with gr.Column(scale=2):
                        gr.HTML(f"<div style=' padding: 10px; font-weight: bold;'>🧠 REASONING PROCESS</div>")   
                        with gr.Accordion(label="🧠 Current AI Reasoning", open=False): 
                            thinking_html = gr.HTML(label="AI Thought Process", show_label=True)
                        
                        # Main chat input
                        message = gr.Textbox(
                            show_copy_button=True, 
                            lines=6, 
                            label="💬 Ask L.C.A.R.S", 
                            placeholder="Enter your message to the Local Computer Advanced Reasoning System..."
                        )
                        
                        # Control buttons
                        with gr.Row():
                            submit_btn = gr.Button("🚀 Ask L.C.A.R.S", variant="huggingface", size="lg")
                            clear_btn = gr.Button("🗑️ Clear", variant="huggingface")
                        
                        # Audio controls
                        with gr.Row():
                            speak_response = gr.Checkbox(label="🔊 Speak Response", value=False)
                            speak_thoughts = gr.Checkbox(label="🧠 Speak Reasoning", value=False)
                         
                        #  Quick Actions
                        with gr.Accordion(label="⚡ Utilitys Quick Actions", open=False):
                            with gr.Row():
                                artifact_id_input = gr.Textbox(
                                    label="Artifact ID", 
                                    placeholder="Artifact ID (0, 1, 2)",
                                    scale=2
                                )
                                execute_artifact_btn = gr.Button("▶️ Execute Artifact", variant="huggingface")
                            
                            with gr.Row():
                                batch_artifact_ids = gr.Textbox(
                                    label="Batch Execute IDs",
                                    placeholder="e.g., 0,1 or 0-5",
                                    scale=2
                                )
                                batch_execute_btn = gr.Button("⚡Batch Execute", variant="huggingface")
                    
                    # MIDDLE COLUMN - RESPONSES
                    with gr.Column(scale=2):
                        gr.HTML(f"<div style=font-weight: bold;'>SYSTEM RESPONSE</div>")
                        
                        with gr.Accordion(label="🤖 Library Computer Advanced Reasoning System", open=True):
                            plain_text_output = gr.Markdown(
                                container=True, 
                                show_copy_button=True, 
                                label="AI Response", 
                                height=400
                            )
                        
                        execution_output = gr.HTML(f"<div style=font-weight: bold;'>🧠 Execution Results</div>")
                        gr.HTML(f"<div style= padding: 10px; font-weight: bold;'>Current Session</div>")   
                                                
                        # Enhanced Chat History Display
                        with gr.Accordion(label="📜 Session Chat History", open=False):
                            chat_history_display = gr.HTML(label="Full Session History", show_label=True)
                        # Artifacts Display
                        with gr.Accordion(label="📊 Current Session Artifacts", open=False):
                            artifacts_display = gr.HTML(label="Generated Artifacts Timeline", show_label=True)
                    
                    # RIGHT COLUMN - ENHANCED CODE ARTIFACTS
                    with gr.Column(scale=2):   
                        gr.HTML(f"<div style=font-weight: bold;'>🧱 ENHANCED CODE ARTIFACTS WORKSHOP</div>")   
                        
                        with gr.Accordion(label="🧱 Code Artifacts Workshop", open=True):
                            # Enhanced Code Editor with save functionality
                            code_artifacts = gr.Code(
                                language="python", 
                                label="Generated Code & Artifacts",
                                lines=10,
                                interactive=True,
                                autocomplete=True,
                                show_line_numbers=True,
                                elem_id="code_editor"
                            )
                            
                            # Enhanced Artifact Controls
                            with gr.Row():
                                artifact_description = gr.Textbox(
                                    label="Artifact Description",
                                    placeholder="Brief description of the code...",
                                    scale=2
                                )
                                artifact_language = gr.Dropdown(
                                    choices=["python", "javascript", "html", "css", "bash", "sql", "json"],
                                    value="python",
                                    label="Language",
                                    scale=1
                                )
                            
                            with gr.Row():
                                ExecuteCodePad_btn = gr.Button("▶️ Execute Code", variant="huggingface")
                                CreateArtifact_btn = gr.Button("🧱 Save Artifact", variant="huggingface")
                            
                            with gr.Row():
                                LoadArtifact_btn = gr.Button("📂 Load Artifact", variant="huggingface")
                                Load_artifact_id_input = gr.Textbox(
                                    label="Artifact ID", 
                                    placeholder="ID to Load",
                                    scale=1
                                )
                        
                            
            with gr.TabItem("🛠️ Task Enabled AI"):
                        gr.HTML(f"<div style= padding: 10px; font-weight: bold;'>🛠️ Function Tools</div>")
                        with gr.Row():
                            with gr.Column():
                                tool_model_name = gr.Textbox(
                                    label="Tool-Capable Model",
                                    value="leroydyer/lcars/qwen3-0.6b-q4_k_m.gguf"
                                )
                                tool_prompt = gr.Textbox(
                                    label="Tool Request",
                                    value="What is the result of 123 + 456? Use the add tool.",
                                    lines=4
                                )
                                tool_call_btn = gr.Button("🛠️ Execute Tool Call", variant="huggingface")
                            
                            with gr.Column():
                                tool_output = gr.Textbox(label="Tool Execution Results", lines=15)

            with gr.TabItem("💻 System Tools", elem_id="system_tab"):
                gr.HTML(f"<div style= padding: 10px; font-weight: bold;'>💻 System Tools</div>")
                with gr.Tabs():

                    # Tab 1: Code Fragment Analysis
                    with gr.TabItem("📝 Code Fragment"):
                       gr.Markdown("### Analyze a Python code snippet")                 
                       with gr.Row():
                            with gr.Column(scale=2):
                               code_input = gr.Code(
                               language="python",
                               label="Python Code",
                               lines=15
                           )
                               fragment_name = gr.Textbox(
                               label="Fragment Name (optional)",
                               placeholder="my_code_snippet",
                               value="code_fragment"
                           )
                               analyze_fragment_btn = gr.Button("🔍 Analyze Code Fragment", variant="huggingface")
                            with gr.Column(scale=3):
                              fragment_output = gr.Markdown(label="### 🔍 Analysis Results")
                              code_output = gr.Markdown("Results will appear here")                 
                              fragment_download = gr.File(label="📥 Download Report")
             
                    # Tab 2: Single File Analysis
                    with gr.TabItem("📄 Single File"):
                        gr.Markdown("### Analyze a single Python file")
                
                        with gr.Row():
                            with gr.Column():
                                file_input = gr.File(
                                 label="Upload Python File",
                                 file_types=[".py"],
                                 type="filepath"
                                  )
                                analyze_file_btn = gr.Button("🔍 Analyze File", variant="huggingface")
                      
                        with gr.Column(scale=2):
                            gr.Markdown("### 🔍 Analysis Results")
                            single_file_output = gr.Markdown("Results will appear here")
    
                            file_output = gr.Markdown(label="Analysis Results")
                            file_download = gr.File(label="📥 Download Report")
            
                    # Tab 3: Directory Analysis
                    with gr.TabItem("📁 Directory"):
                        with gr.Row():
                            gr.HTML(f"""
            <div style='text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 20px;
                        border-radius: 0px 0px 15px 15px;'>
                🖥️ Analyze an entire directory/project

            </div>
            """)                 
                   
                        with gr.Column():
                            gr.HTML(f"""
            <div style='text-align: center; padding: 20px; background: linear-gradient(90deg,; font-size: 24px; font-weight: bold; margin-bottom: 20px;
                        border-radius: 0px 0px 15px 15px;'>
                <br><small style='font-size: 14px;'>ℹ️ Directory Scanning Tips 

                        - Default excluded dirs: `__pycache__`, `.git`, `.venv`
                        </small></br>
            </div>
            """)     
                            dir_input = gr.Textbox(
                            label="Directory Path",
                            placeholder="/path/to/your/project",
                            lines=1
                        )
                            with gr.Row():
                                recurse_check = gr.Checkbox(label="Include subdirectories", value=True)
                                analyze_dir_btn = gr.Button("🔍 Analyze Directory", variant="huggingface")
                                exclude_dirs_input = gr.Textbox(
                                label="Directories to Exclude (comma separated)",
                                placeholder="tests, docs, examples",
                                lines=1
                            )                                        
                        with gr.Column():
                            gr.Markdown("### 📊 Scan Summary")
                            summary_output = gr.Markdown("Scan results will appear here")
                        with gr.Column():
                            gr.Markdown("### 🔍 Detailed Results")
                            detailed_output = gr.Markdown("Detailed errors and fixes will appear here")   
                            dir_output = gr.Markdown(label="Analysis Results")
                        dir_download = gr.File(label="📥 Download Report")
      
            
            with gr.TabItem(label="📊 Enhanced Session & Artifact Management"):
                with gr.Row():
                    # Session Management Column
                    with gr.Column():
                        gr.HTML(f"<div style= padding: 8px; font-weight: bold;'>📜 SESSION MANAGEMENT</div>")
                        
                        session_status = gr.Textbox(label="Session Status", value="Ready", interactive=False)
                        
                        with gr.Row():
                            session_name_input = gr.Textbox(
                                label="Session Name",
                                placeholder="Leave empty for auto-naming (NewSession1, NewSession2...)",
                                scale=2
                            )
                            merge_session_checkbox = gr.Checkbox(
                                label="Merge Mode",
                                value=False,
                                info="Merge with current session instead of replacing"
                            )
                        
                        with gr.Row():
                            save_session_btn = gr.Button("💾 Save Session", variant="huggingface")
                            load_session_btn = gr.Button("📂 Load Session", variant="huggingface")
                        
                        session_dropdown = gr.Dropdown(
                            label="Available Sessions",
                            choices=["none"],
                            interactive=True,
                            info="Select session to load"
                        )
                        
                        with gr.Row():
                            load_all_sessions_btn = gr.Button("📚 Load All Sessions", variant="huggingface")
                            refresh_sessions_btn = gr.Button("🔄 Refresh Sessions", variant="huggingface")
                    
                    # Artifact Management Column  
                    with gr.Column():
                        gr.HTML(f"<div style= padding: 8px; font-weight: bold;'>🧱 ARTIFACT MANAGEMENT</div>")
                        
                        artifact_status = gr.Textbox(label="Artifact Status", value="Ready", interactive=False)
                        
                        with gr.Row():
                            artifact_session_input = gr.Textbox(
                                label="Artifact Session Name",
                                placeholder="Leave empty to load all artifacts",
                                scale=2
                            )
                            merge_artifacts_checkbox = gr.Checkbox(
                                label="Merge Artifacts",
                                value=True,
                                info="Add to current artifacts instead of replacing"
                            )
                        
                        with gr.Row():
                            load_artifacts_btn = gr.Button("📂 Load Artifacts", variant="huggingface")
                            #save_artifacts_btn = gr.Button("💾 Save Artifacts", variant="huggingface")
                        
                        artifact_dropdown = gr.Dropdown(
                            label="Available Artifact Files",
                            choices=["none"],
                            interactive=True,
                            info="Select artifact file to load"
                        )
                        
                        with gr.Row():
                            load_all_artifacts_btn = gr.Button("📚 Load All Artifacts", variant="huggingface")
                            refresh_artifacts_btn = gr.Button("🔄 Refresh Artifacts", variant="huggingface")


            with gr.TabItem(label="📊 Session & Artifact Browser"):
                with gr.Row():
                    session_info = gr.JSON(label="Session Details", value=[], elem_classes=["metadata-display"])
                    artifact_info = gr.JSON(label="Artifact Details", value=[], elem_classes=["metadata-display"])









            with gr.Tab(label="📂 Directory to JSON Extractor", elem_id="directory_extractor_tab"):
                
                def ExtractDirectoryToJson(directory_path="dump", extension='.txt', json_file_path="_Data.json"):
                    def extract_data_from_files(directory_path, Extension='.md', max_seq_length=2048):
                        import os
                        import json
                        Json_list = []

                        # Check if directory exists
                        if not os.path.exists(directory_path):
                            return f"Error: Directory '{directory_path}' does not exist."

                        # Check if directory is empty
                        if not os.listdir(directory_path):
                            return f"Error: Directory '{directory_path}' is empty."

                        # Iterate over each file in the directory
                        for file_name in os.listdir(directory_path):
                            if file_name.endswith(Extension):
                                file_path = os.path.join(directory_path, file_name)
                                try:
                                    with open(file_path, 'r', encoding='utf-8') as file:
                                        chunk = file.read()
                                        chunks = [chunk[i:i+max_seq_length] for i in range(0, len(chunk), max_seq_length)]
                                        for text_seg in chunks:
                                            Json_list.append({'DocumentTitle': file_name, 'Text': text_seg})
                                except Exception as e:
                                    return f"Error reading file {file_name}: {str(e)}"
                        return Json_list

                    def save_to_json(data, json_file):
                        import os
                        import json
                        try:
                            with open(json_file, 'w') as f:
                                json.dump(data, f, indent=4)
                            return True, None
                        except Exception as e:
                            return False, str(e)

                    # Extract file contents
                    _data = extract_data_from_files(directory_path, Extension=extension)

                    # Check if we got an error message instead of data
                    if isinstance(_data, str):
                        return _data

                    # Save data to JSON file
                    success, error = save_to_json(_data, json_file_path)
                    if success:
                        return f"File extraction completed. JSON file saved to: {json_file_path}"
                    else:
                        return f"Error saving JSON file: {error}"

                # Gradio Interface
                def process_directory(directory_path, extension, json_filename):
                    # Validate inputs
                    if not directory_path:
                        return "Please select a directory"
                    if not extension:
                        return "Please specify a file extension"
                    if not json_filename:
                        json_filename = "_Data.json"

                    # Ensure extension starts with a dot
                    if not extension.startswith('.'):
                        extension = '.' + extension

                    # Call the main function
                    result = ExtractDirectoryToJson(
                        directory_path=directory_path,
                        extension=extension,
                        json_file_path=json_filename
                    )
                    return result

                
                
                FileTypes=['.txt','.md','.json','.py']

                gr.Markdown("## Directory to JSON Extractor")
                gr.Markdown("Extract text from files in a directory and save as JSON")

                with gr.Row():
                    directory_input = gr.Textbox(label="Directory Path", placeholder="Path to directory containing files")
                    directory_btn = gr.Button("Browse")

                with gr.Row():
                    extension_input = gr.Dropdown(label="File Extension",choices=FileTypes, interactive=True)
                    json_output = gr.Textbox(label="Output JSON Filename", value="_Data.json")

                submitProcessDirectory_btn = gr.Button("Process Directory")
                output_text = gr.JSON(label="Output")



            # Main Crawling Tab
            with gr.Tab("🔍 Crawl Repository"):
                with gr.Row():
                    with gr.Column(scale=1):
                        gr.Markdown("## 🎯 Source Configuration")
                        
                        source_type = gr.Dropdown(
                            choices=["GitHub", "Local", "Hugging Face"],
                            label="Source Type",
                            value="GitHub"
                        )
                        
                        # GitHub settings
                        with gr.Group(visible=True) as github_group:
                            repo_url = gr.Textbox(
                                label="GitHub Repository URL",
                                placeholder="https://github.com/owner/repo",
                                value=""
                            )
                            github_token = gr.Textbox(
                                label="GitHub Token (optional)",
                                type="password",
                                placeholder="ghp_..."
                            )
                        
                        # Local settings
                        with gr.Group(visible=False) as local_group:
                            local_path = gr.Textbox(
                                label="Local Directory Path",
                                placeholder="/path/to/directory",
                                value=""
                            )
                        
                        # Hugging Face settings
                        with gr.Group(visible=False) as hf_group:
                            hf_repo_id = gr.Textbox(
                                label="Hugging Face Repository ID",
                                placeholder="microsoft/DialoGPT-medium",
                                value=""
                            )
                            hf_repo_type = gr.Dropdown(
                                choices=["model", "dataset", "space"],
                                label="Repository Type",
                                value="model"
                            )
                            hf_token = gr.Textbox(
                                label="Hugging Face Token (optional)",
                                type="password",
                                placeholder="hf_..."
                            )
                        
                        gr.Markdown("## ⚙️ Crawling Options")
                        
                        max_file_size = gr.Number(
                            label="Max File Size (MB)",
                            value=1,
                            minimum=0.1,
                            maximum=100
                        )
                        
                        include_patterns = gr.Textbox(
                            label="Include Patterns (comma-separated)",
                            placeholder="*.py, *.js, *.md",
                            value=""
                        )
                        
                        exclude_patterns = gr.Textbox(
                            label="Exclude Patterns (comma-separated)",
                            placeholder="*.pyc, __pycache__/*, .git/*",
                            value=""
                        )
                        
                        use_relative_paths = gr.Checkbox(
                            label="Use Relative Paths",
                            value=True
                        )
                        
                        crawl_btn = gr.Button("🚀 Start Crawling", variant="primary", size="lg")
                    
                    with gr.Column(scale=2):
                        gr.Markdown("## 📊 Results")
                        
                        results_summary = gr.Textbox(
                            label="Crawling Summary",
                            lines=8,
                            interactive=False
                        )
                        
                        file_list = gr.Dataframe(
                            label="Files Found",
                            headers=["File Path", "Size (chars)", "Type", "Lines"],
                            interactive=False,
                            wrap=True
                        )
            
            # File Browser Tab
            with gr.Tab("📁 File Browser"):
                with gr.Row():
                    with gr.Column(scale=1):
                        gr.Markdown("## 📂 File Selection")
                        
                        selected_file = gr.Dropdown(
                            label="Select File",
                            choices=[],
                            interactive=True,
                            allow_custom_value=True
                        )
                        
                        load_btn = gr.Button("📖 Load File", variant="secondary")
                        save_btn = gr.Button("💾 Save Changes", variant="primary")
                        
                        save_status = gr.Textbox(
                            label="Status",
                            lines=2,
                            interactive=False
                        )
                    
                    with gr.Column(scale=3):
                        gr.Markdown("## ✏️ File Editor")
                        
                        file_content = gr.Textbox(
                            label="File Content",
                            lines=25,
                            interactive=True,
                            show_copy_button=True,
                            placeholder="Select a file to view its content..."
                        )
            
            # Export Tab
            with gr.Tab("📤 Export"):
                with gr.Row():
                    with gr.Column():
                        gr.Markdown("## 💾 Export Options")
                        
                        export_format = gr.Dropdown(
                            choices=["JSON", "File List", "Summary Report"],
                            label="Export Format",
                            value="JSON"
                        )
                        
                        export_btn = gr.Button("📋 Generate Export", variant="primary")
                        
                        export_output = gr.Textbox(
                            label="Export Output",
                            lines=20,
                            show_copy_button=True,
                            interactive=False
                        )
            with gr.Tab("🧠 Task Planning"):
                    
                        with gr.Column(scale = 1): 
                        
                            with gr.Column():
                                with gr.Row():                                      
                                    sub_task_output = gr.Textbox(lines=4,show_label=True,container=False,label="Sub Tasks")
                            gr.HTML(f"<div style= padding: 10px; font-weight: bold;'>Task Strategy and Planning</div>") 
                            with gr.Accordion("Task Graph", open=False):
                                        task_graph_img = gr.Image(label="Task Reasoning Graph")
                                        with gr.Row():
                                            graph_btn = gr.Button("Visualize Task Graph",variant="huggingface")
                            with gr.Row():
                                with gr.Column():           
                                    task_input = gr.Textbox(lines = 10,label="Enter Task Description",placeholder = "Write a BPE Tokenizer in VB.NET")


                                with gr.Column():   
                                    gr.HTML(f"<div style= padding: 10px; font-weight: bold;'>Generated Code</div>")                             

                                    with gr.Accordion("Generated Code", open=False):

                                        task_code_output = gr.Code(show_label=True,container=True,label="Task Code Generated",language='python')

                            with gr.Row():
                                    complexity_btn = gr.Button("Analyze Complexity", variant="huggingface")
                                    decompose_btn = gr.Button("Decompose Task", variant="huggingface")
                                    workflow_btn = gr.Button("Generate Workflow", variant="huggingface")
                            with gr.Row():
                                    GeneratePlan_btn = gr.Button("Generate plan", variant="huggingface")
                                    GenerateTaskCode_btn = gr.Button("Generate code", variant="huggingface")

                        with gr.Row(): 
                        
                            with gr.Tabs(): 

                                with gr.Tab("Complexity"):
                                    gr.HTML(f"<div style= padding: 10px; font-weight: bold;'>Task Complexity</div>")       
                               
                                    complexity_output = gr.Markdown(show_label=True,max_height=600,container=True,show_copy_button = True,label="Task Complexity")
   
                                with gr.Tab("Planning"):
                                    gr.HTML(f"<div style= padding: 10px; font-weight: bold;'>Sub Task Planning</div>")                            
                                
                                    decompose_output = gr.Markdown(show_label=True,container=True,show_copy_button = True,label="Task Analysis")

                                with gr.Tab("WorkFlow"):
                                    gr.HTML(f"<div style= padding: 10px; font-weight: bold;'>Task Work-Flow</div>")                    
                                
                                    workflow_output = gr.Markdown(show_label=True,container=True,label="Task WorkFlow")

     



        # Footer
        gr.HTML(f"""
        <div style='text-align: center; padding: 10px; margin-top: 20px;  font-size: 12px;
                   '>
            🚀 L.C.A.R.S - Enhanced Local Computer Advanced Reasoning System v3.0 • Starfleet Command • Computer Core Online
        </div>
        """)



if __name__ == "__main__":
    demo.launch()