glancer 1.0.0

data/app/assets/javascripts/glancer/controllers/toast_controller.js

@@ -0,0 +1,63 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    document.addEventListener("glancer:toast", this.handleToast.bind(this));
+  }
+
+  disconnect() {
+    document.removeEventListener("glancer:toast", this.handleToast.bind(this));
+  }
+
+  handleToast(event) {
+    const { message, type = "info" } = event.detail;
+    this.show(message, type);
+  }
+
+  show(message, type = "info") {
+    const toast = document.createElement("div");
+
+    const colors = {
+      success: "bg-green-600 text-white",
+      error:   "bg-red-600 text-white",
+      info:    "bg-gray-800 dark:bg-gray-700 text-white",
+    };
+
+    const icons = {
+      success: "#icon-check",
+      error:   "#icon-x",
+      info:    "#icon-info",
+    };
+
+    toast.className = [
+      "pointer-events-auto flex items-center gap-2.5 px-4 py-3 rounded-xl shadow-lg text-sm font-medium",
+      "translate-y-2 opacity-0 transition-all duration-200 ease-out",
+      colors[type] || colors.info,
+    ].join(" ");
+
+    toast.innerHTML = `
+      <svg class="w-4 h-4 flex-shrink-0" aria-hidden="true"><use href="${icons[type] || icons.info}"/></svg>
+      <span>${this.escapeHtml(message)}</span>
+    `;
+
+    this.element.appendChild(toast);
+
+    // Animate in
+    requestAnimationFrame(() => {
+      toast.classList.remove("translate-y-2", "opacity-0");
+    });
+
+    // Auto-dismiss after 4s
+    setTimeout(() => {
+      toast.classList.add("opacity-0", "translate-y-2");
+      toast.addEventListener("transitionend", () => toast.remove(), { once: true });
+    }, 4000);
+  }
+
+  escapeHtml(str) {
+    return String(str)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;");
+  }
+}

data/app/assets/stylesheets/glancer/application.css

@@ -0,0 +1,350 @@
+/* Smooth scroll for the messages container */
+#chat-messages {
+  scroll-behavior: smooth;
+}
+
+/* Typewriter cursor */
+.cursor-blink {
+  animation: blink 1s step-end infinite;
+  color: #a855f7;
+}
+
+@keyframes blink {
+  from, to { opacity: 1 }
+  50% { opacity: 0 }
+}
+
+/* Links inside message content */
+.message-content a {
+  color: #9333ea;
+  text-decoration: underline;
+  text-decoration-color: rgba(147, 51, 234, 0.3);
+  text-underline-offset: 2px;
+}
+
+.dark .message-content a {
+  color: #c084fc;
+  text-decoration-color: rgba(192, 132, 252, 0.3);
+}
+
+/* ── Prism base overrides ────────────────────────────────────────────────── */
+/* Layout/font only — no background here so light/dark themes can apply.    */
+pre[class*="language-"],
+code[class*="language-"] {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace !important;
+  font-size: 0.75rem !important;
+  line-height: 1.6 !important;
+  text-shadow: none !important;
+}
+
+pre[class*="language-"] {
+  border-radius: 0 !important;
+  margin: 0 !important;
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+}
+
+/* ── Dark mode: Prism token colours (GitHub dark palette) ────────────────── */
+.dark pre[class*="language-"] {
+  background: #161b22 !important;
+  color: #e6edf3 !important;
+}
+code[class*="language-"] { color: #e6edf3; }
+.dark .token.comment,
+.dark .token.prolog,
+.dark .token.doctype,
+.dark .token.cdata         { color: #8b949e; font-style: italic; }
+.dark .token.punctuation   { color: #c9d1d9; }
+.dark .token.property,
+.dark .token.tag,
+.dark .token.boolean,
+.dark .token.number,
+.dark .token.constant,
+.dark .token.symbol        { color: #79c0ff; }
+.dark .token.selector,
+.dark .token.attr-name,
+.dark .token.string,
+.dark .token.char,
+.dark .token.builtin,
+.dark .token.inserted      { color: #a5d6ff; }
+.dark .token.operator,
+.dark .token.url           { color: #e6edf3; }
+.dark .token.atrule,
+.dark .token.attr-value,
+.dark .token.keyword       { color: #ff7b72; }
+.dark .token.function,
+.dark .token.class-name    { color: #d2a8ff; }
+.dark .token.regex,
+.dark .token.important,
+.dark .token.variable      { color: #ffa657; }
+.dark .token.deleted       { color: #ffa198; }
+
+/* ── SQL code viewer: always dark (Catppuccin Mocha) ────────────────────── */
+[data-sql-block] pre[class*="language-"] {
+  background: #1e1e2e !important;
+  color: #cdd6f4 !important;
+  text-shadow: none !important;
+}
+[data-sql-block] .token.comment,
+[data-sql-block] .token.prolog    { color: #6c7086 !important; font-style: italic; }
+[data-sql-block] .token.keyword   { color: #cba6f7 !important; }
+[data-sql-block] .token.string,
+[data-sql-block] .token.char      { color: #a6e3a1 !important; }
+[data-sql-block] .token.number,
+[data-sql-block] .token.boolean   { color: #fab387 !important; }
+[data-sql-block] .token.function  { color: #89b4fa !important; }
+[data-sql-block] .token.class-name { color: #f38ba8 !important; }
+[data-sql-block] .token.operator  { color: #89dceb !important; }
+[data-sql-block] .token.punctuation { color: #9399b2 !important; }
+[data-sql-block] .token.property,
+[data-sql-block] .token.tag       { color: #f2cdcd !important; }
+[data-sql-block] .token.atrule,
+[data-sql-block] .token.attr-value { color: #f5c2e7 !important; }
+[data-sql-block] .token.variable  { color: #cdd6f4 !important; }
+[data-sql-block] .token.selector,
+[data-sql-block] .token.inserted  { color: #a6e3a1 !important; }
+[data-sql-block] .token.deleted   { color: #f38ba8 !important; }
+
+/* Inline code (not inside pre) */
+.message-content code:not(pre code) {
+  background: rgba(147, 51, 234, 0.08);
+  color: #9333ea;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.8em;
+}
+
+.dark .message-content code:not(pre code) {
+  background: rgba(192, 132, 252, 0.1);
+  color: #c084fc;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid;
+  border-color: #e5e7eb;
+  margin: 0.75rem 0;
+}
+
+.dark hr {
+  border-color: #1f2937;
+}
+
+/* Code blocks inside user message bubbles (white text on purple bg) */
+.user-message-prose code {
+  background: rgba(255, 255, 255, 0.18);
+  color: #f0e8ff;
+  padding: 0.1em 0.35em;
+  border-radius: 3px;
+  font-family: ui-monospace, monospace;
+  font-size: 0.85em;
+}
+.user-message-prose pre {
+  background: rgba(0, 0, 0, 0.35) !important;
+  border-radius: 6px;
+  margin: 0.5em 0;
+  padding: 0.75em 1em !important;
+  overflow-x: auto;
+  max-width: 100%;
+  white-space: pre-wrap !important;
+  word-break: break-all;
+}
+.user-message-prose pre code {
+  background: transparent;
+  padding: 0;
+  color: #e8d5ff;
+  font-size: 0.78rem !important;
+}
+.user-message-prose a {
+  color: #e9d5ff;
+  text-decoration: underline;
+}
+.user-message-prose p { margin: 0.25em 0; }
+
+/* @mention highlight in message content — purple bold, no background, real link */
+.glancer-mention {
+  display: inline;
+  background: none;
+  color: #7e22ce;
+  font-weight: 700;
+  padding: 0 0.25em;
+  border-radius: 0.2em;
+  text-decoration: none;
+}
+.glancer-mention:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.dark .glancer-mention {
+  background: none;
+  color: #c084fc;
+}
+/* Inside user purple bubble */
+.user-message-prose .glancer-mention {
+  background: none;
+  color: #f0e8ff;
+  font-weight: 700;
+}
+
+/* SQL editor textarea — matches Prism code block styling */
+.glancer-sql-editor {
+  background: #1e1e2e !important;
+  color: #cdd6f4 !important;
+  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace !important;
+  font-size: 0.75rem !important;
+  line-height: 1.6 !important;
+  tab-size: 2;
+}
+
+/* Code editor (contenteditable + Prism live highlighting) — always dark */
+.glancer-code-editor {
+  background: #1e1e2e !important;
+  color: #cdd6f4 !important;
+  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace !important;
+  font-size: 0.75rem !important;
+  line-height: 1.6 !important;
+  tab-size: 2;
+  padding: 0.75rem;
+  white-space: pre-wrap;
+  word-break: break-all;
+  min-height: 80px;
+  outline: none;
+  caret-color: #cdd6f4;
+}
+/* Prism injects spans — preserve wrapping */
+.glancer-code-editor * {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+/* Token colours inside the editor (same Catppuccin palette as [data-sql-block]) */
+.glancer-code-editor .token.comment,
+.glancer-code-editor .token.prolog    { color: #6c7086; font-style: italic; }
+.glancer-code-editor .token.keyword   { color: #cba6f7; }
+.glancer-code-editor .token.string,
+.glancer-code-editor .token.char      { color: #a6e3a1; }
+.glancer-code-editor .token.number,
+.glancer-code-editor .token.boolean   { color: #fab387; }
+.glancer-code-editor .token.function  { color: #89b4fa; }
+.glancer-code-editor .token.class-name { color: #f38ba8; }
+.glancer-code-editor .token.operator  { color: #89dceb; }
+.glancer-code-editor .token.punctuation { color: #9399b2; }
+.glancer-code-editor .token.property,
+.glancer-code-editor .token.tag       { color: #f2cdcd; }
+.glancer-code-editor .token.variable  { color: #cdd6f4; }
+.glancer-code-editor .token.atrule,
+.glancer-code-editor .token.attr-value { color: #f5c2e7; }
+.glancer-code-editor .token.selector  { color: #a6e3a1; }
+
+/* @ mention backdrop (highlights @table tokens behind the textarea) */
+.mention-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  overflow: hidden;
+  color: transparent;
+  white-space: pre-wrap;
+  word-break: break-word;
+  z-index: 0;
+}
+.mention-backdrop mark.mention-hl {
+  background: rgba(147, 51, 234, 0.15);
+  border-radius: 0.2em;
+  color: transparent;
+}
+.dark .mention-backdrop mark.mention-hl {
+  background: rgba(192, 132, 252, 0.2);
+}
+
+/* @ mention chip in chat form — links to schema page */
+.mention-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: none;
+  color: #7e22ce;
+  border: none;
+  border-radius: 9999px;
+  padding: 0.1rem 0.4rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  cursor: pointer;
+  text-decoration: none;
+}
+.mention-chip:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.dark .mention-chip {
+  background: none;
+  color: #c084fc;
+}
+
+/* ── Fullscreen table dialog ─────────────────────────────────────────────── */
+.glancer-fullscreen-dialog {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  max-width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  overflow: hidden;
+}
+.glancer-fullscreen-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.6);
+}
+.glancer-fullscreen-inner {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  padding: 0;
+}
+.dark .glancer-fullscreen-inner {
+  background: #111827;
+}
+.glancer-fullscreen-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 1px solid #e5e7eb;
+  background: #f9fafb;
+  flex-shrink: 0;
+}
+.dark .glancer-fullscreen-toolbar {
+  border-bottom-color: #374151;
+  background: #1f2937;
+}
+.glancer-fullscreen-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.dark .glancer-fullscreen-title { color: #9ca3af; }
+.glancer-fullscreen-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+  color: #6b7280;
+  transition: background 0.15s, color 0.15s;
+}
+.glancer-fullscreen-close:hover { background: #f3f4f6; color: #111827; }
+.dark .glancer-fullscreen-close:hover { background: #374151; color: #f9fafb; }
+.glancer-fullscreen-body {
+  flex: 1;
+  overflow: auto;
+  padding: 1rem;
+}

data/app/assets/stylesheets/glancer/code-blocks.css

@@ -0,0 +1,6 @@
+/* Legacy selectors kept for backward compat with any host-app overrides */
+.message pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  word-break: break-word;
+}

data/app/assets/stylesheets/glancer/list.css

@@ -0,0 +1,31 @@
+.message-content ul,
+.message-content ol {
+  padding-left: 1.5rem;
+  margin: 1rem 0;
+}
+
+.message-content ul {
+  list-style-type: disc;
+}
+
+.message-content ol {
+  list-style-type: decimal;
+}
+
+.message-content li {
+  margin-bottom: 0.5rem;
+  line-height: 1.5;
+  color: #374151; /* gray-700 */
+}
+
+.dark .message-content li {
+  color: #d1d5db; /* gray-300 */
+}
+
+.message-content li::marker {
+  color: #6b7280; /* gray-500 */
+}
+
+.dark .message-content li::marker {
+  color: #9ca3af; /* gray-400 */
+}

data/app/assets/stylesheets/glancer/scrollbar.css

@@ -0,0 +1,16 @@
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #1a1a2e;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #4b5563;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
+}

data/app/assets/stylesheets/glancer/table.css

@@ -0,0 +1,97 @@
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem; /* Tailwind's text-sm */
+}
+
+thead {
+  background-color: #f9fafb; /* gray-50 */
+}
+
+thead th {
+  text-align: left;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #e5e7eb; /* gray-200 */
+  font-weight: 600;
+  color: #374151; /* gray-700 */
+  white-space: nowrap;
+}
+
+tbody td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #e5e7eb; /* gray-200 */
+  color: #374151; /* gray-700 */
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+tr:hover td {
+  background-color: #f3f4f6; /* gray-100 */
+}
+
+/* Dark mode support */
+.dark thead {
+  background-color: #1f2937; /* gray-800 */
+}
+
+.dark thead th,
+.dark tbody td {
+  border-color: #374151; /* gray-700 */
+  color: #d1d5db; /* gray-300 */
+}
+
+.dark tr:hover td {
+  background-color: #374151; /* gray-700 */
+}
+.message-content table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.message-content th,
+.message-content td {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #e5e7eb;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.message-content thead {
+  background-color: #f9fafb;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.dark .message-content th,
+.dark .message-content td {
+  border-color: #374151;
+  color: #d1d5db;
+}
+
+.dark .message-content thead {
+  background-color: #1f2937;
+}
+
+.table-scroll-wrapper {
+  overflow-x: auto;
+  max-width: 100%;
+  margin: 1rem 0;
+}
+
+.table-scroll-inner {
+  max-height: 28rem; /* cerca de 10 linhas */
+  overflow-y: auto;
+}
+
+/* Scrollbar melhorada (opcional) */
+.table-scroll-inner::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+
+.table-scroll-inner::-webkit-scrollbar-thumb {
+  background-color: rgba(100, 116, 139, 0.4); /* slate-500 */
+  border-radius: 3px;
+}

data/app/controllers/glancer/application_controller.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Glancer
+  # :nodoc:
+  class ApplicationController < ::ApplicationController
+    before_action :configure_locale
+
+    # ActionController::Live runs each request in a new thread. Devise/Warden
+    # signals unauthenticated access via `throw :warden`, which Rack's middleware
+    # normally catches. Inside a Live thread that throw escapes as an
+    # UncaughtThrowError. Rescue it here so controllers that include Live (e.g.
+    # MessagesController) return a proper response instead of a 500.
+    rescue_from UncaughtThrowError do |e|
+      raise e unless defined?(::Warden) && e.tag == :warden
+
+      login_path = begin
+        main_app.new_user_session_path
+      rescue NoMethodError
+        "/"
+      end
+      request.format.html? ? redirect_to(login_path) : head(:unauthorized)
+    end
+
+    private
+
+    def configure_locale
+      lang = Glancer::Setting.get("ui_language", default: "en")
+      I18n.locale = lang.to_sym
+    rescue StandardError
+      I18n.locale = :en
+    end
+  end
+end

data/app/controllers/glancer/chats_controller.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Glancer
+  # :nodoc:
+  class ChatsController < Glancer::ApplicationController
+    layout "glancer/application"
+
+    def index
+      @chats = Glancer::Chat.order(created_at: :desc)
+      @chat  = nil
+    end
+
+    def show
+      @chat = Glancer::Chat.find_by(id: params[:id])
+      return redirect_to(glancer.root_path, alert: "Chat not found") unless @chat
+
+      @chats    = Glancer::Chat.order(created_at: :desc)
+      @messages = @chat.messages.order(:created_at)
+    end
+
+    def start
+      content = params[:content].to_s.strip
+      return render(json: { error: "Message required" }, status: :unprocessable_entity) if content.blank?
+
+      @chat    = Glancer::Chat.create!(title: "New Chat")
+      @message = @chat.messages.create!(role: :user, content: content)
+
+      @response_message = @chat.messages.create!(
+        role: :assistant,
+        content: "",
+        code_type: "sql",
+        user_message: @message,
+        status: :processing
+      )
+
+      Glancer::AsyncRunner.call(@response_message.id, content)
+
+      render json: { chat_id: @chat.id }
+    rescue StandardError => e
+      Glancer::Utils::Logger.error("ChatsController#start", e.message)
+      render json: { error: e.message }, status: :internal_server_error
+    end
+
+    def destroy
+      Glancer::Chat.find(params[:id]).destroy!
+      redirect_to glancer.root_path
+    end
+  end
+end