cowork-dash 0.1.4__py3-none-any.whl → 0.1.5__py3-none-any.whl

cowork_dash/components.py

@@ -1,8 +1,11 @@
 """UI components for rendering messages, canvas items, and other UI elements."""
 
 import json
-from typing import Dict, List
+from datetime import datetime
+from typing import Dict, List, Optional
 from dash import html, dcc
+import dash_mantine_components as dmc
+from dash_iconify import DashIconify
 
 
 def format_message(role: str, content: str, colors: Dict, styles: Dict, is_new: bool = False, response_time: float = None):
@@ -415,8 +418,49 @@ def format_interrupt(interrupt_data: Dict, colors: Dict):
     return html.Div(children, className="interrupt-container")
 
 
-def render_canvas_items(canvas_items: List[Dict], colors: Dict) -> html.Div:
-    """Render all canvas items using CSS classes for theme awareness."""
+def _format_timestamp(iso_timestamp: str) -> str:
+    """Format ISO timestamp to human-readable format."""
+    try:
+        dt = datetime.fromisoformat(iso_timestamp)
+        return dt.strftime("%b %d, %H:%M")
+    except (ValueError, TypeError):
+        return ""
+
+
+def _get_type_badge(item_type: str) -> dmc.Badge:
+    """Get a badge component for the item type."""
+    type_colors = {
+        "markdown": "gray",
+        "dataframe": "blue",
+        "matplotlib": "green",
+        "image": "green",
+        "plotly": "violet",
+        "mermaid": "cyan",
+    }
+    type_labels = {
+        "markdown": "Text",
+        "dataframe": "Table",
+        "matplotlib": "Chart",
+        "image": "Image",
+        "plotly": "Plot",
+        "mermaid": "Diagram",
+    }
+    color = type_colors.get(item_type, "gray")
+    label = type_labels.get(item_type, item_type.title())
+    return dmc.Badge(label, color=color, size="xs", variant="light")
+
+
+def render_canvas_items(canvas_items: List[Dict], colors: Dict, collapsed_ids: Optional[List[str]] = None) -> html.Div:
+    """Render all canvas items using CSS classes for theme awareness.
+
+    Args:
+        canvas_items: List of canvas item dictionaries
+        colors: Color scheme dictionary
+        collapsed_ids: List of item IDs that should be rendered collapsed
+    """
+    if collapsed_ids is None:
+        collapsed_ids = []
+
     if not canvas_items:
         return html.Div([
             html.P("Canvas empty", className="canvas-empty-text", style={
@@ -441,126 +485,172 @@ def render_canvas_items(canvas_items: List[Dict], colors: Dict) -> html.Div:
 
     for i, item in enumerate(canvas_items):
         item_type = item.get("type", "unknown")
+        item_id = item.get("id", f"canvas_item_{i}")
+        is_collapsed = item_id in collapsed_ids
         title = item.get("title")
-
-        # Add title if present
+        created_at = item.get("created_at", "")
+
+        # Build item header left side with collapse toggle, title, badge, and time
+        header_left = [
+            # Collapse/expand toggle - icon depends on collapsed state
+            dmc.ActionIcon(
+                DashIconify(icon="mdi:chevron-right" if is_collapsed else "mdi:chevron-down", width=16),
+                id={"type": "canvas-collapse-btn", "index": item_id},
+                variant="subtle",
+                color="gray",
+                size="sm",
+                className="canvas-collapse-btn",
+            ),
+        ]
         if title:
-            rendered_items.append(
-                html.H3(title, className="canvas-item-title", style={
-                    "fontSize": "15px",
-                    "fontWeight": "600",
-                    "marginBottom": "8px",
-                    "marginTop": "15px" if i > 0 else "0",
-                })
+            header_left.append(
+                dmc.Text(title, fw=600, size="sm", className="canvas-item-title-text")
             )
+        header_left.append(_get_type_badge(item_type))
+        if created_at:
+            formatted_time = _format_timestamp(created_at)
+            if formatted_time:
+                header_left.append(
+                    dmc.Text(formatted_time, size="xs", c="dimmed", className="canvas-item-time")
+                )
+
+        # Header right side with delete button (shows confirmation on first click)
+        header_right = dmc.Group([
+            # Delete button - first click shows confirm, second click deletes
+            dmc.ActionIcon(
+                DashIconify(icon="mdi:close", width=14),
+                id={"type": "canvas-delete-btn", "index": item_id},
+                variant="subtle",
+                color="gray",
+                size="sm",
+                className="canvas-delete-btn",
+            ),
+        ], gap="xs")
 
-        # Render based on type
+        item_header = html.Div([
+            dmc.Group(header_left, gap="xs"),
+            header_right,
+        ], className="canvas-item-header")
+
+        # Render content based on type
         if item_type == "markdown":
-            rendered_items.append(
-                html.Div([
-                    dcc.Markdown(
-                        item.get("data", ""),
-                        className="canvas-markdown",
-                        style={
-                            "fontSize": "15px",
-                            "lineHeight": "1.5",
-                            "wordBreak": "break-word",
-                            "overflowWrap": "break-word",
-                        }
-                    )
-                ], className="canvas-item canvas-item-markdown")
-            )
+            content = html.Div([
+                dcc.Markdown(
+                    item.get("data", ""),
+                    className="canvas-markdown",
+                    style={
+                        "fontSize": "15px",
+                        "lineHeight": "1.5",
+                        "wordBreak": "break-word",
+                        "overflowWrap": "break-word",
+                    }
+                )
+            ], className="canvas-item-content canvas-item-markdown", style={"padding": "10px"})
 
         elif item_type == "dataframe":
-            rendered_items.append(
-                html.Div([
-                    dcc.Markdown(
-                        item.get("html", ""),
-                        dangerously_allow_html=True,
-                        style={"fontSize": "14px"}
-                    )
-                ], className="canvas-item canvas-item-dataframe", style={
-                    "overflowX": "auto",
-                })
-            )
+            content = html.Div([
+                dcc.Markdown(
+                    item.get("html", ""),
+                    dangerously_allow_html=True,
+                    style={"fontSize": "14px"}
+                )
+            ], className="canvas-item-content canvas-item-dataframe", style={
+                "overflowX": "auto",
+                "padding": "10px",
+            })
 
         elif item_type == "matplotlib" or item_type == "image":
             img_data = item.get("data", "")
-            rendered_items.append(
-                html.Div([
-                    html.Img(
-                        src=f"data:image/png;base64,{img_data}",
-                        style={
-                            "maxWidth": "100%",
-                            "width": "100%",
-                            "height": "auto",
-                            "borderRadius": "5px",
-                            "objectFit": "contain",
-                        }
-                    )
-                ], className="canvas-item canvas-item-image", style={
-                    "textAlign": "center",
-                })
-            )
+            content = html.Div([
+                html.Img(
+                    src=f"data:image/png;base64,{img_data}",
+                    style={
+                        "maxWidth": "100%",
+                        "width": "100%",
+                        "height": "auto",
+                        "borderRadius": "5px",
+                        "objectFit": "contain",
+                    }
+                )
+            ], className="canvas-item-content canvas-item-image", style={
+                "textAlign": "center",
+                "padding": "10px",
+            })
 
         elif item_type == "plotly":
             fig_data = item.get("data", {})
-            rendered_items.append(
-                html.Div([
-                    dcc.Graph(
-                        figure=fig_data,
-                        style={"height": "400px", "width": "100%"},
-                        responsive=True,
-                        config={
-                            "displayModeBar": True,
-                            "displaylogo": False,
-                            "modeBarButtonsToRemove": ["lasso2d", "select2d"],
-                            "responsive": True,
-                        }
-                    )
-                ], className="canvas-item canvas-item-plotly")
-            )
+            content = html.Div([
+                dcc.Graph(
+                    figure=fig_data,
+                    style={"height": "400px", "width": "100%"},
+                    responsive=True,
+                    config={
+                        "displayModeBar": True,
+                        "displaylogo": False,
+                        "modeBarButtonsToRemove": ["lasso2d", "select2d"],
+                        "responsive": True,
+                    }
+                )
+            ], className="canvas-item-content canvas-item-plotly")
 
         elif item_type == "mermaid":
-            # Mermaid diagram
             mermaid_code = item.get("data", "")
-            rendered_items.append(
-                html.Div([
-                    html.Div(
-                        mermaid_code,
-                        className="mermaid-diagram",
-                        style={
-                            "textAlign": "center",
-                            "padding": "25px",
-                            "width": "100%",
-                            "overflow": "auto",
-                            "whiteSpace": "pre",
-                        }
-                    )
-                ], className="canvas-item canvas-item-mermaid", style={
-                    "textAlign": "center",
-                    "overflow": "auto",
-                })
-            )
+            content = html.Div([
+                html.Div(
+                    mermaid_code,
+                    className="mermaid-diagram",
+                    style={
+                        "textAlign": "center",
+                        "padding": "25px",
+                        "width": "100%",
+                        "overflow": "auto",
+                        "whiteSpace": "pre",
+                    }
+                )
+            ], className="canvas-item-content canvas-item-mermaid", style={
+                "textAlign": "center",
+                "overflow": "auto",
+            })
 
         else:
             # Unknown type
-            rendered_items.append(
-                html.Div([
-                    html.Code(
-                        str(item),
-                        className="canvas-code",
-                        style={
-                            "fontSize": "15px",
-                            "display": "block",
-                            "whiteSpace": "pre-wrap",
-                            "wordBreak": "break-word",
-                        }
-                    )
-                ], className="canvas-item canvas-item-code", style={
-                    "overflow": "auto",
-                })
-            )
+            content = html.Div([
+                html.Code(
+                    str(item),
+                    className="canvas-code",
+                    style={
+                        "fontSize": "15px",
+                        "display": "block",
+                        "whiteSpace": "pre-wrap",
+                        "wordBreak": "break-word",
+                    }
+                )
+            ], className="canvas-item-content canvas-item-code", style={
+                "overflow": "auto",
+                "padding": "10px",
+            })
+
+        # Wrap content in collapsible container - respect collapsed state
+        content_wrapper = html.Div(
+            content,
+            id={"type": "canvas-item-content", "index": item_id},
+            className="canvas-item-content-wrapper",
+            style={"display": "none" if is_collapsed else "block"}
+        )
+
+        # Wrap header and content in item container
+        rendered_items.append(
+            html.Div([
+                item_header,
+                content_wrapper,
+            ], id={"type": "canvas-item", "index": item_id}, className="canvas-item-container", style={
+                "border": "1px solid var(--mantine-color-default-border)",
+                "borderRadius": "6px",
+                "marginBottom": "12px",
+                "overflow": "hidden",
+                "background": "var(--mantine-color-body)",
+            })
+        )
 
     return html.Div(rendered_items, style={
         "maxWidth": "100%",

cowork_dash/config.py

@@ -94,3 +94,16 @@ DEBUG = get_config(
     default=False,
     type_cast=lambda x: str(x).lower() in ("true", "1", "yes")
 )
+
+# Welcome message shown when the app starts
+# Environment variable: DEEPAGENT_WELCOME_MESSAGE
+# Supports markdown formatting
+_default_welcome = """This is your AI-powered workspace. I can help you write code, analyze files, create visualizations, and more.
+
+**Getting Started:**
+- Type a message below to chat with me
+- Browse files on the right (click to view, ↓ to download)
+- Switch to **Canvas** tab to see charts and diagrams I create
+
+Let's get started!"""
+WELCOME_MESSAGE = get_config("welcome_message", default=_default_welcome)

cowork_dash/file_utils.py

@@ -90,24 +90,35 @@ def render_file_tree(items: List[Dict], colors: Dict, styles: Dict, level: int =
             folder_id = item["path"].replace("/", "_").replace("\\", "_")
             children = item.get("children", [])
 
-            # Folder header (clickable to expand/collapse)
+            # Folder header with expand icon and selectable name
             components.append(
                 html.Div([
+                    # Expand/collapse icon (left side)
                     html.Span(
                         "▶",
                         id={"type": "folder-icon", "path": folder_id},
-                        className="folder-icon",
+                        className="folder-icon folder-expand-toggle",
                         style={
                             "marginRight": "5px",
                             "fontSize": "10px",
                             "transition": "transform 0.15s",
                             "display": "inline-block",
+                            "padding": "2px",
                         }
                     ),
-                    html.Span(item["name"], className="folder-name", style={
-                        "fontWeight": "500",
-                        "fontSize": "14px",
-                    })
+                    # Folder name (clickable for selection)
+                    html.Span(item["name"],
+                        id={"type": "folder-select", "path": folder_id},
+                        className="folder-name folder-select-target",
+                        **{"data-folderpath": item["path"]},
+                        style={
+                            "fontWeight": "500",
+                            "fontSize": "14px",
+                            "flex": "1",
+                            "padding": "2px 4px",
+                            "borderRadius": "3px",
+                        }
+                    )
                 ],
                 id={"type": "folder-header", "path": folder_id},
                 **{"data-realpath": item["path"]},  # Store actual path for lazy loading

cowork_dash/layout.py

@@ -5,9 +5,10 @@ import dash_mantine_components as dmc
 from dash_iconify import DashIconify
 
 from .file_utils import build_file_tree, render_file_tree
+from .config import WELCOME_MESSAGE as DEFAULT_WELCOME_MESSAGE
 
 
-def create_layout(workspace_root, app_title, app_subtitle, colors, styles, agent):
+def create_layout(workspace_root, app_title, app_subtitle, colors, styles, agent, welcome_message=None):
     """
     Create the app layout with current configuration.
 
@@ -18,10 +19,14 @@ def create_layout(workspace_root, app_title, app_subtitle, colors, styles, agent
         colors: Color scheme dictionary
         styles: Styles dictionary
         agent: Agent instance (or None)
+        welcome_message: Optional welcome message (uses default if not provided)
 
     Returns:
         Dash layout component
     """
+    # Use provided welcome message or fall back to default
+    message = welcome_message if welcome_message is not None else DEFAULT_WELCOME_MESSAGE
+
     return dmc.MantineProvider(
         id="mantine-provider",
         forceColorScheme="light",
@@ -29,20 +34,15 @@ def create_layout(workspace_root, app_title, app_subtitle, colors, styles, agent
             # State stores
             dcc.Store(id="chat-history", data=[{
                 "role": "assistant",
-                "content": f"""This is your AI-powered workspace. I can help you write code, analyze files, create visualizations, and more.
-
-**Getting Started:**
-- Type a message below to chat with me
-- Browse files on the right (click to view, ↓ to download)
-- Switch to **Canvas** tab to see charts and diagrams I create
-
-Let's get started!"""
+                "content": message
             }]),
             dcc.Store(id="pending-message", data=None),
             dcc.Store(id="expanded-folders", data=[]),
             dcc.Store(id="file-to-view", data=None),
             dcc.Store(id="file-click-tracker", data={}),
             dcc.Store(id="theme-store", data="light", storage_type="local"),
+            dcc.Store(id="current-workspace-path", data=""),  # Relative path from original workspace root
+            dcc.Store(id="collapsed-canvas-items", data=[]),  # Track which canvas items are collapsed
             dcc.Download(id="file-download"),
 
             # Interval for polling agent updates (disabled by default)
@@ -68,6 +68,62 @@ Let's get started!"""
                 opened=False,
             ),
 
+            # Create folder modal
+            dmc.Modal(
+                id="create-folder-modal",
+                title="Create New Folder",
+                size="sm",
+                children=[
+                    dmc.TextInput(
+                        id="new-folder-name",
+                        label="Folder name",
+                        placeholder="Enter folder name",
+                        style={"marginBottom": "16px"},
+                    ),
+                    dmc.Text(id="create-folder-error", c="red", size="sm", style={"marginBottom": "8px"}),
+                    dmc.Group([
+                        dmc.Button("Cancel", id="cancel-folder-btn", variant="outline", color="gray"),
+                        dmc.Button("Create", id="confirm-folder-btn", color="blue"),
+                    ], justify="flex-end"),
+                ],
+                opened=False,
+            ),
+
+            # Delete canvas item confirmation modal
+            dmc.Modal(
+                id="delete-canvas-item-modal",
+                title="Delete Canvas Item",
+                size="sm",
+                children=[
+                    dmc.Text("Are you sure you want to delete this canvas item? This action cannot be undone.",
+                             size="sm", style={"marginBottom": "16px"}),
+                    dmc.Group([
+                        dmc.Button("Cancel", id="cancel-delete-canvas-btn", variant="outline", color="gray"),
+                        dmc.Button("Delete", id="confirm-delete-canvas-btn", color="red"),
+                    ], justify="flex-end"),
+                ],
+                opened=False,
+            ),
+
+            # Store for canvas item ID pending deletion
+            dcc.Store(id="delete-canvas-item-id", data=None),
+
+            # Clear canvas confirmation modal
+            dmc.Modal(
+                id="clear-canvas-modal",
+                title="Clear Canvas",
+                size="sm",
+                children=[
+                    dmc.Text("Are you sure you want to clear the entire canvas? The current canvas will be archived with a timestamp.",
+                             size="sm", style={"marginBottom": "16px"}),
+                    dmc.Group([
+                        dmc.Button("Cancel", id="cancel-clear-canvas-btn", variant="outline", color="gray"),
+                        dmc.Button("Clear", id="confirm-clear-canvas-btn", color="red"),
+                    ], justify="flex-end"),
+                ],
+                opened=False,
+            ),
+
             html.Div([
                 # Compact Header
                 html.Header([
@@ -121,17 +177,6 @@ Let's get started!"""
 
                     # Compact Input
                     html.Div([
-                        dcc.Upload(
-                            id="file-upload",
-                            children=dmc.ActionIcon(
-                                DashIconify(icon="radix-icons:plus", width=18),
-                                id="upload-plus",
-                                variant="default",
-                                size="md",
-                            ),
-                            style={"cursor": "pointer"},
-                            multiple=True
-                        ),
                         dmc.TextInput(
                             id="chat-input",
                             placeholder="Type a message...",
@@ -140,14 +185,20 @@ Let's get started!"""
                             size="md",
                         ),
                         dmc.Button("Send", id="send-btn", className="send-btn", size="md"),
+                        dmc.ActionIcon(
+                            DashIconify(icon="mdi:stop", width=20),
+                            id="stop-btn",
+                            variant="filled",
+                            color="red",
+                            size="lg",
+                            radius="sm",
+                            style={"display": "none"},  # Hidden by default, shown when agent is running
+                        ),
                     ], id="chat-input-area", style={
                         "display": "flex", "gap": "8px", "padding": "10px 15px",
                         "borderTop": "1px solid var(--mantine-color-default-border)",
                         "background": "var(--mantine-color-body)",
                     }),
-                    dmc.Text(id="upload-status", size="sm", c="dimmed", style={
-                        "padding": "0 15px 8px",
-                    }),
                 ], id="chat-panel", style={
                     "flex": "1", "display": "flex", "flexDirection": "column",
                     "background": "var(--mantine-color-body)", "minWidth": "0",
@@ -175,6 +226,22 @@ Let's get started!"""
                             size="sm",
                         ),
                         dmc.Group([
+                            dmc.ActionIcon(
+                                DashIconify(icon="mdi:folder-plus-outline", width=18),
+                                id="create-folder-btn",
+                                variant="default",
+                                size="md",
+                            ),
+                            dcc.Upload(
+                                id="file-upload-sidebar",
+                                children=dmc.ActionIcon(
+                                    DashIconify(icon="mdi:file-upload-outline", width=18),
+                                    id="upload-btn",
+                                    variant="default",
+                                    size="md",
+                                ),
+                                multiple=True,
+                            ),
                             dmc.ActionIcon(
                                 DashIconify(icon="mdi:console", width=18),
                                 id="open-terminal-btn",
@@ -196,6 +263,31 @@ Let's get started!"""
 
                     # Files view
                     html.Div([
+                        # Workspace path breadcrumb navigation
+                        html.Div([
+                            html.Div(id="workspace-breadcrumb", children=[
+                                html.Span([
+                                    DashIconify(icon="mdi:home", width=14, style={"marginRight": "4px"}),
+                                    "root"
+                                ], id="breadcrumb-root", className="breadcrumb-item breadcrumb-clickable", style={
+                                    "display": "inline-flex",
+                                    "alignItems": "center",
+                                    "cursor": "pointer",
+                                    "padding": "2px 6px",
+                                    "borderRadius": "3px",
+                                }),
+                            ], style={
+                                "display": "flex",
+                                "alignItems": "center",
+                                "flexWrap": "wrap",
+                                "gap": "2px",
+                                "fontSize": "13px",
+                            }),
+                        ], className="breadcrumb-bar", style={
+                            "padding": "6px 10px",
+                            "borderBottom": "1px solid var(--mantine-color-default-border)",
+                            "background": "var(--mantine-color-gray-0)",
+                        }),
                         html.Div(
                             id="file-tree",
                             children=render_file_tree(build_file_tree(workspace_root, workspace_root), colors, styles),