kash-shell 0.3.16__py3-none-any.whl → 0.3.17__py3-none-any.whl

kash/commands/base/files_command.py

@@ -64,7 +64,6 @@ def _print_listing_tallies(
             f"{EMOJI_WARN} {file_listing.files_ignored} files and {file_listing.dirs_ignored} dirs were ignored",
             style=COLOR_EXTRA,
         )
-        cprint("(use --no_ignore to show hidden files)", style=STYLE_HINT)
 
     if file_listing.total_skipped > 0:
         cprint(
@@ -72,7 +71,8 @@ def _print_listing_tallies(
             f"at max_files={max_files}, max_depth={max_depth}, max_per_subdir={max_per_subdir}",
             style=COLOR_EXTRA,
         )
-        cprint("(use --no_max to remove cutoff)", style=STYLE_HINT)
+    if file_listing.total_ignored + file_listing.total_skipped > 0:
+        cprint("(use --all to show all files)", style=STYLE_HINT)
 
 
 DEFAULT_MAX_PER_GROUP = 50

kash/config/colors.py

@@ -133,22 +133,26 @@ web_light_translucent = SimpleNamespace(
     primary=hsl_to_hex("hsl(188, 31%, 41%)"),
     primary_light=hsl_to_hex("hsl(188, 40%, 62%)"),
     secondary=hsl_to_hex("hsl(188, 12%, 28%)"),
+    tertiary=hsl_to_hex("hsl(188, 7%, 64%)"),
     bg=hsl_to_hex("hsla(44, 6%, 100%, 0.75)"),
     bg_solid=hsl_to_hex("hsla(44, 6%, 100%, 1)"),
     bg_header=hsl_to_hex("hsla(188, 42%, 70%, 0.2)"),
     bg_alt=hsl_to_hex("hsla(39, 24%, 90%, 0.3)"),
     bg_alt_solid=hsl_to_hex("hsla(39, 24%, 97%, 1)"),
     text=hsl_to_hex("hsl(188, 39%, 11%)"),
+    code=hsl_to_hex("hsl(44, 38%, 23%)"),
     border=hsl_to_hex("hsl(188, 8%, 50%)"),
-    border_hint=hsl_to_hex("hsla(188, 8%, 72%, 0.7)"),
+    border_hint=hsl_to_hex("hsla(188, 8%, 72%, 0.3)"),
     border_accent=hsl_to_hex("hsla(305, 18%, 65%, 0.85)"),
     hover=hsl_to_hex("hsl(188, 12%, 84%)"),
-    hover_bg=hsl_to_hex("hsla(188, 7%, 94%, 0.8)"),
+    hover_bg=hsl_to_hex("hsla(188, 12%, 94%, 0.8)"),
     hint=hsl_to_hex("hsl(188, 11%, 65%)"),
+    hint_gentle=hsl_to_hex("hsla(188, 11%, 65%, 0.2)"),
     tooltip_bg=hsl_to_hex("hsla(188, 6%, 37%, 0.7)"),
     popover_bg=hsl_to_hex("hsla(188, 6%, 37%, 0.7)"),
     bright=hsl_to_hex("hsl(134, 43%, 60%)"),
-    success=hsl_to_hex("hsl(134, 43%, 60%)"),
+    success=hsl_to_hex("hsl(134, 70%, 37%)"),
+    failure=hsl_to_hex("hsl(7, 70%, 37%)"),
     selection="hsla(225, 61%, 82%, 0.80)",
     scrollbar=hsl_to_hex("hsla(189, 12%, 55%, 0.9)"),
     scrollbar_hover=hsl_to_hex("hsla(190, 12%, 38%, 0.9)"),
@@ -160,22 +164,26 @@ web_dark_translucent = SimpleNamespace(
     primary=hsl_to_hex("hsl(188, 40%, 62%)"),
     primary_light=hsl_to_hex("hsl(188, 50%, 72%)"),
     secondary=hsl_to_hex("hsl(188, 12%, 65%)"),
+    tertiary=hsl_to_hex("hsl(188, 7%, 40%)"),
     bg=hsl_to_hex("hsla(220, 14%, 7%, 0.95)"),
     bg_solid=hsl_to_hex("hsl(220, 14%, 7%)"),
     bg_header=hsl_to_hex("hsla(188, 42%, 20%, 0.3)"),
     bg_alt=hsl_to_hex("hsla(220, 14%, 12%, 0.5)"),
     bg_alt_solid=hsl_to_hex("hsl(220, 14%, 12%)"),
-    text=hsl_to_hex("hsl(188, 20%, 90%)"),
+    text=hsl_to_hex("hsl(188, 10%, 90%)"),
+    code=hsl_to_hex("hsl(44, 38%, 72%)"),
     border=hsl_to_hex("hsl(188, 8%, 25%)"),
-    border_hint=hsl_to_hex("hsla(188, 8%, 35%, 0.7)"),
+    border_hint=hsl_to_hex("hsla(188, 8%, 35%, 0.3)"),
     border_accent=hsl_to_hex("hsla(305, 30%, 55%, 0.85)"),
     hover=hsl_to_hex("hsl(188, 12%, 35%)"),
     hover_bg=hsl_to_hex("hsla(188, 20%, 25%, 0.4)"),
     hint=hsl_to_hex("hsl(188, 11%, 55%)"),
+    hint_gentle=hsl_to_hex("hsla(188, 11%, 55%, 0.2)"),
     tooltip_bg=hsl_to_hex("hsla(188, 6%, 20%, 0.9)"),
     popover_bg=hsl_to_hex("hsla(188, 6%, 20%, 0.9)"),
-    bright=hsl_to_hex("hsl(134, 43%, 60%)"),
-    success=hsl_to_hex("hsl(134, 43%, 60%)"),
+    bright=hsl_to_hex("hsl(134, 52%, 65%)"),
+    success=hsl_to_hex("hsl(134, 72%, 73%)"),
+    failure=hsl_to_hex("hsl(7, 46%, 53%)"),
     selection=hsl_to_hex("hsla(225, 61%, 40%, 0.40)"),
     scrollbar=hsl_to_hex("hsla(189, 12%, 35%, 0.9)"),
     scrollbar_hover=hsl_to_hex("hsla(190, 12%, 50%, 0.9)"),

kash/model/actions_model.py

@@ -102,9 +102,9 @@ class ActionResult:
     shell_result: ShellResult | None = None
     """Customize control of how the action's result is displayed in the shell."""
 
-    def get_by_format(self, format: Format) -> Item:
+    def get_by_format(self, *formats: Format) -> Item:
         """Convenience method to get an item for actions that return multiple formats."""
-        return next(item for item in self.items if item.format == format)
+        return next(item for item in self.items if item.format in formats)
 
     def has_hints(self) -> bool:
         return bool(

kash/web_gen/templates/base_styles.css.jinja

@@ -187,20 +187,34 @@ code {
   font-family: var(--font-mono);
   font-size: var(--font-size-mono);
   letter-spacing: -0.025em;
+
   transition: color 0.4s ease-in-out;
 }
+/* For code inside pre we style the pre tag */
+code:not(pre code) {
+  background-color: var(--color-bg-alt);
+  border-radius: 3px;
+  border: 1px solid var(--color-hint-gentle);
+  padding: 0.25em 0.2em 0.1em 0.2em;
+}
+
+/* Code block wrapper for positioning copy button */
+.code-block-wrapper {
+  position: relative;
+}
 
 /* Code blocks (pre + code) */
 pre {
   font-family: var(--font-mono);
   font-size: var(--font-size-mono);
   letter-spacing: -0.025em;
+
   background-color: var(--color-bg-alt);
-  border-radius: 4px;
-  border: 1px dotted var(--color-border-hint);
-  padding: 0.2rem 0.2rem 0.1rem 0.2rem;
+  border-radius: 3px;
+  border: 1px solid var(--color-hint-gentle);
+  padding: 0.25rem 0.2rem 0.1rem 0.2rem;
   overflow-x: auto;  /* Enable horizontal scrolling */
-  position: relative;  /* Create new stacking context */
+  margin: 0;
   transition: background-color 0.4s ease-in-out, border-color 0.4s ease-in-out;
 }
 
@@ -215,11 +229,12 @@ pre > code {
   position: absolute;
   top: 0;
   right: 0;
-  background: var(--color-bg-alt);
+  margin: 1px;
+  background: var(--color-bg-alt-solid);
   color: var(--color-hint);
   border: none;
   border-radius: 0.25rem;
-  padding: 0.25rem;
+  padding: 0;
   cursor: pointer;
   font-size: 0.75rem;
   z-index: 10;
@@ -229,7 +244,7 @@ pre > code {
   justify-content: center;
   width: 1.5rem;
   height: 1.5rem;
-  opacity: 0.6;
+  opacity: 0.9;
 }
 
 .code-copy-button:hover {
@@ -240,7 +255,6 @@ pre > code {
 
 .code-copy-button.copied {
   color: var(--color-success);
-  opacity: 1;
 }
 
 .code-copy-button svg {
@@ -337,7 +351,7 @@ hr:before {
   font-weight: var(--font-weight-sans-bold);
   text-transform: uppercase;
   letter-spacing: 0.03em;
-  margin-top: 1.1rem;
+  margin-top: 1rem;
   margin-bottom: 0.8rem;
 }
 {% endblock long_text_styles %}
@@ -378,13 +392,21 @@ tbody tr:nth-child(even) {
 
 /* Container for wide tables to allow tables to break out of parent width. */
 .table-container {
-  {# max-width: calc(100vw - 6rem); #}
   position: relative;
-  left: 50%;
-  transform: translateX(-50%);
   box-sizing: border-box;
   margin: 2rem 0;
   background-color: var(--color-bg-solid);
+  /* Default: center tables within their container */
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* When TOC is present, simplify table container positioning */
+.content-with-toc.has-toc .table-container {
+  /* Within grid layout, position relative to the grid column */
+  left: 50%;
+  transform: translateX(-50%);
+  /* Let the table width be controlled by the responsive styles */
 }
 {% endblock table_styles %}
 
@@ -438,16 +460,50 @@ sup {
   
   /* Apply shadow to long-text containers on larger screens */
   .long-text {
+    border: 1px solid var(--color-hint-gentle);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 -2px 6px -1px rgba(0, 0, 0, 0.07);
   }
   /* But remove shadow when wrapped in no-shadow class */
   .no-shadow .long-text {
-    box-shadow: none !important;
+    box-shadow: none;
+    border: none;
+  }
+}
+
+/* Handle TOC layouts specially - tables should bleed within their grid column */
+@media (min-width: 1200px) {
+  /* When TOC is present, tables should bleed within the content grid column */
+  .content-with-toc.has-toc table {
+    /* Calculate available width: full viewport minus TOC column width minus margins */
+    width: calc(100vw - var(--toc-width, 16rem) - 8rem);
+    max-width: none;
+  }
+  .content-with-toc.has-toc .table-container {
+    width: calc(100vw - var(--toc-width, 16rem) - 8rem);
+    max-width: none;
+  }
+  
+  /* But ensure tables don't exceed their grid column space */
+  .content-with-toc.has-toc .long-text {
+    /* The content area needs to allow tables to bleed beyond the text width */
+    overflow: visible;
+  }
+}
+
+/* Medium screens (768px - TOC breakpoint) - no TOC, tables should bleed but not as wide */
+@media (min-width: 768px) and (max-width: 1199px) {
+  table {
+    width: calc(100vw - 6rem);
+    max-width: calc(100vw - 6rem);
+  }
+  .table-container {
+    width: calc(100vw - 6rem);
+    max-width: calc(100vw - 6rem);
   }
 }
 
 /* Make narrower screens more usable for lists and tables. */
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   /* Prevent horizontal scrolling on the body */
   body {
     overflow-x: hidden;
@@ -461,7 +517,7 @@ sup {
   
   /* Make table containers scrollable without affecting page layout */
   .table-container {
-    max-width: 100%;
+    max-width: calc(100vw - 3rem);
     overflow-x: auto;
     transform: none;
     left: 0;
@@ -472,9 +528,10 @@ sup {
   
   table {
     font-size: var(--font-size-smaller);
-    /* Tables can be wider than container */
+    /* Tables can be wider than container on mobile */
     width: auto;
     min-width: 100%;
+    max-width: none;
   }
   
   ul, ol {

kash/web_gen/templates/base_webpage.html.jinja

@@ -64,43 +64,58 @@
       transition: background 0.4s ease-in-out, color 0.4s ease-in-out;
     }
 
-    .theme-toggle {
-      position: fixed;
-      top: 1rem;
-      right: 1rem;
-      background: transparent;
+    .button {
       color: var(--color-hint);
+      background: var(--color-bg);
       border: none;
       padding: 0;
       border-radius: 0.3rem;
       cursor: pointer;
       font-size: 1rem;
-      z-index: 100;
-      transition: all 0.2s ease-in-out;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 2.5rem;
       height: 2.5rem;
+      
+      /* Separate transitions for theme vs interaction */
+      transition: background-color 0.4s ease-in-out, 
+                  color 0.4s ease-in-out,
+                  transform 0.2s ease-in-out,
+                  box-shadow 0.2s ease-in-out;
     }
 
-    .theme-toggle:hover {
+    .button:hover {
       background: var(--color-hover-bg);
       color: var(--color-primary);
     }
 
-    [data-theme="dark"] .theme-toggle {
+    .button svg {
+      width: 1rem;
+      height: 1rem;
+      transition: inherit; /* Inherit the color transition */
+    }
+
+    /* Dark mode styles for buttons */
+    [data-theme="dark"] .button {
       color: var(--color-primary-light);
     }
 
-    [data-theme="dark"] .theme-toggle:hover {
-      color: var(--color-bright);
+    [data-theme="dark"] .button:hover {
       background: var(--color-hover-bg);
+      color: var(--color-bright);
     }
 
-    .theme-toggle svg {
-      width: 1rem;
-      height: 1rem;
+    /* Positioning class for fixed buttons */
+    .fixed-button {
+      position: fixed;
+      top: 1rem;
+    }
+
+    /* Specific positioning and z-index for theme toggle */
+    .theme-toggle {
+      right: 1rem;
+      z-index: 100;
     }
 
     {% block font_faces %}
@@ -178,7 +193,7 @@
 <body>
   {% block theme_toggle %}
   {% if show_theme_toggle %}
-  <button class="theme-toggle" aria-label="toggle dark mode">
+  <button class="button fixed-button theme-toggle" aria-label="toggle dark mode">
     <i data-feather="moon"></i>
   </button>
   {% endif %}
@@ -197,11 +212,20 @@
     document.addEventListener('DOMContentLoaded', () => {
       // Add copy buttons to code blocks
       document.querySelectorAll('pre').forEach(pre => {
-        // Skip if already has a copy button
-        if (pre.querySelector('.code-copy-button')) {
+        // Skip if already has a copy button (check parent for wrapper)
+        if (pre.parentElement.classList.contains('code-block-wrapper')) {
           return;
         }
         
+        // Create wrapper div
+        const wrapper = document.createElement('div');
+        wrapper.className = 'code-block-wrapper';
+        
+        // Insert wrapper before pre and move pre inside it
+        pre.parentNode.insertBefore(wrapper, pre);
+        wrapper.appendChild(pre);
+        
+        // Create copy button
         const copyButton = document.createElement('button');
         copyButton.className = 'code-copy-button';
         copyButton.setAttribute('aria-label', 'Copy code');
@@ -229,7 +253,8 @@
           });
         });
         
-        pre.appendChild(copyButton);
+        // Add button to wrapper, not to pre
+        wrapper.appendChild(copyButton);
       });
       
       // Theme toggle (if present on page)
@@ -307,8 +332,9 @@
       }
     });
 
-    {% block scripts_extra %}{% endblock scripts_extra %}
+
   </script>
+  {% block scripts_extra %}{% endblock scripts_extra %}
   {% endblock scripts %}
   
   {% block analytics %}{% endblock analytics %}

kash/web_gen/templates/simple_webpage.html.jinja

@@ -15,34 +15,538 @@
 [data-theme="dark"] .long-text {
   background-color: var(--color-bg-alt-solid);
   color: var(--color-text);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 -2px 6px -1px rgba(0, 0, 0, 0.2);
 }
 
-/* Adjust shadow for dark mode */
-[data-theme="dark"] .long-text {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 -2px 6px -1px rgba(0, 0, 0, 0.2);
+/* Table of Contents Styles */
+:root {
+  --toc-width: max(21vw, 15rem);
+  --toc-breakpoint: {{ toc_breakpoint | default(1200) }}px;
+}
+
+@media (min-width: 1536px) {
+  :root {
+    --toc-width: min(21vw, 30rem);
+  }
+}
+
+/* Desktop: Always use grid layout, adjust TOC column width */
+@media (min-width: {{ toc_breakpoint | default(1200) }}px) {
+  .content-with-toc {
+    display: grid;
+    grid-template-columns: calc(var(--toc-width) + 4rem) 1fr;
+    max-width: none;
+    min-height: 100vh;
+  }
+  
+  .content-with-toc.has-toc {
+    grid-template-columns: calc(var(--toc-width) + 4rem) 1fr;
+  }
+  
+  /* Content goes in the second column (right side) */
+  .content-with-toc .long-text {
+    max-width: 48rem;
+    margin: 0 auto;
+    order: 2;
+    grid-column: 2;
+  }
+  
+  /* TOC goes in the first column (left side) */
+  .toc-container {
+    order: 1;
+    grid-column: 1;
+    align-self: start;
+    width: var(--toc-width);
+    position: sticky;
+    top: 2rem;
+    max-height: calc(100vh - 4rem);
+    overflow-y: auto;
+    padding: 1rem 0.7rem;
+    margin: 0 0 0 2rem;
+    border: 1px solid var(--color-border-hint);
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  .content-with-toc.has-toc .toc-container {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  
+  /* Hide mobile toggle on desktop */
+  .toc-toggle {
+    display: none !important;
+  }
+  
+  /* More minimal TOC scrollbar */
+  .toc-container::-webkit-scrollbar {
+    width: 2px; 
+  }
+  .toc-container::-webkit-scrollbar-track {
+    background: transparent; /* Invisible track */
+  }
+  .toc-container::-webkit-scrollbar-thumb {
+    background: var(--color-hint-gentle);
+    border-radius: 2px;
+    opacity: 0.1;
+  }
+  .toc-container::-webkit-scrollbar-thumb:hover {
+    opacity: 0.2;
+  }
+  .toc-container {
+    /* For Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-hint-gentle) transparent;
+  }
+}
+
+/* TOC Styling */
+.toc {
+  font-family: var(--font-sans);
+  color: var(--color-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.toc-title {
+  font-size: var(--font-size-small);
+  font-weight: 550;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  margin: 0 0 0.5rem 0.3rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border-hint);
+  transition: color 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out;
+}
+
+.toc-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: var(--font-size-small);
+  line-height: 1.2;
+}
+
+.toc-list li {
+  margin: 0;
+  padding: 0 0.3rem 0 0;
+}
+
+.toc-list li::before {
+  display: none; /* Remove custom bullet points */
+}
+
+.toc-link {
+  display: block;
+  color: var(--color-tertiary);
+  text-decoration: none;
+  padding: 0.2rem 0;
+  transition: background 0.4s ease-in-out, all 0.15s ease-in-out;
+  border-left: 2px solid transparent;
+}
+
+.toc-link:hover {
+  color: var(--color-secondary);
+  background-color: var(--color-hover-bg);
+  text-decoration: none;
+}
+
+.toc-link.active {
+  color: var(--color-secondary);
+  border-left: 2px solid var(--color-primary);
+  background-color: var(--color-hover-bg);
+}
+
+/* Hanging indent and styles for each TOC heading */
+.toc-h1 {
+  padding-left: 1.3rem;
+  text-indent: -1em;
+  font-weight: 550;
+}
+.toc-h2 {
+  padding-left: 2.0rem;
+  text-indent: -1em;
+  font-weight: 550;
+}
+.toc-h3 {
+  padding-left: 2.7rem;
+  text-indent: -1em;
+  font-weight: 380;
+}
+.toc-h4 {
+  padding-left: 3.4rem;
+  text-indent: -1em;
+  font-weight: 380;
+}
+
+/* Prevent body scroll when TOC is open */
+body.toc-open {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+}
+
+/* Mobile TOC Layout */
+@media (max-width: {{ toc_breakpoint | default(1200) - 1 }}px) {
+  /* Specific positioning and z-index for TOC toggle */
+  .toc-toggle {
+    left: 1rem;
+    z-index: 101;
+    opacity: 0; /* Hidden by default */
+    visibility: hidden; /* Start hidden for FOUC prevention on mobile */
+    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+  }
+  
+  /* Show TOC toggle when user has scrolled past top */
+  .toc-toggle.show-toggle {
+    opacity: 1;
+    visibility: visible;
+  }
+  
+  /* Show backdrop when visible */
+  .toc-backdrop.visible {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+  
+  /* Mobile TOC state: always rendered but hidden by default */
+  .toc-container {
+    display: block !important; /* Override base rule and any JS inline styles */
+    position: fixed;
+    top: 4rem;
+    left: 1rem;
+    width: calc(100vw - 2rem);
+    max-height: calc(100vh - 5rem);
+    /* Keep background and darker text on mobile since it's primary UI */
+    color: var(--color-text);
+    background: var(--color-bg-alt-solid);
+    border: 1px solid var(--color-border-hint);
+    padding: 1rem 0.7rem;
+    z-index: 200;
+    
+    /* Ensure TOC itself is scrollable */
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+    overscroll-behavior: contain; /* Prevent scroll chaining */
+    
+    /* Initial hidden state for mobile FOUC and animation */
+    opacity: 0;
+    transform: translateY(-0.5rem);
+    visibility: hidden;
+    pointer-events: none; /* Prevent interaction when hidden */
+    
+    transition: opacity 0.3s ease-in-out, 
+                transform 0.3s ease-in-out, 
+                visibility 0.3s ease-in-out,
+                pointer-events 0.3s ease-in-out,
+                background-color 0.4s ease-in-out, 
+                border-color 0.4s ease-in-out, 
+                box-shadow 0.4s ease-in-out;
+  }
+  
+  /* Darker text on mobile */
+  .toc {
+    color: var(--color-secondary);
+  }
+  .toc-link {
+    color: var(--color-secondary);
+  }
+  .toc-link:hover {
+    color: var(--color-text);
+  }
+
+  .toc-link.active {
+    color: var(--color-text);
+  }
+    
+  .toc-container.mobile-visible {
+    /* Visible state */
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+    pointer-events: auto; /* Re-enable interaction */
+  }
 }
 </style>
 {% endblock custom_styles %}
 
-<!-- simple_webpage begin main_content block -->
 {% block main_content %}
-<div class="long-text container max-w-3xl mx-auto bg-white py-4 px-6 md:px-16">
-  {% block page_title %}
-  {% if title and add_title_h1 %}
-    <h1 class="text-center text-4xl mt-6 mb-6">{{ title }}</h1>
-  {% endif %}
-  {% endblock page_title %}
-  
-  <div>
-    {% block page_content %}
-    {% if thumbnail_url %}
-    <img class="thumbnail" src="{{ thumbnail_url }}" alt="{{ title }}" />
+<!-- simple_webpage begin main_content block -->
+<div class="content-with-toc" id="content-container">
+  <div class="long-text container max-w-3xl mx-auto bg-white py-4 px-6 md:px-16" id="main-content">
+    {% block page_title %}
+    {% if title and add_title_h1 %}
+      <h1 class="text-center text-4xl mt-6 mb-6">{{ title }}</h1>
     {% endif %}
-    <div class="content">
-      {{ content_html | safe }}
+    {% endblock page_title %}
+    
+    <div>
+      {% block page_content %}
+      {% if thumbnail_url %}
+      <img class="thumbnail" src="{{ thumbnail_url }}" alt="{{ title }}" />
+      {% endif %}
+      <div class="content">
+        {{ content_html | safe }}
+      </div>
+      {% endblock page_content %}
     </div>
-    {% endblock page_content %}
   </div>
+  
+  <!-- Mobile TOC toggle -->
+  <button class="button fixed-button toc-toggle" id="toc-toggle" aria-label="Toggle table of contents" style="display: none;">
+    <i data-feather="list"></i>
+  </button>
+  
+  <!-- Mobile TOC Backdrop -->
+  <div class="toc-backdrop" id="toc-backdrop"></div>
+  
+  <!-- TOC Container -->
+  <aside class="toc-container" id="toc-container" aria-label="Table of contents">
+    <div class="toc">
+      <h2 class="toc-title">Contents</h2>
+      <ul class="toc-list" id="toc-list">
+        <!-- TOC items will be populated by JavaScript -->
+      </ul>
+    </div>
+  </aside>
 </div>
+<!-- simple_webpage end main_content block -->
 {% endblock main_content %}
-<!-- simple_webpage end main_content block -->
+
+
+{% block scripts_extra %}
+{{ super() }}
+<!-- simple_webpage begin scripts_extra block -->
+<script>
+// Table of Contents functionality
+function initTOC() {
+  const tocContainer = document.getElementById('toc-container');
+  const tocList = document.getElementById('toc-list');
+  const tocToggle = document.getElementById('toc-toggle');
+  const contentContainer = document.getElementById('content-container');
+  const mainContent = document.getElementById('main-content');
+  
+  if (!tocContainer || !tocList || !mainContent) {
+    console.debug("TOC not initialized: missing elements");
+    return;
+  }
+  
+  const tocBreakpoint = parseInt(
+    getComputedStyle(document.documentElement)
+      .getPropertyValue('--toc-breakpoint')
+      .replace('px', '')
+  );
+  
+  // Find all headings in the main content
+  const headings = mainContent.querySelectorAll('{{ toc_headings | default("h1, h2, h3") }}');
+  // Only show TOC if we have toc_min_headings (default 10) or more headings
+  const tocThreshold = {{ toc_min_headings | default(10) }};
+  
+  if (headings.length < tocThreshold) {
+    // TOC is disabled
+    if (tocToggle) {
+      tocToggle.style.display = 'none';
+    }
+    console.debug("TOC hidden: not enough headings");
+    return;
+  }
+
+  // TOC is enabled
+  contentContainer.classList.add('has-toc');  // This triggers grid layout
+  mainContent.classList.add('with-toc');
+  document.body.classList.add('page-has-toc');
+  
+  if (tocToggle) {
+    tocToggle.style.display = 'flex';
+    // Ensure feather icon is rendered after making visible
+    if (typeof feather !== 'undefined') {
+      feather.replace();
+    }
+  }
+  
+  // Generate TOC items
+  tocList.innerHTML = '';
+  
+  // If there is only one h1, skip it as it is the title of the page.
+  let filteredHeadings = Array.from(headings);
+  if (headings.length > 0) {
+    const firstHeading = headings[0];
+    const h1Count = filteredHeadings.filter(h => h.tagName.toLowerCase() === 'h1').length;
+
+    if (firstHeading.tagName.toLowerCase() === 'h1' && h1Count === 1) {
+      filteredHeadings = filteredHeadings.slice(1);
+    }
+  }
+  
+  filteredHeadings.forEach((heading, index) => {
+    // Ensure heading has an ID
+    if (!heading.id) {
+      const text = heading.textContent.trim().toLowerCase()
+        .replace(/[^\w\s-]/g, '')
+        .replace(/\s+/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '');
+      heading.id = text || `heading-${index}`;
+    }
+    
+    const level = heading.tagName.toLowerCase();
+    const text = heading.textContent.trim();
+    
+    const li = document.createElement('li');
+    const a = document.createElement('a');
+    a.href = `#${heading.id}`;
+    a.textContent = text;
+    a.className = `toc-link toc-${level}`;
+    
+    li.appendChild(a);
+    tocList.appendChild(li);
+  });
+  
+  // Mobile TOC toggle functionality
+  if (tocToggle) {
+    const tocBackdrop = document.getElementById('toc-backdrop');
+    let scrollPosition = 0;
+    
+    const openTOC = () => {
+      // Save current scroll position
+      scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+      
+      // Add classes to show TOC and prevent body scroll
+      tocContainer.classList.add('mobile-visible');
+      if (tocBackdrop) tocBackdrop.classList.add('visible');
+      document.body.classList.add('toc-open');
+      
+      // Set body position to maintain scroll position while fixed
+      document.body.style.top = `-${scrollPosition}px`;
+    };
+    
+    const closeTOC = () => {
+      // Remove classes
+      tocContainer.classList.remove('mobile-visible');
+      if (tocBackdrop) tocBackdrop.classList.remove('visible');
+      document.body.classList.remove('toc-open');
+      
+      // Restore body position and scroll
+      document.body.style.top = '';
+      window.scrollTo(0, scrollPosition);
+    };
+    
+    tocToggle.addEventListener('click', () => {
+      if (tocContainer.classList.contains('mobile-visible')) {
+        closeTOC();
+      } else {
+        openTOC();
+      }
+    });
+    
+    // Close TOC when clicking backdrop
+    if (tocBackdrop) {
+      tocBackdrop.addEventListener('click', closeTOC);
+    }
+    
+    // Update the existing click handler to use closeTOC
+    document.addEventListener('click', (e) => {
+      if (window.innerWidth < tocBreakpoint && 
+          tocContainer.classList.contains('mobile-visible') &&
+          !tocContainer.contains(e.target) && 
+          !tocToggle.contains(e.target)) {
+        closeTOC();
+      }
+    });
+    
+    // Prevent touch events from propagating through TOC
+    tocContainer.addEventListener('touchmove', (e) => {
+      e.stopPropagation();
+    }, { passive: false });
+  }
+  
+  // Add smooth scrolling and active state management
+  const tocLinks = tocList.querySelectorAll('.toc-link');
+  tocLinks.forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      const targetId = link.getAttribute('href').substring(1);
+      const target = document.getElementById(targetId);
+      
+      if (target) {
+        // Close TOC first on mobile
+        if (window.innerWidth < tocBreakpoint) {
+          tocContainer.classList.remove('mobile-visible');
+          document.getElementById('toc-backdrop')?.classList.remove('visible');
+          document.body.classList.remove('toc-open');
+          document.body.style.top = '';
+        }
+        
+        target.scrollIntoView({ 
+          behavior: 'smooth',
+          block: 'start'
+        });
+        tocLinks.forEach(l => l.classList.remove('active'));
+        link.classList.add('active');
+        
+      }
+    });
+  });
+  
+  // Helper function to check if TOC toggle should be visible
+  const updateTocToggleVisibility = () => {
+    if (tocToggle && tocLinks.length > 0) {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const activeLink = tocList.querySelector('.toc-link.active');
+      const firstTocLink = tocLinks[0];
+      
+      // Only show toggle if:
+      // 1. We've scrolled down at least 100px from the top, AND
+      // 2. We're past the first section (activeLink exists and is not the first)
+      const hasScrolled = scrollTop > 100;
+      const isPastFirstSection = activeLink && activeLink !== firstTocLink;
+      const showToggle = hasScrolled && isPastFirstSection;
+      
+      tocToggle.classList.toggle('show-toggle', showToggle);
+    }
+  };
+  
+  // Intersection Observer for active state
+  const observerOptions = {
+    rootMargin: '-20% 0% -70% 0%',
+    threshold: 0
+  };
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        tocLinks.forEach(link => link.classList.remove('active'));
+        const activeLink = tocList.querySelector(`a[href="#${entry.target.id}"]`);
+        if (activeLink) {
+          activeLink.classList.add('active');
+        }
+      }
+    });
+    
+    // Update toggle visibility after intersection changes
+    updateTocToggleVisibility();
+  }, observerOptions);
+  
+  filteredHeadings.forEach(heading => observer.observe(heading));
+  
+  // Update toggle visibility on scroll
+  let scrollTimeout;
+  window.addEventListener('scroll', () => {
+    // Throttle scroll events for performance
+    clearTimeout(scrollTimeout);
+    scrollTimeout = setTimeout(updateTocToggleVisibility, 16); // ~60fps
+  });
+  
+  // Initial check
+  updateTocToggleVisibility();
+}
+
+// Initialize immediately, no setTimeout
+document.addEventListener('DOMContentLoaded', () => {
+  initTOC();
+  if (typeof feather !== 'undefined') {
+    feather.replace();
+  }
+});
+</script>
+<!-- simple_webpage end scripts_extra block -->
+{% endblock scripts_extra %}

kash/web_gen/templates/tabbed_webpage.html.jinja

@@ -40,8 +40,9 @@
 {% endblock page_content %}
 <!-- tabbed_webpage end page_content block -->
 
-<!-- tabbed_webpage begin scripts_extra block -->
 {% block scripts_extra %}
+<!-- tabbed_webpage begin scripts_extra block -->
+<script>
   function showTab(tabId, element) {
     document.querySelectorAll(".tab-pane").forEach((tab) => {
       tab.classList.add("hidden");
@@ -54,5 +55,6 @@
     element.classList.add("tab-button-active");
     element.classList.remove("tab-button-inactive");
   }
+</script>
+<!-- tabbed_webpage end scripts_extra block -->
 {% endblock scripts_extra %}
-<!-- tabbed_webpage end scripts_extra block -->

{kash_shell-0.3.16.dist-info → kash_shell-0.3.17.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: kash-shell
-Version: 0.3.16
+Version: 0.3.17
 Summary: The knowledge agent shell (core)
 Project-URL: Repository, https://github.com/jlevy/kash-shell
 Author-email: Joshua Levy <joshua@cal.berkeley.edu>

{kash_shell-0.3.16.dist-info → kash_shell-0.3.17.dist-info}/RECORD

@@ -19,7 +19,7 @@ kash/commands/base/basic_file_commands.py,sha256=7xQreY3oewiJKYZYqcMZtClhqyKirg1
 kash/commands/base/browser_commands.py,sha256=iYvpW4D_tlhW_p0cq3A6YO9UGCdHtvzIQiNMDwCY07A,1574
 kash/commands/base/debug_commands.py,sha256=9I5W3SMQvsnpcs-b6CJCYu1Ydl6gIoTUcDZxvn1dN3g,7643
 kash/commands/base/diff_commands.py,sha256=gOeSyCPg95LBnL6JobCR7lQHNS_c-29bDo1aIJkfyGw,4913
-kash/commands/base/files_command.py,sha256=KZjlBSJ3_e2YazZFMGr2ybAdsp5bcf9JBj3_3CHaRyc,16768
+kash/commands/base/files_command.py,sha256=fBuZ8sLqmfH8QekGe-P11mZ4jPxRLi3rLKhZqpdwQ5g,16759
 kash/commands/base/general_commands.py,sha256=KaCbzk7o-ejwXE_H3PB3MrN00uTinP3T8uHKYrGPrIw,6946
 kash/commands/base/logs_commands.py,sha256=IyNgxaAoa5LlS-VxD_x8bXTVbD04pT8qEHlIJNM09UU,2963
 kash/commands/base/model_commands.py,sha256=d17a2NvfDbwV1y8gyZVsOtX-j5H5we5OEXM9TxTqvBs,1790
@@ -37,7 +37,7 @@ kash/commands/workspace/selection_commands.py,sha256=nZzA-H7Pk8kqSJVRlX7j1m6cZX-
 kash/commands/workspace/workspace_commands.py,sha256=ZJ3aPsnQ0FOkaA6stpV4YPEOQRCOKTazbMCIQkk9Cmk,25119
 kash/config/__init__.py,sha256=ytly9Typ1mWV4CXfV9G3CIPtPQ02u2rpZ304L3GlFro,148
 kash/config/capture_output.py,sha256=ud3uUVNuDicHj3mI_nBUBO-VmOrxtBdA3z-I3D1lSCU,2398
-kash/config/colors.py,sha256=XrvSpEMJ345e0oCpsr-mASgjROvct9a3JyYkhkaP0Ww,12831
+kash/config/colors.py,sha256=v8JTALJnjtSQVodfqCBkzC1a2gTrGUCjpIQmyp4u4cY,13208
 kash/config/env_settings.py,sha256=uhCdfs9-TzJ15SzbuIQP1yIORaLUqYXCxh9qq_Z8cJc,996
 kash/config/init.py,sha256=aE4sZ6DggBmmoZEx9C5mQKrEbcDiswX--HF7pfCFKzc,526
 kash/config/lazy_imports.py,sha256=MCZXLnKvNyfHi0k7MU5rNwcdJtUF28naCixuogsAOAA,805
@@ -158,7 +158,7 @@ kash/media_base/transcription_format.py,sha256=rOVPTpwvW22c27BRwYF-Tc_xzqK_wOtUZ
 kash/media_base/transcription_whisper.py,sha256=GqvroW9kBAH4-gcbYkMgNCfs2MpMIgm1ip3NMWtJ0IE,1169
 kash/media_base/services/local_file_media.py,sha256=-A-tK6XP7XDCqXQIAoohesFZ3OIvpXWsDoktYBvBuNA,5399
 kash/model/__init__.py,sha256=kFfBKb5N70NWYUfpRRxn_Sb9p_vXlB6BBaTCqWmSReo,2978
-kash/model/actions_model.py,sha256=nOo-xbPp_J0aVKul2zBvG7zRaqvz6F-wFUH4oBYU2q0,22085
+kash/model/actions_model.py,sha256=iEp8QSB7My5xT4lurv03vXG6COD8aTLpgiSh5GT7Cr4,22088
 kash/model/assistant_response_model.py,sha256=6eDfC27nyuBDFjv5nCYMa_Qb2mPbKwDzZy7uLOIyskI,2653
 kash/model/compound_actions_model.py,sha256=HiDK5wwCu3WwZYHATZoLEguiqwR9V6V296wiKtGIX8s,6926
 kash/model/concept_model.py,sha256=we2qOcy9Mv1q7XPfkDLp_CyO_-8DwAUfUYlpgy_jrFs,1011
@@ -251,13 +251,13 @@ kash/web_gen/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
 kash/web_gen/simple_webpage.py,sha256=ks_0ljxCeS2-gAAEaUc1JEnzY3JY0nzqGFiyyqyRuZs,1537
 kash/web_gen/tabbed_webpage.py,sha256=DiZV48TVvcjOf31g3nzTAtGKpH5Cek1Unksr7Cwcwog,4949
 kash/web_gen/template_render.py,sha256=aypo6UanouftV4RpxgNm6JdquelI52fV0IlihdA3yjE,1908
-kash/web_gen/templates/base_styles.css.jinja,sha256=xSC0eACITRz1IcIizanhmzjH0aLB28fKdkSmvTEAJUY,9975
-kash/web_gen/templates/base_webpage.html.jinja,sha256=xQ2p4Kv42VPfGUnGLedEjPn6WOnq8G8Fly5XjJUdnXc,12043
+kash/web_gen/templates/base_styles.css.jinja,sha256=_lSVO7VxY2abKUh230lrzmxMitg6mw1iRV653tlcsvY,11712
+kash/web_gen/templates/base_webpage.html.jinja,sha256=V3Xl8swCHjS9Ea6Fb8jch6uu9Ws7vG82TK_qz5Jps4Q,12935
 kash/web_gen/templates/content_styles.css.jinja,sha256=3qcIwIt3DipCDJa9z6oIM_BMxmwoT7E_loTK0F3L9Vo,3629
 kash/web_gen/templates/explain_view.html.jinja,sha256=DNw5Iw5SrhIUFRGB4qNvfcKXsBHVbEJVURGdhvyC75Q,949
 kash/web_gen/templates/item_view.html.jinja,sha256=cYGyGKFcX8-5L2SM7-BC5oK6GLuH6blrzcxw2DxX-Q8,6828
-kash/web_gen/templates/simple_webpage.html.jinja,sha256=MVXbs0359TTMAqY_A_T8-fP4mrkH5GalwwRBbAzWPeE,1333
-kash/web_gen/templates/tabbed_webpage.html.jinja,sha256=u7gabDsCs3neQQlH1y1rIaqT8UumPKVPPZG4VKg5R_g,1823
+kash/web_gen/templates/simple_webpage.html.jinja,sha256=R70mqQWXsJAQ1SGNw26dmMCDcaSOE49TBAkeZNUE2HY,15525
+kash/web_gen/templates/tabbed_webpage.html.jinja,sha256=umkipUXW-lDGnbV-tlDroCfCx_385PFnpbzsvwmityo,1843
 kash/workspaces/__init__.py,sha256=q1gFERRZLJMA9-XSUKvB1ulauHDKqyzzc86GFLbxAuk,700
 kash/workspaces/param_state.py,sha256=vT_eGWqg2SRviIM5jqEAauznX2B5Xt2nHHu2oRxTcIU,746
 kash/workspaces/selections.py,sha256=rEUuQlrQ3C_54bzBSKDTTptgX8oZPqN0Ao4uaXSWA-Q,12003
@@ -279,8 +279,8 @@ kash/xonsh_custom/xonsh_modern_tools.py,sha256=mj_b34LZXfE8MJe9EpDmp5JZ0tDM1biYN
 kash/xonsh_custom/xonsh_ranking_completer.py,sha256=ZRGiAfoEgqgnlq2-ReUVEaX5oOgW1DQ9WxIv2OJLuTo,5620
 kash/xontrib/fnm.py,sha256=V2tsOdmIDgbFbZSfMLpsvDIwwJJqiYnOkOySD1cXNXw,3700
 kash/xontrib/kash_extension.py,sha256=FLIMlgR3C_6A1fwKE-Ul0nmmpJSszVPbAriinUyQ8Zg,1896
-kash_shell-0.3.16.dist-info/METADATA,sha256=4nG6g2qUrGSvUHNGVQe389ak5Kv20uV5JBM_ByIkqKk,31258
-kash_shell-0.3.16.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
-kash_shell-0.3.16.dist-info/entry_points.txt,sha256=SQraWDAo8SqYpthLXThei0mf_hGGyhYBUO-Er_0HcwI,85
-kash_shell-0.3.16.dist-info/licenses/LICENSE,sha256=rCh2PsfYeiU6FK_0wb58kHGm_Fj5c43fdcHEexiVzIo,34562
-kash_shell-0.3.16.dist-info/RECORD,,
+kash_shell-0.3.17.dist-info/METADATA,sha256=Y6Ye4cgPa3d7YZ3sxJecXNxuN176GgkMz3Q5EIZMYsw,31258
+kash_shell-0.3.17.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
+kash_shell-0.3.17.dist-info/entry_points.txt,sha256=SQraWDAo8SqYpthLXThei0mf_hGGyhYBUO-Er_0HcwI,85
+kash_shell-0.3.17.dist-info/licenses/LICENSE,sha256=rCh2PsfYeiU6FK_0wb58kHGm_Fj5c43fdcHEexiVzIo,34562
+kash_shell-0.3.17.dist-info/RECORD,,