CC-Viewer

🌐 Sitio web y recorrido por las funciones: weiesky.github.io/cc-viewer — disponible en 18 idiomas.

Un kit de herramientas de Vibe Coding destilado de la propia experiencia de desarrollo, construido sobre Claude Code:

Aumentar el límite de capacidad: ejecute /ultraPlan y /ultraReview localmente, para que el código de su proyecto nunca tenga que estar completamente expuesto a la nube de Claude;
Compatibilidad multiplataforma: permite la programación móvil (dentro de la LAN); la versión web se adapta a diversos escenarios, fácil de incrustar en extensiones del navegador y vistas divididas del sistema operativo, y proporciona un instalador nativo;
Registro completo: ofrece capacidades completas de interceptación y análisis del payload de Claude Code, ideal para registro, análisis de problemas, aprendizaje, inspiración e ingeniería inversa;
Aprendizaje y experiencia compartidos: se han acumulado numerosos materiales de estudio y experiencias de desarrollo (vea los iconos "?" en todo el sistema);
Experiencia nativa preservada: solo amplía las capacidades de Claude Code, sin modificaciones sustanciales al núcleo, manteniendo la experiencia nativa;
Soporta modelos de terceros: compatible con deepseek-v4-*, GLM 5.1, Kimi K2.6, con la capacidad cc-switch incorporada para conmutar en caliente entre herramientas de terceros en cualquier momento.

Uso

Requisitos previos

Asegúrese de tener Node.js 20.0.0+ instalado; Descargar e instalar
Asegúrese de tener Claude Code instalado; Tutorial de instalación

Instalar ccv

Instalación con npm

npm install -g cc-viewer --registry=https://registry.npmjs.org

Instalación con Homebrew (recomendado para macOS / Linux)

brew tap weiesky/cc-viewer
brew install cc-viewer
brew upgrade cc-viewer   # para actualizaciones — no use npm install -g con instalaciones brew

Lanzamiento

ccv es un reemplazo directo para claude — todos los argumentos se pasan a claude al mismo tiempo que se lanza el Web Viewer.

ccv                    # == claude (modo interactivo)

El comando que el propio autor usa con más frecuencia es:

ccv -c --d             # == claude --continue --dangerously-skip-permissions
                       # ccv pasa todos los parámetros de inicio de Claude Code — puede combinarlos como desee

Después de iniciar en modo programación, se abrirá automáticamente una página web.

cc-viewer también se distribuye como aplicación de escritorio nativa: Página de descarga

Actualización a 1.7.0 (formato de log v2)

Desde la versión 1.7.0, los logs se almacenan en un formato de directorio por sesión (wire-format v2) en lugar de archivos .jsonl individuales, ocupando aproximadamente un 90 % menos de espacio en disco. Los archivos .jsonl v1 existentes nunca se modifican ni se eliminan; el cuadro de diálogo de logs muestra las sesiones v2 de forma predeterminada, y una pequeña entrada «Ver logs heredados (v1)» (visible mientras existan archivos antiguos) abre una vista v1 donde se pueden ver, migrar o eliminar. Al iniciarse, cc-viewer ofrece una migración con un solo clic cuando se detectan logs heredados (muy recomendable al continuar una conversación antigua con claude -c, cuya primera mitad reside en los archivos antiguos). También puedes migrar desde la terminal:

ccv convert <project>   # migrar un proyecto
ccv convert --all       # migrar todos los proyectos
ccv verify <v1-file>    # comprobar un archivo v1 con sus sesiones convertidas

Si una sesión no supera la verificación golden, se retiene en sessions-quarantine/ para su inspección en lugar de hacer fracasar toda la migración; las demás sesiones se migran igualmente.

Modo Logger

Si aún prefiere la herramienta nativa claude o la extensión de VS Code, use este modo.

En este modo, al iniciar claude

se iniciará automáticamente un proceso de registro que guarda los registros de solicitudes en directorios por sesión dentro de ~/.claude/cc-viewer/yourproject/sessions/ (wire-format v2)

Habilitar el modo logger:

ccv -logger

Cuando la consola no puede imprimir el puerto específico, el primer puerto predeterminado es 127.0.0.1:7008. Las instancias múltiples usan puertos secuenciales como 7009, 7010.

Desinstalar el modo logger:

ccv --uninstall

Solución de problemas (Troubleshooting)

Si encuentra problemas al iniciar cc-viewer, aquí está el enfoque definitivo para la solución de problemas: Paso 1: Abra Claude Code en cualquier directorio. Paso 2: Dé a Claude Code la siguiente instrucción:

He instalado el paquete npm cc-viewer, pero al ejecutar ccv aún no funciona correctamente. Revise cli.js y findcc.js de cc-viewer y adáptelos al despliegue local de Claude Code según el entorno específico. Mantenga el alcance de los cambios lo más restringido posible dentro de findcc.js.

¡Dejar que Claude Code diagnostique el problema por sí mismo es más efectivo que preguntar a nadie o leer cualquier documentación!

Una vez completada la instrucción anterior, se actualizará findcc.js. Si su proyecto requiere frecuentemente despliegue local, o si el código forkeado a menudo necesita resolver problemas de instalación, mantener este archivo le permite simplemente copiarlo la próxima vez. En este momento, muchos proyectos y empresas que usan Claude Code no están desplegando en Mac sino en entornos alojados del lado del servidor, por lo que el autor ha separado el archivo findcc.js para facilitar el seguimiento de las actualizaciones del código fuente de cc-viewer en el futuro.

Nota: Esta aplicación entra en conflicto con claude-code-switch y claude-code-router debido a la competencia de proxy, por lo que al usarla asegúrese de cerrar claude-code-switch y claude-code-router. cc-viewer incluye una capacidad de actualización en caliente de proxy como reemplazo equivalente.

Otros comandos auxiliares

Consulte:

ccv -h

Modo silencioso (Silent Mode)

Por defecto, ccv se ejecuta en modo silencioso cuando envuelve claude, manteniendo la salida del terminal limpia y consistente con la experiencia nativa. Todos los registros se capturan en segundo plano y se pueden ver en http://localhost:7008.

Una vez configurado, use el comando claude normalmente. Visite http://localhost:7008 para acceder a la interfaz de monitoreo.

Características

Modo Programación

Después de iniciar con ccv, puede ver:

Puede ver las diferencias de código directamente después de editar:

Aunque puede abrir archivos y codificar manualmente, no se recomienda la codificación manual — ¡eso es programación anticuada!

Programación móvil

Incluso puede escanear un código QR para programar desde su dispositivo móvil:

Cumpla su imaginación sobre la programación móvil. También hay un mecanismo de plugins — si necesita personalizar para sus hábitos de codificación, esté atento a las actualizaciones de los hooks de plugins.

Prompts del sistema por modelo

El modal Editar prompt del sistema (menú de hamburguesa → Editar prompt del sistema) está organizado en pestañas:

La pestaña Predeterminado conserva el comportamiento clásico: escribe CC_SYSTEM.md (sustituir) o CC_APPEND_SYSTEM.md (añadir) en el espacio de trabajo actual, inyectado como --system-prompt-file / --append-system-prompt-file en el siguiente arranque de ccv.
Pestañas de modelo: haga clic en + Añadir modelo, escriba un nombre como opus o Gemini3 y elija un ámbito — Global (~/.claude/cc-viewer/system_prompt/, se aplica a todos los espacios de trabajo) o Espacio de trabajo (<project>/system_prompt/). Cada pestaña tiene su propio interruptor Añadir/Sustituir y su vista previa de Markdown.
Las entradas se almacenan como archivos en mayúsculas: OPUS_SYSTEM.md (sustituir) u OPUS_APPEND_SYSTEM.md (añadir). La coincidencia es difusa — una subcadena, sin distinción de mayúsculas y minúsculas, del ID de modelo resuelto a partir de la configuración ACTIVA (mapeo de modelo del proxy profile de terceros activo > variables de entorno ANTHROPIC_MODEL/CLAUDE_MODEL al arrancar > model de settings.json; sin señal de configuración no se inyecta ninguna entrada), de modo que opus coincide con claude-opus-4-8[1m] sin importar la versión. Una coincidencia de espacio de trabajo prevalece sobre una global; dentro de un ámbito gana el nombre más largo; una entrada coincidente reemplaza por completo los archivos de Predeterminado para ese arranque. Limitaciones conocidas: cambiar de proxy profile a mitad de sesión solo se vuelve a evaluar tras reiniciar la sesión de claude; un --model pasado por argumentos adicionales no se consulta.
Guardar una pestaña vacía elimina la entrada. Los cambios de modelo realizados a mitad de sesión se aplican en el siguiente relanzamiento. Establezca CCV_DISABLE_AUTO_SYSTEM_PROMPT=1 para desactivar toda inyección automática. Puede hacer commit de <project>/system_prompt/ para compartir prompts con su equipo, o añadirlo a .gitignore para mantenerlos privados.

Modo Logger (Ver sesiones completas de Claude Code)

Captura todas las solicitudes API de Claude Code en tiempo real, asegurando texto sin procesar — no registros censurados (¡¡¡esto es importante!!!)
Identifica y etiqueta automáticamente las solicitudes de Main Agent y Sub Agent (subtipos: Plan, Search, Bash)
Las solicitudes de MainAgent admiten Body Diff JSON, mostrando diferencias plegadas respecto a la solicitud anterior de MainAgent (solo campos modificados/nuevos)
Cada solicitud muestra estadísticas de uso de Token en línea (Tokens de entrada/salida, creación/lectura de caché, tasa de aciertos)
Compatible con Claude Code Router (CCR) y otros escenarios de proxy — recurre al patrón de ruta API

License

MIT

FilesExpand file tree

README.es.md

Latest commit

History