janito 1.10.0__py3-none-any.whl → 1.11.1__py3-none-any.whl

janito/shell/ui/interactive.py

@@ -24,6 +24,92 @@ def print_welcome(console, version=None, continue_id=None):
         )
 
 
+def format_tokens(n, tag=None):
+    if n is None:
+        return "?"
+    if n < 1000:
+        val = str(n)
+    elif n < 1000000:
+        val = f"{n/1000:.1f}k"
+    else:
+        val = f"{n/1000000:.1f}M"
+    return f"<{tag}>{val}</{tag}>" if tag else val
+
+
+def assemble_first_line(model_name, role_ref, style_ref):
+    model_part = f" {tr('Model')}: <model>{model_name}</model>" if model_name else ""
+    role_part = ""
+    vanilla_mode = runtime_config.get("vanilla_mode", False)
+    if role_ref and not vanilla_mode:
+        role = role_ref()
+        if role:
+            role_part = f"{tr('Role')}: <role>{role}</role>"
+    style_part = ""
+    if style_ref:
+        style = style_ref()
+        if style:
+            style_part = f"{tr('Style')}: <b>{style}</b>"
+    first_line_parts = []
+    if model_part:
+        first_line_parts.append(model_part)
+    if role_part:
+        first_line_parts.append(role_part)
+    if style_part:
+        first_line_parts.append(style_part)
+    return " | ".join(first_line_parts)
+
+
+def assemble_second_line(
+    width,
+    last_usage_info_ref,
+    history_ref,
+    messages_ref,
+    session_id,
+    model_name,
+    role_ref,
+    style_ref,
+):
+    usage = last_usage_info_ref()
+    prompt_tokens = usage.get("prompt_tokens") if usage else None
+    completion_tokens = usage.get("completion_tokens") if usage else None
+    total_tokens = usage.get("total_tokens") if usage else None
+    msg_count = len(history_ref()) if history_ref else len(messages_ref())
+    left = f" {tr('Messages')}: <msg_count>{msg_count}</msg_count>"
+    tokens_part = ""
+    if (
+        prompt_tokens is not None
+        or completion_tokens is not None
+        or total_tokens is not None
+    ):
+        tokens_part = (
+            f" | {tr('Tokens')} - {tr('Prompt')}: {format_tokens(prompt_tokens, 'tokens_in')}, "
+            f"{tr('Completion')}: {format_tokens(completion_tokens, 'tokens_out')}, "
+            f"{tr('Total')}: {format_tokens(total_tokens, 'tokens_total')}"
+        )
+    session_part = (
+        f" | Session ID: <session_id>{session_id}</session_id>" if session_id else ""
+    )
+    second_line = f"{left}{tokens_part}{session_part}"
+    total_len = len(left) + len(tokens_part) + len(session_part)
+    first_line = assemble_first_line(model_name, role_ref, style_ref)
+    if first_line:
+        total_len += len(first_line) + 3
+    if total_len < width:
+        padding = " " * (width - total_len)
+        second_line = f"{left}{tokens_part}{session_part}{padding}"
+    return second_line
+
+
+def assemble_bindings_line():
+    return (
+        f"<b> F12</b>: {tr('Quick Action')} | "
+        f"<b>Ctrl-Y</b>: {tr('Yes')} | "
+        f"<b>Ctrl-N</b>: {tr('No')} | "
+        f"<b>/help</b>: {tr('Help')} | "
+        f"<b>/restart</b>: {tr('Reset Conversation')}"
+    )
+
+
 def get_toolbar_func(
     messages_ref,
     last_usage_info_ref,
@@ -37,82 +123,20 @@ def get_toolbar_func(
 ):
     from prompt_toolkit.application.current import get_app
 
-    def format_tokens(n, tag=None):
-        if n is None:
-            return "?"
-        if n < 1000:
-            val = str(n)
-        elif n < 1000000:
-            val = f"{n/1000:.1f}k"
-        else:
-            val = f"{n/1000000:.1f}M"
-        return f"<{tag}>{val}</{tag}>" if tag else val
-
     def get_toolbar():
         width = get_app().output.get_size().columns
-        model_part = (
-            f" {tr('Model')}: <model>{model_name}</model>" if model_name else ""
-        )
-        role_part = ""
-        vanilla_mode = runtime_config.get("vanilla_mode", False)
-        if role_ref and not vanilla_mode:
-            role = role_ref()
-            if role:
-                role_part = f"{tr('Role')}: <role>{role}</role>"
-
-        style_part = ""
-        if style_ref:
-            style = style_ref()
-            if style:
-                style_part = f"{tr('Style')}: <b>{style}</b>"
-        usage = last_usage_info_ref()
-        prompt_tokens = usage.get("prompt_tokens") if usage else None
-        completion_tokens = usage.get("completion_tokens") if usage else None
-        total_tokens = usage.get("total_tokens") if usage else None
-        first_line_parts = []
-        if model_part:
-            first_line_parts.append(model_part)
-
-        if role_part:
-            first_line_parts.append(role_part)
-        if style_part:
-            first_line_parts.append(style_part)
-        first_line = " | ".join(first_line_parts)
-        msg_count = len(history_ref()) if history_ref else len(messages_ref())
-        left = f" {tr('Messages')}: <msg_count>{msg_count}</msg_count>"
-        tokens_part = ""
-        if (
-            prompt_tokens is not None
-            or completion_tokens is not None
-            or total_tokens is not None
-        ):
-            tokens_part = (
-                f" | {tr('Tokens')} - {tr('Prompt')}: {format_tokens(prompt_tokens, 'tokens_in')}, "
-                f"{tr('Completion')}: {format_tokens(completion_tokens, 'tokens_out')}, "
-                f"{tr('Total')}: {format_tokens(total_tokens, 'tokens_total')}"
-            )
-        # Move /help and /restart tips to key bindings/info line
-        # Compose second/status line (no help_part)
-        session_part = (
-            f" | Session ID: <session_id>{session_id}</session_id>"
-            if session_id
-            else ""
-        )
-        second_line = f"{left}{tokens_part}{session_part}"
-        total_len = len(left) + len(tokens_part) + len(session_part)
-        if first_line:
-            total_len += len(first_line) + 3
-        if total_len < width:
-            padding = " " * (width - total_len)
-            second_line = f"{left}{tokens_part}{session_part}{padding}"
-        # Add key bindings info as an extra line, now including /help and /restart
-        bindings_line = (
-            f"<b> F12</b>: {tr('Quick Action')} | "
-            f"<b>Ctrl-Y</b>: {tr('Yes')} | "
-            f"<b>Ctrl-N</b>: {tr('No')} | "
-            f"<b>/help</b>: {tr('Help')} | "
-            f"<b>/restart</b>: {tr('Reset Conversation')}"
+        first_line = assemble_first_line(model_name, role_ref, style_ref)
+        second_line = assemble_second_line(
+            width,
+            last_usage_info_ref,
+            history_ref,
+            messages_ref,
+            session_id,
+            model_name,
+            role_ref,
+            style_ref,
         )
+        bindings_line = assemble_bindings_line()
         if first_line:
             toolbar_text = first_line + "\n" + second_line + "\n" + bindings_line
         else:

janito/termweb/static/editor.css

@@ -1,9 +1,9 @@
 /* Highlight active line in CodeMirror */
 .CodeMirror-activeline-background {
-    background: #353b45 !important;
+    background: #353b45;
 }
 body.light-theme .CodeMirror-activeline-background {
-    background: #e0eaff !important;
+    background: #e0eaff;
 }
 html, body {
     height: 100%;
@@ -39,36 +39,22 @@ body.light-theme {
     flex-direction: column;
     height: 100%;
     min-height: 0;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-.CodeMirror {
-    flex: 1 1 auto;
-    height: 100% !important;
-    min-height: 0;
-    font-size: 1.1em;
-    background: #282a36;
-    color: #f8f8f2;
-    border-radius: 0;
-    border: none;
-    transition: background 0.2s, color 0.2s;
-}
-body.light-theme .CodeMirror {
-    background: #fff;
-    color: #222;
+    padding: 0;
+    margin: 0;
 }
+/* Removed custom .CodeMirror background/color to use CodeMirror's theme defaults */
 .header {
     background: #222;
     color: #fff;
-    padding: 10px 24px;
-    font-size: 1.3em;
+    padding: 4px 12px;
+    font-size: 0.95em;
     font-weight: bold;
     position: relative;
     transition: background 0.2s, color 0.2s;
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    height: 56px;
+    height: 36px;
 }
 
 .header-title {
@@ -78,20 +64,39 @@ body.light-theme .CodeMirror {
     transform: translate(-50%, -50%);
     pointer-events: none;
     font-weight: bold;
-    font-size: 1.3em;
+    font-size: 1.05em;
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+}
+
+.filename-display {
+    font-weight: normal;
+    font-size: 0.98em;
+    color: #bbb;
+    margin-left: 0.5em;
+    pointer-events: auto;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 180px;
+}
+body.light-theme .filename-display {
+    color: #666;
 }
 
 .footer {
     width: 100%;
     background: #23272b;
     color: #fff;
-    padding: 10px 24px;
+    padding: 4px 12px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     border-top: 1px solid #333;
-    min-height: 48px;
+    min-height: 28px;
+    font-size: 0.95em;
 }
 
 .save-btn {
@@ -102,7 +107,6 @@ body.light-theme .CodeMirror {
     margin-left: auto;
 }
 
-
 .save-btn {
     background: #4caf50;
     color: #fff;
@@ -117,8 +121,8 @@ body.light-theme .CodeMirror {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
-    height: 36px;
+    height: 100%;
+    aspect-ratio: 1/1;
     font-size: 1.3em;
     line-height: 1;
     padding: 0;
@@ -139,4 +143,3 @@ body.light-theme .header {
     background: #eaeaea;
     color: #222;
 }
-

janito/termweb/static/editor.css.bak

@@ -1,27 +1,145 @@
+/* Highlight active line in CodeMirror */
+.CodeMirror-activeline-background {
+    background: #353b45;
+}
+body.light-theme .CodeMirror-activeline-background {
+    background: #e0eaff;
+}
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    background: #181a1b;
+    color: #eee;
+    transition: background 0.2s, color 0.2s;
+}
+body.light-theme {
+    background: #f5f5f5;
+    color: #222;
+}
+.main {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: stretch;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    height: 100%;
+}
+.editor-pane {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+}
+/* Removed custom .CodeMirror background/color to use CodeMirror's theme defaults */
+.header {
+    background: #222;
+    color: #fff;
+    padding: 4px 12px;
+    font-size: 0.95em;
+    font-weight: bold;
+    position: relative;
+    transition: background 0.2s, color 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: 36px;
+}
+
+.header-title {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    font-weight: bold;
+    font-size: 1.05em;
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+}
+
+.filename-display {
+    font-weight: normal;
+    font-size: 0.98em;
+    color: #bbb;
+    margin-left: 0.5em;
+    pointer-events: auto;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 180px;
+}
+body.light-theme .filename-display {
+    color: #666;
+}
+
+.footer {
+    width: 100%;
+    background: #23272b;
+    color: #fff;
+    padding: 4px 12px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    border-top: 1px solid #333;
+    min-height: 28px;
+    font-size: 0.95em;
+}
 
 .save-btn {
-    background: linear-gradient(90deg, #00ff99 0%, #00cfff 100%);
-    color: #181a1b;
+    /* No margin needed, align left in footer */
+}
+
+.theme-switcher {
+    margin-left: auto;
+}
+
+.save-btn {
+    background: #4caf50;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 6px 14px;
+    cursor: pointer;
+    font-size: 1em;
+}
+
+.theme-switcher {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    font-size: 1.3em;
+    line-height: 1;
+    padding: 0;
+    background: #444;
+    color: #fff;
     border: none;
-    border-radius: 8px;
-    padding: 12px 38px;
+    border-radius: 4px;
     cursor: pointer;
-    font-size: 1.18em;
-    font-weight: 900;
-    box-shadow: 0 0 16px 4px rgba(0,255,153,0.35), 0 2px 16px 0 rgba(0,207,255,0.18);
-    outline: 2.5px solid #00cfff;
-    outline-offset: 2px;
-    transition: box-shadow 0.2s, outline 0.2s, background 0.2s, color 0.2s;
-    letter-spacing: 0.7px;
-    animation: save-btn-pop 0.7s cubic-bezier(.68,-0.55,.27,1.55) 1;
-    min-width: 110px;
-    min-height: 44px;
-    z-index: 2;
-    text-shadow: 0 2px 8px #fff8, 0 1px 0 #fff8;
-}
-.save-btn:hover, .save-btn:focus {
-    background: linear-gradient(90deg, #00cfff 0%, #00ff99 100%);
-    color: #111;
-    box-shadow: 0 0 24px 6px rgba(0,255,153,0.45), 0 4px 24px 0 rgba(0,207,255,0.28);
-    outline: 3px solid #00ff99;
+    transition: background 0.2s, color 0.2s;
+}
+
+body.light-theme .theme-switcher {
+    background: #ddd;
+    color: #222;
+}
+
+body.light-theme .header {
+    background: #eaeaea;
+    color: #222;
 }

janito/termweb/static/editor.html

@@ -4,7 +4,7 @@
     <link rel="icon" type="image/svg+xml" href="/static/termicon.svg">
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
     <meta charset="UTF-8">
-    <title>TermWeb Editor — janito.dev</title>
+    <title>Janito Light Editor</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/dracula.min.css">
     <link rel="stylesheet" href="/static/termweb.css">
@@ -12,27 +12,32 @@
 </head>
 <body>
     <div class="header">
-        <div class="header-title">TermWeb Editor</div>
-        <button class="theme-switcher" id="theme-switcher" title="Alternator tema">
-            <span id="theme-icon" aria-label="Switch theme" style="pointer-events:none;">🌙</span>
-        </button>
-    </div>
+    <div class="header-title">Janito Light Editor</div>
+    <span id="filename-display" class="filename-display"></span>
+    <div style="flex:1 1 auto;"></div>
+    <button class="theme-switcher" id="theme-switcher" title="Alternator tema">
+        <span id="theme-icon" aria-label="Switch theme" style="pointer-events:none;">🌙</span>
+    </button>
+</div>
     <div class="footer">
         <button class="save-btn" id="save-btn">Save</button>
     </div>
-    <div id="save-popup" style="display:none;position:fixed;top:32px;right:32px;z-index:9999;background:#323b4c;color:#fff;padding:14px 28px;border-radius:8px;box-shadow:0 2px 12px #0007;font-size:1.1em;">Saved!</div>
+    <div id="save-popup" style="display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;background:#323b4c;color:#fff;padding:14px 28px;border-radius:8px;box-shadow:0 2px 12px #0007;font-size:1.1em;">Saved!</div>
     <div class="main">
         <div class="editor-pane">
             <textarea id="code" name="code"></textarea>
+            <div id="save-popup" style="display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;background:#323b4c;color:#fff;padding:14px 28px;border-radius:8px;box-shadow:0 2px 12px #0007;font-size:1.1em;">Saved!</div>
         </div>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/python/python.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/django/django.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/dracula.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/selection/active-line.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/search/search.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/search/searchcursor.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/dialog/dialog.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/mode/overlay.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/dialog/dialog.min.css">
 
     <script src="/static/editor.js"></script>

janito/termweb/static/editor.html.bak

@@ -4,24 +4,25 @@
     <link rel="icon" type="image/svg+xml" href="/static/termicon.svg">
     <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
     <meta charset="UTF-8">
-    <title>TermWeb Editor — janito.dev</title>
+    <title>Janito Light Editor</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/dracula.min.css">
     <link rel="stylesheet" href="/static/termweb.css">
     <link rel="stylesheet" href="/static/editor.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/dialog/dialog.min.css">
 </head>
 <body>
-    <div class="header compact-header">
-        <div class="header-title">TermWeb Editor</div>
-        <div class="header-buttons no-shrink">
-            <button class="save-btn" id="save-btn" title="Save (Ctrl+S)">Save</button>
-            <button class="theme-switcher" id="theme-switcher" title="Switch theme">
-                <span id="theme-icon" aria-label="Switch theme">🌙</span>
-            </button>
-        </div>
+    <div class="header">
+    <div class="header-title">Janito Light Editor</div>
+    <span id="filename-display" class="filename-display"></span>
+    <div style="flex:1 1 auto;"></div>
+    <button class="theme-switcher" id="theme-switcher" title="Alternator tema">
+        <span id="theme-icon" aria-label="Switch theme" style="pointer-events:none;">🌙</span>
+    </button>
+</div>
+    <div class="footer">
+        <button class="save-btn" id="save-btn">Save</button>
     </div>
-    <div id="toast" class="toast"></div>
+    <div id="save-popup" style="display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;background:#323b4c;color:#fff;padding:14px 28px;border-radius:8px;box-shadow:0 2px 12px #0007;font-size:1.1em;">Saved!</div>
     <div class="main">
         <div class="editor-pane">
             <textarea id="code" name="code"></textarea>
@@ -29,11 +30,15 @@
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/python/python.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/django/django.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/dracula.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/selection/active-line.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/search/search.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/search/searchcursor.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/dialog/dialog.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/mode/overlay.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/dialog/dialog.min.css">
+
     <script src="/static/editor.js"></script>
 </body>
 </html>