painapple-code 1.0.0__py3-none-any.whl

painapple_code/static/css/41-autocomplete.css

@@ -0,0 +1,127 @@
+/* ═══════════════════════════════════════════════════════════════════
+   DEV PANEL (Bottom Sheet)
+   Long-press status bar to reveal
+   ═══════════════════════════════════════════════════════════════════ */
+
+/* Status bar long-press visual feedback */
+#status-bar.pressing {
+    background: var(--bg-hover);
+    border-radius: var(--radius-sm);
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+   AUTOCOMPLETE
+   ═══════════════════════════════════════════════════════════════════ */
+#autocomplete {
+    position: absolute;
+    bottom: 100%;
+    min-width: 240px;
+    width: max-content;
+    max-width: min(640px, 85vw);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-md);
+    margin-bottom: 6px;
+    box-shadow: var(--shadow);
+    display: none;
+    max-height: 240px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    z-index: var(--z-overlay-autocomplete); /* Above overlays (2000), widgets (1650) */
+}
+
+#autocomplete.visible {
+    display: block;
+}
+
+.autocomplete-item {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    padding: var(--sp-4) var(--sp-10);
+    cursor: pointer;
+    transition: background 0.1s ease;
+    font-size: var(--font-size-sm);
+}
+
+.autocomplete-item:hover,
+.autocomplete-item.selected {
+    background: var(--bg-tertiary);
+}
+
+.autocomplete-item.selected {
+    background: var(--accent-muted);
+}
+
+.autocomplete-cmd {
+    font-family: var(--font-mono);
+    font-weight: 600;
+    color: var(--accent);
+    min-width: 64px;
+    font-size: var(--font-size-sm);
+    white-space: nowrap;
+}
+
+.autocomplete-desc {
+    color: var(--text-secondary);
+    font-size: var(--font-size-sm);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+
+/* Send button */
+.autocomplete-send-btn {
+    padding: var(--sp-3);
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-left: var(--sp-6);
+}
+
+.autocomplete-send-btn:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+    background: var(--accent-muted);
+}
+
+.autocomplete-send-btn svg {
+    width: 11px;
+    height: 11px;
+    display: block;
+}
+
+.autocomplete-section {
+    padding: var(--sp-3) var(--sp-10);
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border-secondary);
+}
+
+.autocomplete-hint {
+    color: var(--text-muted);
+    font-weight: 400;
+    margin-left: var(--sp-4);
+}
+
+.autocomplete-source {
+    font-size: 9px;
+    padding: 1px var(--sp-4);
+    border-radius: var(--radius-sm);
+    background: var(--bg-tertiary);
+    color: var(--text-muted);
+    margin-left: var(--sp-6);
+    text-transform: uppercase;
+}
+

painapple_code/static/css/42-activity-strip.css

@@ -0,0 +1,97 @@
+/* ═══════════════════════════════════════════════════════════════════
+   ACTIVITY STRIP — replaces typing dots
+   Lives at the top of #input-area, replacing the border-top.
+   Sits between messages and input — peripheral, not competing with cursor.
+   ═══════════════════════════════════════════════════════════════════ */
+
+/* ── Strip layout ─────────────────────────────────────────────────── */
+.activity-strip {
+    /* Isolate paint — every tool change swaps icon innerHTML and rewrites
+       the text node; without containment those paints propagate to
+       #input-area, which sits directly above the textarea and invalidates
+       its caret/selection paint on iPadOS WebKit. */
+    display: flex;
+    align-items: center;
+    gap: var(--sp-6);
+    padding: 0;
+    font-size: var(--font-size-xs);
+    color: var(--text-secondary);
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
+    user-select: none;
+    /* Cancel out #input-area padding so strip sits flush at the top edge */
+    margin: calc(-1 * var(--layout-input-padding-v, 10px)) calc(-1 * var(--layout-input-padding-h, 12px)) 0;
+    padding-left: var(--layout-input-padding-h, 12px);
+    padding-right: var(--layout-input-padding-h, 12px);
+    contain: layout paint;
+}
+
+.activity-strip.visible {
+    max-height: 40px;
+    opacity: 1;
+    padding-top: var(--sp-6);
+    padding-bottom: var(--sp-6);
+    border-bottom: 1px solid var(--border-primary);
+}
+
+/* Paused on a permission ask — timer frozen, amber tint to say "your move" */
+.activity-strip.paused {
+    color: var(--warning, #f59e0b);
+}
+.activity-strip.paused .activity-strip-timer {
+    color: var(--warning, #f59e0b);
+    opacity: 0.75;
+}
+
+/* Icon (inline SVG container) */
+.activity-strip-icon {
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+    color: var(--accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s ease;
+}
+
+.activity-strip-icon svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* Activity text (label + detail) */
+.activity-strip-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    transition: opacity 0.15s ease;
+}
+
+/* Detail part — command, filename, pattern — monospace, brighter */
+.activity-detail {
+    color: var(--text-primary);
+    font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
+}
+
+/* Elapsed timer (sits between icon and text) */
+.activity-strip-timer {
+    /* Isolate paint — timer text ticks every second; without containment its
+       repaint propagates up and can invalidate sibling layers (incl. selection). */
+    flex-shrink: 0;
+    font-variant-numeric: tabular-nums;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    min-width: 2.5em;
+    contain: layout paint;
+}
+
+/* ── Accent border on #input-area when working ───────────────────── */
+
+#input-area.working {
+    border-top-color: var(--accent);
+}

painapple_code/static/css/43-file-autocomplete.css

@@ -0,0 +1,121 @@
+/* ═══════════════════════════════════════════════════════════════════
+   FILE AUTOCOMPLETE (@-mentions)
+   Triggered by @ character in message input
+   ═══════════════════════════════════════════════════════════════════ */
+
+.file-autocomplete {
+    position: absolute;
+    bottom: 100%;
+    min-width: 280px;
+    width: max-content;
+    max-width: min(720px, 85vw);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-md);
+    margin-bottom: 6px;
+    box-shadow: var(--shadow);
+    display: none;
+    max-height: 260px;
+    overflow-y: auto;
+    z-index: var(--z-overlay-autocomplete);  /* Above keyboard bar */
+    scroll-padding-top: 24px;
+    scroll-padding-bottom: 6px;
+}
+
+.file-autocomplete.visible {
+    display: block;
+}
+
+/* Section header */
+.file-autocomplete-section {
+    padding: var(--sp-3) var(--sp-10);
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border-secondary);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+/* Individual file item */
+.file-autocomplete-item {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-6);
+    padding: var(--sp-2) var(--sp-10);
+    min-height: 20px;
+    cursor: pointer;
+    transition: background 0.1s ease;
+    box-sizing: border-box;
+}
+
+.file-autocomplete-item:hover,
+.file-autocomplete-item.selected {
+    background: var(--bg-tertiary);
+}
+
+.file-autocomplete-item.selected {
+    background: var(--accent-muted);
+}
+
+/* File path */
+.file-path {
+    flex: 1;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Highlighted match characters */
+.file-path mark {
+    background: transparent;
+    color: var(--accent);
+    font-weight: 600;
+}
+
+/* File extension badge */
+.file-ext {
+    font-size: 10px;
+    padding: 1px var(--sp-4);
+    border-radius: var(--radius-sm);
+    background: var(--bg-tertiary);
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    text-transform: lowercase;
+    flex-shrink: 0;
+}
+
+/* Recent file dot */
+.file-recent-badge {
+    font-size: var(--font-size-sm);
+    line-height: 1;
+    color: var(--success, #2ea043);
+    flex-shrink: 0;
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+   Responsive adjustments
+   ───────────────────────────────────────────────────────────────────── */
+
+@media (max-width: 600px) {
+    .file-autocomplete {
+        min-width: 220px;
+        max-width: 90vw;
+        max-height: 220px;
+    }
+
+    .file-autocomplete-item {
+        padding: var(--sp-3) var(--sp-10);
+        min-height: 24px;
+    }
+
+    .file-path {
+        font-size: var(--font-size-base);
+    }
+}

painapple_code/static/css/44-snippets-autocomplete.css

@@ -0,0 +1,224 @@
+/* ═══════════════════════════════════════════════════════════════════
+   SNIPPETS AUTOCOMPLETE (#-trigger)
+   Agents and user-defined snippets
+   Shared by skills-autocomplete (`$` trigger) for visual consistency.
+   ═══════════════════════════════════════════════════════════════════ */
+
+.snippets-autocomplete {
+    position: absolute;
+    bottom: 100%;
+    min-width: 280px;
+    width: max-content;
+    max-width: min(680px, 85vw);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-primary);
+    border-radius: var(--radius-md);
+    margin-bottom: 6px;
+    box-shadow: var(--shadow);
+    display: none;
+    max-height: 280px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    z-index: var(--z-overlay-autocomplete);
+}
+
+.snippets-autocomplete.visible {
+    display: block;
+}
+
+/* Section header (Agents / Snippets) */
+.snippets-section {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    padding: var(--sp-3) var(--sp-10);
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border-secondary);
+    position: sticky;
+    top: 0;
+}
+
+.snippets-edit-link {
+    font-size: 10px;
+    color: var(--accent);
+    text-decoration: none;
+    text-transform: none;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.snippets-edit-link:hover {
+    text-decoration: underline;
+}
+
+/* Individual snippet/agent item */
+.snippets-item {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-8);
+    padding: var(--sp-5) var(--sp-10);
+    cursor: pointer;
+    transition: background 0.1s ease;
+    scroll-margin-top: 24px;
+}
+
+.snippets-item:hover,
+.snippets-item.selected {
+    background: var(--bg-tertiary);
+}
+
+.snippets-item.selected {
+    background: var(--accent-muted);
+}
+
+/* Content wrapper (name + description) */
+.snippets-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+}
+
+/* Name */
+.snippets-name {
+    font-size: var(--font-size-base);
+    font-weight: 500;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Highlighted match characters */
+.snippets-name mark {
+    background: transparent;
+    color: var(--accent);
+    font-weight: 600;
+}
+
+/* Description */
+.snippets-desc {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Type badge (project-local agents only) */
+.snippets-type-badge {
+    font-size: 9px;
+    padding: 1px var(--sp-4);
+    border-radius: var(--radius-sm);
+    text-transform: uppercase;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.snippets-type-badge.project {
+    background: rgba(16, 185, 129, 0.15);
+    color: #10b981;
+}
+
+/* Action buttons container */
+.snippets-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-4);
+    flex-shrink: 0;
+    margin-left: var(--sp-8);
+}
+
+/* Action buttons (insert / insert-name / send) */
+.snippets-insert-btn,
+.snippets-insertname-btn,
+.snippets-send-btn {
+    padding: var(--sp-3);
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.snippets-insert-btn svg,
+.snippets-insertname-btn svg,
+.snippets-send-btn svg {
+    width: 11px;
+    height: 11px;
+    display: block;
+}
+
+/* Default: Insert (Enter) is the primary action — highlights on row hover/selection */
+.snippets-item:hover .snippets-insert-btn,
+.snippets-item.selected .snippets-insert-btn {
+    border-color: var(--accent);
+    color: var(--accent);
+    background: var(--accent-muted);
+}
+
+/* Alt held: Insert-name (Alt+Enter) becomes primary; Insert dims back */
+.snippets-autocomplete.mod-alt .snippets-item:hover .snippets-insert-btn,
+.snippets-autocomplete.mod-alt .snippets-item.selected .snippets-insert-btn {
+    border-color: transparent;
+    color: var(--text-muted);
+    background: none;
+}
+.snippets-autocomplete.mod-alt .snippets-item:hover .snippets-insertname-btn,
+.snippets-autocomplete.mod-alt .snippets-item.selected .snippets-insertname-btn {
+    border-color: var(--accent);
+    color: var(--accent);
+    background: var(--accent-muted);
+}
+
+/* Ctrl/Cmd held: Send (Ctrl+Enter) becomes primary; Insert dims back */
+.snippets-autocomplete.mod-ctrl .snippets-item:hover .snippets-insert-btn,
+.snippets-autocomplete.mod-ctrl .snippets-item.selected .snippets-insert-btn {
+    border-color: transparent;
+    color: var(--text-muted);
+    background: none;
+}
+.snippets-autocomplete.mod-ctrl .snippets-item:hover .snippets-send-btn,
+.snippets-autocomplete.mod-ctrl .snippets-item.selected .snippets-send-btn {
+    border-color: var(--accent);
+    color: var(--accent);
+    background: var(--accent-muted);
+}
+
+/* Direct hover on insert-name / send still highlights (touch users without modifiers) */
+.snippets-insertname-btn:hover,
+.snippets-send-btn:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+    background: var(--accent-muted);
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+   Responsive adjustments
+   ───────────────────────────────────────────────────────────────────── */
+
+@media (max-width: 600px) {
+    .snippets-autocomplete {
+        min-width: 240px;
+        max-width: 90vw;
+        max-height: 240px;
+    }
+
+    .snippets-item {
+        padding: var(--sp-6) var(--sp-10);
+    }
+
+    .snippets-name {
+        font-size: var(--font-size-base);
+    }
+}
+