Diferencias

Muestra las diferencias entre dos versiones de la página.

--- cursos:sdd:05-herdr [2026/11/05 21:14] – borrado - editor externo (Fecha desconocida) 127.0.0.1
+++ cursos:sdd:05-herdr [2026/11/05 21:14] (actual) – ↷ El nombre de la página cambió de cursos:sdd:03-herdr a cursos:sdd:05-herdr claude
@@ Línea 1: / Línea 1: @@
+====== 5. herdr ======
+[[https://herdr.dev|herdr]] es un **multiplexor de terminal pensado para agentes**: como tmux, pero sabe qué agente corre en cada panel y en qué estado está. No sustituye a OpenCode ni a Claude Code: los ejecuta dentro de sus paneles y te avisa de cuál te necesita. Es de código abierto, un único binario y funciona en la terminal que ya uses.
+Sirve para lo que pasa en cuanto trabajas con más de un agente a la vez:
+uno implementando, otro revisando la spec y un tercero pasando los tests, cada uno en su panel, y tú sin tener que ir mirándolos uno a uno: la barra lateral te dice cuál te necesita.
+----
+===== 1. Puesta en marcha =====
+==== Instalar ====
+  * Linux y macOS
+<sxh bash>
+curl -fsSL https://herdr.dev/install.sh | sh
+</sxh>
+  * Windows
+<sxh powershell>
+powershell -ExecutionPolicy Bypass -c "irm https://herdr.dev/install.ps1 | iex"
+</sxh>
+==== Arrancar ====
+Desde la carpeta del proyecto:
+<sxh bash>
+cd mi-proyecto
+herdr
+</sxh>
+La primera vez pregunta si quieres **instalar las integraciones** de los agentes que encuentra en el ''PATH''. Di que sí: sirven para que herdr sepa **en qué estado está cada agente**. Si no las instalaste o instalas un agente después, están en los ajustes (''Ctrl+b s'') → **integrations**; tras instalarla, sal del agente y vuelve a lanzarlo para que la cargue.
+{{:cursos:sdd:herdr_integraciones.png?600|}}
+Se abre la interfaz: a la izquierda la **barra lateral** con los espacios de trabajo y los agentes, y a la derecha el panel con una shell. En esa shell se arranca el agente como siempre:
+<sxh bash>
+opencode
+</sxh>
+herdr lo detecta solo, sin configurar nada. Vale igual con ''claude'', ''codex'', ''cursor-agent'' o ''copilot''.
+==== Actualizar ====
+<sxh bash>
+herdr update
+</sxh>
+Los agentes que estén trabajando **no se paran** al actualizar: el servidor viejo sigue vivo hasta que lo reinicias. Al terminar, ''herdr update'' dice qué servidor sigue en la versión anterior y la orden para reiniciarlo.
+<note>Si lo instalaste con ''brew'' o ''mise'', se actualiza con ellos, no con ''herdr update''.</note>
+----
+===== 2. Espacios de trabajo, pestañas y paneles =====
+herdr organiza los terminales en tres niveles:
+^ Nivel ^ Qué es ^ Para qué se usa ^
+| **Espacio de trabajo** | El contenedor de un proyecto | Uno por repositorio o por tarea |
+| **Pestaña** | Una distribución de paneles dentro del espacio | Separar vistas: ''agentes'', ''tests'', ''servidor'' |
+| **Panel** | Un terminal de verdad. Los paneles de una pestaña se ven **a la vez**, uno junto a otro | Un agente, una shell, los tests en marcha |
+Es decir: el espacio de trabajo es el proyecto, la pestaña es una pantalla de ese proyecto y los paneles son los trozos en los que partes esa pantalla.
+{{:cursos:sdd:herdr-niveles.png?700|}}
+Todo se hace **con el ratón**: clic para cambiar de panel o de espacio, arrastrar el borde para redimensionar, botón derecho para dividir o crear pestañas, y seleccionar texto ya lo copia, sin ''Ctrl+C''.
+==== Con el ratón ====
+Los ejemplos son dos proyectos: ''reservas-api'' (una API REST) y ''tienda-web'' (su web). En cada pareja de capturas, la primera marca con un círculo rojo dónde se pincha y la segunda enseña cómo queda.
+=== Espacio de trabajo nuevo ===
+Se pulsa **new**, abajo en la lista de ''spaces''.
+{{:cursos:sdd:herdr-espacio-1.png?700|}}
+El espacio nuevo se abre en la misma carpeta y **toma el nombre de la carpeta en la que esté su shell**: al hacer ''cd ../tienda-web'', pasa a llamarse ''tienda-web''.
+{{:cursos:sdd:herdr-espacio-2.png?700|}}
+=== Pestaña nueva ===
+Se pulsa el **''+''** que hay a la derecha de las pestañas.
+{{:cursos:sdd:herdr-pestana-nueva-1.png?700|}}
+Pide el nombre antes de crearla. Aquí, ''tests''.
+{{:cursos:sdd:herdr-pestana-nueva-2.png?700|}}
+=== Renombrar una pestaña ===
+Botón derecho sobre la pestaña → **Rename**.
+{{:cursos:sdd:herdr-pestana-renombrar-1.png?700|}}
+Se escribe el nombre y **save**. La pestaña ''1'' pasa a llamarse ''agentes''.
+{{:cursos:sdd:herdr-pestana-renombrar-2.png?700|}}
+=== Panel a la derecha ===
+Botón derecho dentro del panel → **Split right**.
+{{:cursos:sdd:herdr-panel-derecha-1.png?700|}}
+El panel se parte en dos, uno al lado del otro.
+{{:cursos:sdd:herdr-panel-derecha-2.png?700|}}
+=== Renombrar un panel ===
+Botón derecho dentro del panel → **Rename pane**.
+{{:cursos:sdd:herdr-panel-renombrar-1.png?700|}}
+El nombre sale en el borde de arriba del panel. Aquí, ''implementa'' y ''revisa''.
+{{:cursos:sdd:herdr-panel-renombrar-2.png?700|}}
+=== Panel abajo ===
+Botón derecho dentro del panel → **Split down**.
+{{:cursos:sdd:herdr-panel-abajo-1.png?700|}}
+El panel se parte en dos, uno encima del otro. Aquí, ''unitarios'' arriba y ''logs'' abajo.
+{{:cursos:sdd:herdr-panel-abajo-2.png?700|}}
+<note tip>El menú del panel cambia según el caso: si el panel ya tiene nombre añade **Clear pane name**, y si hay otro panel al lado, **Swap with focused pane**. Las opciones son las mismas, pero no siempre están en la misma posición: léelas antes de pinchar.</note>
+==== Gestionar los espacios de trabajo ====
+  * Cambiarle el nombre: botón derecho sobre el espacio, **Rename**.
+  * Cerrarlo, con todas sus pestañas y paneles: botón derecho, **Close**.
+<note important>Con **new**, el espacio se abre en la **carpeta del panel en el que estás**, no en la del otro proyecto, y hay que hacer ''cd''. Para otro proyecto, mejor crearlo desde cualquier panel con la orden, que le da la carpeta y el nombre de una vez:
+<sxh bash>
+herdr workspace create --cwd ~/proyectos/tienda-web --label tienda-web
+</sxh>
+</note>
+----
+===== 3. Worktrees de Git =====
+Un worktree de Git es una carpeta más, así que en herdr es un espacio de trabajo más. Si se crea desde herdr, además **cuelga del espacio del proyecto** y los worktrees del repositorio salen agrupados. Es lo normal para tener un agente por spec, cada uno en su rama.
+Botón derecho sobre el espacio del proyecto (la opción solo sale si su carpeta es un repositorio Git):
+  * **New worktree**: se escribe el nombre de la rama y herdr crea la rama, el worktree y su espacio de trabajo de una vez.
+  * **Open worktree...**: para un worktree que ya existe; se elige de la lista.
+{{:cursos:sdd:herdr-worktree-menu.png?700|}}
+Cada worktree es un espacio de trabajo completo, con sus pestañas y paneles, que en la lista de espacios cuelga del proyecto. Aquí, ''login'' y ''pagos'' de ''reservas-api'':
+{{:cursos:sdd:herdr-worktree-grupo.png?700|}}
+<note>Cerrar el espacio del proyecto cierra todo el grupo, pero no borra ni las carpetas ni las ramas.</note>
+----
+===== 4. El skill de herdr: que el agente maneje herdr =====
+Con el skill de herdr, el agente (OpenCode, Claude Code...) puede manejar herdr por ti. Se instala así:
+<sxh bash>
+npx skills add herdrdev/herdr --skill herdr -g
+</sxh>
+A partir de ahí, desde OpenCode o Claude Code dentro de herdr se le puede pedir que abra paneles, lance órdenes en ellos, lea su salida y espere a que terminen. Por ejemplo:
+  * Lanzar los tests en otro panel sin quitarte el foco:
+<sxh plain>
+en herdr, abre un panel abajo, lanza npm test y avísame cuando acabe
+</sxh>
+  * Leer la salida de otro panel y actuar sobre ella:
+<sxh plain>
+lee en herdr la salida del panel de los tests y arregla lo que falle
+</sxh>
+  * Arrancar otro agente que revise el trabajo:
+<sxh plain>
+en herdr, abre un panel a la derecha con otro opencode que revise specs/login/design.md contra requirements.md, espera a que termine y resúmeme lo que encuentre
+</sxh>
+Todo lo que hace queda en sus paneles, a la vista, y puedes intervenir en cualquier momento.
+<note warning>
+El skill es para pedirle cosas **a mano mientras trabajas**.
+Instálalo solo con ''-g'', en tu usuario y nunca en el proyecto, y que **ningún skill ni comando del proyecto dependa de herdr**: en CI no hay herdr y esa parte no se ejecutaría.
+</note>
+----
+===== 5. Usando herdr =====
+==== La lista de agentes ====
+Lo que hace útil a herdr es la lista de agentes, abajo a la izquierda bajo **agents**: están **todos los agentes que tienes en marcha**, de todos los espacios de trabajo y pestañas, y de un vistazo sabes **cuál necesita tu atención**. Para llegar hasta él no hay que buscar su espacio ni su pestaña: **clic en el agente** y estás en su panel.
+{{:cursos:sdd:herdr-estados.png?300|}}
+==== El estado de cada agente ====
+Cada agente está en un estado, marcado con un punto de color, que dice si te necesita:
+^ Color ^ Estado ^ Qué significa ^ Qué haces tú ^
+| <color #40a02b>○</color> Verde, hueco | ''idle'' | Ha terminado y ya lo has visto | Darle la siguiente tarea |
+| <color red>●</color> Rojo | ''blocked'' | Espera una respuesta: un permiso, una pregunta, una decisión | **Ir a contestarle** |
+| <color #179299>●</color> Verde azulado, relleno | ''done'' | Ha terminado y aún no lo has mirado | Revisar el resultado |
+| <color #c9a000>●</color> Amarillo | ''working'' | Está trabajando | Nada, déjalo |
+Cuando un punto se pone rojo o verde azulado, clic y a atenderlo.
+<note tip>''idle'' **no quiere decir que haya terminado el trabajo**, solo que ha vuelto al prompt. Y si el agente saca una pregunta con un aspecto que herdr no conoce, puede marcarlo como ''idle'' en vez de ''blocked''. Antes de darle la siguiente tarea, mira qué ha dejado en pantalla.</note>
+==== Orden de la lista: grouped o priority ====
+Arriba a la derecha de la lista (la flecha roja) está cómo se ordenan los agentes. **Clic encima** y cambia entre los dos modos:
+{{:cursos:sdd:herdr-agentes-orden.png?300|}}
+  * **''grouped''**: agrupados por espacio de trabajo y pestaña, en el mismo orden que la lista de espacios. Es el modo por defecto.
+  * **''priority''**: primero los que te necesitan. Van ''blocked'', luego ''done'', ''working'' e ''idle'' y, dentro de cada estado, el que ha cambiado más recientemente arriba.
+En cuanto tengas más de dos o tres agentes, pon ''priority'': el que tienes que atender está siempre el primero.
+==== Cerrar herdr ====
+Los agentes no corren dentro de la ventana de herdr, sino en un **proceso aparte** (el servidor de herdr), así que puedes cerrar herdr cuando quieras, aunque la terminal avise de que hay un proceso en ejecución: los agentes siguen trabajando y, al volver a ejecutar ''herdr'', todo está como lo dejaste. Si reinicias el ordenador vuelven los espacios de trabajo, pestañas y paneles, pero los agentes solo recuperan su conversación si tienen la [[#arrancar|integración]].
+----
+===== 6. Configuración =====
+La configuración está en ''~/.config/herdr/config.toml''. Lo que merece la pena tocar es **qué enseña la lista de agentes** de la barra lateral: de serie, el espacio de trabajo y el tipo de agente. Con dos agentes en el mismo espacio, las dos filas salen iguales (''reservas-api'' / ''claude'') y no sabes cuál es cuál.
+==== Las filas de la lista ====
+Cada array de ''rows'' es una línea de la entrada de cada agente, y cada elemento es un **token** que herdr sustituye por su valor. Para que se vea el nombre del panel:
+<sxh ini; title: ~/.config/herdr/config.toml>
+[ui.sidebar.agents]
+rows = [
+  ["state_icon", "machine", "pane", "tab"],
+  ["workspace", "agent"],
+]
+</sxh>
+El nombre se le pone al panel con el botón derecho → **Rename pane** (en la [[#con_el_raton|sección 2]] está con capturas). Sale en el borde del panel y en la primera línea de la lista; debajo, el espacio y el agente:
+<sxh plain>
+○ implementa
+  reservas-api · claude
+○ revisa
+  reservas-api · claude
+</sxh>
+Los tokens de las filas de agentes:
+  * ''state_icon'': icono de color con el estado del agente.
+  * ''state_text'': el estado en texto (''idle'', ''working'', ''blocked'', ''done'').
+  * ''machine'': la máquina; solo sale si tienes varias conectadas.
+  * ''workspace'': el espacio de trabajo.
+  * ''tab'': la pestaña.
+  * ''pane'': el nombre del panel.
+  * ''agent'': el agente (''claude'', ''opencode''...).
+  * ''terminal_title'': el título que el agente pone a la terminal, tal cual.
+  * ''terminal_title_stripped'': el mismo título sin el icono o //spinner// del principio. Es el que se usa: el título de Claude Code empieza por un spinner que cambia sin parar.
+  * ''$nombre'': un valor propio que publica un script o un plugin.
+Un valor que no existe desaparece con su separador ''·'', y una fila sin ningún valor no se dibuja.
+==== Filas distintas para un agente ====
+''rows_by_agent'' da otra disposición a un agente concreto, por ejemplo para ver el título que pone Claude Code a la terminal:
+<sxh ini; title: ~/.config/herdr/config.toml>
+[ui.sidebar.agents.rows_by_agent]
+claude = [
+  ["state_icon", "pane", "tab"],
+  ["terminal_title_stripped"],
+  ["workspace", "agent"],
+]
+</sxh>
+<note important>''rows_by_agent'' **sustituye** a ''rows'' para ese agente, no se le añade: hay que repetir todas las filas que quieras ver.</note>
+Un token también puede ir con estilo, en vez del nombre suelto: ''{ token = "terminal_title_stripped", fg = "#89b4fa", dim = true }''.
+==== La lista de espacios de trabajo ====
+Las filas de la lista de espacios van en ''[ui.sidebar.spaces]'', con estos tokens:
+  * ''state_icon'' y ''state_text'': el estado conjunto de los agentes del espacio.
+  * ''workspace'': el espacio de trabajo.
+  * ''branch'': la rama de Git.
+  * ''git_status'': commits por delante y por detrás.
+  * ''$nombre'': un valor propio.
+==== El título de la ventana ====
+''ui.window_title'' es el título que herdr pone a la ventana de tu terminal. Aquí los tokens van entre llaves: ''{hostname}'', ''{workspace}'', ''{tab}'', ''{pane}'' y ''{terminal_title}'', que ya sale sin el spinner.
+<sxh ini; title: ~/.config/herdr/config.toml>
+[ui]
+window_title = "{workspace}: {pane}"
+sidebar_width = 40
+sidebar_max_width = 60
+</sxh>
+Por defecto ''sidebar_max_width=36'' así que si quieres un valor de ''sidebar_width'' mayor de 36 debes poner ambos valores
+==== Recargar ====
+  * ''herdr config check'': comprueba el fichero y dice qué está mal.
+  * **menu → reload config** en la barra lateral, o ''Ctrl+b R'': recarga sin parar a los agentes.
+<note warning>''herdr server reload-config'' solo recarga el servidor, y la barra lateral la dibuja la ventana: los cambios de ''rows'' no se ven.</note>
+==== Más información ====
+  * [[https://herdr.dev/docs/configuration/|Config]]
+  * [[https://herdr.dev/docs/config-reference/|Config reference]]
+----
+===== 7. Atajos de teclado =====
+''Ctrl+b'' pone herdr en **modo prefijo**: la siguiente tecla que pulses no va al panel, sino a herdr, que la toma como una orden. Se pulsa ''Ctrl+b'', se suelta y se pulsa la tecla de la orden. Hecha la orden, se vuelve al panel.
+Por ejemplo, ''c'' es «pestaña nueva»: pulsar ''Ctrl+b'', soltar, y pulsar ''c''.
+==== General ====
+^ Tecla ^ Orden ^
+| ''?'' | Ayuda con todos los atajos |
+| ''s'' | Ajustes |
+| ''q'' | Salir dejando todo en marcha |
+| ''R'' | Recargar ''config.toml'' |
+| ''b'' | Mostrar u ocultar la barra lateral |
+| ''g'' | Ir a cualquier agente o terminal (lista con filtros) |
+==== Espacios de trabajo ====
+^ Tecla ^ Orden ^
+| ''N'' | Crear un espacio de trabajo |
+| ''w'' | Cambiar de espacio de trabajo |
+| ''W'' | Renombrar el espacio de trabajo |
+| ''D'' | Cerrar el espacio de trabajo |
+==== Pestañas ====
+^ Tecla ^ Orden ^
+| ''c'' | Crear una pestaña |
+| ''T'' | Renombrar la pestaña |
+| ''n'' | Ir a la pestaña siguiente |
+| ''p'' | Ir a la pestaña anterior |
+| ''1'' ... ''9'' | Ir a la pestaña por su número |
+| ''X'' | Cerrar la pestaña |
+==== Paneles ====
+^ Tecla ^ Orden ^
+| ''v'' | Dividir a la derecha |
+| ''-'' | Dividir abajo |
+| ''h'' | Ir al panel de la izquierda |
+| ''j'' | Ir al panel de abajo |
+| ''k'' | Ir al panel de arriba |
+| ''l'' | Ir al panel de la derecha |
+| ''Tab'' | Ir al panel siguiente |
+| ''Shift+Tab'' | Ir al panel anterior |
+| ''H'' | Intercambiar el panel con el de la izquierda |
+| ''J'' | Intercambiar el panel con el de abajo |
+| ''K'' | Intercambiar el panel con el de arriba |
+| ''L'' | Intercambiar el panel con el de la derecha |
+| ''z'' | Ampliar el panel o devolverlo a su tamaño |
+| ''r'' | **Redimensionar el panel**. Esta es muy útil |
+| ''P'' | Renombrar el panel |
+| ''['' | Modo copia: moverse por la salida del panel y copiar |
+| ''e'' | Abrir la salida del panel en ''$EDITOR'' |
+| ''x'' | Cerrar el panel |
+----
+===== 8. Orca: hacia un IDE de agentes =====
+[[https://onorca.dev|Orca]] hace lo mismo que herdr (varios agentes a la vista, un worktree de Git por agente y aviso de cuál te necesita), pero añade piezas de un IDE que herdr no tiene:
+  * **Editor**: un editor al estilo de VS Code para abrir y retocar ficheros sin salir.
+  * **Revisión del diff**: se ve lo que ha cambiado cada agente y se comenta cualquier línea; los comentarios le llegan al agente para que los corrija.
+  * **Navegador integrado**: para ver la web que está haciendo el agente y señalarle el elemento que hay que cambiar.
+  * **GitHub**: las PR y las issues del proyecto, y abrir un worktree directamente desde una issue.
+^                                           ^ herdr ^ Orca ^ IDE ^
+| Varios agentes a la vista con su estado   |  ✓    |  ✓   |     |
+| Un worktree por agente                    |  ✓    |  ✓   |     |
+| Revisar y comentar el diff del agente     |       |  ✓   |     |
+| Editor de código                          |       |  ✓   |  ✓  |
+| Depurador, refactorizaciones, extensiones |       |      |  ✓  |
+Orca es probablemente por donde van a ir los IDEs: ya no son el sitio donde se **escribe** código, sino donde se **ejecutan agentes y se revisan sus resultados**. Por eso se parece a un IDE con menos cosas (sobra casi todo lo que sirve para teclear código) al que se le suma lo que tiene herdr.
+De todas formas, la frontera no es fija: depende de los plugins de cada uno. Un IDE con plugins para agentes se acerca a Orca, y a herdr ya se le pueden instalar [[https://herdr.dev/plugins|plugins]] que le añaden cosas de Orca. Por ejemplo, [[https://github.com/persiyanov/herdr-reviewr|herdr-reviewr]] enseña en un panel el diff del agente y le manda los comentarios que pongas en cada línea, como la revisión del diff de Orca:
+<sxh bash>
+herdr plugin install persiyanov/herdr-reviewr
+</sxh>
+----
+===== 9. Más información =====
+  * [[https://herdr.dev|herdr.dev]]: web oficial.
+  * [[https://herdr.dev/docs/|Documentación]]: guía y referencia de órdenes y configuración.
+  * [[https://github.com/herdrdev/herdr|Repositorio]]: código y versiones publicadas.
+  * [[https://github.com/stablyai/orca|Orca]]: repositorio de Orca, con descargas para Linux, macOS y Windows.