https://github.com/hitmman55/claude-code-chat-viewer
Offline HTML viewer for Claude Code JSONL session transcripts. Six UI languages, light/dark theme, no backend, no CDN.
https://github.com/hitmman55/claude-code-chat-viewer
anthropic chat-log claude claude-code html-viewer i18n jsonl jsonl-viewer log-viewer offline-first public-domain single-file transcript-viewer zero-dependencies
Last synced: about 2 months ago
JSON representation
Offline HTML viewer for Claude Code JSONL session transcripts. Six UI languages, light/dark theme, no backend, no CDN.
- Host: GitHub
- URL: https://github.com/hitmman55/claude-code-chat-viewer
- Owner: hitmman55
- License: unlicense
- Created: 2026-04-21T09:28:47.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-21T21:14:59.000Z (about 2 months ago)
- Last Synced: 2026-04-21T22:36:40.907Z (about 2 months ago)
- Topics: anthropic, chat-log, claude, claude-code, html-viewer, i18n, jsonl, jsonl-viewer, log-viewer, offline-first, public-domain, single-file, transcript-viewer, zero-dependencies
- Language: HTML
- Homepage: https://hitmman55.github.io/claude-code-chat-viewer/
- Size: 263 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.ar.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
فقط اضغط — بدون تثبيت أو بناء أو تسجيل.
English ·
Русский ·
Español ·
Français ·
中文 ·
العربية
# Claude Code Chat Viewer
عارض HTML لسجلات جلسات [Claude Code](https://claude.com/claude-code) بصيغة JSONL. يعمل مباشرة في المتصفح — بدون خادم، بدون خطوة بناء، اعتمادية واحدة مُحزَّمة محليًا. يعمل دون اتصال فور الاستخدام.
## لماذا
يكتب Claude Code كل جلسة في `~/.claude/projects//.jsonl` — سطر واحد لكل سجل (رسالة المستخدم، رد النموذج، thinking، tool_use، tool_result، attachment، وما شابه). الملف الخام غير قابل للقراءة؛ الأوامر المدمجة مثل `/resume` تعرض المحادثة لكنها لا تسمح بتصديرها أو فحصها لاحقًا.
يحوّل هذا العارض ملف `.jsonl` إلى تدفق قابل للقراءة مع ألوان حسب الدور، وكتل خدمية قابلة للطي (thinking / tools / results)، ومرشّحات.
## ماذا يعرض
- **user** (أزرق) — رسائل المستخدم الحقيقية
- **assistant** (أخضر) — ردود Claude النصية
- **thinking** (بنفسجي) — التفكير الموسّع، مطويّ افتراضيًا
- **tool_use** (كهرماني) — استدعاءات الأدوات مع معاينة للمعاملات
- **tool_result** (سماوي / أحمر للأخطاء) — ردود الأدوات
- **meta / task-note** (أصفر) — حقن النظام و `` من الوكلاء الفرعيين
- **system / attachment / ui-state** — سجلات خدمية (مخفية افتراضيًا)
كل كتلة تظهر كصف منفصل مع شريط ملون على اليسار. لا توجد فقاعات محادثة: هذا سجلّ لا دردشة.
## كيفية الفتح
اختر ما يناسبك:
**أ. تنزيل ملف واحد** — الأسهل. خذ HTML المستقل من [آخر إصدار](https://github.com/hitmman55/claude-code-chat-viewer/releases/latest)، واضغط عليه ضغطة مزدوجة. ملف واحد، يعمل دون اتصال للأبد.
**ب. نسخ المستودع** — إذا أردت التعديل على الكود. تحتاج إلى `index.html` ومجلد `lib/`.
**ج. استخدام العارض عبر الإنترنت** — افتح . لا شيء للتنزيل.
بعد الفتح، اضغط منتقي الملفات (أو اسحب ملفًا، أو استخدم زر «جرّب مثالاً») واختر سجلّ `.jsonl`.
تُحفظ سجلات Claude Code في:
```
~/.claude/projects//.jsonl
```
حيث `` هو مجلد العمل لديك مع استبدال `/` بـ `-`. مثال: `/home/user/myproj` ← `-home-user-myproj`.
## الميزات
### طرق تحميل الملف
- **منتقي الملفات** — اضغط «اختيار ملف» واختر `.jsonl`.
- **السحب والإفلات** — أسقط الملف في أي مكان على الصفحة. حدّ متقطّع يُشير إلى المنطقة. المجلدات والسحوبات غير المتعلّقة بالملفات تُرفض بلطف.
- **جرّب مثالاً** — في الحالة الأولى (عند الاستخدام عبر الإنترنت) يظهر زرّ يُحمّل `demo.jsonl` مضمّنًا يعرض جميع أنواع الكتل.
### راحة القراءة
- **وضع القراءة** — مفتاح في الرأس يُخفي كل شيء باستثناء رسائل المستخدم الفعلية وردود المساعد النصية. بدون thinking، بدون استدعاءات أدوات، بدون سجلات خدمية.
- **نسخ لكل رسالة** — زرّ `📋` في رأس كل مُدخل. ينسخ النصّ إلى الحافظة مع تأكيد `✓` لمدة 1.2 ثانية. يستخدم `navigator.clipboard.writeText` مع احتياطي `document.execCommand` لسياقات `file://`.
- **أسماء أدوات ودية** — الأدوات المعروفة تحصل على أيقونات (مثل `📖 Read file`، `🖥️ Shell`، `📝 Edit file`). الأدوات غير المعروفة / MCP → `🔧 {raw_name}`.
- **سمة تلقائية** — يتبع العارض `prefers-color-scheme` للنظام افتراضيًا. اضغط زرّ الشمس/القمر لتثبيت الاختيار؛ الاختيار المثبّت يستمرّ عبر الجلسات.
- **ست لغات للواجهة** — English، Русский، Español، Français، 中文، العربية. تنتقل العربية تلقائيًا إلى RTL. يوجد منتقي في الرأس، ويُحفظ التفضيل.
### الأداء والأمان
- **تحليل متدفّق** — يُقرأ `.jsonl` عبر `file.stream()` + `TextDecoderStream`، ولا يُحمَّل الملف كسلسلة واحدة.
- **افتراضية أصلية** — `content-visibility: auto` على كل سجل: يتخطى المتصفح تخطيط ورسم السجلات خارج الشاشة. يتحمّل آلاف السجلات.
- **عرض بأجزاء** — 500 سجل في كل جزء، وزر «عرض المزيد» لبقية السجلات.
- **مرشّحات** — خمسة مربعات اختيار (thinking / tools / results / system / ui-state)، تُبدّل الفئات عبر صنف CSS واحد على الحاوية (بدون إعادة تخطيط DOM).
- **عرض آمن من XSS** — تُهرَّب كل كتلة نصية _قبل_ تمريرها إلى محلّل markdown. يتم تحييد صور Markdown (تظهر كنص خامل، لا تُجلب أبدًا). الروابط مقتصرة على `http(s)` مع `rel="noopener noreferrer nofollow"`.
- **حدود للحجم** — تُقصَّ كتل النص إلى 20 كيلوبايت، والكتل الخدمية إلى 5 كيلوبايت. عمليات النسخ ترث هذه الحدود — الصفحة لا ترسل ميغابايتات إلى الحافظة ولا يمكن أن تُعطّل المتصفح.
- **احتياطي لـ `.json`** — إذا لم يكن الملف JSONL بل مصفوفة/كائن JSON عادية، يُحلَّل كقائمة سجلات.
## متطلبات المتصفح
- Chrome / Edge 85+
- Safari 18+
- Firefox 125+
كل هذا لازم لدعم `content-visibility: auto`. على المتصفحات الأقدم يعمل العارض، لكن التمرير على الملفات الكبيرة سيصبح أبطأ بشكل ملحوظ.
## الاعتماديات
واحدة فقط، مُحزَّمة محليًا في `lib/`:
- [marked](https://github.com/markedjs/marked) — markdown → HTML (~35 كيلوبايت)
بدون CDN، بدون شبكة، بدون Subresource Integrity. انسخ وشغِّل.
## الخصوصية
كل شيء يعمل محليًا في متصفحك. العارض نفسه **لا يُرسل أي طلبات شبكية تلقائية** — لا CDN، ولا تحليلات، ولا خطوط بعيدة. يتم تحييد صور Markdown المضمّنة في السجلات: تُعرض كنص خامل مع ظهور الرابط، لكن لا يتم جلبها. الروابط الخارجية (فقط `http(s)`) تُفتح في علامة تبويب جديدة فقط عند النقر عليها، مع `rel="noopener noreferrer nofollow"`. تبقى سجلاتك على جهازك.
## قيود معروفة
- الملفات التي تتجاوز حوالي 100 ميجابايت تحتاج إلى تحميل مفهرس حسب إزاحات الأسطر مع عرض نوافذ (غير مُنفَّذ).
- لا يوجد تصدير إلى Markdown/HTML (الهدف هو العرض لا التحويل).
- لا يوجد تلوين للصياغة في كتل الشيفرة (قرار مقصود للحفاظ على الحد الأدنى من الاعتماديات).
## التطوير
كل الشيفرة في ملف HTML واحد. حرِّره مباشرة — الأنماط في ``، والمنطق في `<script>`، والترجمات في كائن `I18N` في بداية السكربت.
فحص صياغة JS بدون متصفح:
```bash
sed -n '/^<script>$/,/^<\/script>$/p' index.html | sed '1d;$d' | node --check /dev/stdin
```
## الرخصة
[Unlicense](LICENSE) — ملكية عامة. استخدمه كما تشاء دون الحاجة إلى إسناد.
</div>