Hugging Face's logo

Spaces:
KikoCis
/
elffuss-code
Running

App Files Community
1
elffuss-code
File size: 7,444 Bytes
f16878d
13508be
b30b7c5
 
 
13508be
b30b7c5
 
 
 
 
 
 
 
 
 
 
 
13508be
b30b7c5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6b45f01
b30b7c5
f16878d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Elffuss Code — a VS Code-style IDE with an AI soul, in your browser</title>
<meta property="og:type" content="website">
<meta property="og:site_name" content="Elffuss">
<meta property="og:title" content="Elffuss Code — a VS Code-style IDE with an AI soul, in your browser">
<meta property="og:description" content="A web IDE with an AI coding elf that reads, searches and edits your project. Open a folder and code with a local model on WebGPU — nothing leaves your machine.">
<meta property="og:url" content="https://elffuss-code.utopiaia.com/">
<meta property="og:image" content="https://elffuss-code.utopiaia.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Elffuss Code — a VS Code-style IDE with an AI soul, in your browser">
<meta name="twitter:description" content="A web IDE with an AI coding elf that reads, searches and edits your project. Open a folder and code with a local model on WebGPU — nothing leaves your machine.">
<meta name="twitter:image" content="https://elffuss-code.utopiaia.com/og.png">
<meta name="description" content="Open a local folder and code with Elffuss: a web IDE plus an AI agent that runs on your own GPU (WebGPU). Nothing leaves your machine.">
<link rel="icon" href="img/elffuss-code.svg">
<link rel="stylesheet" href="css/code.css">
<!-- import map: la ciudad 3D (VibeCodeViewer vendorizado en js/vcc) usa import 'three' -->
<script type="importmap">
{ "imports": {
  "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
  "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
}}
</script>
</head>
<body>

<!-- landing: primero se abre la carpeta -->
<div id="landing">
  <div class="l-inner">
    <img src="img/elffuss-code.svg" alt="Elffuss Code" class="hero">
    <h1><b>Elffuss</b> Code</h1>
    <p class="tag">Abre tu carpeta de código y programa con una elfa al lado.<br>
      Editor tipo VS Code + agente <b>en tu navegador</b>. Nada sale de tu máquina. 😉</p>
    <button id="open-project">📁 Abrir carpeta de código</button>
    <button id="reopen-project" class="ghost" hidden></button>
    <div id="resume-clone" class="resume-clone" hidden>
      <span class="rc-text"></span>
      <button id="resume-clone-btn">Reanudar</button>
      <button id="discard-clone-btn" class="ghost">Descartar</button>
    </div>
    <div class="clone-row">
      <span class="clone-or">o</span>
      <input id="clone-url" type="text" placeholder="pega la URL de un repo público (GitHub/Bitbucket)…" autocomplete="off" spellcheck="false">
      <button id="clone-btn">Descargar y abrir</button>
    </div>
    <p id="clone-status" class="mini clone-status" hidden></p>
    <p class="mini">Chrome/Edge · File System Access · modelo local WebGPU</p>
  </div>
</div>

<!-- IDE -->
<div id="ide" hidden>
  <header>
    <div class="brand"><img src="img/elffuss-code.svg" alt=""><b>Elffuss Code</b>
      <span id="project-name" class="proj"></span><span id="build" class="proj">__BUILD__</span></div>
    <nav id="menubar">
      <button data-menu="file">File</button>
      <button data-menu="edit">Edit</button>
      <button data-menu="view">View</button>
      <button data-menu="git">Git</button>
    </nav>
    <div class="controls">
      <button id="git-branch" class="chip" title="rama actual" hidden></button>
      <span id="model-dot" class="dot off" title="modelo"></span>
      <select id="model-select" hidden></select>
      <button id="btn-history" class="ghost icon-btn" title="Historial de conversaciones"></button>
      <button id="btn-settings" class="ghost icon-btn" title="Ajustes, modelo y API keys"></button>
    </div>
  </header>
  <div id="settings-panel" hidden></div>
  <div id="topmenu" hidden></div>
  <div id="palette" hidden>
    <input id="pal-input" autocomplete="off" spellcheck="false"
      placeholder="Buscar archivos por nombre (: para ir a línea, @ para símbolo, &gt; para comandos)">
    <div id="pal-list"></div>
  </div>
  <main>
    <nav id="activity">
      <button id="act-files" class="on" title="Explorador"></button>
      <button id="act-search" title="Buscar (Cmd/Ctrl+P)"></button>
      <button id="act-arch" title="Arquitectura (grafo de dependencias)"></button>
      <button id="act-city" title="Ciudad 3D"></button>
      <button id="act-term" title="Terminal (Ctrl+`)"></button>
      <button id="act-skills" title="Skills"></button>
      <button id="act-settings" title="Ajustes y modelo"></button>
      <img src="img/elffuss-code.svg" alt="Elffuss" title="Elffuss Code">
    </nav>
    <aside id="sidebar">
      <div id="explorer-head">EXPLORER<span id="explorer-proj"></span></div>
      <div id="tree"></div>
    </aside>
    <section id="editor-wrap">
      <div id="tabs-bar"></div>
      <div id="editor"></div>
      <div id="view-overlay" hidden>
        <button id="view-close" title="cerrar">✕</button>
        <div id="view-body"></div>
      </div>
      <div id="terminal-panel" hidden>
        <div id="term-resize" title="arrastra para redimensionar"></div>
        <div id="term-head">
          <span class="term-title">TERMINAL</span>
          <span id="term-caps"></span>
          <button id="term-clear" class="term-btn" title="limpiar">limpiar</button>
          <button id="term-close" class="term-btn" title="cerrar (Ctrl+`)">✕</button>
        </div>
        <div id="terminal-host"></div>
      </div>
      <div id="statusbar"></div>
    </section>
    <section id="chat">
      <div id="conv-tabs"></div>
      <div id="history-panel" hidden></div>
      <div id="chat-log"></div>
      <div id="menu" hidden></div>
      <div id="composer-wrap">
        <div id="ctx-meter" title="contexto acumulado en la conversación">
          <span id="ctx-text">ctx 0 / 6k</span>
          <div class="ctx-track"><div id="ctx-bar"></div></div>
        </div>
        <form id="composer">
          <button type="button" id="btn-plus" class="cbtn" title="Adjuntar archivo del proyecto (@)"></button>
          <button type="button" id="btn-slash" class="cbtn" title="Comandos"></button>
          <input id="prompt" autocomplete="off" placeholder="Pídele código a Elffuss…">
          <button type="button" id="btn-autoedit" class="cbtn autoedit on" title="Editar archivos automáticamente"><span class="ae-ico">&lt;/&gt;</span> <span class="ae-txt">Auto</span></button>
          <button type="button" id="btn-goal" class="cbtn goal" title="Modo Objetivo: descompone el mensaje en tareas y las ejecuta una a una (planificador + ejecutor)">🎯 <span class="goal-txt">Goal</span></button>
          <button type="submit" id="btn-send" title="Enviar"></button>
        </form>
      </div>
    </section>
  </main>
</div>

<button id="code-flip" title="cambiar entre chat y editor"></button>

<div id="model-progress" hidden>
  <img src="img/elffuss-code.svg" alt="">
  <div class="mp-body">
    <span id="model-progress-text">Preparando el cerebro local…</span>
    <div class="track"><div id="model-bar"></div></div>
  </div>
</div>

<script type="module" src="js/main.js"></script>
<script type="module" src="js/challenge.js"></script>
</body>
</html>