tlrd-extension 1.0.0

package/.claude/settings.local.json

@@ -0,0 +1,18 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(firecrawl scrape:*)",
+      "Bash(npx firecrawl:*)",
+      "Bash(npm list:*)",
+      "WebFetch(domain:ostovjs.org)",
+      "Bash(npm install:*)",
+      "Bash(npm run:*)",
+      "Bash(ls src/app/templates/*.js)",
+      "Bash(npm ls:*)",
+      "Bash(npm search:*)",
+      "Bash(grep 'app.settings.model' src/shared/i18n/translations/*.ts)",
+      "WebFetch(domain:platform.openai.com)",
+      "WebSearch"
+    ]
+  }
+}

package/.claude/skills/ostovjs-expert/SKILL.md

@@ -0,0 +1,72 @@
+---
+name: ostovjs-expert
+description: Expert skill for building applications with OstovJS (Backbone-like framework with Models, Views, Collections, Events). Use when working with OstovJS, generating components, explaining architecture, handling events, collections, or templates.
+compatibility: Designed for Claude Code and agent environments working with JavaScript/TypeScript projects.
+metadata:
+  author: ostovjs
+  version: "1.0.0"
+---
+
+# OstovJS Expert
+
+You are an expert in OstovJS — a lightweight framework inspired by Backbone.js, based on Models, Views, Collections, and Events.
+
+This skill is activated when the user is working with OstovJS or asks about architecture, code generation, or explanations related to it.
+
+---
+
+## 🧠 Core Principles
+
+- Separate responsibilities:
+  - Models → data and business logic
+  - Views → UI rendering
+  - Collections → lists of models
+  - Events → communication layer
+
+- Prefer minimalism and clarity
+- Avoid overengineering
+- Keep code readable and structured
+
+---
+
+## ⚙️ Architecture Rules
+
+- Do NOT mix business logic into Views
+- Do NOT place UI logic inside Models
+- Use events instead of direct coupling
+- Prefer composition over inheritance
+
+---
+
+## 🧩 Code Generation
+
+When generating code:
+
+1. Use TypeScript by default
+2. Always generate full working examples (not snippets)
+3. Include imports and setup
+4. Use realistic naming:
+   - `TodoModel`
+   - `TodoView`
+   - `TodoCollection`
+5. Keep structure simple and idiomatic
+
+---
+
+## 🔄 Events
+
+Use event-driven architecture:
+
+- Prefer loose coupling
+- Show event flow clearly
+- Use patterns like:
+  - `on`
+  - `emit`
+  - `listenTo`
+
+### Example pattern
+
+```ts
+model.on("change", () => {
+  view.render()
+})

package/README.md

@@ -0,0 +1,74 @@
+# TLDR - AI Page Summarizer
+
+A Chrome extension that generates concise TLDR summaries of any web page using OpenAI. Ask follow-up questions in a dedicated tab with full chat interface.
+
+## Features
+
+- **Instant TLDR** - One-click page summarization with streaming output
+- **Follow-up Chat** - Ask questions about the page content in a conversational interface
+- **Multi-language** - Summarize in 10 languages: English, Chinese, Spanish, Hindi, Arabic, French, Portuguese, Russian, Japanese, German
+- **Localized UI** - Full interface translation for all supported languages
+- **Model Selection** - Choose from GPT-5.4, GPT-5.4 Mini, GPT-5.4 Nano, GPT-4.1 family, and o3-mini
+- **Streaming** - Responses appear in real-time as they're generated
+- **Auto-summarize** - Opens a dedicated tab and starts summarizing immediately
+
+<img width="1724" height="984" alt="Screenshot 2026-03-21 at 22 25 19" src="https://github.com/user-attachments/assets/4ba9c577-ccb8-4d52-a662-92cb3ccdfca4" />
+
+
+## Architecture
+
+Built with [OstovJS](https://ostovjs.org/) (Backbone-like MVC framework), Handlebars templates (precompiled at build time), and Tailwind CSS with BEM methodology.
+
+```
+src/
+  app/                    # Main application (opens in new tab)
+    models/               # OstovJS Models (Settings, Page, Message, Collection)
+    views/                # OstovJS Views (App, Settings, TLDR, Chat, Message, LanguageSelector)
+    templates/            # Handlebars templates (.hbs)
+    styles/               # Tailwind CSS + BEM (@apply approach)
+    services/             # OpenAI API service with streaming
+  popup/                  # Extension popup (API key + summarize button)
+  background/             # Service worker
+  content/                # Content script (page text extraction)
+  shared/
+    i18n/                 # Internationalization (10 languages)
+```
+
+## Setup
+
+```bash
+# Install dependencies
+npm install
+
+# Build
+npm run build
+
+# Watch mode (rebuild on changes)
+npm run dev
+
+# Type check
+npm run typecheck
+```
+
+## Install in Chrome
+
+1. Run `npm run build`
+2. Open `chrome://extensions/`
+3. Enable **Developer mode**
+4. Click **Load unpacked** and select the `dist/` folder
+5. Click the extension icon, enter your [OpenAI API key](https://platform.openai.com/api-keys)
+6. Navigate to any page and click **Summarize**
+
+## Tech Stack
+
+- **Framework** - [OstovJS](https://ostovjs.org/) (Models, Views, Collections, Events)
+- **Templates** - Handlebars (precompiled, CSP-safe)
+- **Styling** - Tailwind CSS 3 + BEM + `@apply`
+- **Language** - TypeScript
+- **Bundler** - Vite
+- **API** - OpenAI Chat Completions (streaming)
+- **Platform** - Chrome Extension Manifest V3
+
+## License
+
+MIT

package/icons/icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <rect width="128" height="128" fill="#4c6ef5"/>
+  <text x="64" y="82" font-family="system-ui,sans-serif" font-size="56" font-weight="700" fill="#fff" text-anchor="middle">TL</text>
+</svg>

package/manifest.json

@@ -0,0 +1,26 @@
+{
+  "manifest_version": 3,
+  "name": "TLDR - Page Summarizer",
+  "version": "1.0.0",
+  "description": "Get a TLDR summary of any page using OpenAI. Ask follow-up questions in a dedicated tab.",
+  "permissions": ["activeTab", "storage", "scripting"],
+  "action": {
+    "default_popup": "src/popup/popup.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  }
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "tlrd-extension",
+  "version": "1.0.0",
+  "description": "",
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "handlebars": "^4.7.8",
+    "ostovjs": "^1.7.8"
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.1.38",
+    "autoprefixer": "^10.4.27",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.1"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/app/app.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>TLDR - Page Summary</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+</head>
+<body>
+  <div id="app" class="app"></div>
+  <script type="module" src="app.ts"></script>
+</body>
+</html>

package/src/app/app.ts

@@ -0,0 +1,50 @@
+import Handlebars from 'handlebars/runtime';
+import { t, setLocale } from '../shared/i18n';
+import type { SupportedLocale } from '../shared/i18n/locales';
+import SettingsModel from './models/SettingsModel';
+import PageModel from './models/PageModel';
+import MessagesCollection from './models/MessagesCollection';
+import AppView from './views/AppView';
+import './styles/input.css';
+
+Handlebars.registerHelper('t', (key: string) => t(key));
+
+const settingsModel = new SettingsModel();
+const pageModel = new PageModel();
+const messagesCollection = new MessagesCollection();
+
+const params = new URLSearchParams(window.location.search);
+const pageTitle = params.get('title') || '';
+const pageUrl = params.get('url') || '';
+
+pageModel.set({ title: pageTitle, url: pageUrl }, { silent: true });
+
+let appView: AppView | null = null;
+let autoSummarized = false;
+
+function tryAutoSummarize() {
+  if (autoSummarized || !appView) return;
+  if (!settingsModel.hasApiKey() || !pageModel.hasContent()) return;
+  autoSummarized = true;
+  appView.onSummarize();
+}
+
+chrome.storage.session.get('pendingPageContent').then((data) => {
+  if (data.pendingPageContent) {
+    pageModel.set('content', data.pendingPageContent);
+    chrome.storage.session.remove('pendingPageContent');
+    tryAutoSummarize();
+  }
+});
+
+settingsModel.on('loaded', () => {
+  setLocale(settingsModel.get('uiLanguage') as SupportedLocale);
+
+  appView = new AppView({
+    settingsModel,
+    pageModel,
+    messagesCollection,
+  });
+  appView.render();
+  tryAutoSummarize();
+});

package/src/app/models/MessageModel.ts

@@ -0,0 +1,17 @@
+import { Model } from 'ostovjs';
+
+export interface MessageAttributes {
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+}
+
+class MessageModel extends Model<MessageAttributes> {
+  defaults() {
+    return {
+      role: 'user' as const,
+      content: '',
+    };
+  }
+}
+
+export default MessageModel;

package/src/app/models/MessagesCollection.ts

@@ -0,0 +1,18 @@
+import { Collection } from 'ostovjs';
+import MessageModel, { type MessageAttributes } from './MessageModel';
+
+class MessagesCollection extends Collection<MessageModel> {
+  constructor(models?: MessageModel[], options?: Record<string, unknown>) {
+    super(models, options);
+    this.model = MessageModel;
+  }
+
+  toOpenAIFormat(): MessageAttributes[] {
+    return this.models.map((msg) => ({
+      role: msg.get('role'),
+      content: msg.get('content'),
+    }));
+  }
+}
+
+export default MessagesCollection;

package/src/app/models/PageModel.ts

@@ -0,0 +1,33 @@
+import { Model } from 'ostovjs';
+
+interface PageAttributes {
+  title: string;
+  url: string;
+  content: string;
+  tldr: string;
+  loading: boolean;
+  error: string;
+}
+
+class PageModel extends Model<PageAttributes> {
+  defaults() {
+    return {
+      title: '',
+      url: '',
+      content: '',
+      tldr: '',
+      loading: false,
+      error: '',
+    };
+  }
+
+  hasContent(): boolean {
+    return Boolean(this.get('content'));
+  }
+
+  hasTldr(): boolean {
+    return Boolean(this.get('tldr'));
+  }
+}
+
+export default PageModel;

package/src/app/models/SettingsModel.ts

@@ -0,0 +1,61 @@
+import { Model } from 'ostovjs';
+import type { SupportedLocale, SummaryLanguage } from '../../shared/i18n/locales';
+
+interface SettingsAttributes {
+  apiKey: string;
+  model: string;
+  summaryLanguage: SummaryLanguage;
+  uiLanguage: SupportedLocale;
+}
+
+export const AVAILABLE_MODELS = [
+  { id: 'gpt-5.4', label: 'GPT-5.4' },
+  { id: 'gpt-5.4-mini', label: 'GPT-5.4 Mini' },
+  { id: 'gpt-5.4-nano', label: 'GPT-5.4 Nano' },
+  { id: 'gpt-4.1', label: 'GPT-4.1' },
+  { id: 'gpt-4.1-mini', label: 'GPT-4.1 Mini' },
+  { id: 'gpt-4.1-nano', label: 'GPT-4.1 Nano' },
+  { id: 'o3-mini', label: 'o3-mini' },
+];
+
+class SettingsModel extends Model<SettingsAttributes> {
+  defaults() {
+    return {
+      apiKey: '',
+      model: 'gpt-5.4-mini',
+      summaryLanguage: 'original' as SummaryLanguage,
+      uiLanguage: 'en' as SupportedLocale,
+    };
+  }
+
+  initialize() {
+    this.load();
+  }
+
+  load(): void {
+    chrome.storage.local.get(['apiKey', 'model', 'summaryLanguage', 'uiLanguage']).then((data) => {
+      if (data.apiKey) this.set('apiKey', data.apiKey as string, { silent: true });
+      if (data.model) this.set('model', data.model as string, { silent: true });
+      if (data.summaryLanguage) this.set('summaryLanguage', data.summaryLanguage as SummaryLanguage, { silent: true });
+      if (data.uiLanguage) this.set('uiLanguage', data.uiLanguage as SupportedLocale, { silent: true });
+      this.trigger('loaded');
+    });
+  }
+
+  persist(): void {
+    chrome.storage.local.set({
+      apiKey: this.get('apiKey'),
+      model: this.get('model'),
+      summaryLanguage: this.get('summaryLanguage'),
+      uiLanguage: this.get('uiLanguage'),
+    }).then(() => {
+      this.trigger('saved');
+    });
+  }
+
+  hasApiKey(): boolean {
+    return Boolean(this.get('apiKey'));
+  }
+}
+
+export default SettingsModel;

package/src/app/services/openai.ts

@@ -0,0 +1,134 @@
+import type SettingsModel from '../models/SettingsModel';
+import type { MessageAttributes } from '../models/MessageModel';
+import type { SummaryLanguage } from '../../shared/i18n/locales';
+import { LANGUAGE_NAMES } from '../../shared/i18n/locales';
+
+function getLanguageInstruction(language: SummaryLanguage): string {
+  if (language === 'original') {
+    return 'Respond in the same language as the page content.';
+  }
+  return `Respond in ${LANGUAGE_NAMES[language]}.`;
+}
+
+function getTldrSystemPrompt(language: SummaryLanguage): string {
+  return `You are a concise summarizer. Given the text content of a web page, produce a clear and informative TLDR summary.
+
+If the page is a single article or post: focus on the key points, main arguments, and important details. Aim for 3-6 sentences.
+
+If the page is a list of posts, a feed, or an index page: provide a brief overview of what the page contains, mention the main topics and notable items. Don't summarize only the first post — cover the whole page.
+
+Use plain language. ${getLanguageInstruction(language)}`;
+}
+
+function getChatSystemPrompt(language: SummaryLanguage): string {
+  const langInstruction = language === 'original'
+    ? 'Respond in the same language as the TLDR summary above.'
+    : `Respond in ${LANGUAGE_NAMES[language]}.`;
+  return `You are a helpful assistant discussing a web page the user just read. You have access to the page content and its TLDR summary. Answer follow-up questions about the content clearly and concisely. ${langInstruction}`;
+}
+
+interface ChatMessage {
+  role: string;
+  content: string;
+}
+
+class OpenAIService {
+  private settings: SettingsModel;
+
+  constructor(settingsModel: SettingsModel) {
+    this.settings = settingsModel;
+  }
+
+  async generateTldrStream(
+    pageContent: string,
+    pageTitle: string,
+    language: SummaryLanguage,
+    onChunk: (text: string) => void
+  ): Promise<string> {
+    const messages: ChatMessage[] = [
+      { role: 'system', content: getTldrSystemPrompt(language) },
+      {
+        role: 'user',
+        content: `Page title: "${pageTitle}"\n\nPage content:\n${pageContent.slice(0, 12000)}`,
+      },
+    ];
+
+    return this._chatStream(messages, onChunk);
+  }
+
+  async askFollowUpStream(
+    chatMessages: MessageAttributes[],
+    pageContent: string,
+    pageTldr: string,
+    language: SummaryLanguage,
+    onChunk: (text: string) => void
+  ): Promise<string> {
+    const systemMessage: ChatMessage = {
+      role: 'system',
+      content: `${getChatSystemPrompt(language)}\n\nPage TLDR:\n${pageTldr}\n\nFull page content (truncated):\n${pageContent.slice(0, 8000)}`,
+    };
+
+    return this._chatStream([systemMessage, ...chatMessages], onChunk);
+  }
+
+  private async _chatStream(
+    messages: ChatMessage[],
+    onChunk: (text: string) => void
+  ): Promise<string> {
+    const apiKey = this.settings.get('apiKey');
+    if (!apiKey) throw new Error('API key not configured');
+
+    const model = this.settings.get('model');
+
+    const response = await fetch('https://api.openai.com/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({ model, messages, stream: true }),
+    });
+
+    if (!response.ok) {
+      const err = await response.json().catch(() => ({}));
+      throw new Error(err.error?.message || `OpenAI API error: ${response.status}`);
+    }
+
+    const reader = response.body!.getReader();
+    const decoder = new TextDecoder();
+    let fullText = '';
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop() || '';
+
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed || !trimmed.startsWith('data: ')) continue;
+
+        const data = trimmed.slice(6);
+        if (data === '[DONE]') break;
+
+        try {
+          const parsed = JSON.parse(data);
+          const delta = parsed.choices?.[0]?.delta?.content;
+          if (delta) {
+            fullText += delta;
+            onChunk(fullText);
+          }
+        } catch {
+          // skip malformed chunks
+        }
+      }
+    }
+
+    return fullText;
+  }
+}
+
+export default OpenAIService;

package/src/app/styles/chat.css

@@ -0,0 +1,38 @@
+@layer components {
+  .chat {
+    @apply bg-white rounded-2xl border border-surface-200 shadow-sm overflow-hidden;
+  }
+
+  .chat__header {
+    @apply px-6 py-4 border-b border-surface-100;
+  }
+
+  .chat__title {
+    @apply text-sm font-semibold text-surface-700 uppercase tracking-wider;
+  }
+
+  .chat__messages {
+    @apply px-6 py-4 flex flex-col gap-4 max-h-96 overflow-y-auto;
+  }
+
+  .chat__empty {
+    @apply text-sm text-surface-400 text-center py-6;
+  }
+
+  .chat__input-wrap {
+    @apply px-4 py-3 border-t border-surface-100 flex gap-2;
+  }
+
+  .chat__input {
+    @apply flex-1 px-4 py-2.5 rounded-xl border border-surface-300 bg-surface-50 text-sm text-surface-800 placeholder-surface-400
+           focus:outline-none focus:ring-2 focus:ring-primary-200 focus:border-primary-400 transition-all resize-none;
+  }
+
+  .chat__send-btn {
+    @apply btn btn--primary px-4;
+  }
+
+  .chat__send-btn:disabled {
+    @apply bg-surface-300 text-surface-500 cursor-not-allowed shadow-none;
+  }
+}

package/src/app/styles/input.css

@@ -0,0 +1,13 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+
+@import './layout.css';
+@import './settings.css';
+@import './tldr.css';
+@import './chat.css';
+@import './message.css';
+@import './loader.css';
+@import './scrollbar.css';
+@import './language-selector.css';
+
+@import 'tailwindcss/utilities';

package/src/app/styles/language-selector.css

@@ -0,0 +1,18 @@
+@layer components {
+  .lang-selector {
+    @apply flex items-center gap-3;
+  }
+
+  .lang-selector__field {
+    @apply flex flex-col gap-1;
+  }
+
+  .lang-selector__label {
+    @apply text-[10px] font-medium text-surface-400 uppercase tracking-wider;
+  }
+
+  .lang-selector__select {
+    @apply px-2 py-1 text-xs border border-surface-300 rounded-lg bg-white text-surface-700
+           focus:outline-none focus:ring-1 focus:ring-primary-200 focus:border-primary-400 cursor-pointer;
+  }
+}