add deletion tool. first tool with user approval prompt.

1 files changed, 128 insertions, 5 deletions

diff --git a/styles.css b/styles.css
index 4aa810b..12a6305 100644
--- a/styles.css
+++ b/styles.css
@@ -17,7 +17,7 @@
 	flex: 1;
 	overflow-y: auto;
 	padding: 8px;
-	padding-top: 52px;
+	padding-top: 56px;
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
@@ -29,6 +29,8 @@
 	max-width: 85%;
 	word-wrap: break-word;
 	white-space: pre-wrap;
+	user-select: text;
+	-webkit-user-select: text;
 }
 
 .ai-organizer-message.user {
@@ -218,6 +220,8 @@
 	border-left: 3px solid var(--interactive-accent);
 	font-size: 0.85em;
 	margin: 2px 0;
+	user-select: text;
+	-webkit-user-select: text;
 }
 
 .ai-organizer-tool-call-header {
@@ -249,7 +253,7 @@
 }
 
 .ai-organizer-tool-call-result-summary {
-	margin: 0 0 4px 0;
+	margin: 0 0 0 0;
 	color: var(--text-muted);
 	font-size: 0.9em;
 }
@@ -265,7 +269,7 @@
 	grid-template-rows: max-content 0fr;
 	grid-template-columns: minmax(0, 1fr);
 	transition: grid-template-rows 0.2s ease-out;
-	margin-top: 4px;
+	margin-top: 2px;
 }
 
 .ai-organizer-collapse-toggle {
@@ -281,7 +285,7 @@
 	grid-row-start: 1;
 	position: relative;
 	width: 100%;
-	padding: 4px 28px 4px 0;
+	padding: 2px 28px 2px 0;
 	cursor: pointer;
 	color: var(--text-muted);
 	font-size: 0.9em;
@@ -332,7 +336,7 @@
 }
 
 .ai-organizer-collapse-content-inner {
-	padding: 4px 0 6px 0;
+	padding: 2px 0 4px 0;
 }
 
 .ai-organizer-tool-call-args,
@@ -365,3 +369,122 @@
 	color: var(--text-on-accent) !important;
 	border-color: var(--text-error) !important;
 }
+
+.ai-organizer-param-value {
+	font-weight: 600;
+	color: var(--text-normal);
+}
+
+.ai-organizer-ctx-max {
+	font-size: 0.8em;
+	color: var(--text-muted);
+	margin-top: 4px;
+	text-align: right;
+}
+
+.ai-organizer-ctx-max-warn {
+	color: var(--text-error);
+}
+
+/* ===== Tool Approval Prompt ===== */
+
+.ai-organizer-approval {
+	align-self: flex-start;
+	max-width: 85%;
+	padding: 8px 12px;
+	border-radius: 6px;
+	background-color: var(--background-secondary-alt);
+	border-left: 3px solid var(--text-warning);
+	margin: 2px 0;
+}
+
+.ai-organizer-approval-header {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin-bottom: 4px;
+	color: var(--text-warning);
+}
+
+.ai-organizer-approval-icon {
+	display: flex;
+	align-items: center;
+}
+
+.ai-organizer-approval-icon svg {
+	width: 16px;
+	height: 16px;
+}
+
+.ai-organizer-approval-name {
+	font-weight: 600;
+	font-size: 0.9em;
+}
+
+.ai-organizer-approval-message {
+	margin: 4px 0 8px 0;
+	color: var(--text-normal);
+	font-size: 0.9em;
+}
+
+.ai-organizer-approval-buttons {
+	display: flex;
+	gap: 8px;
+}
+
+.ai-organizer-approval-approve,
+.ai-organizer-approval-decline {
+	padding: 4px 16px;
+	border-radius: 4px;
+	border: none;
+	cursor: pointer;
+	font-size: 0.85em;
+	font-weight: 500;
+	transition: opacity 0.15s;
+}
+
+.ai-organizer-approval-approve {
+	background-color: var(--interactive-accent);
+	color: var(--text-on-accent);
+}
+
+.ai-organizer-approval-approve:hover {
+	opacity: 0.85;
+}
+
+.ai-organizer-approval-decline {
+	background-color: var(--background-modifier-border);
+	color: var(--text-normal);
+}
+
+.ai-organizer-approval-decline:hover {
+	opacity: 0.85;
+}
+
+.ai-organizer-approval-approve:disabled,
+.ai-organizer-approval-decline:disabled {
+	opacity: 0.5;
+	cursor: default;
+}
+
+.ai-organizer-approval-status {
+	margin-top: 6px;
+	font-size: 0.8em;
+	font-weight: 600;
+}
+
+.ai-organizer-approval-approved .ai-organizer-approval-status {
+	color: var(--interactive-accent);
+}
+
+.ai-organizer-approval-declined .ai-organizer-approval-status {
+	color: var(--text-error);
+}
+
+.ai-organizer-approval-approved {
+	border-left-color: var(--interactive-accent);
+}
+
+.ai-organizer-approval-declined {
+	border-left-color: var(--text-error);
+}