activitywatch / aw-webui

Webapp for visualizing and browsing ActivityWatch data, built with Vue.js.

aw-webui

A web-based UI for ActivityWatch, built with Vue.js

Getting started

Getting started with setting up the development environment is pretty straightforward:

# Start an instance of aw-server running in testing mode (on port 5666, with a separate database),
# This is what the web UI will connect to by default when run in development mode.
aw-qt --testing
# or, to run without watchers:
aw-server --testing

# Install dependencies
npm install
# or, to get exact versions of dependencies:
npm ci

# start aw-webui in dev mode
npm run serve

Alternatively, you can run make dev to install dependencies and serve the application locally.

You might have to configure CORS for it to work, see the CORS section below.

You may also want to generate fake data so you have something to test with, see: https://github.com/ActivityWatch/aw-fakedata/

Building

To build the production bundle, simply run the following:

# Install dependencies
npm ci

# Build for production
npm run build

Using a pre-release with your main install

Note: Running a development version of aw-webui with an old aw-server can lead to issues due to version incompatibilities.

By copying the web-assets to your main install

You can run a development version of aw-webui with your main version of ActivityWatch by building it (or fetching the latest build from CI) and replacing placing the contents of the static directory of your aw-server (or aw-server-rust) installation. For simplicity, back up the original directory for easier switching back.

The assets are stored in the following directories (relative to your installation directory), depending on if you use aw-server-python (default) or aw-server-rust:

• aw-server-python: activitywatch/aw-server/aw_server/static/
• aw-server-rust: activitywatch/aw-server-rust/static/

You can copy the assets manually from your make build or npm run build output to the above locations.

Once you've put the files in the directories, you may have to do a hard refresh in your browser to invalidate any stale caches.

Using your main install's data

If you want to actively iterate on aw-webui with your local production data (with your production server running), you'll want to use a development build, automatically update it, and connect to your production data. To do this, in aw-webui source directory, in one terminal window run:

AW_SERVER_URL="'http://localhost:5600'" npx vue-cli-service build --watch --dest=../aw-server/static

If you want to add debugger statements in your code and otherwise break linting rules, you'll need to add a --skip-plugins=no-debugger to that command. Then, in another terminal (with your venv activated) run:

python3 -m http.server --bind 127.0.0.1 27180 --directory ../aw-server/static

Tests

Tests can be run with:

npm test

There are also E2E tests. You need to have an aw-server and the web UI running in development mode (with npm run serve, as instructed above). After you have that setup, you can run the tests with:

make test-e2e

Development

CORS

For development, you'll also have to add/change CORS configuration in the aw-server configs by adding cors_origins = http://localhost:27180 to your configuration file /activitywatch/aw-server/aw-server.toml under respective sections (server-testing section when running server in testing mode).

Code structure

One of the first things that happen in the application is the execution of src/main.js. This loads things such as bootstrap-vue and a bunch of other stuff that's globally used (filters, resources).

The main.js file then loads the src/App.vue file, which is the root component of the application.

aw-webui's Issues

Toggle to switch between production and testing server

Possibly even the entire aw-server URL in the future (when non-local servers are a thing), a settings-panel might be prudent.

Testing mode files mixed up?

I've been trying to start webui in testing mode but it still seemed to always try to connect to prod server port
I have noticed this in server file.

var webpackConfig = process.env.NODE_ENV === 'testing'
  ? require('./webpack.prod.conf')
  : require('./webpack.dev.conf')

Shouldn't it be the opposite way around?

Then in the webpack.prod.conf.js I also see

var env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : config.build.env

but 'PRODUCTION': true,

So I'm kinda baffled as to what's going on and wanted to point that out here.

P.S. I was finally able to start it in testing by not providing NODE_ENV=testing (based on the above)

getting POST http://localhost:5600/api/0/query/ 400 (BAD REQUEST) for custom query

I'm trying to combine the data from both browser watchers. Once I get to the try-catch block, I get a bad request error. The issue seems to be with the events variable, even though the syntax looks correct and the request looks correct. This is the problematic part of the code:
browserbucket is a list with the ids of both browserbuckets.

    if(!!browserbucket && browserbucket.constructor === Array){
        console.log("list of buckets");
       // outputs correctly
        console.log(browserbucket[0]);
        // outputs correctly aw-watcher-web-firefox
        console.log(browserbucket[1]);
        // //outputs correctly aw-watcher-web-chrome
        browser_appnames = '["Google-chrome", "chrome.exe", "Chromium", "Google Chrome", "Firefox", "Firefox.exe", "firefox", "firefox.exe"]';
        try{
            initialList = ['events = flood(query_bucket("' + browserbucket[0] + '")).concat(flood(query_bucket("' + browserbucket[1] + '")));',
            'window_browser = flood(query_bucket("' + windowbucket + '"));',
            'window_browser = filter_keyvals(window_browser, "app", ' + browser_appnames + ');',];
    }
        catch(error){
            console.log(error.message);
    }

EDIT: Upon further debugging, it seems like the issue is in the return statement.

    return initialList.concat(filterAFK ? [
       [ 'not_afk = flood(query_bucket("' + afkbucket + '"));',
        'not_afk = filter_keyvals(not_afk, "status", ["not-afk"]);',
        'window_browser = filter_period_intersect(window_browser, not_afk);',
      ] : [])
      .concat([
        'events = filter_period_intersect(events, window_browser);',
        'events = split_url_events(events);',
        'urls = merge_events_by_keys(events, ["domain", "url"]);',
        'urls = sort_by_duration(urls);',
        'urls = limit_events(urls, ' + count + ');',
        'domains = split_url_events(events);',
        'domains = merge_events_by_keys(domains, ["domain"]);',
        'domains = sort_by_duration(domains);',
        'domains = limit_events(domains, ' + count + ');',
        'chunks = chunk_events_by_key(events, "domain");',
        'duration = sum_durations(events);',
        'RETURN = {"domains": domains, "urls": urls, "chunks": chunks, "duration": duration};',
      `]);]

Check if server is available

If aw-server is offline there is currently no way of finding that out in the GUI.

It's obviously a necessity.

Error handling in Activity.vue is broken

Realized that after the switch to axios I forgot to fix the error handling when aw-server returns a non-200 response on queries and when fetching events.

Discontinue use of vue-resource in favor of aw-client-js

vue-resource lost its official status: https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4

Since using vue-resource means duplicating code for accessing the REST API, we'd be better off improving aw-client-js and using it in place of vue-resource.

Evan recommends Axios. Definitely something to take a look at.

Display errors when server cannot be reached or no host/bucket was found

• Server might not be available if running aw-webui standalone.
• Sometimes, buckets have for some reason not been created yet, this needs a good error message.
• If no buckets have been created, then there are also no hosts since they become known first when they create a bucket. (In the Activity drop down menu, it needs clear text saying "Devices:" or something similar)

Cross-Origin Request Blocked in development mode

Coding environment:

• Firefox 60.0.2 (64-bit)
• Node 8.10.0 (npm 6.1.0)
• Ubuntu 18.04 LTS

Steps to reproduce:

git clone https://github.com/ActivityWatch/aw-webui/
git submodule update --recursive --init
make build
aw-qt --testing
npm run dev

• open http://localhost:27180

Error

It can't connect to the aw-server because localhost:5666 doesn't seem to allow Cross-Origin Requests:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5666/api/0/info. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Network output
Note: An options request is automatically sent to check if it can make a CORS request (source)

Console output

trouble building after make clean_all

This morning I tried out make clean_all, and now it seems aw-webui is having trouble building back. (Maybe it's unrelated, and since I already had trouble with that repos after fooling around in it, maybe it's me who broke something I shouldn't have.)

$ make build
[...]
make[1]: Entering directory '/home/will/15-QS/activitywatch/aw-webui'
npm install

[...]

> [email protected] postinstall /home/will/15-QS/activitywatch/aw-webui/node_modules/node-sass
> node scripts/build.js

Binary found at /home/will/15-QS/activitywatch/aw-webui/node_modules/node-sass/vendor/linux-x64-51/binding.node
Testing binary
Binary is fine
npm WARN [email protected] requires a peer of babel-runtime@^6.0.0 but none was installed.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1600 packages in 80.584s
npm run build

> [email protected] build /home/will/15-QS/activitywatch/aw-webui
> node build/build.js

[...]

ERROR in ./src/filters.js
Module not found: Error: Cannot resolve module 'babel-runtime/core-js/number/parse-float' in /home/will/15-QS/activitywatch/aw-webui/src
 @ ./src/filters.js 3:18-69

ERROR in ./src/visualizations/timeline.js
Module not found: Error: Cannot resolve module 'color' in /home/will/15-QS/activitywatch/aw-webui/src/visualizations
 @ ./src/visualizations/timeline.js 14:12-28

ERROR in ./src/visualizations/summary.js
Module not found: Error: Cannot resolve module 'color' in /home/will/15-QS/activitywatch/aw-webui/src/visualizations
 @ ./src/visualizations/summary.js 10:12-28

ERROR in ./src/visualizations/timeline.js
Module not found: Error: Cannot resolve module 'lodash' in /home/will/15-QS/activitywatch/aw-webui/src/visualizations
 @ ./src/visualizations/timeline.js 15:8-25

ERROR in ./src/visualizations/summary.js
Module not found: Error: Cannot resolve module 'lodash' in /home/will/15-QS/activitywatch/aw-webui/src/visualizations
 @ ./src/visualizations/summary.js 11:8-25

ERROR in ./src/util/color.js
Module not found: Error: Cannot resolve module 'babel-runtime/core-js/object/keys' in /home/will/15-QS/activitywatch/aw-webui/src/util
 @ ./src/util/color.js 3:12-56

ERROR in ./src/util/color.js
Module not found: Error: Cannot resolve module 'color' in /home/will/15-QS/activitywatch/aw-webui/src/util
 @ ./src/util/color.js 9:12-28
make[1]: Leaving directory '/home/will/15-QS/activitywatch/aw-webui'
cp -r aw-webui/dist/* aw-server/aw_server/static/
make --directory=aw-server build
[...]

^ The last paragraphs being in red.

and after that, make build fails with :

[...]
make[1]: Entering directory '/home/will/15-QS/activitywatch/aw-webui'
npm install
npm WARN [email protected] requires a peer of babel-runtime@^6.0.0 but none was installed.

npm ERR! Cannot read property '0' of undefined

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/will/.npm/_logs/2017-07-20T14_59_38_892Z-debug.log
make[1]: *** [Makefile:7: build] Error 1
make[1]: Leaving directory '/home/will/15-QS/activitywatch/aw-webui'
make: *** [Makefile:11: build] Error 2

complete log said to be /home/will/.npm/_logs/2017-07-20T14_57_53_863Z-debug.log is https://pastebin.com/VqYMkbYq

Dashboard, clicking on "Activity" : if there's a single host, jump directly to it

When I was a first-time fresh user, I downloaded, run AW, and wanted to see data happen, to check that the program does a thing at all. I quickly found the dashboard thanks to aw-qt. There, I see tabs : "home" is a generic frontpage, server log is temporarily sick, "buckets" must be an insiders' thing for advanced users¹, so something I can see happen MUST be in the "Activity" tab (and the name gives it away nicely).

So I clicked "Activity", and.... nothing happened ? At first I couldn't spot the difference between the following images :

Long story short, if there is only one host (as there will be in many/most use cases), I think the user shouldn't have to click it, clicking on "activity" should directly move on to it.

I have little idea on how to implement that though, I guess in App.vue, line 28 a(v-on:click="show_hide('views')" should do more than that, maybe more like line 8 of components/Views.vue : directly a-link to "'/activity/'+host" (there is a single host)... someone else knows this bit of code way better than me :)

---

¹ At first I thought "who calls data logs 'buckets' anyway ?" and the answer is devs, who have to handle events and manage data stores to put them into. For users it's just 'magic happens', and "buckets" mean nothing, imo. Though it's a fine name so long as AW only targets programmers :)

Better timeline

The timeline visualization is likely one of the most important visualization methods we have. In other time-tracking software such as ManicTime, it is indeed the primary way to browse data.

A good goal would, therefore, be to improve this timeline view. I've searched around a bit for timeline visualizations in the past and will start off by linking a few neat things I found. Some of these have previously been mentioned in #17.

We've also received some constructive criticism on the timeline visualization, notably that it doesn't clearly indicate AFK time (blank instead of grey intervals). See ActivityWatch/activitywatch#130.

One thing I've also thought about is the overlap of the sunburst visualization and the timeline. They both do basically the same thing, so perhaps we should rethink that redundancy.

Features

Bucket-independent lanes

Right now we just have one AFK-filtered lane in our timeline visualization. It would be nice to be able to show multiple bucket lanes in a GANTT-like fashion.

Scrolling

Might need some logic to fetch events when you scroll outside of the already-loaded range. But if implemented would give us an "infinite scroll timeline".

Zoom

Not a priority, but would be nice to have. Especially together with scrolling.

Existing timeline visualizations

VisJS

Docs: http://visjs.org/docs/timeline/
Basic example: http://visjs.org/examples/timeline/basicUsage.html
All examples: http://visjs.org/timeline_examples.html

• ✅ Scrolling
• ✅ Zoomable

d3-timelines

A d3.js v4 port of an older v3 version: https://www.npmjs.com/package/d3-timelines

• ✅ Scrolling
• ❌ Zoomable (it seems)

A simple d3 timeline

http://bl.ocks.org/TBD/600b23e56545026ae6fda2905efa42ce

• ✅ Scrolling
• ✅ Zoomable

TimeViz

A collection of neat visualizations, good for inspiration: https://vcg.informatik.uni-rostock.de/~ct/timeviz/timeviz.html?interval=1

Something funky with color package

Didn't work here: https://travis-ci.org/ActivityWatch/activitywatch/jobs/218799292#L1588

Worked here (node version was bumped from 4 -> 6, among other changes): https://travis-ci.org/ActivityWatch/activitywatch/jobs/220885720#L1191

@johan-bjareholt Claims other weird stuff, need more details.

Remove/replace shields.io in footer

These do not load when you do not have an internet connection.

Improving general performance

This has become a lot more important to me as of starting building the Android app.

I'm going to be running Lighthouse (the "Audit" tab in Chrome to evaluate performance, specifically on the Home view and the Activity view).

This was enlightening: https://checklyhq.com/blog/2018/08/how-we-got-a-100-lighthouse-performance-score-for-our-vue.js-app/

Use multiple-result queries for the activity view

Saves us on a bunch of querying time.

Display weekly summaries

Queries are too slow in aw-server python to support monthly summaries, but weekly should be possible currently so let's start with that.

Improve start page

Might contain:

• Some basic visualization (sunburst diagram like RescueTime? The color would be nice)
  • Might be easy once I've refactored the visualization code.
• A list of all buckets that have received events in the last ~10 minutes?

"Top Applications" category includes software which runs automatically in the background

I think a good addition would be a button which gives the option of including background apps or not, similar to the button "Filter away afk time". This would include apps like SearchUI.exe and ApplicationFrameHost.exe.

Is there a way to differentiate between apps like these and apps that the user directly interacts with and does ActivityWatch currently do that?

How to compile markup

Running through the MAKE file & instructions within the readme, i'm not seeing any changes to the markup, even when I end & restart the daemon.

Basically, I'm wanting to change two things.

1. Update the date into human format: dateShort: function() { return moment(this.date).format("l jS F YYYY") },

2. Compile styles and improve a few things

Implement i18n

We might want to have internationalization later, vue-i18n to the rescue!

Not a priority now, but we should keep it in mind.

Future visualization plans

General

We could definitely up our D3.js game. The API reference would be a good place to start getting acquainted.

Some highlights I found in the API documentation:

• Histograms, useful when plotting application usage per day history.
• Treemap, not very visually pleasing but might be pretty practical.
• Arcs, RescueTime uses something like this as their first visualization on their summary page.
  • Multilevel arcs/sunburst would also be cool, especially if you could get 2nd-level data like browser activity in. See also #25.
  • Really cool example: https://bl.ocks.org/kerryrodden/766f8f6d31f645c39f488a0befa1e3c8
• Sequential scales, useful when coloring.

Improving the timeline

• Implement zoom and pan (https://coderwall.com/p/psogia/simplest-way-to-add-zoom-pan-on-d3-js)
• Show AFK time as grey to visualize inactivity
  • Would give a better impression of when there was activity, no need to hover and check the timestamp
• Add time axis
• How to display hierarchy in events?
  • Examples of hierarchies:
    • window -> title
    • browser window -> website -> url/title
  • Perhaps "fold out"/"slide down" a secondary detail timeline below the primary event when zoom level is high enough.
  • The easiest thing to do is to just show everything in parallel timelines (probably do some filtering) and let the user sort out the hierarchy in their head from the overlap.
  • D3.js has tools for this: https://github.com/d3/d3-hierarchy/blob/master/README.md

Calendar-view

See #16.

I found the following awesome calendar view (similar to the GitHub activity calendar thingy): https://bl.ocks.org/mbostock/4063318 (unfortunately GPLv3).

Could prove pretty useful, especially for date-selection.

Start using Vuetify

I've been working on Thankful over the summer and been realizing how amazing Vuetify is.

It would likely improve the UX a lot, and would make things a lot easier to maintain. Migrating shouldn't even be that hard, so I might give it a shot some point soon.

Material design might not be perfect, but I certainly think it beats what we have currently, and Vuetify is just sooooo much nicer.

The datepicker even has a prop for "allowed dates" (as discussed in #22).

Useful things:

• https://vuetifyjs.com/en/components/alerts
• https://vuetifyjs.com/en/components/cards
• https://vuetifyjs.com/en/components/tabs
• https://vuetifyjs.com/en/components/date-pickers
• https://vuetifyjs.com/en/components/expansion-panels
• https://vuetifyjs.com/en/components/progress
  • While queries are running
• vuetifyjs/vuetify#238: [Feature Request] Uploader component
  • When we start implementing import

Add import and export bucket functionality

Uploading/downloading as a file would be preferable.

• Import from clipboard or by uploading file.
• Export to JSON shown in modal or file.

We should possibly also offer a way to export all buckets in one go (return a zip if possible client-side).

Implement visualization base class/template

From what I've seen in the source code, there are currently several different standards (e.g. Summary.vue, PeriodUsage.vue, ...) used to display visualizations. Yet, I believe that it would be useful if we have one base class of which all these visualization classes are derived.

This could prove helpful for

• implementing new visualizations (e.g. google charts)
• let the user switch between visualization types and choose which data is being shown (especially if the user can make custom filters in the future)
• keeping the code DRY

The problem is, that I don't know if it is possible to reduce all visualizations to a common denominator. Though from what I've seen, following data should be sufficient for all currently available visualizations:

• list of events (could be filtered by date / custom filters /... before passing to visualizer)
• function which returns the data to visualize (e.g. (event) => event.data.title)

---

Here is an example base class just for demonstrating what I mean (not familiar with Vue, so just ecmascript):

class Visualization {
 constructor() {
  this.getTargetData = (event) => {}; // e.g. (event) => event.data.title
 }
 loadEvents(events) {
  this.events = events;
 }
 redraw() {
  // Override this function
 }
 setRenderTarget(renderTarget) {
  this.renderTarget = renderTarget;
 }

}

class Summary extends Visualization {
 redraw() {
  const groupedData = this.groupEvents(this.events);
  // And somehow draw to renderTarget
 }
 groupEvents(events) {
  return events.reduce((groups, event) => {
   const groupName = this.getTargetData(event);
   if (!groups.hasOwnProperty(groupName))
    groups[groupName] = [];

   groups[groupName].push(event);
   return groups;
  });
 }
}

// Usage example
const visualizationClasses = {
  'summary': Summary,
  'timeline': Timeline
};
const visualizationType = getUserInput();
const visualization = new visualizationClasses[visualizationType]();
visualization.getTargetData = customFilter;
visualization.loadEvents(events);
visualization.redraw();

Dashboard is blank

Opening the dashboard in the browser gives a completely blank page.

The port is free, I tried also another port.

Source of the page still show data (<title>ActivityWatch</title>...)

Console show an error:
SyntaxError: missing = in const declaration
(File: /static/js/0.eb46a9d79636be6aeb56.js, in 13590)

API Browser (http://localhost:5600/api/) is working fine

Version:
•activitywatch: v0.8.0b6
•firefox: 47
•internet explorer: 11.2485

Update bootstrap to >=4.3.1

There's a security notice in the repo

Sunburst visualization

Sunbursts are beautiful, simple, and supports hierarchical data perfectly for our level-of-detail visualization.

A lot of work have gone into them in the D3.js community.

• Basic layout: https://bl.ocks.org/mbostock/4063423
• Shows info in middle interactively on hover: https://bl.ocks.org/kerryrodden/7090426
• Zoomable: https://bl.ocks.org/mbostock/4348373
• This doesn't load for me, but sounds amazing: https://bl.ocks.org/mbostock/4348373
• Curved text: http://bl.ocks.org/jebeck/196406a3486985d2b92e
  • Useful if we want to have information inside the circles.

"Today view" does not refresh the chart

So I have this kind of view:

Even though I did some things today already.
The view worked well yesterday (which is when I've started using ActivityWatch) and it seems to be broken now - it's frozen and does not refresh now matter how much I press Ctrl+F5.

The standard Top applications view, however, works flawlessly:

The "Top window titles" section and others on the same page have no issues as well.

My current installation is the 0.7.1 version from here:
https://github.com/ActivityWatch/activitywatch/releases/download/v0.7.1/activitywatch-v0.7.1-linux-x86_64.zip

I'm running the app via aw-qt. I'm running Arch Linux with i3 window manager. Another friend of mine has the same issue, also on Arch and with i3, though he's running ActivityWatch through the following sequence of commands:

aw-server aw-watcher-afk aw-watcher-window

Add a heart button

Found this in Postman (see the ❤️ in the upper right corner).

When clicked, it takes the user to a Twitter post form with "@postmanclient <3" as the text. If people actually appreciate the work, this should be an effective way to get some publicity.

Show "Loading..." instead of "No data" in visualizations

Start using Google Charts

It would be nice to avoid having to maintain our own visualization code, and Google Charts is flexible and well supported.

• The timeline visualization is used by both Home Assistant and Sleep as Android. It's pretty clean, with nice hover-behavior.

• The barchart

Editor view is broken in beta6

Do not have time to debug now, but it is broken. Request goes through, so likely some issue when handling the response.

Cannot debug when minified.

Error message in webui:

Request error undefined. See F12 console for more info.

Console error:

TypeError: "r is undefined"

Crashes if trying to show long server log file

So I've been running aw-server --verbose --testing for a few days now (leading to a long log file) and when I then tried to open the server log in the webui my fans sped up and after some time the Chrome tab crashed.

A solution would likely include some kind of pagination of the log API endpoint in aw-server.

Start using Vuex

We don't have much cross-view state going on, but some use of Vuex would still probably be useful.

Since I've learned how to use it when working on Thankful I think I could throw it together pretty quickly, the question is what state should be moved into Vuex and which state should be kept in components.

Still blank in browsers

Opened again

Not clear why it should not work in Internet Explorer if for other browser it is working perfectly

Also who closed it did not see firefox was tested in my original message

Opening the dashboard in the browser gives a completely blank page.

The port is free, I tried also another port.

Source of the page still show data (<title>ActivityWatch</title>...)

Console show an error:
SyntaxError: missing = in const declaration
(File: /static/js/0.eb46a9d79636be6aeb56.js, in 13590)

API Browser (http://localhost:5600/api/) is working fine

Version:
•activitywatch: v0.8.0b6
•firefox: 47
•internet explorer: 11.2485

Add proper date selector for activity view

To make it easier to navigate further back.

Would be nice to only be able to select dates which have data for them.

When loading data for requested day, data for the previous day should not be available.

If I select to view any data(summary/browser/window) for a new day I can still see the data from the previously available day whilst it's loading. There should be a loading screen exactly like the one when localhost:5600 loads for the first time, to avoid the confusion of thinking the data is ready.

The screen should also say failed if there's any sort of errors when the data is loading, such as a timeout. Currently, when there's an error whilst loading, I can see the data from the last day, but with everything else pointing towards the current date(the calendar, and the period-usage section), which again leads me to believe the data is correct, especially if I don't see the error box.

Change tooltip to show start and end timestamp, not just "time"

Hard to figure out the duration of gaps otherwise, which I needed to know when debugging.

Create desktop app using Electron

Would be really cool to have it working both in browser (remotely) and as a desktop window. Would probably make for a better user experience, and we could use Electrons trayicon functionality as well.

Update Vue.js to 2.0

What is the purpose of collecting chunks in windowQuery and browserSummaryQuery?

Rename to aw-webapp?

webapp seems to be the more popular wording of what aw-webui really is: https://www.google.com/trends/explore?cat=5&q=webapp,webui

We should consider changing, thoughts @johan-bjareholt?

Multiple days rendered in the same dayview.

If one goes back a couple of days and then forward again, pressing faster on the next day button than the UI renders all the days get rendered on top of each other in the top apps and top window title sections.
MacOS El Capitan, Google Chrome.

Fix indentation in files

I've managed to fuck up the supposedly 2-space indentation rule in a lot of files.

I'll partially fix the situation with a better .editorconfig in #39 (preventing similar future mistakes) but the indentation should probably be fixed in a separate PR to not clog down the reviewing in the above PR.

Manual logging (timer/stopwatch)

Adding a timer functionality (a la Toggl) to the web UI would be really nice and pretty easy.

The timer would be started by clicking a button next to a box used for labeling. This creates an event in a timer-bucket, with the additional label "timing" (or similar) for keeping track of unstopped timers.

The timer view should also have a way to edit start/end times of events as well as labels, would be nice to add this to the event-list view (so keep code reuse in mind).

Calendar-like visualization

This would be a cool alternative to the by-day timeline view. I'm thinking Google Calendar-like.

While on the subject, perhaps it's possible to construct an iCal file from the data?

Add links to documentation + website

Possibly in the bottom of the sidebar

Browser activity missing for firefox

I'm on version v0.8.0b7 and using aw-watcher-web-chrome and aw-watcher-web-firefox.
Firefox bucket is always empty on activity tab, but on timeline I can see that firefox data is collected.
Chrome's data is shown propery on both views.

Today view doesn't render

The only complaint I get in the console is that GET http://localhost:5600/bootstrap.css.map 404s.

Doesn't work in Firefox nor incognito Chrome.

Everything is recently recursively cloned and running on node 7.10.1.

Customize activity summary

#77 (comment)